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

feat(model-types): add related-items modal and guard category edits

Browse Source
This commit is contained in:
Matthieu
2026-01-25 20:29:28 +01:00
parent adccfa9b46
commit a7101c7e77
7 changed files with 414 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
app/components/model-types/ManagementView.vue
View File

@@ -29,10 +29,65 @@
:total="total"
:limit="limit"
:offset="offset"
@related="openRelatedModal"
@edit="openEditPage"
@delete="confirmDelete"
@update:offset="onOffsetChange"
/>
<dialog class="modal" :class="{ 'modal-open': relatedModalOpen }">
<div class="modal-box max-w-3xl">
<h3 class="text-lg font-bold text-base-content">
{{ relatedModalTitle }}
</h3>
<p class="mt-1 text-sm text-base-content/70">
{{ relatedModalSubtitle }}
</p>
<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>
Chargement des éléments liés…
</div>
<div v-else-if="relatedError" class="px-4 py-6 text-sm text-error">
{{ relatedError }}
</div>
<div
v-else-if="relatedItems.length === 0"
class="px-4 py-6 text-sm text-base-content/60"
>
Aucun élément lié à cette catégorie.
</div>
<ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
<li
v-for="entry in relatedItems"
:key="entry.id"
class="px-2 py-1"
>
<button
type="button"
class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
@click="openRelatedEdit(entry)"
>
<span class="font-medium text-base-content">{{ entry.name }}</span>
<span v-if="entry.reference" class="text-xs text-base-content/60">
Référence: {{ entry.reference }}
</span>
</button>
</li>
</ul>
</div>
<div class="modal-action">
<button type="button" class="btn" @click="closeRelatedModal">
Fermer
</button>
</div>
</div>
</dialog>
</main>
</template>
@@ -41,6 +96,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useHead, useRouter } from "#imports";
import ModelTypesToolbar from "~/components/model-types/Toolbar.vue";
import ModelTypesTable from "~/components/model-types/Table.vue";
import { useApi } from "~/composables/useApi";
import {
deleteModelType,
listModelTypes,
@@ -82,6 +138,7 @@ let activeController: AbortController | null = null;
const router = useRouter();
const { showError, showSuccess } = useToast();
const { get } = useApi();
const headingText = computed(() => props.heading);
const descriptionText = computed(
@@ -257,6 +314,165 @@ const confirmDelete = async (item: ModelType) => {
}
};
type RelatedEntry = {
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 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 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 extractCollection = (payload: any): any[] => {
if (Array.isArray(payload)) {
return payload;
}
if (Array.isArray(payload?.member)) {
return payload.member;
}
if (Array.isArray(payload?.["hydra:member"])) {
return payload["hydra:member"];
}
if (Array.isArray(payload?.items)) {
return payload.items;
}
return [];
};
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" };
};
const resolveRelatedEditBasePath = (category: ModelCategory) => {
if (category === "COMPONENT") {
return "/component";
}
if (category === "PIECE") {
return "/pieces";
}
return "/product";
};
const mapRelatedEntry = (item: any): RelatedEntry | null => {
if (!item || typeof item !== "object" || typeof item.id !== "string") {
return null;
}
const name =
typeof item.name === "string" && item.name.trim()
? item.name
: "Sans nom";
const reference =
typeof item.reference === "string" && item.reference.trim()
? item.reference
: typeof item.code === "string" && item.code.trim()
? item.code
: null;
return {
id: item.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");
relatedLoading.value = true;
relatedError.value = null;
relatedItems.value = [];
try {
const result = await get(`${endpoint}?${params.toString()}`);
if (!result.success) {
relatedError.value =
result.error ?? "Impossible de charger les éléments liés.";
return;
}
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;
}
};
const openRelatedModal = (item: ModelType) => {
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;
router.push(`${basePath}/${entry.id}/edit`).catch(() => {
showError("Navigation impossible vers la fiche d'édition.");
});
};
const closeRelatedModal = () => {
relatedModalOpen.value = false;
};
watch(
() => searchInput.value,
(value) => {

21
app/components/model-types/ModelTypeForm.vue
View File

@@ -108,6 +108,15 @@
</template>
</section>
<div
v-if="disableSubmit"
class="alert alert-warning"
role="alert"
aria-live="polite"
>
<span>{{ disableSubmitMessage }}</span>
</div>
<footer class="flex flex-col gap-3 border-t border-base-300 pt-4 sm:flex-row sm:justify-end">
<button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
Annuler
@@ -150,6 +159,8 @@ const props = withDefaults(defineProps<{
structureLoading?: boolean
allowComponentSubcomponents?: boolean
componentSubcomponentMaxDepth?: number
disableSubmit?: boolean
disableSubmitMessage?: string
}>(), {
initialData: null,
saving: false,
@@ -157,6 +168,8 @@ const props = withDefaults(defineProps<{
structureLoading: false,
allowComponentSubcomponents: true,
componentSubcomponentMaxDepth: 1,
disableSubmit: false,
disableSubmitMessage: '',
})
const emit = defineEmits<{
@@ -173,6 +186,12 @@ const componentSubcomponentMaxDepth = computed(() =>
? props.componentSubcomponentMaxDepth
: 1,
)
const disableSubmit = computed(() => props.disableSubmit === true)
const disableSubmitMessage = computed(() =>
(props.disableSubmitMessage && props.disableSubmitMessage.trim())
? props.disableSubmitMessage
: 'Cette catégorie ne peut pas être modifiée car des éléments y sont déjà liés.',
)
const form = reactive<ModelTypePayload>({
name: '',
@@ -248,7 +267,7 @@ const resetForm = () => {
}
const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
const isSubmitDisabled = computed(() => saving.value || structureLoading.value)
const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value)
const validate = () => {
errors.name = undefined

9
app/components/model-types/Table.vue
View File

@@ -34,7 +34,7 @@
<tr class="text-base-content/70">
<th scope="col">Nom</th>
<th scope="col">Notes</th>
<th scope="col" class="w-32 text-right">Actions</th>
<th scope="col" class="w-48 text-right">Actions</th>
</tr>
</thead>
<tbody>
@@ -45,6 +45,9 @@
<span v-else class="text-base-content/50">—</span>
</td>
<td class="text-right space-x-2">
<button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
Liés
</button>
<button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
Éditer
</button>
@@ -72,6 +75,9 @@
<p class="mt-3 text-sm text-base-content/80" v-if="item.notes">{{ item.notes }}</p>
<p class="mt-3 text-sm text-base-content/50" v-else>Pas de notes</p>
<footer class="mt-4 flex flex-wrap items-center gap-2 justify-end">
<button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
Liés
</button>
<button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
Éditer
</button>
@@ -123,6 +129,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(e: 'related', item: ModelType): void;
(e: 'edit', item: ModelType): void;
(e: 'delete', item: ModelType): void;
(e: 'update:offset', offset: number): void;