feat(frontend): harmoniser navigation et libellés
This commit is contained in:
290
app/app.vue
290
app/app.vue
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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') {
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user