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

feat(frontend): harmoniser navigation et libellés

Browse Source
This commit is contained in:
Matthieu
2025-09-24 09:39:15 +02:00
parent 83b3e33b1e
commit f924c65ab8
8 changed files with 210 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
app/app.vue
View File

@@ -32,7 +32,7 @@
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Machines Parc Machines
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
@@ -41,62 +41,107 @@
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Types de Machines Schémas de machine
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink <details class="group">
to="/models" <summary
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors cursor-pointer"
:class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/models/pieces') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Modèles Pièces
</NuxtLink> </summary>
<ul class="menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
<li>
<NuxtLink
to="/model-types"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catégorie de pièce
</NuxtLink>
</li>
<li>
<NuxtLink
to="/models/pieces"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/models/pieces') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catalogue de pièce
</NuxtLink>
</li>
</ul>
</details>
</li> </li>
<li> <li>
<NuxtLink <details class="group">
to="/model-types" <summary
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors cursor-pointer"
:class="isActive('/model-types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="(isActive('/models/components') || isActive('/model-types')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Types de modèles Composant
</NuxtLink> </summary>
<ul class="menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
<li>
<NuxtLink
to="/model-types"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catégorie de composant
</NuxtLink>
</li>
<li>
<NuxtLink
to="/models/components"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/models/components') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catalogue de composant
</NuxtLink>
</li>
</ul>
</details>
</li> </li>
<li> <li>
<NuxtLink <details class="group">
to="/sites" <summary
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors cursor-pointer"
:class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="(isActive('/sites') || isActive('/documents') || isActive('/constructeurs')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Sites Ressources liées
</NuxtLink> </summary>
</li> <ul class="menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
<li> <li>
<NuxtLink <NuxtLink
to="/generator" to="/sites"
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/sites') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Générateur Sites
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink <NuxtLink
to="/documents" to="/documents"
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/documents') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Documents Documents
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink <NuxtLink
to="/constructeurs" to="/constructeurs"
class="rounded-md px-2 py-1 transition-colors" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/constructeurs') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Constructeurs Constructeurs
</NuxtLink> </NuxtLink>
</li>
</ul>
</details>
</li> </li>
</ul> </ul>
</div> </div>
@@ -126,7 +171,7 @@
class="transition-colors px-3 py-2 rounded-md" class="transition-colors px-3 py-2 rounded-md"
:class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Machines Parc Machines
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
@@ -135,62 +180,107 @@
class="transition-colors px-3 py-2 rounded-md" class="transition-colors px-3 py-2 rounded-md"
:class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Types de Machines Schémas de machine
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li class="dropdown dropdown-hover">
<NuxtLink <div
to="/models" tabindex="0"
class="transition-colors px-3 py-2 rounded-md" role="button"
:class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
:class="isActive('/models/pieces') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Modèles Pièces
</NuxtLink> </div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60">
<li>
<NuxtLink
to="/model-types"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catégorie de pièce
</NuxtLink>
</li>
<li>
<NuxtLink
to="/models/pieces"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/models/pieces') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catalogue de pièce
</NuxtLink>
</li>
</ul>
</li> </li>
<li> <li class="dropdown dropdown-hover">
<NuxtLink <div
to="/model-types" tabindex="0"
class="transition-colors px-3 py-2 rounded-md" role="button"
:class="isActive('/model-types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
:class="(isActive('/model-types') || isActive('/models/components')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Types de modèles Composant
</NuxtLink> </div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64">
<li>
<NuxtLink
to="/model-types"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catégorie de composant
</NuxtLink>
</li>
<li>
<NuxtLink
to="/models/components"
class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/models/components') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
>
Catalogue de composant
</NuxtLink>
</li>
</ul>
</li> </li>
<li> <li class="dropdown dropdown-hover">
<NuxtLink <div
to="/sites" tabindex="0"
class="transition-colors px-3 py-2 rounded-md" role="button"
:class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
:class="(isActive('/sites') || isActive('/documents') || isActive('/constructeurs')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Sites Ressources liées
</NuxtLink> </div>
</li> <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60">
<li> <li>
<NuxtLink <NuxtLink
to="/generator" to="/sites"
class="transition-colors px-3 py-2 rounded-md" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/sites') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Générateur Sites
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink <NuxtLink
to="/documents" to="/documents"
class="transition-colors px-3 py-2 rounded-md" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/documents') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Documents Documents
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink <NuxtLink
to="/constructeurs" to="/constructeurs"
class="transition-colors px-3 py-2 rounded-md" class="rounded-md px-2 py-1 transition-colors"
:class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'" :class="isActive('/constructeurs') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
> >
Constructeurs Constructeurs
</NuxtLink> </NuxtLink>
</li>
</ul>
</li> </li>
</ul> </ul>
</div> </div>

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

@@ -2,7 +2,7 @@
<section class="space-y-4" aria-live="polite"> <section class="space-y-4" aria-live="polite">
<header class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between"> <header class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
<div> <div>
<h2 class="text-xl font-semibold text-base-content">Types de modèles</h2> <h2 class="text-xl font-semibold text-base-content">Catégories enregistrées</h2>
<p class="text-sm text-base-content/70"> <p class="text-sm text-base-content/70">
{{ totalLabel }} {{ totalLabel }}
</p> </p>
@@ -23,8 +23,8 @@
<div v-else-if="items.length === 0" class="rounded-xl border border-dashed border-base-200 p-10 text-center"> <div v-else-if="items.length === 0" class="rounded-xl border border-dashed border-base-200 p-10 text-center">
<IconLucideInbox class="mx-auto h-12 w-12 text-base-content/30" aria-hidden="true" /> <IconLucideInbox class="mx-auto h-12 w-12 text-base-content/30" aria-hidden="true" />
<h3 class="mt-4 text-lg font-medium text-base-content">Aucun type trouvé</h3> <h3 class="mt-4 text-lg font-medium text-base-content">Aucune catégorie trouvée</h3>
<p class="text-sm text-base-content/70">Ajustez votre recherche ou créez un nouveau type.</p> <p class="text-sm text-base-content/70">Ajustez votre recherche ou créez une nouvelle catégorie.</p>
</div> </div>
<div v-else class="space-y-6"> <div v-else class="space-y-6">
@@ -155,7 +155,7 @@ const canGoNext = computed(() => props.offset + props.limit < props.total);
const totalLabel = computed(() => { const totalLabel = computed(() => {
if (props.total === 0) return 'Aucun résultat'; if (props.total === 0) return 'Aucun résultat';
if (props.total === 1) return '1 type trouvé'; if (props.total === 1) return '1 catégorie trouvée';
return `${props.total} types trouvés`; return `${props.total} catégories trouvées`;
}); });
</script> </script>

2
app/pages/machines/index.vue
View File

@@ -2,7 +2,7 @@
<main class="container mx-auto px-6 py-8"> <main class="container mx-auto px-6 py-8">
<div class="my-8"> <div class="my-8">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Machines</h2> <h2 class="text-2xl font-bold">Parc Machines</h2>
<NuxtLink to="/machines/new" class="btn btn-primary"> <NuxtLink to="/machines/new" class="btn btn-primary">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" /> <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Ajouter une machine Ajouter une machine

14
app/pages/model-types.vue
View File

@@ -2,9 +2,9 @@
<main class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8"> <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"> <header class="space-y-2">
<p class="text-sm uppercase tracking-wide text-primary">Administration</p> <p class="text-sm uppercase tracking-wide text-primary">Administration</p>
<h1 class="text-3xl font-bold text-base-content">Types de modèles</h1> <h1 class="text-3xl font-bold text-base-content">{{ heading }}</h1>
<p class="text-base text-base-content/70"> <p class="text-base text-base-content/70">
Gérez les types de modèles pour les composants et les pièces. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination. 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> </p>
</header> </header>
@@ -45,7 +45,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useHead } from '#imports'; import { useHead } from '#imports';
import ModelTypesToolbar from '~/components/model-types/Toolbar.vue'; import ModelTypesToolbar from '~/components/model-types/Toolbar.vue';
import ModelTypesTable from '~/components/model-types/Table.vue'; import ModelTypesTable from '~/components/model-types/Table.vue';
@@ -85,9 +85,11 @@ let activeController: AbortController | null = null;
const { showError, showSuccess } = useToast(); const { showError, showSuccess } = useToast();
useHead({ const heading = computed(() => (category.value === 'COMPONENT' ? 'Catégorie de composant' : 'Catégorie de pièce'));
title: 'Types de modèles',
}); useHead(() => ({
title: heading.value,
}));
const extractErrorMessage = (error: unknown) => { const extractErrorMessage = (error: unknown) => {
if (error && typeof error === 'object') { if (error && typeof error === 'object') {

2
app/pages/models/components.vue
View File

@@ -2,7 +2,7 @@
<main class="container mx-auto px-6 py-8 space-y-8"> <main class="container mx-auto px-6 py-8 space-y-8">
<header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="space-y-1"> <div class="space-y-1">
<h1 class="text-3xl font-bold text-gray-800">Modèles de composants</h1> <h1 class="text-3xl font-bold text-gray-800">Catalogue de composant</h1>
<p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque famille de composant.</p> <p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque famille de composant.</p>
</div> </div>
<div class="tabs tabs-boxed"> <div class="tabs tabs-boxed">

6
app/pages/models/index.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center"> <div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center">
<div class="space-y-2"> <div class="space-y-2">
<h1 class="text-3xl font-semibold">Gestion des modèles</h1> <h1 class="text-3xl font-semibold">Gestion des catalogues</h1>
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500">
Administrez les modèles de composants et de pièces utilisés lors de la configuration des machines. Administrez les modèles de composants et de pièces utilisés lors de la configuration des machines.
</p> </p>
</div> </div>
<div class="flex flex-wrap items-center justify-center gap-3"> <div class="flex flex-wrap items-center justify-center gap-3">
<NuxtLink to="/models/components" class="btn btn-primary"> <NuxtLink to="/models/components" class="btn btn-primary">
Modèles de composants Catalogue de composant
</NuxtLink> </NuxtLink>
<NuxtLink to="/models/pieces" class="btn btn-outline"> <NuxtLink to="/models/pieces" class="btn btn-outline">
Modèles de pièces Catalogue de pièce
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>

2
app/pages/models/pieces.vue
View File

@@ -2,7 +2,7 @@
<main class="container mx-auto px-6 py-8 space-y-8"> <main class="container mx-auto px-6 py-8 space-y-8">
<header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="space-y-1"> <div class="space-y-1">
<h1 class="text-3xl font-bold text-gray-800">Modèles de pièces</h1> <h1 class="text-3xl font-bold text-gray-800">Catalogue de pièce</h1>
<p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque groupe de pièces.</p> <p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque groupe de pièces.</p>
</div> </div>
<div class="tabs tabs-boxed"> <div class="tabs tabs-boxed">

2
app/pages/types.vue
View File

@@ -6,7 +6,7 @@
<div class="my-8"> <div class="my-8">
<!-- Header with Add Button --> <!-- Header with Add Button -->
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Types de Machines</h2> <h2 class="text-2xl font-bold text-gray-800">Schémas de machine</h2>
<NuxtLink to="/generator" class="btn btn-primary"> <NuxtLink to="/generator" class="btn btn-primary">
<IconLucidePlus <IconLucidePlus
class="w-5 h-5 mr-2" class="w-5 h-5 mr-2"