first commit

src/pages/delivery/viewstatus/issue.vue

@@ -0,0 +1,204 @@
+<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>
+
+        </ul>
+      </div>
+      <div class="flex justify-end">
+
+      </div>
+
+      <div class="overflow-x-auto">
+        <div class="flex start">Oil Deliveries</div>
+        <table class="table">
+          <!-- head -->
+          <thead>
+          <tr>
+            <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']">    <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
+            <td>{{ oil['customer_name'] }} </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">View</button>
+              </router-link>
+              <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                <button class="btn">Edit</button>
+              </router-link>
+              <button @click.prevent="deleteCall(oil['id'])" class="btn">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: 'deliveryIssue',
+
+  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/issue/' + 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 oil order",
+            type: "success",
+          });
+          this.getPage(this.page)
+        } else {
+          notify({
+            title: "Failure",
+            text: "error deleting oil order",
+            type: "success",
+          });
+        }
+      })
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+</style>