Major Refactor
This commit is contained in:
@@ -1,111 +1,124 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<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>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Issue with Delivery </div>
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<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 Requiring Attention</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</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'] } }">
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</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>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</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" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
<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 badge-error">Issue</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>{{ oil.expected_delivery_date }}</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: '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">Ticket #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-error">
|
||||
Issue
|
||||
</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>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</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 btn-secondary">View</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary ">Edit</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
|
||||
:options="options" class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -131,7 +144,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
Reference in New Issue
Block a user