frontend: remove legacy model-types page
This commit is contained in:
Matthieu
@@ -1,286 +0,0 @@
|
|||||||
<template>
|
|
||||||
<main class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
|
|
||||||
<header class="space-y-2">
|
|
||||||
<p class="text-sm uppercase tracking-wide text-primary">Administration</p>
|
|
||||||
<h1 class="text-3xl font-bold text-base-content">{{ heading }}</h1>
|
|
||||||
<p class="text-base text-base-content/70">
|
|
||||||
Gérez les catégories utilisées pour structurer les catalogues de composants et de pièces. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<ModelTypesToolbar
|
|
||||||
:category="category"
|
|
||||||
:search="searchInput"
|
|
||||||
:sort="sort"
|
|
||||||
:dir="dir"
|
|
||||||
:loading="loading || saving"
|
|
||||||
@update:category="onCategoryChange"
|
|
||||||
@update:search="onSearchInput"
|
|
||||||
@update:sort="onSortChange"
|
|
||||||
@update:dir="onDirChange"
|
|
||||||
@create="openCreateModal"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ModelTypesTable
|
|
||||||
:items="items"
|
|
||||||
:loading="loading"
|
|
||||||
:total="total"
|
|
||||||
:limit="limit"
|
|
||||||
:offset="offset"
|
|
||||||
@edit="openEditModal"
|
|
||||||
@delete="confirmDelete"
|
|
||||||
@update:offset="onOffsetChange"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<EditModal
|
|
||||||
:visible="isModalOpen"
|
|
||||||
:mode="modalMode"
|
|
||||||
:initial-category="category"
|
|
||||||
:initial-data="modalInitialData"
|
|
||||||
:saving="saving"
|
|
||||||
@close="closeModal"
|
|
||||||
@save="handleSave"
|
|
||||||
/>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|
||||||
import { useHead } from '#imports';
|
|
||||||
import ModelTypesToolbar from '~/components/model-types/Toolbar.vue';
|
|
||||||
import ModelTypesTable from '~/components/model-types/Table.vue';
|
|
||||||
import EditModal from '~/components/model-types/EditModal.vue';
|
|
||||||
import {
|
|
||||||
createModelType,
|
|
||||||
deleteModelType,
|
|
||||||
listModelTypes,
|
|
||||||
updateModelType,
|
|
||||||
type ModelCategory,
|
|
||||||
type ModelType,
|
|
||||||
type ModelTypeListResponse,
|
|
||||||
type ModelTypePayload,
|
|
||||||
} from '~/services/modelTypes';
|
|
||||||
import { useToast } from '~/composables/useToast';
|
|
||||||
|
|
||||||
const category = ref<ModelCategory>('COMPONENT');
|
|
||||||
const searchInput = ref('');
|
|
||||||
const searchTerm = ref('');
|
|
||||||
const sort = ref<'name' | 'code' | 'createdAt'>('createdAt');
|
|
||||||
const dir = ref<'asc' | 'desc'>('desc');
|
|
||||||
const limit = ref(20);
|
|
||||||
const offset = ref(0);
|
|
||||||
|
|
||||||
const items = ref<ModelType[]>([]);
|
|
||||||
const total = ref(0);
|
|
||||||
const loading = ref(false);
|
|
||||||
const saving = ref(false);
|
|
||||||
|
|
||||||
const isModalOpen = ref(false);
|
|
||||||
const modalMode = ref<'create' | 'edit'>('create');
|
|
||||||
const modalInitialData = ref<Partial<ModelTypePayload> | null>(null);
|
|
||||||
const editingId = ref<string | null>(null);
|
|
||||||
|
|
||||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
|
||||||
let activeController: AbortController | null = null;
|
|
||||||
|
|
||||||
const { showError, showSuccess } = useToast();
|
|
||||||
|
|
||||||
const heading = computed(() => (category.value === 'COMPONENT' ? 'Catégorie de composant' : 'Catégorie de pièce'));
|
|
||||||
|
|
||||||
useHead(() => ({
|
|
||||||
title: heading.value,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const extractErrorMessage = (error: unknown) => {
|
|
||||||
if (error && typeof error === 'object') {
|
|
||||||
const maybeFetchError = error as { data?: any; statusMessage?: string; message?: string };
|
|
||||||
if (maybeFetchError.data) {
|
|
||||||
const data = maybeFetchError.data;
|
|
||||||
if (typeof data.message === 'string') {
|
|
||||||
return data.message;
|
|
||||||
}
|
|
||||||
if (Array.isArray(data.message) && data.message.length > 0) {
|
|
||||||
return data.message[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (typeof maybeFetchError.statusMessage === 'string') {
|
|
||||||
return maybeFetchError.statusMessage;
|
|
||||||
}
|
|
||||||
if (typeof maybeFetchError.message === 'string') {
|
|
||||||
return maybeFetchError.message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 'Une erreur est survenue lors de la communication avec le serveur.';
|
|
||||||
};
|
|
||||||
|
|
||||||
const refresh = async ({ resetOffset = false }: { resetOffset?: boolean } = {}) => {
|
|
||||||
if (resetOffset) {
|
|
||||||
offset.value = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeController) {
|
|
||||||
activeController.abort();
|
|
||||||
}
|
|
||||||
|
|
||||||
const controller = new AbortController();
|
|
||||||
activeController = controller;
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response: ModelTypeListResponse = await listModelTypes(
|
|
||||||
{
|
|
||||||
q: searchTerm.value || undefined,
|
|
||||||
category: category.value,
|
|
||||||
sort: sort.value,
|
|
||||||
dir: dir.value,
|
|
||||||
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: any) {
|
|
||||||
if (error?.name === 'AbortError') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
showError(extractErrorMessage(error));
|
|
||||||
} finally {
|
|
||||||
if (activeController === controller) {
|
|
||||||
loading.value = false;
|
|
||||||
activeController = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSearchInput = (value: string) => {
|
|
||||||
searchInput.value = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onCategoryChange = (value: ModelCategory) => {
|
|
||||||
if (category.value !== value) {
|
|
||||||
category.value = value;
|
|
||||||
refresh({ resetOffset: true });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSortChange = (value: 'name' | 'code' | '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 openCreateModal = () => {
|
|
||||||
modalMode.value = 'create';
|
|
||||||
modalInitialData.value = null;
|
|
||||||
editingId.value = null;
|
|
||||||
isModalOpen.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const openEditModal = (item: ModelType) => {
|
|
||||||
modalMode.value = 'edit';
|
|
||||||
editingId.value = item.id;
|
|
||||||
modalInitialData.value = {
|
|
||||||
name: item.name,
|
|
||||||
code: item.code,
|
|
||||||
category: item.category,
|
|
||||||
notes: item.notes ?? item.description ?? '',
|
|
||||||
};
|
|
||||||
isModalOpen.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeModal = () => {
|
|
||||||
isModalOpen.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async (payload: ModelTypePayload) => {
|
|
||||||
saving.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const enrichedPayload = {
|
|
||||||
...payload,
|
|
||||||
description: payload.notes ?? null,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (modalMode.value === 'create') {
|
|
||||||
await createModelType(enrichedPayload);
|
|
||||||
showSuccess('Type de modèle créé avec succès.');
|
|
||||||
} else if (modalMode.value === 'edit' && editingId.value) {
|
|
||||||
await updateModelType(editingId.value, enrichedPayload);
|
|
||||||
showSuccess('Type de modèle mis à jour avec succès.');
|
|
||||||
}
|
|
||||||
|
|
||||||
isModalOpen.value = false;
|
|
||||||
await refresh();
|
|
||||||
} catch (error) {
|
|
||||||
showError(extractErrorMessage(error));
|
|
||||||
} finally {
|
|
||||||
saving.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const confirmDelete = async (item: ModelType) => {
|
|
||||||
const confirmed = window.confirm('Supprimer ce type ? Cette action est irréversible.');
|
|
||||||
if (!confirmed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await deleteModelType(item.id);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
await refresh();
|
|
||||||
} catch (error) {
|
|
||||||
showError(extractErrorMessage(error));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => searchInput.value,
|
|
||||||
(value) => {
|
|
||||||
if (debounceTimer) {
|
|
||||||
clearTimeout(debounceTimer);
|
|
||||||
}
|
|
||||||
debounceTimer = setTimeout(() => {
|
|
||||||
searchTerm.value = value.trim();
|
|
||||||
refresh({ resetOffset: true });
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
refresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
if (debounceTimer) {
|
|
||||||
clearTimeout(debounceTimer);
|
|
||||||
}
|
|
||||||
if (activeController) {
|
|
||||||
activeController.abort();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user