feat(frontend): harmoniser navigation et libellés

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

View File

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

View File

@@ -2,7 +2,7 @@
<section class="space-y-4" aria-live="polite">
<header class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
<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">
{{ totalLabel }}
</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">
<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>
<p class="text-sm text-base-content/70">Ajustez votre recherche ou créez un nouveau type.</p>
<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 une nouvelle catégorie.</p>
</div>
<div v-else class="space-y-6">
@@ -155,7 +155,7 @@ const canGoNext = computed(() => props.offset + props.limit < props.total);
const totalLabel = computed(() => {
if (props.total === 0) return 'Aucun résultat';
if (props.total === 1) return '1 type trouvé';
return `${props.total} types trouvés`;
if (props.total === 1) return '1 catégorie trouvée';
return `${props.total} catégories trouvées`;
});
</script>

View File

@@ -2,7 +2,7 @@
<main class="container mx-auto px-6 py-8">
<div class="my-8">
<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">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Ajouter une machine

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">
<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">Types de modèles</h1>
<h1 class="text-3xl font-bold text-base-content">{{ heading }}</h1>
<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>
</header>
@@ -45,7 +45,7 @@
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
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';
@@ -85,9 +85,11 @@ let activeController: AbortController | null = null;
const { showError, showSuccess } = useToast();
useHead({
title: 'Types de modèles',
});
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') {

View File

@@ -2,7 +2,7 @@
<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">
<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>
</div>
<div class="tabs tabs-boxed">

View File

@@ -1,17 +1,17 @@
<template>
<div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center">
<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">
Administrez les modèles de composants et de pièces utilisés lors de la configuration des machines.
</p>
</div>
<div class="flex flex-wrap items-center justify-center gap-3">
<NuxtLink to="/models/components" class="btn btn-primary">
Modèles de composants
Catalogue de composant
</NuxtLink>
<NuxtLink to="/models/pieces" class="btn btn-outline">
Modèles de pièces
Catalogue de pièce
</NuxtLink>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<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">
<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>
</div>
<div class="tabs tabs-boxed">

View File

@@ -6,7 +6,7 @@
<div class="my-8">
<!-- Header with Add Button -->
<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">
<IconLucidePlus
class="w-5 h-5 mr-2"