eamco_office_frontend/src/pages/delivery/viewstatus/finalized.vue

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

      <div class="flex start pb-10 text-2xl">Finalized Delivery </div>


      <div class="overflow-x-auto bg-neutral">
          
          <table class="table">
            <!-- head -->
            <thead>
            <tr>
              <th>Ticket Id</th>
              <th>Name</th>
              <th>Status</th>
              <th>Town</th>
              <th>Address</th>
              <th>Gallons</th>
              <th>Date</th>
              <th>Automatic</th>
              <th>Prime</th>
              <th>Same Day</th>
            </tr>
            </thead>
            <tbody>
            <!-- row 1 -->
            <tr v-for="oil in deliveries" :key="oil['id']"> 
              <td>{{ oil['id'] }} </td>
              <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
                <td> 
                  <div class="hover:text-accent">{{ oil['customer_name'] }} </div> 
                </td>
              </router-link>
              <td>
                <div v-if="oil['delivery_status'] == 0">Waiting</div>
                <div v-else-if="oil['delivery_status'] == 1">delivered</div>
                <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
                <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
                <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
                <div v-else-if="oil['delivery_status'] == 5">Issue</div>
                 <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
                <div v-else></div>
              </td>
              <td>{{ oil['customer_town'] }}</td>
              <td>{{ oil['customer_address'] }}</td>
              <td>
                <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
                <div v-else> {{ oil['gallons_ordered'] }}</div>
              </td>
              <td>{{ oil['expected_delivery_date'] }}</td>
              <td>
                <div v-if="oil['automatic'] == 0">No</div>
                <div v-else>Yes</div>
              </td>
              <td>
                <div v-if="oil['prime'] == 0">No</div>
                <div v-else>Yes</div>
              </td>
              <td>
                <div v-if="oil['same_day'] == 0">No</div>
                <div v-else>Yes</div>
              </td>
  
              <td class="flex gap-5">
                <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
                  <button class="btn btn-secondary btn-sm">View Delivery</button>
                </router-link>
                <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
                  <button class="btn btn-secondary btn-sm">Edit Delivery</button>
                </router-link>
                <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
                  <button class="btn btn-success btn-sm">
                    Print Ticket
                  </button>
                </router-link>
                <!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
              </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'
  import {notify} from "@kyvg/vue3-notification";
  
  export default defineComponent({
    name: 'deliveryFinalized',
  
    components: {
      Header,
      SideBar,
      Footer,
    },
  
    data() {
      return {
        token: null,
        user: null,
        deliveries: [],
        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.deliveries = [];
        this.get_oil_orders(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_oil_orders(page: any) {
        let path = import.meta.env.VITE_BASE_URL + '/delivery/finalized/' + page;
        axios({
          method: 'get',
          url: path,
          headers: authHeader(),
        }).then((response: any) => {
          this.deliveries = response.data
        })
      },

      deleteCall(delivery_id: any) {
        let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
        axios({
          method: 'delete',
          url: path,
          headers: authHeader(),
        }).then((response: any) => {
          if (response.data.ok) {
            notify({
              title: "Success",
              text: "deleted delivery",
              type: "success",
            });
            this.getPage(this.page)
          } else {
            notify({
              title: "Failure",
              text: "error deleting delivery",
              type: "success",
            });
          }
        })
      },
    },
  })
  </script>
  
  <style scoped>
  
  </style>