refacto(tables) : composant DataTable global + migration de toutes les tables
- Nouveau composant DataTable réutilisable avec tri par en-têtes, pagination, filtres colonnes - Nouveau composable useDataTable (sort/page/search/perPage/columnFilters + persistance URL) - Migration des 9 tables : constructeurs, comments, admin, pieces-catalog, component-catalog, product-catalog, documents, activity-log, ManagementView (catégories) - Filtres "Type de" server-side (ipartial) pour pièces, composants, produits Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
308
app/components/common/DataTable.vue
Normal file
308
app/components/common/DataTable.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Toolbar + counter row -->
|
||||
<div
|
||||
v-if="$slots.toolbar || showCounter || showPerPage"
|
||||
class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<slot name="toolbar" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div v-if="showPerPage && pagination?.perPageOptions?.length" class="flex items-center gap-2">
|
||||
<label
|
||||
class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
|
||||
for="dt-per-page"
|
||||
>
|
||||
Par page
|
||||
</label>
|
||||
<select
|
||||
id="dt-per-page"
|
||||
:value="pagination.perPage"
|
||||
class="select select-bordered select-sm"
|
||||
@change="emit('update:perPage', Number(($event.target as HTMLSelectElement).value))"
|
||||
>
|
||||
<option v-for="opt in pagination.perPageOptions" :key="opt" :value="opt">
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="showCounter && pagination" class="text-xs text-base-content/50 whitespace-nowrap">
|
||||
{{ pagination.pageItems }} / {{ pagination.totalItems }}
|
||||
résultat{{ pagination.totalItems > 1 ? 's' : '' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state (full spinner only when no filterable columns to keep visible) -->
|
||||
<div v-if="loading && !hasFilterableColumns" class="flex justify-center py-8">
|
||||
<slot name="loading">
|
||||
<span class="loading loading-spinner" aria-hidden="true" />
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- Empty state (no data at all, no filterable columns to keep visible) -->
|
||||
<template v-else-if="isEmpty && !hasFilterableColumns">
|
||||
<slot name="empty">
|
||||
<p class="text-sm text-base-content/70 py-8 text-center">
|
||||
{{ emptyMessage }}
|
||||
</p>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<!-- No results without filterable columns -->
|
||||
<template v-else-if="rows.length === 0 && !hasFilterableColumns">
|
||||
<slot name="no-results">
|
||||
<p class="text-sm text-base-content/70 py-8 text-center">
|
||||
{{ noResultsMessage }}
|
||||
</p>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
|
||||
<template v-else>
|
||||
<div class="overflow-x-auto relative">
|
||||
<!-- Loading overlay (keeps table & filter inputs visible) -->
|
||||
<div
|
||||
v-if="loading && hasFilterableColumns"
|
||||
class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
|
||||
>
|
||||
<span class="loading loading-spinner" aria-hidden="true" />
|
||||
</div>
|
||||
<table :class="['table table-sm md:table-md', tableClass]">
|
||||
<thead>
|
||||
<!-- Header labels + sort -->
|
||||
<tr>
|
||||
<th
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
:class="[
|
||||
col.width,
|
||||
col.class,
|
||||
col.headerClass,
|
||||
alignClass(col),
|
||||
{ 'hidden sm:table-cell': col.hiddenMobile },
|
||||
]"
|
||||
>
|
||||
<slot :name="`header-${col.key}`" :column="col">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1',
|
||||
col.sortable ? 'cursor-pointer select-none hover:text-base-content' : '',
|
||||
]"
|
||||
@click="col.sortable && handleHeaderSort(col)"
|
||||
>
|
||||
{{ col.label }}
|
||||
<template v-if="col.sortable">
|
||||
<IconLucideChevronUp
|
||||
v-if="isSortedAsc(col)"
|
||||
class="h-3.5 w-3.5"
|
||||
aria-label="Trié croissant"
|
||||
/>
|
||||
<IconLucideChevronDown
|
||||
v-else-if="isSortedDesc(col)"
|
||||
class="h-3.5 w-3.5"
|
||||
aria-label="Trié décroissant"
|
||||
/>
|
||||
<IconLucideChevronsUpDown
|
||||
v-else
|
||||
class="h-3.5 w-3.5 opacity-30"
|
||||
aria-label="Triable"
|
||||
/>
|
||||
</template>
|
||||
</span>
|
||||
</slot>
|
||||
</th>
|
||||
<th v-if="expandable" class="w-12" />
|
||||
</tr>
|
||||
<!-- Filter inputs row -->
|
||||
<tr v-if="hasFilterableColumns">
|
||||
<th
|
||||
v-for="col in columns"
|
||||
:key="`filter-${col.key}`"
|
||||
class="p-1"
|
||||
:class="{ 'hidden sm:table-cell': col.hiddenMobile }"
|
||||
>
|
||||
<input
|
||||
v-if="col.filterable"
|
||||
type="text"
|
||||
class="input input-bordered input-xs w-full"
|
||||
:placeholder="col.filterPlaceholder || 'Filtrer…'"
|
||||
:value="columnFilters[col.key] ?? ''"
|
||||
@input="handleFilterInput(col.key, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</th>
|
||||
<th v-if="expandable" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- No results message (inside table to keep headers visible) -->
|
||||
<tr v-if="rows.length === 0">
|
||||
<td :colspan="expandable ? columns.length + 1 : columns.length" class="text-center py-8">
|
||||
<p class="text-sm text-base-content/70">
|
||||
{{ isEmpty ? emptyMessage : noResultsMessage }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-for="(row, idx) in rows" :key="getRowKey(row)">
|
||||
<tr>
|
||||
<td
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
:class="[
|
||||
col.class,
|
||||
alignClass(col),
|
||||
{ 'hidden sm:table-cell': col.hiddenMobile },
|
||||
]"
|
||||
>
|
||||
<slot :name="`cell-${col.key}`" :row="row" :column="col" :index="idx">
|
||||
{{ row[col.key] ?? '—' }}
|
||||
</slot>
|
||||
</td>
|
||||
<td v-if="expandable" class="text-center">
|
||||
<button
|
||||
v-if="!canExpand || canExpand(row)"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
@click="emit('toggle-expand', getRowKey(row))"
|
||||
>
|
||||
{{ isExpanded(row) ? 'Masquer' : 'Voir' }}
|
||||
</button>
|
||||
<span v-else class="text-xs text-base-content/50">—</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Expanded row -->
|
||||
<tr v-if="expandable && isExpanded(row)">
|
||||
<td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
|
||||
<slot name="row-expanded" :row="row" :index="idx" />
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<Pagination
|
||||
v-if="pagination && pagination.totalPages > 1"
|
||||
:current-page="pagination.currentPage"
|
||||
:total-pages="pagination.totalPages"
|
||||
@update:current-page="emit('update:currentPage', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { DataTableColumn, DataTableSort, DataTablePagination, DataTableColumnFilters } from '~/shared/types/dataTable'
|
||||
import Pagination from '~/components/common/Pagination.vue'
|
||||
import IconLucideChevronUp from '~icons/lucide/chevron-up'
|
||||
import IconLucideChevronDown from '~icons/lucide/chevron-down'
|
||||
import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
columns: DataTableColumn[]
|
||||
rows: any[]
|
||||
rowKey?: string
|
||||
loading?: boolean
|
||||
sort?: DataTableSort | null
|
||||
pagination?: DataTablePagination | null
|
||||
columnFilters?: DataTableColumnFilters
|
||||
emptyMessage?: string
|
||||
noResultsMessage?: string
|
||||
expandable?: boolean
|
||||
expandedKeys?: Set<string>
|
||||
canExpand?: (row: any) => boolean
|
||||
tableClass?: string
|
||||
showCounter?: boolean
|
||||
showPerPage?: boolean
|
||||
}>(), {
|
||||
rowKey: 'id',
|
||||
loading: false,
|
||||
sort: null,
|
||||
pagination: null,
|
||||
columnFilters: () => ({}),
|
||||
emptyMessage: 'Aucune donnée disponible.',
|
||||
noResultsMessage: 'Aucun résultat ne correspond à vos critères.',
|
||||
expandable: false,
|
||||
expandedKeys: () => new Set<string>(),
|
||||
canExpand: undefined,
|
||||
tableClass: '',
|
||||
showCounter: true,
|
||||
showPerPage: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'sort', sort: DataTableSort): void
|
||||
(e: 'update:currentPage', page: number): void
|
||||
(e: 'update:perPage', perPage: number): void
|
||||
(e: 'update:columnFilters', filters: DataTableColumnFilters): void
|
||||
(e: 'toggle-expand', key: string): void
|
||||
}>()
|
||||
|
||||
const hasFilterableColumns = computed(() =>
|
||||
props.columns.some(col => col.filterable),
|
||||
)
|
||||
|
||||
const isEmpty = computed(() => {
|
||||
if (props.pagination) {
|
||||
return props.pagination.totalItems === 0
|
||||
}
|
||||
return props.rows.length === 0
|
||||
})
|
||||
|
||||
const getRowKey = (row: any): string => {
|
||||
return String(row[props.rowKey] ?? '')
|
||||
}
|
||||
|
||||
const isExpanded = (row: any): boolean => {
|
||||
return props.expandedKeys?.has(getRowKey(row)) ?? false
|
||||
}
|
||||
|
||||
const sortKeyForColumn = (col: DataTableColumn): string => {
|
||||
return col.sortKey ?? col.key
|
||||
}
|
||||
|
||||
const isSortedAsc = (col: DataTableColumn): boolean => {
|
||||
return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'asc'
|
||||
}
|
||||
|
||||
const isSortedDesc = (col: DataTableColumn): boolean => {
|
||||
return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'desc'
|
||||
}
|
||||
|
||||
const handleHeaderSort = (col: DataTableColumn) => {
|
||||
const key = sortKeyForColumn(col)
|
||||
const currentDirection = props.sort?.field === key ? props.sort.direction : null
|
||||
|
||||
emit('sort', {
|
||||
field: key,
|
||||
direction: currentDirection === 'asc' ? 'desc' : 'asc',
|
||||
})
|
||||
}
|
||||
|
||||
let filterDebounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const handleFilterInput = (key: string, value: string) => {
|
||||
if (filterDebounceTimer) clearTimeout(filterDebounceTimer)
|
||||
filterDebounceTimer = setTimeout(() => {
|
||||
const updated = { ...props.columnFilters, [key]: value }
|
||||
// Remove empty filter keys
|
||||
for (const k of Object.keys(updated)) {
|
||||
if (!updated[k]) delete updated[k]
|
||||
}
|
||||
emit('update:columnFilters', updated)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const alignClass = (col: DataTableColumn): string => {
|
||||
if (col.align === 'center') return 'text-center'
|
||||
if (col.align === 'right') return 'text-right'
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
@@ -9,35 +9,95 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<ModelTypesToolbar
|
||||
:category="selectedCategory"
|
||||
:search="searchInput"
|
||||
:sort="sort"
|
||||
:dir="dir"
|
||||
:loading="loading"
|
||||
:show-category-tabs="allowCategorySwitch"
|
||||
:can-edit="canEdit"
|
||||
@update:category="onCategoryChange"
|
||||
@update:search="onSearchInput"
|
||||
@update:sort="onSortChange"
|
||||
@update:dir="onDirChange"
|
||||
@create="openCreatePage"
|
||||
/>
|
||||
<nav
|
||||
v-if="allowCategorySwitch"
|
||||
class="tabs tabs-boxed inline-flex"
|
||||
role="tablist"
|
||||
aria-label="Catégories"
|
||||
>
|
||||
<button
|
||||
v-for="option in categories"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
class="tab"
|
||||
:class="{ 'tab-active': option.value === selectedCategory }"
|
||||
role="tab"
|
||||
:aria-selected="option.value === selectedCategory"
|
||||
@click="onCategoryChange(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<ModelTypesTable
|
||||
:items="items"
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:rows="items"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:limit="limit"
|
||||
:offset="offset"
|
||||
:category="selectedCategory"
|
||||
:can-edit="canEdit"
|
||||
@related="openRelatedModal"
|
||||
@edit="openEditPage"
|
||||
@delete="confirmDelete"
|
||||
@convert="openConversionModal"
|
||||
@update:offset="onOffsetChange"
|
||||
/>
|
||||
:sort="currentSort"
|
||||
:pagination="paginationState"
|
||||
:show-per-page="true"
|
||||
row-key="id"
|
||||
empty-message="Aucune catégorie trouvée."
|
||||
no-results-message="Aucune catégorie ne correspond à votre recherche."
|
||||
@sort="handleSort"
|
||||
@update:current-page="handlePageChange"
|
||||
@update:per-page="handlePerPageChange"
|
||||
>
|
||||
<template #toolbar>
|
||||
<label class="input input-bordered flex items-center gap-2 w-full sm:w-72" :aria-busy="loading">
|
||||
<IconLucideSearch class="w-4 h-4" aria-hidden="true" />
|
||||
<input
|
||||
v-model="searchInput"
|
||||
type="search"
|
||||
class="grow min-w-0"
|
||||
placeholder="Rechercher par nom…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="loading"
|
||||
@click="openCreatePage"
|
||||
>
|
||||
<IconLucidePlus class="w-4 h-4" aria-hidden="true" />
|
||||
Créer
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #cell-name="{ row }">
|
||||
<span class="font-medium">{{ row.name }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-notes="{ row }">
|
||||
<span v-if="row.notes" class="block text-sm text-base-content/80 break-words">{{ row.notes }}</span>
|
||||
<span v-else class="text-base-content/50">—</span>
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="openRelatedModal(row)">
|
||||
Liés
|
||||
</button>
|
||||
<button
|
||||
v-if="canEdit && showConvertButton"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs text-warning"
|
||||
@click="openConversionModal(row)"
|
||||
>
|
||||
Convertir
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="openEditPage(row)">
|
||||
Éditer
|
||||
</button>
|
||||
<button v-if="canEdit" type="button" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ModelTypesConversionModal
|
||||
:open="conversionModalOpen"
|
||||
@@ -57,7 +117,7 @@
|
||||
|
||||
<div class="mt-4 rounded-xl border border-base-200 bg-base-100">
|
||||
<div v-if="relatedLoading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
|
||||
<span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
|
||||
<span class="loading loading-spinner loading-sm" aria-hidden="true" />
|
||||
Chargement des éléments liés…
|
||||
</div>
|
||||
|
||||
@@ -103,44 +163,46 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
|
||||
import { useHead, useRouter } from "#imports";
|
||||
import ModelTypesToolbar from "~/components/model-types/Toolbar.vue";
|
||||
import ModelTypesTable from "~/components/model-types/Table.vue";
|
||||
import ModelTypesConversionModal from "~/components/model-types/ConversionModal.vue";
|
||||
import { useApi } from "~/composables/useApi";
|
||||
import { useUrlState } from "~/composables/useUrlState";
|
||||
import { extractCollection } from "~/shared/utils/apiHelpers";
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
|
||||
import { useHead, useRouter } from '#imports'
|
||||
import DataTable from '~/components/common/DataTable.vue'
|
||||
import ModelTypesConversionModal from '~/components/model-types/ConversionModal.vue'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useUrlState } from '~/composables/useUrlState'
|
||||
import { extractCollection } from '~/shared/utils/apiHelpers'
|
||||
import type { DataTableSort } from '~/shared/types/dataTable'
|
||||
import {
|
||||
deleteModelType,
|
||||
listModelTypes,
|
||||
type ModelCategory,
|
||||
type ModelType,
|
||||
type ModelTypeListResponse,
|
||||
} from "~/services/modelTypes";
|
||||
import { useToast } from "~/composables/useToast";
|
||||
import { humanizeError } from "~/shared/utils/errorMessages";
|
||||
import { invalidateEntityTypeCache } from "~/composables/useEntityTypes";
|
||||
} from '~/services/modelTypes'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { humanizeError } from '~/shared/utils/errorMessages'
|
||||
import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
|
||||
import IconLucideSearch from '~icons/lucide/search'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
|
||||
const DEFAULT_DESCRIPTION =
|
||||
"Gérez les catégories utilisées pour structurer les catalogues de composants, de pièces et de produits. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.";
|
||||
const DEFAULT_DESCRIPTION
|
||||
= 'Gérez les catégories utilisées pour structurer les catalogues de composants, de pièces et de produits. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
category: ModelCategory;
|
||||
heading: string;
|
||||
description?: string;
|
||||
allowCategorySwitch?: boolean;
|
||||
category: ModelCategory
|
||||
heading: string
|
||||
description?: string
|
||||
allowCategorySwitch?: boolean
|
||||
}>(),
|
||||
{
|
||||
allowCategorySwitch: false,
|
||||
}
|
||||
);
|
||||
},
|
||||
)
|
||||
|
||||
const selectedCategory = ref<ModelCategory>(props.category);
|
||||
const searchInput = ref("");
|
||||
const selectedCategory = ref<ModelCategory>(props.category)
|
||||
const searchInput = ref('')
|
||||
|
||||
// State synced with URL query params (preserved on back/forward navigation)
|
||||
// State synced with URL query params
|
||||
const urlState = useUrlState({
|
||||
q: { default: '' },
|
||||
sort: { default: 'name' },
|
||||
@@ -149,77 +211,126 @@ const urlState = useUrlState({
|
||||
offset: { default: 0, type: 'number' },
|
||||
}, {
|
||||
onRestore: () => {
|
||||
searchInput.value = urlState.q.value;
|
||||
refresh();
|
||||
searchInput.value = urlState.q.value
|
||||
doRefresh()
|
||||
},
|
||||
});
|
||||
const searchTerm = urlState.q;
|
||||
const sort = urlState.sort as Ref<'name' | 'createdAt'>;
|
||||
const dir = urlState.dir as Ref<'asc' | 'desc'>;
|
||||
const limit = urlState.limit;
|
||||
const offset = urlState.offset;
|
||||
})
|
||||
const searchTerm = urlState.q
|
||||
const sort = urlState.sort as Ref<'name' | 'createdAt'>
|
||||
const dir = urlState.dir as Ref<'asc' | 'desc'>
|
||||
const limit = urlState.limit
|
||||
const offset = urlState.offset
|
||||
|
||||
// Initialize searchInput from URL (for direct navigation with ?q=...)
|
||||
searchInput.value = searchTerm.value;
|
||||
// Initialize searchInput from URL
|
||||
searchInput.value = searchTerm.value
|
||||
|
||||
const items = ref<ModelType[]>([]);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const items = ref<ModelType[]>([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let activeController: AbortController | null = null;
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let activeController: AbortController | null = null
|
||||
|
||||
const router = useRouter();
|
||||
const { showError, showSuccess } = useToast();
|
||||
const { get } = useApi();
|
||||
const { canEdit } = usePermissions();
|
||||
const router = useRouter()
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { get } = useApi()
|
||||
const { canEdit } = usePermissions()
|
||||
|
||||
const headingText = computed(() => props.heading);
|
||||
const descriptionText = computed(
|
||||
() => props.description ?? DEFAULT_DESCRIPTION
|
||||
);
|
||||
const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false);
|
||||
const headingText = computed(() => props.heading)
|
||||
const descriptionText = computed(() => props.description ?? DEFAULT_DESCRIPTION)
|
||||
const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false)
|
||||
|
||||
useHead(() => ({
|
||||
title: headingText.value,
|
||||
}));
|
||||
useHead(() => ({ title: headingText.value }))
|
||||
|
||||
const columns = [
|
||||
{ key: 'name', label: 'Nom', sortable: true },
|
||||
{ key: 'notes', label: 'Notes' },
|
||||
{ key: 'actions', label: 'Actions', align: 'right' as const, width: 'w-48' },
|
||||
]
|
||||
|
||||
const showConvertButton = computed(() =>
|
||||
selectedCategory.value === 'PIECE' || selectedCategory.value === 'COMPONENT',
|
||||
)
|
||||
|
||||
const categories: Array<{ label: string, value: ModelCategory }> = [
|
||||
{ label: 'Composants', value: 'COMPONENT' },
|
||||
{ label: 'Pièces', value: 'PIECE' },
|
||||
{ label: 'Produits', value: 'PRODUCT' },
|
||||
]
|
||||
|
||||
// Sort state for DataTable
|
||||
const currentSort = computed<DataTableSort>(() => ({
|
||||
field: sort.value,
|
||||
direction: dir.value,
|
||||
}))
|
||||
|
||||
const handleSort = (newSort: DataTableSort) => {
|
||||
sort.value = newSort.field as 'name' | 'createdAt'
|
||||
dir.value = newSort.direction as 'asc' | 'desc'
|
||||
offset.value = 0
|
||||
doRefresh()
|
||||
}
|
||||
|
||||
// Pagination: convert offset/limit to page-based for DataTable
|
||||
const currentPage = computed(() => {
|
||||
if (limit.value <= 0) return 1
|
||||
return Math.floor(offset.value / limit.value) + 1
|
||||
})
|
||||
|
||||
const totalPages = computed(() => {
|
||||
if (limit.value <= 0) return 1
|
||||
return Math.max(1, Math.ceil(total.value / limit.value))
|
||||
})
|
||||
|
||||
const paginationState = computed(() => ({
|
||||
currentPage: currentPage.value,
|
||||
totalPages: totalPages.value,
|
||||
totalItems: total.value,
|
||||
pageItems: items.value.length,
|
||||
perPageOptions: [20, 50, 100],
|
||||
perPage: limit.value,
|
||||
}))
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
offset.value = (page - 1) * limit.value
|
||||
doRefresh()
|
||||
}
|
||||
|
||||
const handlePerPageChange = (perPage: number) => {
|
||||
limit.value = perPage
|
||||
offset.value = 0
|
||||
doRefresh()
|
||||
}
|
||||
|
||||
const extractErrorMessage = (error: unknown): string => {
|
||||
let raw: string | null = null;
|
||||
if (error && typeof error === "object") {
|
||||
let raw: string | null = null
|
||||
if (error && typeof error === 'object') {
|
||||
const maybeFetchError = error as {
|
||||
data?: Record<string, unknown>;
|
||||
statusMessage?: string;
|
||||
message?: string;
|
||||
};
|
||||
if (maybeFetchError.data) {
|
||||
const data = maybeFetchError.data;
|
||||
if (typeof data['hydra:description'] === "string") raw = data['hydra:description'];
|
||||
else if (typeof data.detail === "string") raw = data.detail;
|
||||
else if (typeof data.message === "string") raw = data.message;
|
||||
else if (Array.isArray(data.message) && data.message.length > 0) raw = data.message[0];
|
||||
else if (typeof data.error === "string") raw = data.error;
|
||||
data?: Record<string, unknown>
|
||||
statusMessage?: string
|
||||
message?: string
|
||||
}
|
||||
if (!raw && typeof maybeFetchError.statusMessage === "string") raw = maybeFetchError.statusMessage;
|
||||
if (!raw && typeof maybeFetchError.message === "string") raw = maybeFetchError.message;
|
||||
if (maybeFetchError.data) {
|
||||
const data = maybeFetchError.data
|
||||
if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
|
||||
else if (typeof data.detail === 'string') raw = data.detail
|
||||
else if (typeof data.message === 'string') raw = data.message
|
||||
else if (Array.isArray(data.message) && data.message.length > 0) raw = data.message[0]
|
||||
else if (typeof data.error === 'string') raw = data.error
|
||||
}
|
||||
if (!raw && typeof maybeFetchError.statusMessage === 'string') raw = maybeFetchError.statusMessage
|
||||
if (!raw && typeof maybeFetchError.message === 'string') raw = maybeFetchError.message
|
||||
}
|
||||
return humanizeError(raw);
|
||||
};
|
||||
return humanizeError(raw)
|
||||
}
|
||||
|
||||
const refresh = async ({
|
||||
resetOffset = false,
|
||||
}: { resetOffset?: boolean } = {}) => {
|
||||
if (resetOffset) {
|
||||
offset.value = 0;
|
||||
}
|
||||
const doRefresh = async ({ resetOffset = false }: { resetOffset?: boolean } = {}) => {
|
||||
if (resetOffset) offset.value = 0
|
||||
|
||||
if (activeController) {
|
||||
activeController.abort();
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
activeController = controller;
|
||||
loading.value = true;
|
||||
if (activeController) activeController.abort()
|
||||
const controller = new AbortController()
|
||||
activeController = controller
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const response: ModelTypeListResponse = await listModelTypes(
|
||||
@@ -231,312 +342,236 @@ const refresh = async ({
|
||||
limit: limit.value,
|
||||
offset: offset.value,
|
||||
},
|
||||
{ signal: controller.signal }
|
||||
);
|
||||
|
||||
items.value = response.items;
|
||||
total.value = response.total;
|
||||
offset.value = response.offset;
|
||||
limit.value = response.limit;
|
||||
} catch (error: unknown) {
|
||||
if (error && typeof error === "object" && (error as { name?: string }).name === "AbortError") {
|
||||
return;
|
||||
}
|
||||
showError(extractErrorMessage(error));
|
||||
} finally {
|
||||
{ signal: controller.signal },
|
||||
)
|
||||
items.value = response.items
|
||||
total.value = response.total
|
||||
offset.value = response.offset
|
||||
limit.value = response.limit
|
||||
}
|
||||
catch (error: unknown) {
|
||||
if (error && typeof error === 'object' && (error as { name?: string }).name === 'AbortError') return
|
||||
showError(extractErrorMessage(error))
|
||||
}
|
||||
finally {
|
||||
if (activeController === controller) {
|
||||
loading.value = false;
|
||||
activeController = null;
|
||||
loading.value = false
|
||||
activeController = null
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.category,
|
||||
(value) => {
|
||||
if (value !== selectedCategory.value) {
|
||||
selectedCategory.value = value;
|
||||
refresh({ resetOffset: true });
|
||||
selectedCategory.value = value
|
||||
doRefresh({ resetOffset: true })
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const onSearchInput = (value: string) => {
|
||||
searchInput.value = value;
|
||||
};
|
||||
},
|
||||
)
|
||||
|
||||
const onCategoryChange = (value: ModelCategory) => {
|
||||
if (!allowCategorySwitch.value) {
|
||||
return;
|
||||
}
|
||||
if (!props.allowCategorySwitch) return
|
||||
if (selectedCategory.value !== value) {
|
||||
selectedCategory.value = value;
|
||||
refresh({ resetOffset: true });
|
||||
selectedCategory.value = value
|
||||
doRefresh({ resetOffset: true })
|
||||
}
|
||||
};
|
||||
|
||||
const onSortChange = (value: "name" | "createdAt") => {
|
||||
if (sort.value !== value) {
|
||||
sort.value = value;
|
||||
refresh({ resetOffset: true });
|
||||
}
|
||||
};
|
||||
|
||||
const onDirChange = (value: "asc" | "desc") => {
|
||||
if (dir.value !== value) {
|
||||
dir.value = value;
|
||||
refresh({ resetOffset: true });
|
||||
}
|
||||
};
|
||||
|
||||
const onOffsetChange = (value: number) => {
|
||||
const nextOffset = Math.max(0, value);
|
||||
if (nextOffset !== offset.value) {
|
||||
offset.value = nextOffset;
|
||||
refresh();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const resolveCategoryBasePath = (category: ModelCategory) => {
|
||||
if (category === "COMPONENT") {
|
||||
return "/component-category";
|
||||
}
|
||||
if (category === "PIECE") {
|
||||
return "/piece-category";
|
||||
}
|
||||
return "/product-category";
|
||||
};
|
||||
if (category === 'COMPONENT') return '/component-category'
|
||||
if (category === 'PIECE') return '/piece-category'
|
||||
return '/product-category'
|
||||
}
|
||||
|
||||
const openCreatePage = () => {
|
||||
const basePath = resolveCategoryBasePath(selectedCategory.value);
|
||||
const basePath = resolveCategoryBasePath(selectedCategory.value)
|
||||
router.push(`${basePath}/new`).catch(() => {
|
||||
showError("Navigation impossible vers la page de création.");
|
||||
});
|
||||
};
|
||||
showError('Navigation impossible vers la page de création.')
|
||||
})
|
||||
}
|
||||
|
||||
const openEditPage = (item: ModelType) => {
|
||||
const category = item.category ?? selectedCategory.value;
|
||||
const basePath = resolveCategoryBasePath(category);
|
||||
const category = item.category ?? selectedCategory.value
|
||||
const basePath = resolveCategoryBasePath(category)
|
||||
router.push(`${basePath}/${item.id}/edit`).catch(() => {
|
||||
showError("Navigation impossible vers la page d'édition.");
|
||||
});
|
||||
};
|
||||
showError("Navigation impossible vers la page d'édition.")
|
||||
})
|
||||
}
|
||||
|
||||
const { confirm } = useConfirm()
|
||||
|
||||
const confirmDelete = async (item: ModelType) => {
|
||||
const confirmed = await confirm({
|
||||
message: 'Supprimer ce type ? Cette action est irréversible.',
|
||||
});
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
})
|
||||
if (!confirmed) return
|
||||
|
||||
try {
|
||||
await deleteModelType(item.id);
|
||||
invalidateEntityTypeCache(item.category);
|
||||
showSuccess(`Type « ${item.name} » supprimé avec succès.`);
|
||||
|
||||
await deleteModelType(item.id)
|
||||
invalidateEntityTypeCache(item.category)
|
||||
showSuccess(`Type « ${item.name} » supprimé avec succès.`)
|
||||
if (items.value.length === 1 && offset.value >= limit.value) {
|
||||
offset.value = Math.max(0, offset.value - limit.value);
|
||||
offset.value = Math.max(0, offset.value - limit.value)
|
||||
}
|
||||
|
||||
await refresh();
|
||||
} catch (error) {
|
||||
showError(extractErrorMessage(error));
|
||||
await doRefresh()
|
||||
}
|
||||
};
|
||||
catch (error) {
|
||||
showError(extractErrorMessage(error))
|
||||
}
|
||||
}
|
||||
|
||||
type RelatedEntry = {
|
||||
id: string;
|
||||
name: string;
|
||||
reference?: string | null;
|
||||
};
|
||||
id: string
|
||||
name: string
|
||||
reference?: string | null
|
||||
}
|
||||
|
||||
const relatedModalOpen = ref(false);
|
||||
const relatedLoading = ref(false);
|
||||
const relatedError = ref<string | null>(null);
|
||||
const relatedItems = ref<RelatedEntry[]>([]);
|
||||
const relatedType = ref<ModelType | null>(null);
|
||||
const relatedModalOpen = ref(false)
|
||||
const relatedLoading = ref(false)
|
||||
const relatedError = ref<string | null>(null)
|
||||
const relatedItems = ref<RelatedEntry[]>([])
|
||||
const relatedType = ref<ModelType | null>(null)
|
||||
|
||||
const relatedCategoryLabels: Record<
|
||||
ModelCategory,
|
||||
{ plural: string; singular: string }
|
||||
> = {
|
||||
COMPONENT: { plural: "composants", singular: "composant" },
|
||||
PIECE: { plural: "pièces", singular: "pièce" },
|
||||
PRODUCT: { plural: "produits", singular: "produit" },
|
||||
};
|
||||
const relatedCategoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
|
||||
COMPONENT: { plural: 'composants', singular: 'composant' },
|
||||
PIECE: { plural: 'pièces', singular: 'pièce' },
|
||||
PRODUCT: { plural: 'produits', singular: 'produit' },
|
||||
}
|
||||
|
||||
const relatedModalTitle = computed(() => {
|
||||
const current = relatedType.value;
|
||||
if (!current) {
|
||||
return "Éléments liés";
|
||||
}
|
||||
return `Éléments liés à « ${current.name} »`;
|
||||
});
|
||||
const current = relatedType.value
|
||||
if (!current) return 'Éléments liés'
|
||||
return `Éléments liés à « ${current.name} »`
|
||||
})
|
||||
|
||||
const relatedModalSubtitle = computed(() => {
|
||||
const current = relatedType.value;
|
||||
if (!current) {
|
||||
return "";
|
||||
}
|
||||
const labels =
|
||||
relatedCategoryLabels[current.category] ?? relatedCategoryLabels.COMPONENT;
|
||||
const count = relatedItems.value.length;
|
||||
if (relatedLoading.value) {
|
||||
return `Chargement des ${labels.plural}…`;
|
||||
}
|
||||
if (count === 0) {
|
||||
return `Aucun ${labels.singular} lié.`;
|
||||
}
|
||||
if (count === 1) {
|
||||
return `1 ${labels.singular} lié.`;
|
||||
}
|
||||
return `${count} ${labels.plural} liés.`;
|
||||
});
|
||||
const current = relatedType.value
|
||||
if (!current) return ''
|
||||
const labels = relatedCategoryLabels[current.category] ?? relatedCategoryLabels.COMPONENT
|
||||
const count = relatedItems.value.length
|
||||
if (relatedLoading.value) return `Chargement des ${labels.plural}…`
|
||||
if (count === 0) return `Aucun ${labels.singular} lié.`
|
||||
if (count === 1) return `1 ${labels.singular} lié.`
|
||||
return `${count} ${labels.plural} liés.`
|
||||
})
|
||||
|
||||
const buildModelTypeIri = (id: string) => `/api/model_types/${id}`;
|
||||
const buildModelTypeIri = (id: string) => `/api/model_types/${id}`
|
||||
|
||||
const resolveRelatedConfig = (category: ModelCategory) => {
|
||||
if (category === "COMPONENT") {
|
||||
return { endpoint: "/composants", filterKey: "typeComposant" };
|
||||
}
|
||||
if (category === "PIECE") {
|
||||
return { endpoint: "/pieces", filterKey: "typePiece" };
|
||||
}
|
||||
return { endpoint: "/products", filterKey: "typeProduct" };
|
||||
};
|
||||
if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
|
||||
if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
|
||||
return { endpoint: '/products', filterKey: 'typeProduct' }
|
||||
}
|
||||
|
||||
const resolveRelatedEditBasePath = (category: ModelCategory) => {
|
||||
if (category === "COMPONENT") {
|
||||
return "/component";
|
||||
}
|
||||
if (category === "PIECE") {
|
||||
return "/pieces";
|
||||
}
|
||||
return "/product";
|
||||
};
|
||||
if (category === 'COMPONENT') return '/component'
|
||||
if (category === 'PIECE') return '/pieces'
|
||||
return '/product'
|
||||
}
|
||||
|
||||
const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
|
||||
if (!item || typeof item !== "object") {
|
||||
return null;
|
||||
}
|
||||
const record = item as Record<string, unknown>;
|
||||
if (typeof record.id !== "string") {
|
||||
return null;
|
||||
}
|
||||
const name =
|
||||
typeof record.name === "string" && record.name.trim()
|
||||
? record.name
|
||||
: "Sans nom";
|
||||
const reference =
|
||||
typeof record.reference === "string" && record.reference.trim()
|
||||
if (!item || typeof item !== 'object') return null
|
||||
const record = item as Record<string, unknown>
|
||||
if (typeof record.id !== 'string') return null
|
||||
const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
|
||||
const reference
|
||||
= typeof record.reference === 'string' && record.reference.trim()
|
||||
? record.reference
|
||||
: typeof record.code === "string" && record.code.trim()
|
||||
: typeof record.code === 'string' && record.code.trim()
|
||||
? record.code
|
||||
: null;
|
||||
return {
|
||||
id: record.id,
|
||||
name,
|
||||
reference,
|
||||
};
|
||||
};
|
||||
: null
|
||||
return { id: record.id, name, reference }
|
||||
}
|
||||
|
||||
const loadRelatedItems = async (item: ModelType) => {
|
||||
const { endpoint, filterKey } = resolveRelatedConfig(item.category);
|
||||
const params = new URLSearchParams();
|
||||
params.set("itemsPerPage", "200");
|
||||
params.set(filterKey, buildModelTypeIri(item.id));
|
||||
params.set("order[name]", "asc");
|
||||
const { endpoint, filterKey } = resolveRelatedConfig(item.category)
|
||||
const params = new URLSearchParams()
|
||||
params.set('itemsPerPage', '200')
|
||||
params.set(filterKey, buildModelTypeIri(item.id))
|
||||
params.set('order[name]', 'asc')
|
||||
|
||||
relatedLoading.value = true;
|
||||
relatedError.value = null;
|
||||
relatedItems.value = [];
|
||||
relatedLoading.value = true
|
||||
relatedError.value = null
|
||||
relatedItems.value = []
|
||||
|
||||
try {
|
||||
const result = await get(`${endpoint}?${params.toString()}`);
|
||||
const result = await get(`${endpoint}?${params.toString()}`)
|
||||
if (!result.success) {
|
||||
relatedError.value =
|
||||
result.error ?? "Impossible de charger les éléments liés.";
|
||||
return;
|
||||
relatedError.value = result.error ?? 'Impossible de charger les éléments liés.'
|
||||
return
|
||||
}
|
||||
const collection = extractCollection(result.data);
|
||||
const collection = extractCollection(result.data)
|
||||
relatedItems.value = collection
|
||||
.map(mapRelatedEntry)
|
||||
.filter((entry): entry is RelatedEntry => Boolean(entry));
|
||||
} catch (error) {
|
||||
relatedError.value = extractErrorMessage(error);
|
||||
} finally {
|
||||
relatedLoading.value = false;
|
||||
.filter((entry): entry is RelatedEntry => Boolean(entry))
|
||||
}
|
||||
};
|
||||
catch (error) {
|
||||
relatedError.value = extractErrorMessage(error)
|
||||
}
|
||||
finally {
|
||||
relatedLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const openRelatedModal = (item: ModelType) => {
|
||||
relatedType.value = item;
|
||||
relatedModalOpen.value = true;
|
||||
void loadRelatedItems(item);
|
||||
};
|
||||
relatedType.value = item
|
||||
relatedModalOpen.value = true
|
||||
void loadRelatedItems(item)
|
||||
}
|
||||
|
||||
const openRelatedEdit = (entry: RelatedEntry) => {
|
||||
const current = relatedType.value;
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
const basePath = resolveRelatedEditBasePath(current.category);
|
||||
relatedModalOpen.value = false;
|
||||
const current = relatedType.value
|
||||
if (!current) return
|
||||
const basePath = resolveRelatedEditBasePath(current.category)
|
||||
relatedModalOpen.value = false
|
||||
router.push(`${basePath}/${entry.id}/edit`).catch(() => {
|
||||
showError("Navigation impossible vers la fiche d'édition.");
|
||||
});
|
||||
};
|
||||
showError("Navigation impossible vers la fiche d'édition.")
|
||||
})
|
||||
}
|
||||
|
||||
const closeRelatedModal = () => {
|
||||
relatedModalOpen.value = false;
|
||||
};
|
||||
relatedModalOpen.value = false
|
||||
}
|
||||
|
||||
const conversionModalOpen = ref(false);
|
||||
const conversionTarget = ref<ModelType | null>(null);
|
||||
const conversionModalOpen = ref(false)
|
||||
const conversionTarget = ref<ModelType | null>(null)
|
||||
|
||||
const openConversionModal = (item: ModelType) => {
|
||||
conversionTarget.value = item;
|
||||
conversionModalOpen.value = true;
|
||||
};
|
||||
conversionTarget.value = item
|
||||
conversionModalOpen.value = true
|
||||
}
|
||||
|
||||
const closeConversionModal = () => {
|
||||
conversionModalOpen.value = false;
|
||||
};
|
||||
conversionModalOpen.value = false
|
||||
}
|
||||
|
||||
const onConverted = () => {
|
||||
conversionModalOpen.value = false;
|
||||
invalidateEntityTypeCache("PIECE");
|
||||
invalidateEntityTypeCache("COMPONENT");
|
||||
showSuccess("Catégorie convertie avec succès.");
|
||||
refresh();
|
||||
};
|
||||
conversionModalOpen.value = false
|
||||
invalidateEntityTypeCache('PIECE')
|
||||
invalidateEntityTypeCache('COMPONENT')
|
||||
showSuccess('Catégorie convertie avec succès.')
|
||||
doRefresh()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => searchInput.value,
|
||||
(value) => {
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer);
|
||||
}
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
searchTerm.value = value.trim();
|
||||
refresh({ resetOffset: true });
|
||||
}, 300);
|
||||
}
|
||||
);
|
||||
searchTerm.value = value.trim()
|
||||
doRefresh({ resetOffset: true })
|
||||
}, 300)
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
doRefresh()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer);
|
||||
}
|
||||
if (activeController) {
|
||||
activeController.abort();
|
||||
}
|
||||
});
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
if (activeController) activeController.abort()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user