frontend/pages/shipment/waiting-shipment.vue

@@ -1,55 +1,147 @@
 <template>
-    <WorkflowWaitingList
-        title="listes des expéditions en attente"
-        :columns="columns"
-        :items="shipmentList ?? []"
-        route-prefix="/shipment"
-        :show-actions="auth.isAdmin"
-    >
-        <template #cell-shipmentDate="{ item }">
-            {{ formatDate(item.shipmentDate) }}
-        </template>
-        <template #cell-shipmentType="{ item }">
-            <template v-if="formatShipmentLines(item).length">
-                <div
-                    v-for="(line, index) in formatShipmentLines(item)"
-                    :key="index"
-                    class="leading-5"
-                >
-                    {{ line }}
-                </div>
-            </template>
-            <template v-else>—</template>
-        </template>
-        <template #actions="{ item }">
-            <Icon
-                name="mdi:delete-outline"
-                size="24"
-                class="cursor-pointer text-red-500 hover:text-red-700"
-                @click="confirmDelete(item)"
-            />
-        </template>
-    </WorkflowWaitingList>
+    <div class="flex items-center justify-start gap-10">
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions en attente</h1>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                :show-actions="auth.isAdmin"
+                row-clickable
+                @row-click="goToShipment"
+            >
+                <template #header-shipmentDate>
+                    <UiDateInput v-model="shipmentDateFilter" size="compact" />
+                </template>
+                <template #header-customer.name>
+                    <UiTextInput
+                        v-model="filters['customer.name']"
+                        placeholder="Client"
+                        size="compact"
+                    />
+                </template>
+                <template #header-address.fullAddress>
+                    <UiTextInput :model-value="''" placeholder="Adresse" size="compact" disabled />
+                </template>
+                <template #header-shipmentType.label>
+                    <UiSelect
+                        v-model="filters['shipmentType.id']"
+                        placeholder="Type d'expé."
+                        :options="shipmentTypeOptions"
+                        size="compact"
+                    />
+                </template>
+                <template #header-carrier.name>
+                    <UiTextInput
+                        v-model="filters['carrier.name']"
+                        placeholder="Transporteur"
+                        size="compact"
+                    />
+                </template>
+                <template #header-licensePlate>
+                    <UiTextInput
+                        v-model="filters['licensePlate']"
+                        placeholder="Immatriculation"
+                        size="compact"
+                    />
+                </template>
+                <template #header-actions>
+                    <UiTextInput :model-value="''" placeholder="Actions" size="compact" disabled />
+                </template>
+                <template #cell-shipmentDate="{ item }">
+                    {{ formatDate(item.shipmentDate) }}
+                </template>
+                <template #cell-shipmentType.label="{ item }">
+                    <template v-if="formatShipmentLines(item).length">
+                        <div
+                            v-for="(line, index) in formatShipmentLines(item)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                    <template v-else>—</template>
+                </template>
+                <template #actions="{ item }">
+                    <Icon
+                        name="mdi:delete-outline"
+                        size="24"
+                        class="cursor-pointer text-red-500 hover:text-red-700"
+                        @click="confirmDelete(item)"
+                    />
+                </template>
+            </UiDataTable>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
 import type { ShipmentData } from '~/services/dto/shipment-data'
-import { getShipmentList, deleteShipment } from '~/services/shipment'
+import type { ShipmentTypeData } from '~/services/dto/shipment-type-data'
+import { deleteShipment } from '~/services/shipment'
+import { getShipmentTypeList } from '~/services/shipment-type'
 import { useAuthStore } from '~/stores/auth'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
+const router = useRouter()
 const auth = useAuthStore()
+const shipmentTypes = ref<ShipmentTypeData[]>([])
+
+const shipmentTypeOptions = computed(() =>
+    shipmentTypes.value.map(st => ({ value: st.id, label: st.label }))
+)
+
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<ShipmentData>(
+        'shipments',
+        {
+            isValid: false,
+            'customer.name': '',
+            'carrier.name': '',
+            'licensePlate': '',
+            'shipmentType.id': '',
+            'shipmentDate[after]': '',
+            'shipmentDate[strictly_before]': ''
+        },
+        { initialPerPage: 10 }
+    )
+
+const addOneDay = (dateString: string): string => {
+    const [year, month, day] = dateString.split('-').map(Number)
+    const next = new Date(Date.UTC(year, month - 1, day + 1))
+    return next.toISOString().slice(0, 10)
+}
+
+const shipmentDateFilter = computed<string>({
+    get: () => (filters.value['shipmentDate[after]'] as string) ?? '',
+    set: (value: string) => {
+        if (!value) {
+            filters.value['shipmentDate[after]'] = ''
+            filters.value['shipmentDate[strictly_before]'] = ''
+            return
+        }
+        filters.value['shipmentDate[after]'] = value
+        filters.value['shipmentDate[strictly_before]'] = addOneDay(value)
+    }
+})
 
 const columns = [
-    { key: 'shipmentDate', label: 'Date et heure' },
-    { key: 'customer.name', label: 'Client' },
-    { key: 'address.fullAddress', label: 'Adresse' },
-    { key: 'shipmentType', label: "Type d'expé." },
+    { key: 'shipmentDate', label: 'Date et heure', width: '120px' },
+    { key: 'customer.name', label: 'Client', width: '1.5fr' },
+    { key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
+    { key: 'shipmentType.label', label: "Type d'expé.", width: '1.1fr' },
     { key: 'carrier.name', label: 'Transporteur' },
-    { key: 'licensePlate', label: 'Immatriculation' }
+    { key: 'licensePlate', label: 'Immatriculation', width: '110px' }
 ]
 
-const shipmentList = ref<ShipmentData[]>()
-
 const formatDate = (date: string | null) => {
     if (!date) return '—'
     const d = new Date(date.replace(' ', 'T'))
@@ -73,6 +165,10 @@ const formatShipmentLines = (shipment: ShipmentData) => {
     return [`${label ?? '—'} : ${shipment.nbBovinSend ?? '—'}`]
 }
 
+const goToShipment = (shipment: ShipmentData) => {
+    router.push(`/shipment/${shipment.id}`)
+}
+
 const confirmDelete = async (shipment: ShipmentData) => {
     const confirmed = window.confirm(
         `Êtes-vous sûr de vouloir supprimer l'expédition ${shipment.identificationNumber ?? `#${shipment.id}`} ? Toutes les données liées seront supprimées.`
@@ -80,10 +176,11 @@ const confirmDelete = async (shipment: ShipmentData) => {
     if (!confirmed) return
 
     await deleteShipment(shipment.id)
-    shipmentList.value = shipmentList.value?.filter(s => s.id !== shipment.id)
+    reload()
 }
 
 onMounted(async () => {
-    shipmentList.value = await getShipmentList(false)
+    shipmentTypes.value = await getShipmentTypeList()
+    reload()
 })
 </script>