Updated looks
This commit is contained in:
179
src/pages/TodayFinishedDelivery.vue
Normal file
179
src/pages/TodayFinishedDelivery.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="q-pa-md">
|
||||
|
||||
<q-table title="Todays Finished Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
|
||||
v-model="filter" class="q-mb-lg">
|
||||
<template v-slot:top-right>
|
||||
<q-input dense debounce="300" v-model="filter" placeholder="Search">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
|
||||
|
||||
<q-td key="id" :props="props">
|
||||
{{ props.row.id }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="delivery_status" :props="props">
|
||||
<span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
|
||||
<span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
|
||||
<span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
|
||||
<span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
|
||||
<span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
|
||||
<span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
|
||||
<span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
|
||||
</q-td>
|
||||
|
||||
<q-td key="customer_name" :props="props">
|
||||
{{ props.row.customer_name }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="address" :props="props">
|
||||
{{ props.row.customer_address }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="town" :props="props">
|
||||
{{ props.row.customer_town }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="gallons_ordered" :props="props">
|
||||
<span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
|
||||
<span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
|
||||
</q-td>
|
||||
|
||||
<q-td key="automatic" :props="props">
|
||||
<span v-if="props.row.automatic == 0">No</span>
|
||||
<span v-if="props.row.automatic == 1">Yes</span>
|
||||
</q-td>
|
||||
|
||||
<q-td key="payment" :props="props">
|
||||
<span v-if="props.row.payment_type == 0">Cash COD</span>
|
||||
<span v-if="props.row.payment_type == 1">Credit</span>
|
||||
</q-td>
|
||||
|
||||
<q-td key="prime" :props="props">
|
||||
<span v-if="props.row.prime == 0"></span>
|
||||
<span v-if="props.row.prime == 1" class="text-red-14">YES</span>
|
||||
</q-td>
|
||||
|
||||
<q-td key="same_day" :props="props">
|
||||
<span v-if="props.row.same_day == 0"></span>
|
||||
<span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
|
||||
</q-td>
|
||||
|
||||
|
||||
<q-td key="dispatcher_notes" :props="props">
|
||||
{{ props.row.dispatcher_notes }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import axios from 'axios'
|
||||
import { defineComponent } from 'vue'
|
||||
import authHeader from '../services/auth.header'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TodayFinishedDelivery',
|
||||
|
||||
data() {
|
||||
return {
|
||||
token: null,
|
||||
deliveries: [],
|
||||
user: {
|
||||
user_id: 0,
|
||||
user_name: ''
|
||||
},
|
||||
filter: '',
|
||||
employee: {
|
||||
id: '',
|
||||
user_id: '',
|
||||
employee_last_name: "",
|
||||
employee_first_name: "",
|
||||
employee_town: "",
|
||||
employee_address: "",
|
||||
employee_apt: "",
|
||||
employee_zip: "",
|
||||
employee_birthday: "",
|
||||
employee_phone_number: "",
|
||||
employee_start_date: "",
|
||||
employee_end_date: "",
|
||||
employee_type: '',
|
||||
employee_state: ''
|
||||
},
|
||||
|
||||
columns: [
|
||||
{ name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
|
||||
{ name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
|
||||
{ name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
|
||||
{ name: 'address', label: 'Address', field: 'address' },
|
||||
{ name: 'town', label: 'Town', field: 'town', sortable: true },
|
||||
{ name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
|
||||
{ name: 'automatic', label: 'Automatic', field: 'automatic', sortable: true },
|
||||
{ name: 'payment', label: 'Payment', field: 'payment' },
|
||||
{ name: 'prime', label: 'Prime', field: 'prime' },
|
||||
{ name: 'same_day', label: 'Same Day', field: 'same_day' },
|
||||
{ name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.userStatus()
|
||||
},
|
||||
methods: {
|
||||
|
||||
userStatus() {
|
||||
const 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
|
||||
this.get_employee()
|
||||
}
|
||||
})
|
||||
},
|
||||
get_employee() {
|
||||
const path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader()
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.employee = response.data
|
||||
this.get_oil_orders()
|
||||
})
|
||||
},
|
||||
get_oil_orders() {
|
||||
const path = import.meta.env.VITE_BASE_URL + '/deliverystatus/today/driver/' + this.employee.id
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader()
|
||||
}).then((response: any) => {
|
||||
this.deliveries = response.data
|
||||
})
|
||||
},
|
||||
onEdit(row: any) {
|
||||
this.$router.push('delivery/' + row.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user