Updated looks
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Header/>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar/>
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs">
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs mb-10">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
@@ -15,100 +15,108 @@
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
|
||||
<div class="flex text-2xl mb-5">
|
||||
Delivery Home
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex start ">Oil Deliveries</div>
|
||||
<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']"> <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
|
||||
<td>{{ oil['id'] }}</td>
|
||||
<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>
|
||||
<div class="grid grid-cols-12 gap-5 ">
|
||||
<div class="col-span-12 bg-secondary ">
|
||||
<div class="grid grid-cols-12 p-5 bg-neutral m-5">
|
||||
<div class="col-span-12 font-bold text-xl">Todays stats</div>
|
||||
<div class="col-span-6 py-2"> Total Deliveries: {{ delivery_count }}</div>
|
||||
<div class="col-span-6 py-2"> Completed: {{ delivery_count_delivered }} / {{ delivery_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="col-span-12 flex start pb-10 text-2xl">All Deliveries Not Finished</div>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-primary">View</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-primary">Edit</button>
|
||||
</router-link>
|
||||
<button @click.prevent="deleteCall(oil['id'])" class="btn btn-primary">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">
|
||||
|
||||
<div class="col-span-12 overflow-x-auto bg-neutral">
|
||||
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>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>{{ 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: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-accent btn-sm">Finalize</button>
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-center" v-if="recordsLength > 1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
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";
|
||||
import { notify } from "@kyvg/vue3-notification";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'deliveryHome',
|
||||
@@ -121,6 +129,8 @@ export default defineComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
delivery_count: 0,
|
||||
delivery_count_delivered: 0,
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
@@ -140,6 +150,8 @@ export default defineComponent({
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.page)
|
||||
this.today_delivery_count()
|
||||
this.today_delivery_delivered()
|
||||
},
|
||||
methods: {
|
||||
getPage: function (page: any) {
|
||||
@@ -155,14 +167,14 @@ export default defineComponent({
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
this.user = response.data.user;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.user = null
|
||||
})
|
||||
.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/all/' + page;
|
||||
@@ -172,8 +184,11 @@ export default defineComponent({
|
||||
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({
|
||||
@@ -197,10 +212,32 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
today_delivery_count() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/today'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.delivery_count = response.data.data;
|
||||
})
|
||||
},
|
||||
today_delivery_delivered() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/delivered/today'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.delivery_count_delivered = response.data.data;
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user