feat: ajout du composant datatable sur tous les écrans (!48)
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #48 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #48.
This commit is contained in:
@@ -5,41 +5,126 @@
|
||||
</div>
|
||||
|
||||
<div class="px-[86px]">
|
||||
<div class="mt-6 border border-slate-200 mb-16 ">
|
||||
<div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
|
||||
<div>Numéro</div>
|
||||
<div>Date et heure</div>
|
||||
<div>Fournisseur</div>
|
||||
<div>Adresse</div>
|
||||
<div>Type réception</div>
|
||||
<div>Poids</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="reception in receptionList"
|
||||
:key="reception.id"
|
||||
class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="goToReception(reception.id)"
|
||||
<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"
|
||||
row-clickable
|
||||
@row-click="goToReception"
|
||||
>
|
||||
<div>{{ reception.identificationNumber}}</div>
|
||||
<div>{{ formatDate(reception.receptionDate) }}</div>
|
||||
<div>{{ reception.supplier?.name }}</div>
|
||||
<div>{{ reception.address?.fullAddress }}</div>
|
||||
<div>{{ reception.receptionType?.label }}</div>
|
||||
<div>{{ formatWeighing(reception) }}</div>
|
||||
</div>
|
||||
<template #header-identificationNumber>
|
||||
<UiTextInput
|
||||
v-model="filters.identificationNumber"
|
||||
placeholder="Numéro"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-receptionDate>
|
||||
<UiDateInput
|
||||
v-model="receptionDateFilter"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-supplier.name>
|
||||
<UiTextInput
|
||||
v-model="filters['supplier.name']"
|
||||
placeholder="Fournisseur"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-address.fullAddress>
|
||||
<UiTextInput
|
||||
:model-value="''"
|
||||
placeholder="Adresse"
|
||||
size="compact"
|
||||
disabled
|
||||
/>
|
||||
</template>
|
||||
<template #header-receptionType.label>
|
||||
<UiSelect
|
||||
v-model="filters['receptionType.id']"
|
||||
placeholder="Type réception"
|
||||
:options="receptionTypeOptions"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-weighing>
|
||||
<UiTextInput
|
||||
:model-value="''"
|
||||
placeholder="Poids"
|
||||
size="compact"
|
||||
disabled
|
||||
/>
|
||||
</template>
|
||||
<template #cell-receptionDate="{ item }">
|
||||
{{ formatDate(item.receptionDate) }}
|
||||
</template>
|
||||
<template #cell-weighing="{ item }">
|
||||
{{ formatWeighing(item) }}
|
||||
</template>
|
||||
</UiDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {ReceptionData} from "~/services/dto/reception-data";
|
||||
import {getReceptionList} from "~/services/reception";
|
||||
import type {ShipmentData} from "~/services/dto/shipment-data";
|
||||
import type { ReceptionData } from '~/services/dto/reception-data'
|
||||
import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
|
||||
import { getReceptionTypeList } from '~/services/reception-type'
|
||||
import { useDataTableServerState } from '~/composables/useDataTableServerState'
|
||||
|
||||
const receptionList = ref<ReceptionData[]>()
|
||||
const router = useRouter()
|
||||
const receptionTypes = ref<ReceptionTypeData[]>([])
|
||||
|
||||
const receptionTypeOptions = computed(() =>
|
||||
receptionTypes.value.map(rt => ({ value: rt.id, label: rt.label }))
|
||||
)
|
||||
|
||||
const { items, totalItems, page, perPage, filters, loading, reload } =
|
||||
useDataTableServerState<ReceptionData>(
|
||||
'receptions',
|
||||
{
|
||||
isValid: true,
|
||||
'identificationNumber': '',
|
||||
'supplier.name': '',
|
||||
'receptionType.id': '',
|
||||
'receptionDate[after]': '',
|
||||
'receptionDate[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 receptionDateFilter = computed<string>({
|
||||
get: () => (filters.value['receptionDate[after]'] as string) ?? '',
|
||||
set: (value: string) => {
|
||||
if (!value) {
|
||||
filters.value['receptionDate[after]'] = ''
|
||||
filters.value['receptionDate[strictly_before]'] = ''
|
||||
return
|
||||
}
|
||||
filters.value['receptionDate[after]'] = value
|
||||
filters.value['receptionDate[strictly_before]'] = addOneDay(value)
|
||||
}
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{ key: 'identificationNumber', label: 'Numéro', width: '75px' },
|
||||
{ key: 'receptionDate', label: 'Date et heure', width: '120px' },
|
||||
{ key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
|
||||
{ key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
|
||||
{ key: 'receptionType.label', label: 'Type réception', width: '0.9fr' },
|
||||
{ key: 'weighing', label: 'Poids', width: '82px' }
|
||||
]
|
||||
|
||||
const formatDate = (date: string | null) => {
|
||||
if (!date) return '—'
|
||||
@@ -65,11 +150,12 @@ const formatWeighing = (reception: ReceptionData) => {
|
||||
return `${gross - tare} kg`
|
||||
}
|
||||
|
||||
const goToReception = (id: number) => {
|
||||
router.push(`/reception/update/${id}`)
|
||||
const goToReception = (reception: ReceptionData) => {
|
||||
router.push(`/reception/update/${reception.id}`)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
receptionList.value = await getReceptionList(true)
|
||||
receptionTypes.value = await getReceptionTypeList()
|
||||
reload()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,43 +1,135 @@
|
||||
<template>
|
||||
<WorkflowWaitingList
|
||||
title="listes des réceptions en attente"
|
||||
:columns="columns"
|
||||
:items="receptionList ?? []"
|
||||
route-prefix="/reception"
|
||||
:show-actions="auth.isAdmin"
|
||||
>
|
||||
<template #cell-receptionDate="{ item }">
|
||||
{{ formatDate(item.receptionDate) }}
|
||||
</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 réceptions 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="goToReception"
|
||||
>
|
||||
<template #header-receptionDate>
|
||||
<UiDateInput v-model="receptionDateFilter" size="compact" />
|
||||
</template>
|
||||
<template #header-supplier.name>
|
||||
<UiTextInput
|
||||
v-model="filters['supplier.name']"
|
||||
placeholder="Fournisseur"
|
||||
size="compact"
|
||||
/>
|
||||
</template>
|
||||
<template #header-address.fullAddress>
|
||||
<UiTextInput :model-value="''" placeholder="Adresse" size="compact" disabled />
|
||||
</template>
|
||||
<template #header-receptionType.label>
|
||||
<UiSelect
|
||||
v-model="filters['receptionType.id']"
|
||||
placeholder="Type réception"
|
||||
:options="receptionTypeOptions"
|
||||
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-receptionDate="{ item }">
|
||||
{{ formatDate(item.receptionDate) }}
|
||||
</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 { ReceptionData } from '~/services/dto/reception-data'
|
||||
import { getReceptionList, deleteReception } from '~/services/reception'
|
||||
import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
|
||||
import { deleteReception } from '~/services/reception'
|
||||
import { getReceptionTypeList } from '~/services/reception-type'
|
||||
import { useAuthStore } from '~/stores/auth'
|
||||
import { useDataTableServerState } from '~/composables/useDataTableServerState'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const receptionTypes = ref<ReceptionTypeData[]>([])
|
||||
|
||||
const receptionTypeOptions = computed(() =>
|
||||
receptionTypes.value.map(rt => ({ value: rt.id, label: rt.label }))
|
||||
)
|
||||
|
||||
const { items, totalItems, page, perPage, filters, loading, reload } =
|
||||
useDataTableServerState<ReceptionData>(
|
||||
'receptions',
|
||||
{
|
||||
isValid: false,
|
||||
'supplier.name': '',
|
||||
'carrier.name': '',
|
||||
'licensePlate': '',
|
||||
'receptionType.id': '',
|
||||
'receptionDate[after]': '',
|
||||
'receptionDate[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 receptionDateFilter = computed<string>({
|
||||
get: () => (filters.value['receptionDate[after]'] as string) ?? '',
|
||||
set: (value: string) => {
|
||||
if (!value) {
|
||||
filters.value['receptionDate[after]'] = ''
|
||||
filters.value['receptionDate[strictly_before]'] = ''
|
||||
return
|
||||
}
|
||||
filters.value['receptionDate[after]'] = value
|
||||
filters.value['receptionDate[strictly_before]'] = addOneDay(value)
|
||||
}
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{ key: 'receptionDate', label: 'Date et heure' },
|
||||
{ key: 'supplier.name', label: 'Fournisseur' },
|
||||
{ key: 'address.fullAddress', label: 'Adresse' },
|
||||
{ key: 'receptionType.label', label: 'Type réception' },
|
||||
{ key: 'receptionDate', label: 'Date et heure', width: '120px' },
|
||||
{ key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
|
||||
{ key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
|
||||
{ key: 'receptionType.label', label: 'Type réception', width: '1.1fr' },
|
||||
{ key: 'carrier.name', label: 'Transporteur' },
|
||||
{ key: 'licensePlate', label: 'Immatriculation' }
|
||||
{ key: 'licensePlate', label: 'Immatriculation', width: '110px' }
|
||||
]
|
||||
|
||||
const receptionList = ref<ReceptionData[]>()
|
||||
|
||||
const formatDate = (date: string | null) => {
|
||||
if (!date) return '—'
|
||||
const d = new Date(date.replace(' ', 'T'))
|
||||
@@ -51,6 +143,10 @@ const formatDate = (date: string | null) => {
|
||||
})
|
||||
}
|
||||
|
||||
const goToReception = (reception: ReceptionData) => {
|
||||
router.push(`/reception/${reception.id}`)
|
||||
}
|
||||
|
||||
const confirmDelete = async (reception: ReceptionData) => {
|
||||
const confirmed = window.confirm(
|
||||
`Êtes-vous sûr de vouloir supprimer la réception ${reception.identificationNumber ?? `#${reception.id}`} ? Toutes les données liées seront supprimées.`
|
||||
@@ -58,10 +154,11 @@ const confirmDelete = async (reception: ReceptionData) => {
|
||||
if (!confirmed) return
|
||||
|
||||
await deleteReception(reception.id)
|
||||
receptionList.value = receptionList.value?.filter(r => r.id !== reception.id)
|
||||
reload()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
receptionList.value = await getReceptionList(false)
|
||||
receptionTypes.value = await getReceptionTypeList()
|
||||
reload()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user