added print button and finalize
This commit is contained in:
@@ -1,30 +1,34 @@
|
||||
<template>
|
||||
<Header/>
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar/>
|
||||
<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=" 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">Tommorrows Deliveries </div>
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
|
||||
<div class="flex start pb-10">Tommorrows Deliveries </div>
|
||||
<div class="flex justify-start pb-5">
|
||||
<button @click.prevent="printtTicketAll" class="btn btn-accent">
|
||||
Print All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<div class="flex start"> </div>
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town</th>
|
||||
@@ -35,13 +39,15 @@
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</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>
|
||||
<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>
|
||||
@@ -49,10 +55,10 @@
|
||||
<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-if="oil['delivery_status'] == 10">Finalized</div>
|
||||
<div v-else></div>
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>
|
||||
@@ -72,133 +78,183 @@
|
||||
<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>
|
||||
<button class="btn btn-accent">View</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn">Edit</button>
|
||||
<button class="btn btn-accent">Edit</button>
|
||||
</router-link>
|
||||
<button @click.prevent="deleteCall(oil['id'])" class="btn">Delete</button>
|
||||
<button @click.prevent="deleteCall(oil['id'])" class="btn btn-accent">
|
||||
Delete
|
||||
</button>
|
||||
<button @click.prevent="printTicket(oil['id'])" class="btn btn-accent">
|
||||
Print
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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: [],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
options: {
|
||||
edgeNavigation: false,
|
||||
format: false,
|
||||
template: PaginationComp
|
||||
}
|
||||
</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: [],
|
||||
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)
|
||||
},
|
||||
|
||||
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/outfordelivery/' + 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) => {
|
||||
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) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "deleted oil order",
|
||||
type: "success",
|
||||
});
|
||||
this.getPage(this.page)
|
||||
} else {
|
||||
notify({
|
||||
title: "Failure",
|
||||
text: "error deleting oil order",
|
||||
type: "success",
|
||||
});
|
||||
this.user = response.data.user;
|
||||
}
|
||||
})
|
||||
},
|
||||
.catch(() => {
|
||||
this.user = null
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
get_oil_orders(page: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/delivery/outfordelivery/' + 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",
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
printtTicketAll() {
|
||||
let path = import.meta.env.VITE_PRINT_URL + '/command/printticket/all/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>
|
||||
|
||||
Reference in New Issue
Block a user