MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 82 Wiki Activity

feat : creation du composant datatable (WIP)

Browse Source
This commit is contained in:
Kevin Boudet
2026-02-17 14:52:23 +01:00
parent 850e412840
commit 74de31721c
15 changed files with 355 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/components/ui/UiDataTable.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mt-6">
<table class="min-w-full border-collapse border border-slate-300">
<thead class="gap-4 bg-slate-100 px-4 py-3 uppercase tracking-wide">
<table class="min-w-full border border-slate-300">
<thead class="bg-slate-100 uppercase tracking-wide">
<tr>
<th
v-for="column in normalizedColumns"
@@ -15,15 +15,15 @@
<tbody>
<tr v-if="loading">
<td
class="border border-slate-300 px-3 py-2 text-center text-slate-500"
class="border border-slate-300 px-3 py-2 text-left text-slate-500"
:colspan="normalizedColumns.length || 1"
>
Chargement...
</td>
</tr>
<tr v-else-if="rows.length === 0">
<tr v-else-if="displayedRows.length === 0">
<td
class="border border-slate-300 px-3 py-2 text-center text-slate-500"
class="border border-slate-300 px-3 py-2 text-left text-slate-500"
:colspan="normalizedColumns.length || 1"
>
Aucune donnée
@@ -31,10 +31,10 @@
</tr>
<template v-else>
<tr
v-for="(row, rowIndex) in rows"
v-for="(row, rowIndex) in displayedRows"
:key="rowIndex"
class="cursor-pointer"
@click="onRowClick(row)"
:class="props.rowClickable ? 'cursor-pointer' : ''"
@click="props.rowClickable ? onRowClick(row) : null"
>
<td
v-for="column in normalizedColumns"
@@ -48,14 +48,14 @@
</tbody>
</table>
<div class="flex items-center justify-between">
<p class="text-sm text-slate-600">
<div class="flex items-center justify-between mt-4">
<p class="text-slate-600">
{{ pageLabel }}
</p>
<div class="flex items-center gap-2 mt-4">
<div class="flex items-center gap-2">
<button
type="button"
class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
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"
>
@@ -65,18 +65,19 @@
v-for="(item, index) in paginationItems"
:key="`${item}-${index}`"
type="button"
class="min-w-9 rounded border px-3 py-1 disabled:cursor-default"
:class="typeof item === 'number' && item === currentPage
? 'border-primary-500 bg-primary-500 text-white'
: 'border-slate-300'"
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-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
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"
>
@@ -88,42 +89,43 @@
</template>
<script setup lang="ts">
type Row = Record<string, unknown>
type ColumnConfig = {
key: string
label?: string
format?: (value: unknown, row: Row) => string
}
type HydraCollection<T> = {
'hydra:member': T[]
'hydra:totalItems': number
}
type AnyCollection<T> = HydraCollection<T> & {
member?: T[]
items?: T[]
totalItems?: number
}
const props = withDefaults(defineProps<{
url: string
columns?: ColumnConfig[]
query?: Record<string, unknown>
itemsPerPage?: number
}>(), {
columns: () => [],
query: () => ({}),
itemsPerPage: 10
})
import {Row,ColumnConfig, AnyCollection, PaginationItem }from '~/services/datatable'
import {useApi} from "~/composables/useApi";
const api = useApi()
const emit = defineEmits<{
rowClick: [row: Row]
}>()
const loading = ref(false)
const currentPage = ref(1)
const rows = ref<Row[]>([])
const total = ref(0)
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)
})
const normalizedColumns = computed(() => {
if (props.columns.length > 0) {
@@ -134,11 +136,11 @@ const normalizedColumns = computed(() => {
}))
}
if (rows.value.length === 0) {
if (displayedRows.value.length === 0) {
return []
}
return Object.keys(rows.value[0])
return Object.keys(displayedRows.value[0])
.filter((key) => !key.startsWith('@'))
.map((key) => ({
key,
@@ -146,67 +148,95 @@ const normalizedColumns = computed(() => {
}))
})
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / props.itemsPerPage)))
const paginationItems = computed<Array<number | '...'>>(() => {
const totalPagesValue = totalPages.value
const page = currentPage.value
const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)),)
if (totalPagesValue <= 7) {
return Array.from({ length: totalPagesValue }, (_, index) => index + 1)
}
const pages = new Set<number>([1, totalPagesValue, page - 1, page, page + 1])
const sortedPages = Array.from(pages)
.filter((value) => value >= 1 && value <= totalPagesValue)
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[] = []
const items: Array<number | '...'> = []
for (let i = 0; i < sortedPages.length; i++) {
const value = sortedPages[i]
const previousValue = sortedPages[i - 1]
if (previousValue != null && value - previousValue > 1) {
const current = sortedPages[i]
const previous = sortedPages[i - 1]
if (previous != null && current - previous > 1) {
items.push('...')
}
items.push(value)
items.push(current)
}
return items
}
const paginationItems = computed<PaginationItem[]>(() => {
const pages = getVisiblePages(currentPage.value, totalPages.value)
return insertEllipses(pages)
})
const pageLabel = computed(() => {
if (total.value === 0) {
return '0 resultat'
}
if (!effectiveTotal.value) return '0 résultat'
const start = (currentPage.value - 1) * props.itemsPerPage + 1
const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
return `${start}-${end} sur ${total.value}`
const end = Math.min(currentPage.value * props.itemsPerPage, effectiveTotal.value)
return `${start}-${end} sur ${effectiveTotal.value}`
})
// Surveille pagination et filtres pour recharger la liste ; si les filtres changent, revient d'abord à la page 1.
watch(
() => ({
page: currentPage.value,
query: props.query,
url: props.url,
itemsPerPage: props.itemsPerPage
}),
async (state, previousState) => {
const queryChanged = JSON.stringify(state.query ?? {}) !== JSON.stringify(previousState?.query ?? {})
if (queryChanged && state.page !== 1) {
() => [props.url, props.itemsPerPage, JSON.stringify(props.query ?? {}), props.responsePath],
async () => {
if (currentPage.value !== 1) {
currentPage.value = 1
return
if (!isNestedMode.value) return
}
await loadPage()
},
{immediate: true, deep: true}
{ immediate: 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 }
)
// 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 requestQuery: Record<string, unknown> = {
...props.query,
page: currentPage.value,
@@ -245,7 +275,9 @@ function readPath(source: Row, path: string): unknown {
// 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]')
@@ -253,7 +285,6 @@ function formatCell(value: unknown): string {
return String(value)
}
// Résout la valeur de colonne pour une ligne et applique un formateur personnalisé s'il existe.
function formatColumnValue(
row: Row,
column: { key: string; format?: (value: unknown, row: Row) => string }