437 lines
14 KiB
Vue
437 lines
14 KiB
Vue
<template>
|
|
<div class="mt-6 mx-[6px]">
|
|
<table class="w-full border border-slate-300 table-fixed">
|
|
<thead class="bg-slate-100 capitalize tracking-wide">
|
|
<tr>
|
|
<th
|
|
v-for="column in normalizedColumns"
|
|
:key="column.key"
|
|
class="border border-slate-300 px-2 py-1"
|
|
>
|
|
<div class="flex flex-col gap-1">
|
|
<UiSelect
|
|
v-if="column.isSearchable && column.type === 'selectTypeReception'"
|
|
v-model="searchValues[column.key]"
|
|
:placeholder="column.label"
|
|
select-class="w-full !text-sm !py-1"
|
|
:options="[
|
|
{ value: '__all__', label: 'Tous' },
|
|
...receptionTypes.map((type) => ({
|
|
value: type.label,
|
|
label: type.label
|
|
}))
|
|
]"
|
|
/>
|
|
<UiSelect
|
|
v-else-if="column.isSearchable && column.type === 'selectTypeShipment'"
|
|
v-model="searchValues[column.key]"
|
|
:placeholder="column.label"
|
|
select-class="w-full !text-sm !py-1"
|
|
:options="[
|
|
{ value: '__all__', label: 'Tous' },
|
|
...shipmentTypes.map((type) => ({
|
|
value: type.label,
|
|
label: type.label
|
|
}))
|
|
]"
|
|
/>
|
|
<div v-else-if="column.isSearchable" class="relative">
|
|
<UiTextInput
|
|
v-model="searchValues[column.key]"
|
|
:placeholder="column.label"
|
|
input-class="min-w-full !text-sm !py-1 !pr-7"
|
|
/>
|
|
<Icon
|
|
name="gg:search"
|
|
class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-slate-400"
|
|
/>
|
|
</div>
|
|
<span v-else>{{ column.label }}</span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td
|
|
class="border border-slate-300 px-2 py-2 whitespace-pre-line"
|
|
:colspan="normalizedColumns.length || 1"
|
|
>
|
|
Chargement...
|
|
</td>
|
|
</tr>
|
|
<tr v-else-if="displayedRows.length === 0">
|
|
<td
|
|
class="border border-slate-300 px-3 py-2 text-left text-slate-500"
|
|
:colspan="normalizedColumns.length || 1"
|
|
>
|
|
Aucune donnée
|
|
</td>
|
|
</tr>
|
|
<template v-else>
|
|
<tr
|
|
v-for="(row, rowIndex) in displayedRows"
|
|
class="hover:bg-primary-500 hover:bg-opacity-15"
|
|
:key="rowIndex"
|
|
:class="props.rowClickable ? 'cursor-pointer' : ''"
|
|
@click="props.rowClickable ? onRowClick(row) : null"
|
|
>
|
|
<td
|
|
v-for="column in normalizedColumns"
|
|
:key="column.key"
|
|
class="border border-slate-300 px-2 py-2 whitespace-pre-line "
|
|
>
|
|
{{ formatColumnValue(row, column) }}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="flex items-center justify-between mt-4">
|
|
<p class="text-slate-600">
|
|
{{ pageLabel }}
|
|
</p>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
|
|
:disabled="currentPage <= 1 || loading"
|
|
@click="currentPage = currentPage - 1"
|
|
>
|
|
Précédent
|
|
</button>
|
|
<button
|
|
v-for="(item, index) in paginationItems"
|
|
:key="`${item}-${index}`"
|
|
type="button"
|
|
class="min-w-9 rounded border px-2 py-1"
|
|
:class="item === currentPage
|
|
? 'border-primary-500 bg-primary-500 text-white'
|
|
: 'border-slate-300'"
|
|
:disabled="loading || item === '...'"
|
|
@click="typeof item === 'number' ? (currentPage = item) : null"
|
|
>
|
|
{{ item }}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
|
|
:disabled="currentPage >= totalPages || loading"
|
|
@click="currentPage = currentPage + 1"
|
|
>
|
|
Suivant
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Row, ColumnConfig, AnyCollection, PaginationItem} from '~/services/dto/datatable-data'
|
|
import {useApi} from '~/composables/useApi'
|
|
import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
|
|
import {getReceptionTypeList} from '~/services/reception-type'
|
|
import type {ShipmentTypeData} from "~/services/dto/shipment-data";
|
|
import {getShipmentTypeList} from "~/services/shipment-type";
|
|
|
|
const api = useApi()
|
|
const receptionTypes = ref<ReceptionTypeData[]>([])
|
|
const shipmentTypes = ref<ShipmentTypeData[]>([])
|
|
const loading = ref(false)
|
|
const currentPage = ref(1)
|
|
const rows = ref<Row[]>([])
|
|
const total = ref(0)
|
|
const searchValues = reactive<Record<string, string>>({})
|
|
const isNestedMode = computed(() => Boolean(props.responsePath))
|
|
const effectiveTotal = computed(() => total.value)
|
|
const emit = defineEmits<{
|
|
rowClick: [row: Row]
|
|
}>()
|
|
|
|
const props = withDefaults(defineProps<{
|
|
url?: string
|
|
responsePath?: string
|
|
columns?: ColumnConfig[]
|
|
query?: Record<string, unknown>
|
|
itemsPerPage?: number
|
|
rowClickable?: boolean
|
|
}>(), {
|
|
url: '',
|
|
responsePath: '',
|
|
columns: () => [],
|
|
query: () => ({}),
|
|
itemsPerPage: 10,
|
|
rowClickable: true
|
|
})
|
|
const displayedRows = computed<Row[]>(() => {
|
|
if (!isNestedMode.value) return rows.value
|
|
|
|
const startIndex = (currentPage.value - 1) * props.itemsPerPage
|
|
const endIndex = startIndex + props.itemsPerPage
|
|
return rows.value.slice(startIndex, endIndex)
|
|
})
|
|
onMounted(async () => {
|
|
receptionTypes.value = await getReceptionTypeList()
|
|
shipmentTypes.value = await getShipmentTypeList()
|
|
|
|
})
|
|
const normalizedColumns = computed(() => {
|
|
if (props.columns.length > 0) {
|
|
return props.columns.map((column) => ({
|
|
key: column.key,
|
|
label: column.label ?? column.key,
|
|
format: column.format,
|
|
isSearchable: column.isSearchable ?? false,
|
|
type: column.type
|
|
}))
|
|
}
|
|
|
|
if (displayedRows.value.length === 0) {
|
|
return []
|
|
}
|
|
|
|
return Object.keys(displayedRows.value[0])
|
|
.filter((key) => !key.startsWith('@'))
|
|
.map((key) => ({
|
|
key,
|
|
label: key
|
|
}))
|
|
})
|
|
|
|
const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)))
|
|
|
|
function getVisiblePages(page: number, lastPage: number): number[] {
|
|
const candidates = new Set([1, page - 1, page, page + 1, lastPage])
|
|
return Array.from(candidates)
|
|
.filter((p) => p >= 1 && p <= lastPage)
|
|
.sort((a, b) => a - b)
|
|
}
|
|
|
|
function insertEllipses(sortedPages: number[]): PaginationItem[] {
|
|
const items: PaginationItem[] = []
|
|
|
|
for (let i = 0; i < sortedPages.length; i++) {
|
|
const current = sortedPages[i]
|
|
const previous = sortedPages[i - 1]
|
|
if (previous != null && current - previous > 1) {
|
|
items.push('...')
|
|
}
|
|
items.push(current)
|
|
}
|
|
return items
|
|
}
|
|
|
|
const paginationItems = computed<PaginationItem[]>(() => {
|
|
const pages = getVisiblePages(currentPage.value, totalPages.value)
|
|
return insertEllipses(pages)
|
|
})
|
|
|
|
const pageLabel = computed(() => {
|
|
if (!effectiveTotal.value) return '0 résultat'
|
|
|
|
const start = (currentPage.value - 1) * props.itemsPerPage + 1
|
|
const end = Math.min(currentPage.value * props.itemsPerPage, effectiveTotal.value)
|
|
|
|
return `${start}-${end} sur ${effectiveTotal.value}`
|
|
})
|
|
|
|
watch(
|
|
() => [props.url, props.itemsPerPage, JSON.stringify(props.query ?? {}), props.responsePath],
|
|
async () => {
|
|
if (currentPage.value !== 1) {
|
|
currentPage.value = 1
|
|
if (!isNestedMode.value) return
|
|
}
|
|
await loadPage()
|
|
},
|
|
{immediate: true}
|
|
)
|
|
|
|
let timeout: ReturnType<typeof setTimeout>
|
|
|
|
watch(
|
|
() => ({...searchValues}),
|
|
() => {
|
|
clearTimeout(timeout)
|
|
timeout = setTimeout(() => {
|
|
currentPage.value = 1
|
|
if (!isNestedMode.value) loadPage()
|
|
}, 750)
|
|
},
|
|
{deep: true}
|
|
)
|
|
|
|
watch(
|
|
() => currentPage.value,
|
|
async () => {
|
|
if (isNestedMode.value) return
|
|
await loadPage()
|
|
}
|
|
)
|
|
|
|
watch(
|
|
() => [totalPages.value, currentPage.value],
|
|
() => {
|
|
if (currentPage.value > totalPages.value) {
|
|
currentPage.value = totalPages.value
|
|
}
|
|
},
|
|
{immediate: true}
|
|
)
|
|
|
|
function buildDateInterval(value: string): { after: string; before: string } | null {
|
|
const trimmed = value.trim()
|
|
|
|
// YYYY
|
|
if (/^\d{4}$/.test(trimmed)) {
|
|
const year = Number(trimmed)
|
|
return {
|
|
after: `${year}-01-01`,
|
|
before: `${year + 1}-01-01`
|
|
}
|
|
}
|
|
|
|
// YYYY-MM
|
|
if (/^\d{4}-\d{2}$/.test(trimmed)) {
|
|
const [year, month] = trimmed.split('-').map(Number)
|
|
|
|
const nextMonth = month === 12 ? 1 : month + 1
|
|
const nextYear = month === 12 ? year + 1 : year
|
|
|
|
return {
|
|
after: `${year}-${String(month).padStart(2, '0')}-01`,
|
|
before: `${nextYear}-${String(nextMonth).padStart(2, '0')}-01`
|
|
}
|
|
}
|
|
|
|
// YYYY-MM-DD
|
|
if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
|
|
const date = new Date(`${trimmed}T00:00:00`)
|
|
const nextDay = new Date(date)
|
|
nextDay.setDate(date.getDate() + 1)
|
|
|
|
const yyyy = nextDay.getFullYear()
|
|
const mm = String(nextDay.getMonth() + 1).padStart(2, '0')
|
|
const dd = String(nextDay.getDate()).padStart(2, '0')
|
|
|
|
return {
|
|
after: trimmed,
|
|
before: `${yyyy}-${mm}-${dd}`
|
|
}
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
|
|
// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
|
|
async function loadPage(): Promise<void> {
|
|
if (!props.url) {
|
|
rows.value = []
|
|
total.value = 0
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
|
|
try {
|
|
if (isNestedMode.value) {
|
|
const response = await api.get<Row>(props.url, props.query, {
|
|
headers: {
|
|
Accept: 'application/ld+json'
|
|
}
|
|
})
|
|
const nestedRows = readPath(response, props.responsePath)
|
|
rows.value = Array.isArray(nestedRows) ? nestedRows as Row[] : []
|
|
total.value = rows.value.length
|
|
return
|
|
}
|
|
const searchQuery: Record<string, string> = {}
|
|
|
|
for (const column of normalizedColumns.value) {
|
|
if (!column.isSearchable) continue
|
|
|
|
const rawValue = searchValues[column.key] ?? ''
|
|
const raw = rawValue === '__all__' ? '' : rawValue.trim()
|
|
if (!raw) continue
|
|
|
|
const paramBase = column.key
|
|
|
|
if (column.type === 'date') {
|
|
const interval = buildDateInterval(raw)
|
|
|
|
if (interval) {
|
|
searchQuery[`${paramBase}[after]`] = interval.after
|
|
searchQuery[`${paramBase}[before]`] = interval.before
|
|
}
|
|
|
|
continue
|
|
}
|
|
|
|
searchQuery[paramBase] = raw
|
|
}
|
|
|
|
const requestQuery: Record<string, unknown> = {
|
|
...props.query,
|
|
...searchQuery,
|
|
page: currentPage.value,
|
|
itemsPerPage: props.itemsPerPage,
|
|
}
|
|
|
|
const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
|
|
headers: {
|
|
Accept: 'application/ld+json'
|
|
}
|
|
})
|
|
|
|
if (Array.isArray(response)) {
|
|
rows.value = response
|
|
total.value = response.length
|
|
return
|
|
}
|
|
|
|
const mappedRows = response['hydra:member'] ?? response.member ?? response.items ?? []
|
|
rows.value = Array.isArray(mappedRows) ? mappedRows : []
|
|
total.value = Number(response['hydra:totalItems'] ?? response.totalItems ?? rows.value.length)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onRowClick(row: Row): void {
|
|
emit('rowClick', row)
|
|
}
|
|
|
|
// Lit une valeur imbriquée dans une ligne à partir d'un chemin de type "objet.sousObjet.cle".
|
|
function readPath(source: Row, path: string): unknown {
|
|
return path.split('.').reduce<unknown>((acc, key) => (acc as Row | undefined)?.[key], source)
|
|
}
|
|
|
|
// Formate une valeur brute pour l'affichage dans une cellule (vide, tableau, objet ou valeur simple).
|
|
function formatCell(value: unknown): string {
|
|
if (value == null || value === '') return '-'
|
|
|
|
if (Array.isArray(value)) return value.length ? value.map(formatCell).join(', ') : '-'
|
|
|
|
if (typeof value === 'object') {
|
|
const objectValue = value as Row
|
|
return String(objectValue.label ?? objectValue.name ?? objectValue.code ?? objectValue.id ?? '[object]')
|
|
}
|
|
return String(value)
|
|
}
|
|
|
|
function formatColumnValue(
|
|
row: Row,
|
|
column: { key: string; format?: (value: unknown, row: Row) => string }
|
|
): string {
|
|
const value = readPath(row, column.key)
|
|
if (column.format) {
|
|
return column.format(value, row)
|
|
}
|
|
|
|
return formatCell(value)
|
|
}
|
|
</script>
|