298 lines
11 KiB
Vue
298 lines
11 KiB
Vue
<template>
|
|
<div class="flex">
|
|
<div class="w-full px-4 md:px-10 py-4">
|
|
<!-- Breadcrumbs & Title -->
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Main Content Card -->
|
|
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
|
<!-- Header: Title and Count (No Search Input) -->
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
|
<h2 class="text-lg font-bold">Deliveries Scheduled</h2>
|
|
<!-- <div class="badge badge-ghost">{{ recordsLength }} deliveries found</div> -->
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- DESKTOP VIEW: Table -->
|
|
<div class="overflow-x-auto hidden xl:block">
|
|
<table class="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Delivery #</th>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Town / Address</th>
|
|
<th>Gallons</th>
|
|
<th>Options</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
|
<td>{{ oil.id }}</td>
|
|
<td>
|
|
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
|
{{ oil.customer_name }}
|
|
</router-link>
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-sm" :class="{
|
|
'badge-warning': oil.delivery_status == 0,
|
|
'badge-success': oil.delivery_status == 10,
|
|
'badge-info': oil.delivery_status == 2,
|
|
'badge-error': [1, 5].includes(oil.delivery_status),
|
|
}">
|
|
<span v-if="oil.delivery_status == 0">Waiting</span>
|
|
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
|
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
|
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
|
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
|
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
|
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div>{{ oil.customer_town }}</div>
|
|
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
|
</td>
|
|
<td>
|
|
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
|
<span v-else>{{ oil.gallons_ordered }}</span>
|
|
</td>
|
|
<td>
|
|
<div class="flex flex-col gap-1">
|
|
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
|
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
|
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
|
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
|
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- MOBILE VIEW: Cards -->
|
|
<div class="xl:hidden space-y-4">
|
|
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
|
<div class="card-body p-4">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
|
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
|
</div>
|
|
<div class="badge" :class="{
|
|
'badge-warning': oil.delivery_status == 0,
|
|
'badge-success': oil.delivery_status == 10,
|
|
'badge-info': oil.delivery_status == 2,
|
|
'badge-error': [1, 5].includes(oil.delivery_status),
|
|
}">
|
|
<span v-if="oil.delivery_status == 0">Waiting</span>
|
|
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
|
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
|
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
|
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
|
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
|
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 mt-2">
|
|
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
|
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
|
</div>
|
|
|
|
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
|
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
|
<p><strong class="font-semibold">Gallons:</strong>
|
|
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
|
<span v-else>{{ oil.gallons_ordered }}</span>
|
|
</p>
|
|
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
|
</div>
|
|
|
|
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
|
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
|
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
|
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
|
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-6 flex justify-center">
|
|
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
|
</pagination>
|
|
</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: 'deliveryOutForDelivery',
|
|
|
|
components: {
|
|
Header,
|
|
SideBar,
|
|
Footer,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
token: null,
|
|
user: null,
|
|
deliveries: [] as any[],
|
|
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) {
|
|
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/tommorrow/' + 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",
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
printtTicketAll() {
|
|
let path = import.meta.env.VITE_PRINT_URL + '/command/printticket/print_tommorrow';
|
|
axios({
|
|
method: 'delete',
|
|
url: path,
|
|
headers: authHeader(),
|
|
}).then((response: any) => {
|
|
if (response.data.ok) {
|
|
notify({
|
|
title: "Success",
|
|
text: "Sent to Printer",
|
|
type: "success",
|
|
});
|
|
this.getPage(this.page)
|
|
} else {
|
|
notify({
|
|
title: "Failure",
|
|
text: "error printing",
|
|
type: "success",
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
printTicket(delivery_id: number) {
|
|
let path = import.meta.env.VITE_PRINT_URL + '/command/printticket/' + delivery_id;
|
|
axios({
|
|
method: 'delete',
|
|
url: path,
|
|
headers: authHeader(),
|
|
}).then((response: any) => {
|
|
if (response.data.ok) {
|
|
notify({
|
|
title: "Success",
|
|
text: "Sent to Printer",
|
|
type: "success",
|
|
});
|
|
this.getPage(this.page)
|
|
} else {
|
|
notify({
|
|
title: "Failure",
|
|
text: "error printing",
|
|
type: "success",
|
|
});
|
|
}
|
|
})
|
|
},
|
|
},
|
|
|
|
|
|
})
|
|
</script>
|