feat : creation du composant datatable (WIP)
This commit is contained in:
@@ -1,22 +1,268 @@
|
||||
<template>
|
||||
<table class="w-full border-collapse border border-slate-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
class="border border-slate-300 px-3 py-2 text-left"
|
||||
>
|
||||
{{ column }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<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">
|
||||
<tr>
|
||||
<th
|
||||
v-for="column in normalizedColumns"
|
||||
:key="column.key"
|
||||
class="border border-slate-300 px-3 py-2 text-left"
|
||||
>
|
||||
<span>{{ column.label }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td
|
||||
class="border border-slate-300 px-3 py-2 text-center text-slate-500"
|
||||
:colspan="normalizedColumns.length || 1"
|
||||
>
|
||||
Chargement...
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else-if="rows.length === 0">
|
||||
<td
|
||||
class="border border-slate-300 px-3 py-2 text-center text-slate-500"
|
||||
:colspan="normalizedColumns.length || 1"
|
||||
>
|
||||
Aucune donnée
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="(row, rowIndex) in rows"
|
||||
:key="rowIndex"
|
||||
class="cursor-pointer"
|
||||
@click="onRowClick(row)"
|
||||
>
|
||||
<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">
|
||||
<p class="text-sm text-slate-600">
|
||||
{{ pageLabel }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-slate-300 px-3 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-3 py-1 disabled:cursor-default"
|
||||
:class="typeof item === 'number' && 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"
|
||||
:disabled="currentPage >= totalPages || loading"
|
||||
@click="currentPage = currentPage + 1"
|
||||
>
|
||||
Suivant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
columns: string[]
|
||||
data?: any[]
|
||||
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
|
||||
})
|
||||
|
||||
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 normalizedColumns = computed(() => {
|
||||
if (props.columns.length > 0) {
|
||||
return props.columns.map((column) => ({
|
||||
key: column.key,
|
||||
label: column.label ?? column.key,
|
||||
format: column.format
|
||||
}))
|
||||
}
|
||||
|
||||
if (rows.value.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
return Object.keys(rows.value[0])
|
||||
.filter((key) => !key.startsWith('@'))
|
||||
.map((key) => ({
|
||||
key,
|
||||
label: key
|
||||
}))
|
||||
})
|
||||
|
||||
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
|
||||
|
||||
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)
|
||||
.sort((a, b) => a - b)
|
||||
|
||||
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) {
|
||||
items.push('...')
|
||||
}
|
||||
items.push(value)
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
const pageLabel = computed(() => {
|
||||
if (total.value === 0) {
|
||||
return '0 resultat'
|
||||
}
|
||||
const start = (currentPage.value - 1) * props.itemsPerPage + 1
|
||||
const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
|
||||
return `${start}-${end} sur ${total.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) {
|
||||
currentPage.value = 1
|
||||
return
|
||||
}
|
||||
|
||||
await loadPage()
|
||||
},
|
||||
{immediate: true, deep: 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> {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const requestQuery: Record<string, unknown> = {
|
||||
...props.query,
|
||||
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)
|
||||
}
|
||||
|
||||
// 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 }
|
||||
): string {
|
||||
const value = readPath(row, column.key)
|
||||
if (column.format) {
|
||||
return column.format(value, row)
|
||||
}
|
||||
|
||||
return formatCell(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user