eamco_office_frontend/src/pages/customer/home.vue

<template>
  <Header />
  <div class="flex">
    <div class="">
      <SideBar />
    </div>
    <div class=" w-full px-10 ">
      <div class="text-sm breadcrumbs">
        <ul>
          <li>
            <router-link :to="{ name: 'home' }">
              Home
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'customer' }">
              Customers
            </router-link>
          </li>
        </ul>
      </div>
      <div class="flex justify-end">

      </div>

      <div class="overflow-x-auto">
        <table class="table">
          <!-- head -->
          <thead>
            <tr>
              <th>Account Number</th>
              <th>Name</th>
              <th>Town</th>
              <th>Automatic</th>
              <th>Phone Number</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <!-- row 1 -->
            <tr v-for="person in customers" :key="person['id']">
              <td>{{ person['account_number'] }}</td>
              <td>
                <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">
                  {{ person['customer_first_name'] }} {{ person['customer_last_name'] }}
                </router-link>
              </td>
              <td>{{ person['customer_town'] }}</td>
              <td>
                <div v-if="person['customer_automatic'] == 0">No</div>
                <div v-else>Yes</div>
              </td>
              <td>{{ person['customer_phone_number'] }}</td>

              <td class="flex gap-5">
                <router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }"
                  class="cursor-pointer underline hover:text-blue-300">
                  Oil
                </router-link>

                <router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }"
                  class="cursor-pointer underline hover:text-blue-300">
                  Edit
                </router-link>
                <router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }"
                  class="cursor-pointer underline hover:text-blue-300">
                  View
                </router-link>
                <a @click.prevent="deleteCustomer(person['id'])" class="cursor-pointer underline hover:text-blue-300">
                  Delete
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex justify-center" v-if="recordsLength > 9">
        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage" :options="options">
        </pagination>
        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
      </div>

    </div>
  </div>

  <Footer />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'

import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import PaginationComp from '../../components/pagination.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'

export default defineComponent({
  name: 'CustomerHome',

  components: {
    Header,
    SideBar,
    Footer,
  },

  data() {
    return {
      token: null,
      user: null,
      customers: [],
      page: 1,
      perPage: 50,
      recordsLength: 0,

      options: {
        edgeNavigation: false,
        format: false,
        template: PaginationComp
      }
    }
  },

  created() {
    this.userStatus()
  },
  mounted() {
    this.getPage(this.page)

  },
  methods: {
    getPage: function (page: any) {
      // we simulate an api call that fetch the records from a backend
      this.customers = [];
      this.get_customers(page)
    },
    userStatus() {
      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data.ok) {
            this.user = response.data.user;

          }
        })
        .catch(() => {
          this.user = null
        })
    },
    get_customers(page: any) {
      let path = import.meta.env.VITE_BASE_URL + '/customer/all/' + page;
      axios({
        method: 'get',
        url: path,
        headers: authHeader(),
      }).then((response: any) => {
        this.customers = response.data
      })
    },
    deleteCustomer(user_id: any) {
      let path = import.meta.env.VITE_BASE_URL + '/customer/delete/' + user_id;
      axios({
        method: 'delete',
        url: path,
        headers: authHeader(),
      }).then(() => {

        this.get_customers(1)
      })
    },
  },
})
</script>

<style scoped></style>