Compare commits
14 Commits
3b24dc128a
...
v1.9.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
b0124c11ba | ||
|
|
7e67b124f3 | ||
| 3ad326348b | |||
| 5b9c4ca09d | |||
| 6b5eb7bcd6 | |||
| 98f5d983b3 | |||
| cda872a057 | |||
| 84970a352d | |||
| c1d14124ff | |||
| a83a4428c2 | |||
| a1998d7966 | |||
| 6add558725 | |||
| e18ce984e7 | |||
| d00e5c058b |
27
app/app.vue
27
app/app.vue
@@ -1,15 +1,20 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<LayoutAppNavbar
|
||||
<div class="min-h-screen flex flex-col bg-base-200/40">
|
||||
<!-- Subtle dot pattern background -->
|
||||
<div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
|
||||
|
||||
<AppNavbar
|
||||
@open-settings="displaySettingsOpen = true"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
<NuxtPage />
|
||||
<main class="flex-1">
|
||||
<NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
|
||||
</main>
|
||||
|
||||
<ToastContainer />
|
||||
|
||||
<CommonConfirmModal />
|
||||
<ConfirmModal />
|
||||
|
||||
<DisplaySettings
|
||||
:is-open="displaySettingsOpen"
|
||||
@@ -17,11 +22,17 @@
|
||||
@update-settings="handleSettingsUpdate"
|
||||
/>
|
||||
|
||||
<footer class="footer p-4 bg-neutral text-neutral-content">
|
||||
<div class="items-center grid-flow-col">
|
||||
<p>
|
||||
@Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
|
||||
<footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
|
||||
<div class="container mx-auto flex items-center justify-between px-6 py-3">
|
||||
<p class="text-xs text-base-content/40 font-medium tracking-wide">
|
||||
© Malio {{ new Date().getFullYear() }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
to="/changelog"
|
||||
class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
|
||||
>
|
||||
v{{ appVersion }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -1,55 +1,136 @@
|
||||
/* ─── Fonts ─── */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
|
||||
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
|
||||
/* ─── Theme ─── */
|
||||
@plugin "daisyui/theme" {
|
||||
name: "mytheme";
|
||||
default: true; /* set as default */
|
||||
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
|
||||
color-scheme: light; /* color of browser-provided UI */
|
||||
default: true;
|
||||
prefersdark: false;
|
||||
color-scheme: light;
|
||||
|
||||
/* #FBFAFA — gris clair */
|
||||
--color-base-100: oklch(98% 0.003 0);
|
||||
--color-base-200: oklch(94% 0.01 262);
|
||||
--color-base-300: oklch(90% 0.02 262);
|
||||
--color-base-content: oklch(20% 0.03 262);
|
||||
/* #304998 — bleu Malio */
|
||||
--color-primary: oklch(37% 0.15 262);
|
||||
/* Surfaces — warm gray with a hint of blue */
|
||||
--color-base-100: oklch(98.5% 0.004 260);
|
||||
--color-base-200: oklch(95% 0.008 260);
|
||||
--color-base-300: oklch(91% 0.015 260);
|
||||
--color-base-content: oklch(22% 0.025 260);
|
||||
|
||||
/* Primary — Malio blue, slightly richer */
|
||||
--color-primary: oklch(40% 0.16 262);
|
||||
--color-primary-content: oklch(98% 0.005 262);
|
||||
/* #A5ACD0 — lavande */
|
||||
--color-secondary: oklch(75% 0.055 270);
|
||||
--color-secondary-content: oklch(20% 0.03 270);
|
||||
/* #ED8521 — orange */
|
||||
--color-accent: oklch(71% 0.17 58);
|
||||
--color-accent-content: oklch(98% 0.005 58);
|
||||
/* neutral dérivé du bleu Malio */
|
||||
--color-neutral: oklch(37% 0.08 262);
|
||||
--color-neutral-content: oklch(98% 0.005 262);
|
||||
--color-info: oklch(55% 0.12 262);
|
||||
--color-info-content: oklch(98% 0.005 262);
|
||||
--color-success: oklch(65% 0.2 145);
|
||||
--color-success-content: oklch(98% 0.005 145);
|
||||
|
||||
/* Secondary — refined lavender */
|
||||
--color-secondary: oklch(72% 0.06 275);
|
||||
--color-secondary-content: oklch(22% 0.03 275);
|
||||
|
||||
/* Accent — warm amber-orange */
|
||||
--color-accent: oklch(72% 0.17 55);
|
||||
--color-accent-content: oklch(20% 0.04 55);
|
||||
|
||||
/* Neutral — deep slate */
|
||||
--color-neutral: oklch(28% 0.04 260);
|
||||
--color-neutral-content: oklch(95% 0.005 260);
|
||||
|
||||
/* Semantic */
|
||||
--color-info: oklch(58% 0.14 255);
|
||||
--color-info-content: oklch(98% 0.005 255);
|
||||
--color-success: oklch(62% 0.19 150);
|
||||
--color-success-content: oklch(98% 0.005 150);
|
||||
--color-warning: oklch(78% 0.15 70);
|
||||
--color-warning-content: oklch(20% 0.05 70);
|
||||
--color-error: oklch(60% 0.25 25);
|
||||
--color-warning-content: oklch(22% 0.05 70);
|
||||
--color-error: oklch(58% 0.22 25);
|
||||
--color-error-content: oklch(98% 0.005 25);
|
||||
|
||||
/* border radius */
|
||||
--radius-selector: 1rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.5rem;
|
||||
/* Geometry */
|
||||
--radius-selector: 0.75rem;
|
||||
--radius-field: 0.375rem;
|
||||
--radius-box: 0.625rem;
|
||||
|
||||
/* base sizes */
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
|
||||
/* border size */
|
||||
--border: 1px;
|
||||
|
||||
/* effects */
|
||||
--depth: 1;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
/* Styles pour l'accessibilité et les paramètres d'affichage */
|
||||
@plugin "daisyui/theme" {
|
||||
name: "mytheme-dark";
|
||||
default: false;
|
||||
prefersdark: true;
|
||||
color-scheme: dark;
|
||||
|
||||
/* Surfaces — dark blue-gray */
|
||||
--color-base-100: oklch(22% 0.015 260);
|
||||
--color-base-200: oklch(18% 0.012 260);
|
||||
--color-base-300: oklch(28% 0.018 260);
|
||||
--color-base-content: oklch(92% 0.005 260);
|
||||
|
||||
/* Primary — Malio blue, brighter for dark */
|
||||
--color-primary: oklch(55% 0.18 262);
|
||||
--color-primary-content: oklch(98% 0.005 262);
|
||||
|
||||
/* Secondary — refined lavender */
|
||||
--color-secondary: oklch(72% 0.06 275);
|
||||
--color-secondary-content: oklch(22% 0.03 275);
|
||||
|
||||
/* Accent — warm amber-orange */
|
||||
--color-accent: oklch(72% 0.17 55);
|
||||
--color-accent-content: oklch(20% 0.04 55);
|
||||
|
||||
/* Neutral — lighter slate for dark mode */
|
||||
--color-neutral: oklch(75% 0.02 260);
|
||||
--color-neutral-content: oklch(18% 0.01 260);
|
||||
|
||||
/* Semantic */
|
||||
--color-info: oklch(62% 0.14 255);
|
||||
--color-info-content: oklch(98% 0.005 255);
|
||||
--color-success: oklch(65% 0.19 150);
|
||||
--color-success-content: oklch(98% 0.005 150);
|
||||
--color-warning: oklch(78% 0.15 70);
|
||||
--color-warning-content: oklch(22% 0.05 70);
|
||||
--color-error: oklch(62% 0.22 25);
|
||||
--color-error-content: oklch(98% 0.005 25);
|
||||
|
||||
/* Geometry — same as light */
|
||||
--radius-selector: 0.75rem;
|
||||
--radius-field: 0.375rem;
|
||||
--radius-box: 0.625rem;
|
||||
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
|
||||
--border: 1px;
|
||||
--depth: 1;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
/* ─── Typography ─── */
|
||||
:root {
|
||||
--font-heading: 'Outfit', system-ui, sans-serif;
|
||||
--font-body: 'DM Sans', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.card-title,
|
||||
.stat-value,
|
||||
.text-2xl,
|
||||
.text-3xl,
|
||||
.text-4xl {
|
||||
font-family: var(--font-heading);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── Density variables ─── */
|
||||
:root {
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 0.75rem;
|
||||
@@ -58,7 +139,6 @@
|
||||
--spacing-xl: 2rem;
|
||||
}
|
||||
|
||||
/* Densité compacte */
|
||||
.density-compact {
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
@@ -67,7 +147,6 @@
|
||||
--spacing-xl: 1.25rem;
|
||||
}
|
||||
|
||||
/* Densité confortable (défaut) */
|
||||
.density-comfortable {
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 0.75rem;
|
||||
@@ -76,7 +155,6 @@
|
||||
--spacing-xl: 2rem;
|
||||
}
|
||||
|
||||
/* Densité espacée */
|
||||
.density-spacious {
|
||||
--spacing-xs: 0.75rem;
|
||||
--spacing-sm: 1rem;
|
||||
@@ -85,251 +163,200 @@
|
||||
--spacing-xl: 3rem;
|
||||
}
|
||||
|
||||
/* Contraste élevé avec DaisyUI */
|
||||
.contrast-high .btn {
|
||||
@apply border-2;
|
||||
}
|
||||
/* ─── High contrast mode ─── */
|
||||
.contrast-high .btn { @apply border-2; }
|
||||
.contrast-high .input { @apply border-2; }
|
||||
.contrast-high .select { @apply border-2; }
|
||||
.contrast-high .textarea { @apply border-2; }
|
||||
.contrast-high .modal-box { @apply border-2 border-base-content; }
|
||||
|
||||
.contrast-high .input {
|
||||
@apply border-2;
|
||||
}
|
||||
|
||||
.contrast-high .select {
|
||||
@apply border-2;
|
||||
}
|
||||
|
||||
.contrast-high .textarea {
|
||||
@apply border-2;
|
||||
}
|
||||
|
||||
.contrast-high .modal-box {
|
||||
@apply border-2 border-base-content;
|
||||
}
|
||||
|
||||
/* Amélioration de l'accessibilité */
|
||||
/* ─── Accessibility ─── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus visible pour l'accessibilité */
|
||||
*:focus-visible {
|
||||
outline: 2px solid #304998;
|
||||
outline: 2px solid oklch(40% 0.16 262);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Styles pour les boutons de paramètres */
|
||||
/* ─── Cards ─── */
|
||||
.card {
|
||||
border: 1px solid oklch(91% 0.015 260 / 0.6);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.site-card {
|
||||
background-color: oklch(100% 0 0);
|
||||
}
|
||||
|
||||
[data-theme="mytheme-dark"] .site-card {
|
||||
background-color: oklch(24% 0.015 260);
|
||||
}
|
||||
|
||||
[data-theme="mytheme-dark"] .card {
|
||||
border-color: oklch(30% 0.02 260 / 0.6);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow:
|
||||
0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
|
||||
0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
|
||||
}
|
||||
|
||||
/* ─── Navbar glass effect ─── */
|
||||
.navbar-glass {
|
||||
background: oklch(98.5% 0.004 260 / 0.82);
|
||||
backdrop-filter: blur(12px) saturate(1.5);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.5);
|
||||
border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
|
||||
}
|
||||
|
||||
[data-theme="mytheme-dark"] .navbar-glass {
|
||||
background: oklch(22% 0.015 260 / 0.85);
|
||||
border-bottom-color: oklch(30% 0.02 260 / 0.5);
|
||||
}
|
||||
|
||||
/* ─── Buttons ─── */
|
||||
.btn {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-circle:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-circle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Animation pour le modal */
|
||||
/* ─── Inputs ─── */
|
||||
.input, .select, .textarea {
|
||||
font-family: var(--font-body);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.input:focus, .select:focus, .textarea:focus {
|
||||
box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
|
||||
}
|
||||
|
||||
/* ─── Tables ─── */
|
||||
.table thead th {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
color: oklch(45% 0.03 260);
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
/* ─── Badges ─── */
|
||||
.badge {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* ─── Stats ─── */
|
||||
.stat-title {
|
||||
font-family: var(--font-body);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ─── Modals ─── */
|
||||
.modal {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
font-size: 100% !important; /* Force la taille normale pour le modal */
|
||||
transform: none !important; /* Empêche les transformations */
|
||||
scale: 1 !important; /* Force l'échelle à 1 */
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.modal.modal-open {
|
||||
animation: modalFadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* S'assurer que le contenu du modal garde une taille normale */
|
||||
.modal-box {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
scale: 1 !important;
|
||||
width: auto !important;
|
||||
max-width: 500px !important;
|
||||
font-family: var(--font-body);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid oklch(91% 0.015 260 / 0.5);
|
||||
}
|
||||
|
||||
.modal .form-control {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
@keyframes modalSlideUp {
|
||||
from { opacity: 0; transform: translateY(0.5rem); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal .btn {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
height: auto !important;
|
||||
min-height: 2.5rem !important;
|
||||
.modal.modal-open .modal-box {
|
||||
animation: modalSlideUp 0.25s ease-out;
|
||||
}
|
||||
|
||||
.modal .input {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
height: auto !important;
|
||||
min-height: 2.5rem !important;
|
||||
/* ─── Page transitions ─── */
|
||||
.page-enter-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.page-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal .select {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
height: auto !important;
|
||||
min-height: 2.5rem !important;
|
||||
/* ─── Scrollbar styling ─── */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: oklch(75% 0.02 260);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(60% 0.03 260);
|
||||
}
|
||||
|
||||
.modal .textarea {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
min-height: 4rem !important;
|
||||
}
|
||||
/* ─── Readability ─── */
|
||||
.text-sm { line-height: 1.5; }
|
||||
.text-xs { line-height: 1.4; }
|
||||
|
||||
.modal .range {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
height: auto !important;
|
||||
min-height: 1.5rem !important;
|
||||
}
|
||||
/* ─── Adaptive spacing ─── */
|
||||
.p-1 { padding: var(--spacing-xs); }
|
||||
.p-2 { padding: var(--spacing-sm); }
|
||||
.p-3 { padding: var(--spacing-md); }
|
||||
.p-4 { padding: var(--spacing-lg); }
|
||||
.p-5 { padding: var(--spacing-xl); }
|
||||
|
||||
.modal .label {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.m-1 { margin: var(--spacing-xs); }
|
||||
.m-2 { margin: var(--spacing-sm); }
|
||||
.m-3 { margin: var(--spacing-md); }
|
||||
.m-4 { margin: var(--spacing-lg); }
|
||||
.m-5 { margin: var(--spacing-xl); }
|
||||
|
||||
.modal .label-text {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .label-text-alt {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .checkbox {
|
||||
font-size: 100% !important;
|
||||
transform: none !important;
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
.modal .text-xs {
|
||||
font-size: 0.75rem !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .text-sm {
|
||||
font-size: 0.875rem !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .text-lg {
|
||||
font-size: 1.125rem !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .font-bold {
|
||||
font-weight: 700 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.modal .font-medium {
|
||||
font-weight: 500 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Empêcher les héritages de taille */
|
||||
.modal * {
|
||||
font-size: inherit !important;
|
||||
transform: none !important;
|
||||
scale: 1 !important;
|
||||
}
|
||||
|
||||
@keyframes modalFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les contrôles de zoom */
|
||||
.range {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.range::-webkit-slider-thumb {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.range::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Amélioration de la lisibilité */
|
||||
.text-sm {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Espacement adaptatif */
|
||||
.p-1 {
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
.p-2 {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
.p-3 {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
.p-4 {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
.p-5 {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: var(--spacing-xs);
|
||||
}
|
||||
.m-2 {
|
||||
margin: var(--spacing-sm);
|
||||
}
|
||||
.m-3 {
|
||||
margin: var(--spacing-md);
|
||||
}
|
||||
.m-4 {
|
||||
margin: var(--spacing-lg);
|
||||
}
|
||||
.m-5 {
|
||||
margin: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
.gap-2 {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
.gap-3 {
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
.gap-5 {
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.gap-1 { gap: var(--spacing-xs); }
|
||||
.gap-2 { gap: var(--spacing-sm); }
|
||||
.gap-3 { gap: var(--spacing-md); }
|
||||
.gap-4 { gap: var(--spacing-lg); }
|
||||
.gap-5 { gap: var(--spacing-xl); }
|
||||
|
||||
@layer components {
|
||||
.form-control .label {
|
||||
@@ -337,7 +364,6 @@
|
||||
padding-bottom: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.form-control .label + * {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
@@ -5,11 +5,13 @@
|
||||
<ComponentItem
|
||||
:component="component"
|
||||
:is-edit-mode="isEditMode"
|
||||
:show-delete="showDelete"
|
||||
:collapse-all="collapseAll"
|
||||
:toggle-token="toggleToken"
|
||||
@update="$emit('update', $event)"
|
||||
@edit-piece="$emit('edit-piece', $event)"
|
||||
@custom-field-update="$emit('custom-field-update', $event)"
|
||||
@delete="$emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,6 +29,10 @@ defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showDelete: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapseAll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@@ -37,5 +43,5 @@ defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['update', 'edit-piece', 'custom-field-update'])
|
||||
defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
@@ -8,230 +8,193 @@
|
||||
/>
|
||||
|
||||
<!-- Component Header -->
|
||||
<div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
|
||||
<div class="flex items-start gap-3 w-full">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
|
||||
:class="{ 'rotate-90': !isCollapsed }"
|
||||
:aria-expanded="!isCollapsed"
|
||||
:title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
|
||||
@click="toggleCollapse"
|
||||
>
|
||||
<IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
|
||||
<span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
|
||||
</button>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold">
|
||||
<div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
|
||||
:class="{ 'rotate-90': !isCollapsed }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<h3 class="text-sm font-semibold text-base-content truncate">
|
||||
{{ component.name }}
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
|
||||
<template v-if="componentConstructeursDisplay.length">
|
||||
<span
|
||||
v-for="constructeur in componentConstructeursDisplay"
|
||||
:key="constructeur.id"
|
||||
class="badge badge-outline badge-sm"
|
||||
>
|
||||
{{ constructeur.name }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
|
||||
<span
|
||||
v-if="displayProductName"
|
||||
class="badge badge-info badge-sm"
|
||||
>
|
||||
Produit : {{ displayProductName }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
|
||||
<span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
|
||||
</div>
|
||||
<div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
|
||||
<span
|
||||
v-for="constructeur in componentConstructeursDisplay"
|
||||
:key="constructeur.id"
|
||||
class="text-xs text-base-content/50"
|
||||
>
|
||||
{{ constructeur.name }}
|
||||
</span>
|
||||
<span v-if="displayProductName" class="badge badge-info badge-xs">
|
||||
{{ displayProductName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="showDelete"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs text-error shrink-0"
|
||||
title="Supprimer ce composant"
|
||||
@click.stop="$emit('delete')"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="!isCollapsed" class="space-y-4">
|
||||
<!-- Component Info Display - Editable or Read-only -->
|
||||
<div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Nom</span></label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
v-model="component.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
@blur="updateComponent"
|
||||
<!-- Expanded content -->
|
||||
<div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
|
||||
<!-- Info fields -->
|
||||
<div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div class="form-control">
|
||||
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
|
||||
<input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
|
||||
<input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
|
||||
<input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
|
||||
<ConstructeurSelect
|
||||
class="w-full"
|
||||
:model-value="componentConstructeurIds"
|
||||
:initial-options="componentConstructeursDisplay"
|
||||
@update:model-value="handleConstructeurChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Read-only info -->
|
||||
<div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
|
||||
<div>
|
||||
<p class="text-xs text-base-content/40 mb-0.5">Nom</p>
|
||||
<p class="text-base-content">{{ component.name }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-base-content/40 mb-0.5">Référence</p>
|
||||
<p class="text-base-content">{{ component.reference || '—' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-base-content/40 mb-0.5">Prix</p>
|
||||
<p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
|
||||
<div v-if="componentConstructeursDisplay.length">
|
||||
<p
|
||||
v-for="constructeur in componentConstructeursDisplay"
|
||||
:key="constructeur.id"
|
||||
class="text-base-content"
|
||||
>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">
|
||||
{{ component.name }}
|
||||
</div>
|
||||
{{ constructeur.name }}
|
||||
<span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
|
||||
{{ formatConstructeurContact(constructeur) }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Référence</span></label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
v-model="component.reference"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
@blur="updateComponent"
|
||||
<p v-else class="text-base-content">—</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs text-base-content/40">Produit catalogue</p>
|
||||
<p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
|
||||
<p
|
||||
v-for="info in productInfoRows"
|
||||
:key="info.label"
|
||||
class="text-xs text-base-content/60"
|
||||
>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">
|
||||
{{ component.reference || 'Non définie' }}
|
||||
</div>
|
||||
{{ info.label }} : {{ info.value }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Prix</span></label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
v-model="component.prix"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="input input-bordered input-sm"
|
||||
@blur="updateComponent"
|
||||
>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">
|
||||
{{ component.prix ? `${component.prix}€` : 'Non défini' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Fournisseur</span></label>
|
||||
<ConstructeurSelect
|
||||
v-if="isEditMode"
|
||||
class="w-full"
|
||||
:model-value="componentConstructeurIds"
|
||||
:initial-options="componentConstructeursDisplay"
|
||||
@update:model-value="handleConstructeurChange"
|
||||
/>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">
|
||||
<div v-if="componentConstructeursDisplay.length" class="space-y-1">
|
||||
<div
|
||||
v-for="constructeur in componentConstructeursDisplay"
|
||||
:key="constructeur.id"
|
||||
class="flex flex-col"
|
||||
<NuxtLink
|
||||
v-if="component.product?.id"
|
||||
:to="`/product/${component.product.id}/edit`"
|
||||
class="btn btn-ghost btn-xs shrink-0"
|
||||
>
|
||||
Voir le produit
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<!-- Product documents -->
|
||||
<div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
|
||||
<p class="text-xs font-medium text-base-content/50">Documents du produit</p>
|
||||
<div
|
||||
v-for="document in productDocuments"
|
||||
:key="document.id || document.path || document.name"
|
||||
class="flex items-center justify-between gap-3 text-xs"
|
||||
>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
|
||||
<img
|
||||
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
||||
:src="document.fileUrl || document.path"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${document.name}`"
|
||||
>
|
||||
<span class="font-medium">{{ constructeur.name }}</span>
|
||||
<span
|
||||
v-if="formatConstructeurContact(constructeur)"
|
||||
class="text-xs text-gray-500"
|
||||
>
|
||||
{{ formatConstructeurContact(constructeur) }}
|
||||
</span>
|
||||
</div>
|
||||
<iframe
|
||||
v-else-if="shouldInlinePdf(document)"
|
||||
:src="documentPreviewSrc(document)"
|
||||
class="h-full w-full border-0 bg-white"
|
||||
title="Aperçu PDF"
|
||||
/>
|
||||
<component
|
||||
v-else
|
||||
:is="documentIcon(document).component"
|
||||
class="h-4 w-4"
|
||||
:class="documentIcon(document).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span v-else class="font-medium">Non défini</span>
|
||||
<span class="truncate text-base-content">{{ document.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control md:col-span-2">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Produit catalogue</span>
|
||||
</label>
|
||||
<div class="input input-bordered input-sm bg-base-200 min-h-[2.75rem] flex flex-col justify-center space-y-1">
|
||||
<template v-if="displayProduct">
|
||||
<span class="font-semibold text-base-content">
|
||||
{{ displayProductName || 'Produit catalogue' }}
|
||||
</span>
|
||||
<span
|
||||
v-for="info in productInfoRows"
|
||||
:key="info.label"
|
||||
class="text-xs text-base-content/70"
|
||||
>
|
||||
{{ info.label }} : {{ info.value }}
|
||||
</span>
|
||||
<NuxtLink
|
||||
v-if="component.product?.id"
|
||||
:to="`/product/${component.product.id}/edit`"
|
||||
class="link link-primary text-xs"
|
||||
>
|
||||
Ouvrir la fiche produit
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<span v-else class="font-medium">Non défini</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="productDocuments.length"
|
||||
class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
|
||||
>
|
||||
<h4 class="font-medium text-base-content">
|
||||
Documents du produit
|
||||
</h4>
|
||||
<div
|
||||
v-for="document in productDocuments"
|
||||
:key="document.id || document.path || document.name"
|
||||
class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(document)"
|
||||
@click="openPreview(document)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-12 w-10"
|
||||
>
|
||||
<img
|
||||
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
||||
:src="document.fileUrl || document.path"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${document.name}`"
|
||||
>
|
||||
<iframe
|
||||
v-else-if="shouldInlinePdf(document)"
|
||||
:src="documentPreviewSrc(document)"
|
||||
class="h-full w-full border-0 bg-white"
|
||||
title="Aperçu PDF"
|
||||
/>
|
||||
<component
|
||||
v-else
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
:class="documentIcon(document).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-base-content">
|
||||
{{ document.name }}
|
||||
</div>
|
||||
<div class="text-xs text-base-content/70">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(document)"
|
||||
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
||||
@click="openPreview(document)"
|
||||
>
|
||||
Consulter
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Consulter
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Custom Fields Display - Editable or Read-only -->
|
||||
<CommonCustomFieldDisplay
|
||||
<!-- Custom Fields -->
|
||||
<CustomFieldDisplay
|
||||
:fields="displayedCustomFields"
|
||||
:is-edit-mode="isEditMode"
|
||||
:columns="2"
|
||||
@field-blur="updateComponentCustomField"
|
||||
/>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
|
||||
<!-- Documents -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-semibold text-sm text-gray-700">
|
||||
Documents
|
||||
</h4>
|
||||
<span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
|
||||
{{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
|
||||
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
|
||||
<span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
|
||||
{{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p v-if="loadingDocuments" class="text-xs text-gray-500">
|
||||
Chargement des documents...
|
||||
<p v-if="loadingDocuments" class="text-xs text-base-content/50">
|
||||
Chargement...
|
||||
</p>
|
||||
|
||||
<DocumentUpload
|
||||
@@ -254,10 +217,10 @@
|
||||
|
||||
<!-- Component Pieces -->
|
||||
<div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
|
||||
<h4 class="font-semibold text-gray-700">
|
||||
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
||||
Pièces du composant
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
<PieceItem
|
||||
v-for="piece in component.pieces"
|
||||
:key="piece.id"
|
||||
@@ -271,11 +234,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Sub Components -->
|
||||
<div v-if="childComponents.length > 0" class="space-y-3">
|
||||
<h4 class="font-semibold text-gray-700">
|
||||
<div v-if="childComponents.length > 0" class="space-y-2">
|
||||
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
||||
Sous-composants
|
||||
</h4>
|
||||
<div class="space-y-3 pl-4 border-l-2 border-gray-200">
|
||||
</p>
|
||||
<div class="space-y-2 pl-4 border-l-2 border-base-200">
|
||||
<ComponentItem
|
||||
v-for="subComponent in childComponents"
|
||||
:key="subComponent.id"
|
||||
@@ -321,11 +284,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
|
||||
const props = defineProps({
|
||||
component: { type: Object, required: true },
|
||||
isEditMode: { type: Boolean, default: false },
|
||||
showDelete: { type: Boolean, default: false },
|
||||
collapseAll: { type: Boolean, default: true },
|
||||
toggleToken: { type: Number, default: 0 },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update', 'edit-piece', 'custom-field-update'])
|
||||
const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
|
||||
|
||||
// --- Shared composables ---
|
||||
const {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-if="customFields && customFields.length > 0" class="space-y-4">
|
||||
<h4 class="font-semibold text-gray-700 mb-3">
|
||||
<h4 class="font-semibold text-base-content/80 mb-3">
|
||||
Champs personnalisés
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-bold text-xl truncate">
|
||||
Prévisualisation
|
||||
<span v-if="navTotal > 1" class="text-base font-normal text-gray-500">
|
||||
<span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
|
||||
{{ activeIndex + 1 }} / {{ navTotal }}
|
||||
</span>
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="text-sm text-base-content/50 truncate">
|
||||
{{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> • {{ documentDescription }}</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
<template v-else-if="previewType === 'text'">
|
||||
<div class="w-full h-full overflow-auto">
|
||||
<div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500">
|
||||
<div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
|
||||
<span class="loading loading-spinner loading-md mr-2" />
|
||||
Chargement du document...
|
||||
</div>
|
||||
@@ -82,7 +82,7 @@
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="text-sm text-gray-500 text-center px-6">
|
||||
<div class="text-sm text-base-content/50 text-center px-6">
|
||||
Prévisualisation non disponible pour ce type de document.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<h3 class="font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-base-content/50">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -22,7 +22,7 @@
|
||||
<button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
|
||||
Sélectionner des fichiers
|
||||
</button>
|
||||
<span class="text-xs text-gray-500">ou glisser-déposer ici</span>
|
||||
<span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ file.name }}</span>
|
||||
<span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
|
||||
<span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
|
||||
<span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
|
||||
<span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
|
||||
<span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
|
||||
<span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-gray-500">
|
||||
<span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
|
||||
Structure vide
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<section :class="sectionClasses">
|
||||
<div :class="contentClasses">
|
||||
<div :class="['space-y-4', maxWidthClass]">
|
||||
<component :is="headingTag" v-if="title" class="text-4xl font-bold">
|
||||
<div :class="['space-y-3', maxWidthClass]">
|
||||
<component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
|
||||
{{ title }}
|
||||
</component>
|
||||
<p v-if="subtitle" class="text-sm opacity-90">
|
||||
<p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
<slot />
|
||||
@@ -58,9 +58,9 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const sectionClasses = computed(() => {
|
||||
const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight]
|
||||
const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
|
||||
if (props.rounded) {
|
||||
classes.push('rounded-lg')
|
||||
classes.push('rounded-xl', 'overflow-hidden')
|
||||
}
|
||||
return classes
|
||||
})
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<!-- Piece Header (collapsible, same pattern as ComponentItem) -->
|
||||
<div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
|
||||
<div class="flex items-start gap-3 w-full">
|
||||
<div class="flex items-start gap-3 flex-1 min-w-0">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
|
||||
@@ -21,7 +21,7 @@
|
||||
<IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
|
||||
<span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
|
||||
</button>
|
||||
<div class="flex-1">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ pieceData.name }}
|
||||
</h3>
|
||||
@@ -49,10 +49,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="showDelete"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs text-error shrink-0"
|
||||
title="Supprimer cette pièce"
|
||||
@click="$emit('delete')"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="!isCollapsed" class="space-y-4">
|
||||
<div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
|
||||
<div class="p-4 bg-base-100 border border-base-200 rounded-lg">
|
||||
<div class="space-y-2 text-sm">
|
||||
<div>
|
||||
<span class="font-medium">Référence:</span>
|
||||
@@ -82,7 +91,7 @@
|
||||
</span>
|
||||
<span
|
||||
v-if="formatConstructeurContact(constructeur)"
|
||||
class="text-xs text-gray-500"
|
||||
class="text-xs text-base-content/50"
|
||||
>
|
||||
{{ formatConstructeurContact(constructeur) }}
|
||||
</span>
|
||||
@@ -165,65 +174,10 @@
|
||||
<span class="font-semibold">{{ info.label }} :</span>
|
||||
<span class="ml-1">{{ info.value }}</span>
|
||||
</p>
|
||||
<div
|
||||
v-if="productDocuments.length"
|
||||
class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
|
||||
>
|
||||
<h5 class="font-medium text-base-content">Documents du produit</h5>
|
||||
<div
|
||||
v-for="document in productDocuments"
|
||||
:key="document.id || document.path || document.name"
|
||||
class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
|
||||
>
|
||||
<img
|
||||
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
||||
:src="document.fileUrl || document.path"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${document.name}`"
|
||||
>
|
||||
<iframe
|
||||
v-else-if="shouldInlinePdf(document)"
|
||||
:src="documentPreviewSrc(document)"
|
||||
class="h-full w-full border-0 bg-white"
|
||||
title="Aperçu PDF"
|
||||
/>
|
||||
<component
|
||||
v-else
|
||||
:is="documentIcon(document).component"
|
||||
class="h-5 w-5"
|
||||
:class="documentIcon(document).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-base-content">
|
||||
{{ document.name }}
|
||||
</div>
|
||||
<div class="text-xs text-base-content/70">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(document)"
|
||||
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
||||
@click="openPreview(document)"
|
||||
>
|
||||
Consulter
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ProductDocumentsInline
|
||||
:documents="productDocuments"
|
||||
@preview="openPreview"
|
||||
/>
|
||||
</div>
|
||||
<span v-else class="font-medium">
|
||||
Non défini
|
||||
@@ -234,16 +188,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Champs personnalisés de la pièce -->
|
||||
<CommonCustomFieldDisplay
|
||||
<CustomFieldDisplay
|
||||
:fields="displayedCustomFields"
|
||||
:is-edit-mode="isEditMode"
|
||||
@field-input="handleCustomFieldInput"
|
||||
@field-blur="handleCustomFieldBlur"
|
||||
/>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
|
||||
<div class="mt-4 pt-4 border-t border-base-200 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h5 class="text-sm font-medium text-gray-700">Documents</h5>
|
||||
<h5 class="text-sm font-medium text-base-content/80">Documents</h5>
|
||||
<span
|
||||
v-if="isEditMode && selectedFiles.length"
|
||||
class="badge badge-outline"
|
||||
@@ -255,7 +209,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p v-if="loadingDocuments" class="text-xs text-gray-500">
|
||||
<p v-if="loadingDocuments" class="text-xs text-base-content/50">
|
||||
Chargement des documents...
|
||||
</p>
|
||||
|
||||
@@ -287,7 +241,6 @@ import ProductSelect from '~/components/ProductSelect.vue'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { useProducts } from '~/composables/useProducts'
|
||||
import {
|
||||
@@ -295,13 +248,6 @@ import {
|
||||
resolveConstructeurs,
|
||||
uniqueConstructeurIds,
|
||||
} from '~/shared/constructeurUtils'
|
||||
import {
|
||||
formatSize,
|
||||
shouldInlinePdf,
|
||||
documentPreviewSrc,
|
||||
documentIcon,
|
||||
downloadDocument,
|
||||
} from '~/shared/utils/documentDisplayUtils'
|
||||
import {
|
||||
resolveFieldId,
|
||||
resolveFieldReadOnly,
|
||||
@@ -313,11 +259,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
|
||||
const props = defineProps({
|
||||
piece: { type: Object, required: true },
|
||||
isEditMode: { type: Boolean, default: false },
|
||||
showDelete: { type: Boolean, default: false },
|
||||
collapseAll: { type: Boolean, default: true },
|
||||
toggleToken: { type: Number, default: 0 },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update', 'edit', 'custom-field-update'])
|
||||
const emit = defineEmits(['update', 'edit', 'custom-field-update', 'delete'])
|
||||
|
||||
// --- Local reactive data for editing ---
|
||||
const pieceData = reactive({
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<p v-if="!products.length" class="text-xs text-gray-500">
|
||||
<p v-if="!products.length" class="text-xs text-base-content/50">
|
||||
Aucun produit défini.
|
||||
</p>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
Champs personnalisés
|
||||
</h3>
|
||||
|
||||
<p v-if="!fields.length" class="text-xs text-gray-500">
|
||||
<p v-if="!fields.length" class="text-xs text-base-content/50">
|
||||
Aucun champ personnalisé n'a encore été défini.
|
||||
</p>
|
||||
|
||||
|
||||
78
app/components/ProductDocumentsInline.vue
Normal file
78
app/components/ProductDocumentsInline.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="documents.length"
|
||||
class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
|
||||
>
|
||||
<h5 class="font-medium text-base-content">Documents du produit</h5>
|
||||
<div
|
||||
v-for="document in documents"
|
||||
:key="document.id || document.path || document.name"
|
||||
class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
|
||||
>
|
||||
<img
|
||||
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
||||
:src="document.fileUrl || document.path"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${document.name}`"
|
||||
>
|
||||
<iframe
|
||||
v-else-if="shouldInlinePdf(document)"
|
||||
:src="documentPreviewSrc(document)"
|
||||
class="h-full w-full border-0 bg-white"
|
||||
title="Aperçu PDF"
|
||||
/>
|
||||
<component
|
||||
v-else
|
||||
:is="documentIcon(document).component"
|
||||
class="h-5 w-5"
|
||||
:class="documentIcon(document).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-base-content">
|
||||
{{ document.name }}
|
||||
</div>
|
||||
<div class="text-xs text-base-content/70">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(document)"
|
||||
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
||||
@click="$emit('preview', document)"
|
||||
>
|
||||
Consulter
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
|
||||
import {
|
||||
formatSize,
|
||||
shouldInlinePdf,
|
||||
documentPreviewSrc,
|
||||
documentIcon,
|
||||
downloadDocument,
|
||||
} from '~/shared/utils/documentDisplayUtils'
|
||||
|
||||
defineProps({
|
||||
documents: { type: Array, required: true },
|
||||
})
|
||||
|
||||
defineEmits(['preview'])
|
||||
</script>
|
||||
@@ -9,7 +9,7 @@
|
||||
</span>
|
||||
</label>
|
||||
<template v-if="isRoot">
|
||||
<p class="text-[11px] text-gray-500">
|
||||
<p class="text-[11px] text-base-content/50">
|
||||
Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
|
||||
</p>
|
||||
</template>
|
||||
@@ -31,7 +31,7 @@
|
||||
{{ formatComponentTypeOption(type) }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="text-[11px] text-gray-500">
|
||||
<p class="text-[11px] text-base-content/50">
|
||||
{{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
|
||||
</p>
|
||||
<div v-if="!isRoot" class="form-control mt-2">
|
||||
@@ -73,7 +73,7 @@
|
||||
<h4 :class="headingClass">
|
||||
{{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
|
||||
</h4>
|
||||
<p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
|
||||
<p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
|
||||
Aucun champ n'a encore été défini.
|
||||
</p>
|
||||
<div v-else class="space-y-2">
|
||||
@@ -159,7 +159,7 @@
|
||||
<h4 :class="headingClass">
|
||||
{{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
|
||||
</h4>
|
||||
<p v-if="!(node.products?.length)" class="text-xs text-gray-500">
|
||||
<p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
|
||||
Aucun produit défini.
|
||||
</p>
|
||||
<div v-else class="space-y-2">
|
||||
@@ -230,7 +230,7 @@
|
||||
<h4 :class="headingClass">
|
||||
{{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
|
||||
</h4>
|
||||
<p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
|
||||
<p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
|
||||
Aucune pièce définie.
|
||||
</p>
|
||||
<div v-else class="space-y-2">
|
||||
@@ -276,7 +276,7 @@
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="mt-1 text-[11px] text-gray-500">
|
||||
<p class="mt-1 text-[11px] text-base-content/50">
|
||||
{{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -300,10 +300,10 @@
|
||||
|
||||
<section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
|
||||
<h4 :class="headingClass">Sous-composants</h4>
|
||||
<p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
|
||||
<p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
|
||||
Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
|
||||
</p>
|
||||
<p v-if="!hasSubcomponents" class="text-xs text-gray-500">
|
||||
<p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
|
||||
Aucun sous-composant défini.
|
||||
</p>
|
||||
<div v-else class="space-y-3">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="fields.length"
|
||||
class="mt-4 pt-4 border-t border-gray-200"
|
||||
class="mt-4 pt-4 border-t border-base-200"
|
||||
>
|
||||
<h5 class="text-sm font-medium text-gray-700 mb-3">
|
||||
<h5 class="text-sm font-medium text-base-content/80 mb-3">
|
||||
Champs personnalisés
|
||||
</h5>
|
||||
<div :class="layoutClass">
|
||||
|
||||
@@ -63,13 +63,13 @@
|
||||
|
||||
<!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
|
||||
<template v-else>
|
||||
<div class="overflow-x-auto overflow-y-clip relative">
|
||||
<div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
|
||||
<!-- Loading overlay (keeps table & filter inputs visible) -->
|
||||
<div
|
||||
v-if="loading && hasFilterableColumns"
|
||||
class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
|
||||
class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
|
||||
>
|
||||
<span class="loading loading-spinner" aria-hidden="true" />
|
||||
<span class="loading loading-spinner text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<table :class="['table table-sm md:table-md', tableClass]">
|
||||
<thead>
|
||||
@@ -175,7 +175,7 @@
|
||||
</tr>
|
||||
<!-- Expanded row -->
|
||||
<tr v-if="expandable && isExpanded(row)">
|
||||
<td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
|
||||
<td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
|
||||
<slot name="row-expanded" :row="row" :index="idx" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-base-content/50">
|
||||
{{ labels.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="requirements.length === 0" class="text-sm text-gray-500 bg-base-200/60 rounded-md p-4">
|
||||
<div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
|
||||
{{ labels.emptyState }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -41,11 +41,11 @@
|
||||
v-if="openDropdown"
|
||||
class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
|
||||
>
|
||||
<div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
|
||||
<div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
|
||||
<span class="loading loading-spinner loading-xs" />
|
||||
Recherche en cours…
|
||||
</div>
|
||||
<div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
|
||||
<div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
|
||||
{{ emptyText }}
|
||||
</div>
|
||||
<ul v-else class="flex flex-col">
|
||||
@@ -69,7 +69,7 @@
|
||||
{{ resolveLabel(option) }}
|
||||
</slot>
|
||||
</span>
|
||||
<span v-if="resolveDescription(option)" class="text-xs text-gray-500">
|
||||
<span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
|
||||
<slot name="option-description" :option="option">
|
||||
{{ resolveDescription(option) }}
|
||||
</slot>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<!-- Empty state: component variant -->
|
||||
<p
|
||||
v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
|
||||
class="text-xs text-gray-500"
|
||||
class="text-xs text-base-content/50"
|
||||
>
|
||||
Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
|
||||
</p>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
@blur="onBlur"
|
||||
@focus="(event) => emit('focus', event)"
|
||||
/>
|
||||
<p v-if="help" :id="helpId" class="mt-2 text-xs text-gray-500">
|
||||
<p v-if="help" :id="helpId" class="mt-2 text-xs text-base-content/50">
|
||||
{{ help }}
|
||||
</p>
|
||||
<p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
<template>
|
||||
<div class="navbar bg-base-100 shadow-lg">
|
||||
<div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
|
||||
<div class="navbar-start">
|
||||
<!-- Mobile hamburger menu -->
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
|
||||
<IconLucideMenu class="w-5 h-5" aria-hidden="true" />
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
|
||||
class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
|
||||
>
|
||||
<li class="pt-1 pb-2 lg:hidden">
|
||||
<button
|
||||
class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
|
||||
class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
|
||||
@click="toggleDarkMode"
|
||||
>
|
||||
<IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
|
||||
<IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
|
||||
{{ isDark ? 'Mode clair' : 'Mode sombre' }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="pt-1 pb-2 lg:hidden">
|
||||
<button
|
||||
class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
|
||||
@click="$emit('open-settings')"
|
||||
>
|
||||
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
|
||||
@@ -24,7 +34,7 @@
|
||||
<li v-for="link in simpleLinks" :key="link.to">
|
||||
<NuxtLink
|
||||
:to="link.to"
|
||||
class="rounded-md px-2 py-1 transition-colors flex items-center gap-2"
|
||||
class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
|
||||
:class="linkClass(link)"
|
||||
>
|
||||
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
|
||||
@@ -40,7 +50,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
|
||||
class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-all"
|
||||
:class="groupClass(group)"
|
||||
:aria-expanded="openDropdown === group.id + '-mobile'"
|
||||
@click="toggleDropdown(group.id + '-mobile')"
|
||||
@@ -52,7 +62,7 @@
|
||||
{{ group.label }}
|
||||
</span>
|
||||
<IconLucideChevronRight
|
||||
class="h-4 w-4 transition-transform"
|
||||
class="h-3.5 w-3.5 transition-transform duration-200"
|
||||
:class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -60,12 +70,12 @@
|
||||
<Transition name="nav-dropdown-mobile">
|
||||
<ul
|
||||
v-if="openDropdown === group.id + '-mobile'"
|
||||
class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
|
||||
class="mt-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
|
||||
>
|
||||
<li v-for="child in group.children" :key="child.to">
|
||||
<NuxtLink
|
||||
:to="child.to"
|
||||
class="rounded-md px-2 py-1 transition-colors block"
|
||||
class="rounded-md px-3 py-1.5 transition-colors block text-sm"
|
||||
:class="childLinkClass(child)"
|
||||
>
|
||||
{{ child.label }}
|
||||
@@ -81,30 +91,28 @@
|
||||
</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="avatar">
|
||||
<div class="w-14">
|
||||
<img
|
||||
:src="logoSrc"
|
||||
alt="Logo Malio"
|
||||
class="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<NuxtLink to="/" class="flex items-center gap-2.5 group">
|
||||
<div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
|
||||
<img
|
||||
:src="logoSrc"
|
||||
alt="Logo Malio"
|
||||
class="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<NuxtLink to="/" class="btn btn-ghost text-xl">
|
||||
<span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
|
||||
Inventory
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Desktop navbar -->
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<ul class="menu menu-horizontal gap-0.5 px-1">
|
||||
<!-- Desktop: simple links -->
|
||||
<li v-for="link in simpleLinks" :key="link.to">
|
||||
<NuxtLink
|
||||
:to="link.to"
|
||||
class="transition-colors px-3 py-2 rounded-md flex items-center gap-1.5"
|
||||
class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
|
||||
:class="linkClass(link)"
|
||||
>
|
||||
<component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
|
||||
@@ -124,7 +132,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 transition-colors"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 transition-all text-sm font-medium"
|
||||
:class="groupClass(group)"
|
||||
:aria-expanded="openDropdown === group.id + '-desktop'"
|
||||
@click="toggleDropdown(group.id + '-desktop')"
|
||||
@@ -133,21 +141,21 @@
|
||||
>
|
||||
<component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
|
||||
{{ group.label }}
|
||||
<IconLucideChevronRight
|
||||
class="h-4 w-4 transition-transform"
|
||||
:class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
|
||||
<IconLucideChevronDown
|
||||
class="h-3.5 w-3.5 transition-transform duration-200"
|
||||
:class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<Transition name="nav-dropdown-desktop">
|
||||
<ul
|
||||
v-if="openDropdown === group.id + '-desktop'"
|
||||
class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
|
||||
class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
|
||||
>
|
||||
<li v-for="child in group.children" :key="child.to">
|
||||
<NuxtLink
|
||||
:to="child.to"
|
||||
class="block rounded-md px-2 py-1 transition-colors"
|
||||
class="block rounded-lg px-3 py-2 transition-all text-sm"
|
||||
:class="childLinkClass(child)"
|
||||
>
|
||||
{{ child.label }}
|
||||
@@ -164,13 +172,21 @@
|
||||
|
||||
<!-- Navbar end -->
|
||||
<div class="navbar-end">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button
|
||||
class="btn btn-ghost btn-circle hidden lg:inline-flex"
|
||||
class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
|
||||
:title="isDark ? 'Mode clair' : 'Mode sombre'"
|
||||
@click="toggleDarkMode"
|
||||
>
|
||||
<IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
|
||||
<IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
|
||||
title="Paramètres d'affichage"
|
||||
@click="$emit('open-settings')"
|
||||
>
|
||||
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
|
||||
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<ClientOnly>
|
||||
@@ -178,7 +194,7 @@
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-ghost btn-circle avatar placeholder indicator"
|
||||
class="indicator cursor-pointer"
|
||||
>
|
||||
<span
|
||||
v-if="unresolvedCount > 0"
|
||||
@@ -187,47 +203,49 @@
|
||||
{{ unresolvedCount }}
|
||||
</span>
|
||||
<div
|
||||
class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
|
||||
class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
|
||||
>
|
||||
<span
|
||||
class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
|
||||
>
|
||||
<span class="text-xs font-semibold">
|
||||
{{ activeProfileInitials }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
|
||||
class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
|
||||
>
|
||||
<li class="px-2 py-1 text-sm text-base-content/70">
|
||||
Connecté en tant que<br />
|
||||
<span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
|
||||
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
|
||||
<li class="px-3 py-2">
|
||||
<div class="flex flex-col gap-1 pointer-events-none">
|
||||
<span class="text-xs text-base-content/50">Connecté en tant que</span>
|
||||
<span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
|
||||
<span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<div class="divider my-0.5 px-2" />
|
||||
<li v-if="isAdmin">
|
||||
<NuxtLink to="/admin" class="justify-between">
|
||||
<NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
|
||||
Administration
|
||||
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
|
||||
<IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/comments" class="justify-between">
|
||||
<NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
|
||||
Commentaires
|
||||
<span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
|
||||
{{ unresolvedCount }}
|
||||
</span>
|
||||
<IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" />
|
||||
<IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<div class="divider my-0.5 px-2" />
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="text-error justify-between"
|
||||
class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
|
||||
@click="$emit('logout')"
|
||||
>
|
||||
Déconnexion
|
||||
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
|
||||
<IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -248,6 +266,7 @@ import { useComments } from '~/composables/useComments'
|
||||
import IconLucideMenu from '~icons/lucide/menu'
|
||||
import IconLucideSettings from '~icons/lucide/settings'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideChevronDown from '~icons/lucide/chevron-down'
|
||||
import IconLucideLogOut from '~icons/lucide/log-out'
|
||||
import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
|
||||
import IconLucideFactory from '~icons/lucide/factory'
|
||||
@@ -256,6 +275,8 @@ import IconLucideCpu from '~icons/lucide/cpu'
|
||||
import IconLucidePuzzle from '~icons/lucide/puzzle'
|
||||
import IconLucidePackage from '~icons/lucide/package'
|
||||
import IconLucideLink from '~icons/lucide/link'
|
||||
import IconLucideSun from '~icons/lucide/sun'
|
||||
import IconLucideMoon from '~icons/lucide/moon'
|
||||
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
|
||||
|
||||
defineEmits<{
|
||||
@@ -333,6 +354,7 @@ const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = use
|
||||
const { activeProfile } = useProfileSession()
|
||||
const { isAdmin, canEdit } = usePermissions()
|
||||
const { fetchUnresolvedCount } = useComments()
|
||||
const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
|
||||
|
||||
const unresolvedCount = ref(0)
|
||||
let pollInterval: ReturnType<typeof setInterval> | null = null
|
||||
@@ -343,6 +365,7 @@ const refreshUnresolvedCount = async () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initDarkMode()
|
||||
refreshUnresolvedCount()
|
||||
pollInterval = setInterval(refreshUnresolvedCount, 60_000)
|
||||
})
|
||||
@@ -365,19 +388,19 @@ const isGroupActive = (group: NavGroup) => {
|
||||
const linkClass = (link: NavLink) => {
|
||||
return isActive(link.to)
|
||||
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
||||
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
||||
: 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
|
||||
}
|
||||
|
||||
const groupClass = (group: NavGroup) => {
|
||||
return isGroupActive(group)
|
||||
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
||||
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
||||
: 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
|
||||
}
|
||||
|
||||
const childLinkClass = (child: NavLink) => {
|
||||
return isActive(child.to)
|
||||
? 'bg-primary/10 text-primary font-semibold'
|
||||
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
||||
: 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
|
||||
}
|
||||
|
||||
const roleLabel = computed(() => {
|
||||
@@ -418,12 +441,12 @@ const activeProfileInitials = computed(() => {
|
||||
.nav-dropdown-desktop-enter-from,
|
||||
.nav-dropdown-desktop-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(0.25rem);
|
||||
transform: translateY(4px) scale(0.98);
|
||||
}
|
||||
.nav-dropdown-desktop-enter-to,
|
||||
.nav-dropdown-desktop-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.nav-dropdown-mobile-enter-active,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title">Composants</h2>
|
||||
@@ -25,22 +25,15 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="component in components" :key="component.id" class="relative">
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs absolute top-2 right-2 z-10"
|
||||
title="Supprimer ce composant"
|
||||
@click="$emit('remove-component', component.linkId || component.id)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<div v-for="component in components" :key="component.id">
|
||||
<ComponentHierarchy
|
||||
:components="[component]"
|
||||
:is-edit-mode="false"
|
||||
:show-delete="isEditMode"
|
||||
:collapse-all="collapsed"
|
||||
:toggle-token="collapseToggleToken"
|
||||
@edit-piece="$emit('edit-piece', $event)"
|
||||
@delete="$emit('remove-component', component.linkId || component.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
124
app/components/machine/MachineCustomFieldDefEditor.vue
Normal file
124
app/components/machine/MachineCustomFieldDefEditor.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<section class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold">
|
||||
Définitions des champs personnalisés
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="saving"
|
||||
@click="$emit('save')"
|
||||
>
|
||||
<span v-if="saving" class="loading loading-spinner loading-xs" />
|
||||
Enregistrer les champs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="!fields.length" class="text-xs text-gray-500">
|
||||
Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
|
||||
</p>
|
||||
|
||||
<ul v-else class="space-y-2" role="list">
|
||||
<li
|
||||
v-for="(field, index) in fields"
|
||||
:key="field.uid"
|
||||
class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
|
||||
:class="reorderClass(index)"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart(index, $event)"
|
||||
@dragenter="onDragEnter(index)"
|
||||
@dragover.prevent="onDragEnter(index)"
|
||||
@drop.prevent="onDrop(index)"
|
||||
@dragend="onDragEnd"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
|
||||
title="Réordonner"
|
||||
draggable="false"
|
||||
>
|
||||
<IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<input
|
||||
v-model="field.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Nom du champ"
|
||||
>
|
||||
<select v-model="field.type" class="select select-bordered select-sm">
|
||||
<option value="text">
|
||||
Texte
|
||||
</option>
|
||||
<option value="number">
|
||||
Nombre
|
||||
</option>
|
||||
<option value="select">
|
||||
Liste
|
||||
</option>
|
||||
<option value="boolean">
|
||||
Oui/Non
|
||||
</option>
|
||||
<option value="date">
|
||||
Date
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
|
||||
Obligatoire
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
v-if="field.type === 'select'"
|
||||
v-model="field.optionsText"
|
||||
class="textarea textarea-bordered textarea-sm h-20"
|
||||
placeholder="Option 1 Option 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs btn-square text-error"
|
||||
@click="$emit('remove-field', index)"
|
||||
>
|
||||
<IconLucideTrash class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
|
||||
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
|
||||
Ajouter un champ
|
||||
</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
|
||||
import IconLucideGripVertical from '~icons/lucide/grip-vertical'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideTrash from '~icons/lucide/trash'
|
||||
|
||||
defineProps<{
|
||||
fields: MachineCustomFieldEditorField[]
|
||||
saving: boolean
|
||||
reorderClass: (index: number) => string
|
||||
onDragStart: (index: number, event: DragEvent) => void
|
||||
onDragEnter: (index: number) => void
|
||||
onDrop: (index: number) => void
|
||||
onDragEnd: () => void
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
save: []
|
||||
'add-field': []
|
||||
'remove-field': [index: number]
|
||||
}>()
|
||||
</script>
|
||||
221
app/components/machine/MachineCustomFieldsCard.vue
Normal file
221
app/components/machine/MachineCustomFieldsCard.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="card-title">Champs personnalisés</h2>
|
||||
<p class="text-xs text-gray-500">
|
||||
Champs personnalisés propres à cette machine.
|
||||
</p>
|
||||
</div>
|
||||
<span v-if="visibleCustomFields.length" class="badge badge-outline">
|
||||
{{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- View mode: display values -->
|
||||
<template v-if="!isEditMode">
|
||||
<div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="field in visibleCustomFields"
|
||||
:key="field.customFieldValueId || field.id || field.name"
|
||||
class="form-control"
|
||||
>
|
||||
<label class="label">
|
||||
<span class="label-text text-sm">{{ field.name }}</span>
|
||||
</label>
|
||||
<div class="input input-bordered input-sm bg-base-200">
|
||||
{{ formatCustomFieldValue(field) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="text-xs text-gray-500">
|
||||
Aucun champ personnalisé défini pour cette machine.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Edit mode: definition management + value editing -->
|
||||
<template v-else>
|
||||
<p v-if="!customFields.length" class="text-xs text-gray-500">
|
||||
Aucun champ personnalisé défini.
|
||||
</p>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="(field, index) in customFields"
|
||||
:key="field.id || field.name || index"
|
||||
class="border border-base-200 rounded-md p-3 space-y-2"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex-1 space-y-2">
|
||||
<!-- Definition fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||
<input
|
||||
:value="field.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Nom du champ"
|
||||
@blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<select
|
||||
:value="field.type || 'text'"
|
||||
class="select select-bordered select-sm"
|
||||
@change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="text">Texte</option>
|
||||
<option value="number">Nombre</option>
|
||||
<option value="select">Liste</option>
|
||||
<option value="boolean">Oui/Non</option>
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm"
|
||||
:checked="!!field.required"
|
||||
@change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
Obligatoire
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Options for select type -->
|
||||
<textarea
|
||||
v-if="(field.type || 'text') === 'select'"
|
||||
:value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
|
||||
class="textarea textarea-bordered textarea-sm h-20 w-full"
|
||||
placeholder="Option 1 Option 2"
|
||||
@blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
|
||||
></textarea>
|
||||
|
||||
<!-- Value editing -->
|
||||
<div class="pt-1 border-t border-base-200">
|
||||
<label class="label py-0">
|
||||
<span class="label-text text-xs text-base-content/60">Valeur</span>
|
||||
</label>
|
||||
<input
|
||||
v-if="!field.type || field.type === 'text'"
|
||||
:value="field.value ?? ''"
|
||||
type="text"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="Valeur..."
|
||||
@input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('update-custom-field', field)"
|
||||
/>
|
||||
<input
|
||||
v-else-if="field.type === 'number'"
|
||||
:value="field.value ?? ''"
|
||||
type="number"
|
||||
class="input input-bordered input-sm w-full"
|
||||
placeholder="Valeur..."
|
||||
@input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('update-custom-field', field)"
|
||||
/>
|
||||
<select
|
||||
v-else-if="field.type === 'select'"
|
||||
:value="field.value ?? ''"
|
||||
class="select select-bordered select-sm w-full"
|
||||
@change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
<option
|
||||
v-for="option in field.options"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
v-else-if="field.type === 'boolean'"
|
||||
class="flex items-center gap-3 cursor-pointer py-1"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary toggle-sm"
|
||||
:checked="String(field.value).toLowerCase() === 'true'"
|
||||
@change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
|
||||
>
|
||||
<span
|
||||
class="text-sm"
|
||||
:class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
|
||||
>
|
||||
{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
v-else-if="field.type === 'date'"
|
||||
:value="field.value ?? ''"
|
||||
type="date"
|
||||
class="input input-bordered input-sm w-full"
|
||||
@input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('update-custom-field', field)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
|
||||
title="Supprimer ce champ"
|
||||
@click="$emit('delete-field', field.id || field.customFieldId)"
|
||||
>
|
||||
<IconLucideTrash class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm md:btn-md btn-primary"
|
||||
@click="$emit('add-field')"
|
||||
>
|
||||
Ajouter un champ personnalisé
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import IconLucideTrash from '~icons/lucide/trash'
|
||||
import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
|
||||
|
||||
defineProps<{
|
||||
customFields: any[]
|
||||
visibleCustomFields: any[]
|
||||
isEditMode: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'set-custom-field-value': [field: any, value: unknown]
|
||||
'update-custom-field': [field: any]
|
||||
'add-field': []
|
||||
'delete-field': [fieldId: string]
|
||||
'update-field-definition': [fieldId: string, data: Record<string, unknown>]
|
||||
}>()
|
||||
|
||||
const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
|
||||
const fieldId = field.id || field.customFieldId
|
||||
if (!fieldId) return
|
||||
emit('update-field-definition', fieldId, { ...field, [key]: value })
|
||||
}
|
||||
|
||||
const handleOptionsUpdate = (field: any, raw: string) => {
|
||||
const fieldId = field.id || field.customFieldId
|
||||
if (!fieldId) return
|
||||
const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
|
||||
emit('update-field-definition', fieldId, { ...field, options })
|
||||
}
|
||||
|
||||
const onSelectChange = (field: any, value: string) => {
|
||||
emit('set-custom-field-value', field, value)
|
||||
emit('update-custom-field', field)
|
||||
}
|
||||
|
||||
const onBooleanChange = (field: any, checked: boolean) => {
|
||||
emit('set-custom-field-value', field, checked ? 'true' : 'false')
|
||||
emit('update-custom-field', field)
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg mt-6">
|
||||
<div class="card bg-base-100 shadow-sm mt-6">
|
||||
<div class="card-body space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -74,7 +74,7 @@
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs"
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
:disabled="uploading"
|
||||
@click="$emit('remove', doc.id)"
|
||||
>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Informations de la machine</h2>
|
||||
<h2 class="card-title tracking-tight">Informations de la machine</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
@@ -20,6 +20,29 @@
|
||||
{{ machineName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Site</span>
|
||||
</label>
|
||||
<select
|
||||
v-if="isEditMode"
|
||||
:value="machineSiteId"
|
||||
class="select select-bordered"
|
||||
@change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
|
||||
>
|
||||
<option value="">Sélectionner un site</option>
|
||||
<option
|
||||
v-for="site in sites"
|
||||
:key="site.id"
|
||||
:value="site.id"
|
||||
>
|
||||
{{ site.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-else class="input input-bordered bg-base-200">
|
||||
{{ machineSiteName || 'Non défini' }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isEditMode || machineReference" class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Référence</span>
|
||||
@@ -59,7 +82,7 @@
|
||||
<span class="font-medium">{{ constructeur.name }}</span>
|
||||
<span
|
||||
v-if="formatConstructeurContactSummary(constructeur)"
|
||||
class="text-xs text-gray-500"
|
||||
class="text-xs text-base-content/50"
|
||||
>
|
||||
{{ formatConstructeurContactSummary(constructeur) }}
|
||||
</span>
|
||||
@@ -71,8 +94,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Champs personnalisés -->
|
||||
<div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
|
||||
<h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
|
||||
<div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
|
||||
<h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="field in visibleCustomFields"
|
||||
@@ -151,34 +174,69 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
|
||||
<MachineCustomFieldDefEditor
|
||||
:fields="fieldDefs.fields.value"
|
||||
:saving="fieldDefs.saving.value"
|
||||
:reorder-class="fieldDefs.reorderClass"
|
||||
:on-drag-start="fieldDefs.onDragStart"
|
||||
:on-drag-enter="fieldDefs.onDragEnter"
|
||||
:on-drop="fieldDefs.onDrop"
|
||||
:on-drag-end="fieldDefs.onDragEnd"
|
||||
@save="fieldDefs.saveDefinitions()"
|
||||
@add-field="fieldDefs.addField()"
|
||||
@remove-field="fieldDefs.removeField($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
|
||||
import {
|
||||
formatConstructeurContact as formatConstructeurContactSummary,
|
||||
} from '~/shared/constructeurUtils'
|
||||
import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
|
||||
import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
isEditMode: boolean
|
||||
machineName: string
|
||||
machineReference: string
|
||||
machineSiteId: string
|
||||
machineSiteName: string
|
||||
sites: any[]
|
||||
machineConstructeurIds: string[]
|
||||
machineConstructeursDisplay: any[]
|
||||
hasMachineConstructeur: boolean
|
||||
visibleCustomFields: any[]
|
||||
getMachineFieldId: (fieldName: string) => string
|
||||
machineId: string
|
||||
machineCustomFieldDefs: any[]
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
const emit = defineEmits<{
|
||||
'update:machine-name': [value: string]
|
||||
'update:machine-reference': [value: string]
|
||||
'update:machine-site-id': [value: string]
|
||||
'update:constructeur-ids': [ids: unknown]
|
||||
'blur-field': []
|
||||
'set-custom-field-value': [field: any, value: unknown]
|
||||
'update-custom-field': [field: any]
|
||||
'custom-fields-saved': []
|
||||
}>()
|
||||
|
||||
const fieldDefs = useMachineCustomFieldDefs({
|
||||
machineId: props.machineId,
|
||||
initialDefs: props.machineCustomFieldDefs,
|
||||
onSaved: () => emit('custom-fields-saved'),
|
||||
})
|
||||
|
||||
watch(() => props.machineCustomFieldDefs, (newDefs) => {
|
||||
fieldDefs.reinit(newDefs)
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title">Pièces de la machine</h2>
|
||||
@@ -25,22 +25,15 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="piece in pieces" :key="piece.id" class="relative">
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs absolute top-2 right-2 z-10"
|
||||
title="Supprimer cette pièce"
|
||||
@click="$emit('remove-piece', piece.linkId || piece.id)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<div v-for="piece in pieces" :key="piece.id">
|
||||
<PieceItem
|
||||
:piece="piece"
|
||||
:is-edit-mode="false"
|
||||
:show-delete="isEditMode"
|
||||
:collapse-all="collapsed"
|
||||
:toggle-token="collapseToggleToken"
|
||||
@edit="$emit('edit-piece', $event)"
|
||||
@delete="$emit('remove-piece', piece.linkId || piece.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-4">
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
@@ -24,24 +24,26 @@
|
||||
<div
|
||||
v-for="product in products"
|
||||
:key="product.id || product.name"
|
||||
class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2 relative"
|
||||
class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2"
|
||||
>
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs absolute top-2 right-2"
|
||||
title="Supprimer ce produit"
|
||||
@click="$emit('remove-product', (product.linkId || product.id) as string)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<div class="flex items-center justify-between flex-wrap gap-2">
|
||||
<p class="font-semibold text-base-content">
|
||||
{{ product.name }}
|
||||
</p>
|
||||
<span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
|
||||
{{ product.groupLabel }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
|
||||
{{ product.groupLabel }}
|
||||
</span>
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
title="Supprimer ce produit"
|
||||
@click="$emit('remove-product', (product.linkId || product.id) as string)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="product.reference" class="text-xs text-base-content/70">
|
||||
<span class="font-medium">Référence :</span>
|
||||
|
||||
@@ -99,66 +99,19 @@
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ModelTypesConversionModal
|
||||
<ConversionModal
|
||||
:open="conversionModalOpen"
|
||||
:model-type="conversionTarget"
|
||||
@close="closeConversionModal"
|
||||
@converted="onConverted"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
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>
|
||||
<RelatedItemsModal
|
||||
:open="relatedModalOpen"
|
||||
:model-type="relatedType"
|
||||
@close="relatedModalOpen = false"
|
||||
@open-edit="openRelatedEdit"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -166,10 +119,8 @@
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
|
||||
import { useHead, useRouter } from '#imports'
|
||||
import DataTable from '~/components/common/DataTable.vue'
|
||||
import ModelTypesConversionModal from '~/components/model-types/ConversionModal.vue'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import ConversionModal from '~/components/model-types/ConversionModal.vue'
|
||||
import { useUrlState } from '~/composables/useUrlState'
|
||||
import { extractCollection } from '~/shared/utils/apiHelpers'
|
||||
import type { DataTableSort } from '~/shared/types/dataTable'
|
||||
import {
|
||||
deleteModelType,
|
||||
@@ -233,7 +184,6 @@ let activeController: AbortController | null = null
|
||||
|
||||
const router = useRouter()
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { get } = useApi()
|
||||
const { canEdit } = usePermissions()
|
||||
|
||||
const headingText = computed(() => props.heading)
|
||||
@@ -422,106 +372,21 @@ 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 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: unknown): RelatedEntry | null => {
|
||||
if (!item || typeof item !== 'object') return null
|
||||
const record = item as Record<string, unknown>
|
||||
if (typeof record.id !== 'string') return null
|
||||
const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
|
||||
const reference
|
||||
= typeof record.reference === 'string' && record.reference.trim()
|
||||
? record.reference
|
||||
: typeof record.code === 'string' && record.code.trim()
|
||||
? record.code
|
||||
: null
|
||||
return { id: record.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 openRelatedEdit = (entry: { id: string }) => {
|
||||
const current = relatedType.value
|
||||
if (!current) return
|
||||
const basePath = resolveRelatedEditBasePath(current.category)
|
||||
@@ -531,10 +396,6 @@ const openRelatedEdit = (entry: RelatedEntry) => {
|
||||
})
|
||||
}
|
||||
|
||||
const closeRelatedModal = () => {
|
||||
relatedModalOpen.value = false
|
||||
}
|
||||
|
||||
const conversionModalOpen = ref(false)
|
||||
const conversionTarget = ref<ModelType | null>(null)
|
||||
|
||||
|
||||
182
app/components/model-types/RelatedItemsModal.vue
Normal file
182
app/components/model-types/RelatedItemsModal.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<dialog class="modal" :class="{ 'modal-open': open }">
|
||||
<div class="modal-box max-w-3xl">
|
||||
<h3 class="text-lg font-bold text-base-content">
|
||||
{{ modalTitle }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-base-content/70">
|
||||
{{ modalSubtitle }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 rounded-xl border border-base-200 bg-base-100">
|
||||
<div v-if="loading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
|
||||
<span class="loading loading-spinner loading-sm" aria-hidden="true" />
|
||||
Chargement des éléments liés…
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="px-4 py-6 text-sm text-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="items.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 items"
|
||||
: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="onOpenEdit(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="emit('close')">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { extractCollection } from '~/shared/utils/apiHelpers'
|
||||
import { humanizeError } from '~/shared/utils/errorMessages'
|
||||
import type { ModelCategory, ModelType } from '~/services/modelTypes'
|
||||
|
||||
type RelatedEntry = {
|
||||
id: string
|
||||
name: string
|
||||
reference?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
modelType: ModelType | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
'open-edit': [entry: RelatedEntry]
|
||||
}>()
|
||||
|
||||
const { get } = useApi()
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const items = ref<RelatedEntry[]>([])
|
||||
|
||||
const categoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
|
||||
COMPONENT: { plural: 'composants', singular: 'composant' },
|
||||
PIECE: { plural: 'pièces', singular: 'pièce' },
|
||||
PRODUCT: { plural: 'produits', singular: 'produit' },
|
||||
}
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
if (!props.modelType) return 'Éléments liés'
|
||||
return `Éléments liés à « ${props.modelType.name} »`
|
||||
})
|
||||
|
||||
const modalSubtitle = computed(() => {
|
||||
if (!props.modelType) return ''
|
||||
const labels = categoryLabels[props.modelType.category] ?? categoryLabels.COMPONENT
|
||||
const count = items.value.length
|
||||
if (loading.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 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 mapRelatedEntry = (item: unknown): RelatedEntry | null => {
|
||||
if (!item || typeof item !== 'object') return null
|
||||
const record = item as Record<string, unknown>
|
||||
if (typeof record.id !== 'string') return null
|
||||
const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
|
||||
const reference
|
||||
= typeof record.reference === 'string' && record.reference.trim()
|
||||
? record.reference
|
||||
: typeof record.code === 'string' && record.code.trim()
|
||||
? record.code
|
||||
: null
|
||||
return { id: record.id, name, reference }
|
||||
}
|
||||
|
||||
const loadRelatedItems = async (modelType: ModelType) => {
|
||||
const { endpoint, filterKey } = resolveRelatedConfig(modelType.category)
|
||||
const params = new URLSearchParams()
|
||||
params.set('itemsPerPage', '200')
|
||||
params.set(filterKey, `/api/model_types/${modelType.id}`)
|
||||
params.set('order[name]', 'asc')
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
items.value = []
|
||||
|
||||
try {
|
||||
const result = await get(`${endpoint}?${params.toString()}`)
|
||||
if (!result.success) {
|
||||
error.value = result.error ?? 'Impossible de charger les éléments liés.'
|
||||
return
|
||||
}
|
||||
const collection = extractCollection(result.data)
|
||||
items.value = collection
|
||||
.map(mapRelatedEntry)
|
||||
.filter((entry): entry is RelatedEntry => Boolean(entry))
|
||||
}
|
||||
catch (err) {
|
||||
let raw: string | null = null
|
||||
if (err && typeof err === 'object') {
|
||||
const e = err as { data?: Record<string, unknown>, statusMessage?: string, message?: string }
|
||||
if (e.data) {
|
||||
const data = e.data
|
||||
if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
|
||||
else if (typeof data.detail === 'string') raw = data.detail
|
||||
else if (typeof data.message === 'string') raw = data.message
|
||||
else if (typeof data.error === 'string') raw = data.error
|
||||
}
|
||||
if (!raw && typeof e.statusMessage === 'string') raw = e.statusMessage
|
||||
if (!raw && typeof e.message === 'string') raw = e.message
|
||||
}
|
||||
error.value = humanizeError(raw)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onOpenEdit = (entry: RelatedEntry) => {
|
||||
emit('open-edit', entry)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen && props.modelType) {
|
||||
void loadRelatedItems(props.modelType)
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
@@ -1,27 +1,37 @@
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<div
|
||||
class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
|
||||
:style="{
|
||||
borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
|
||||
background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
|
||||
}"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="card-title text-lg">
|
||||
<h3 class="card-title text-lg text-base-content">
|
||||
{{ site.name }}
|
||||
</h3>
|
||||
<div class="badge badge-primary badge-sm">
|
||||
<div
|
||||
class="badge font-bold"
|
||||
:style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
|
||||
:class="!site.color ? 'badge-primary' : ''"
|
||||
>
|
||||
{{ machineCount }} machines
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-700">
|
||||
<div class="flex items-center gap-2 text-base-content/80">
|
||||
<IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
|
||||
<span class="font-medium">{{ site.contactName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-600">
|
||||
<div class="flex items-center gap-2 text-base-content/60">
|
||||
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
|
||||
<span>{{ formattedContactPhone }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2 text-gray-600">
|
||||
<div class="flex items-start gap-2 text-base-content/60">
|
||||
<IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
|
||||
<span>
|
||||
{{ site.contactAddress }}<br>
|
||||
@@ -29,7 +39,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-600">
|
||||
<div class="flex items-center gap-2 text-base-content/60">
|
||||
<IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<span>{{ machineCount }} machine(s)</span>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,46 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Couleur</span>
|
||||
</label>
|
||||
<div v-if="siteRef.color" class="flex items-center gap-3">
|
||||
<input
|
||||
:value="siteRef.color"
|
||||
type="color"
|
||||
class="w-10 h-10 rounded cursor-pointer border border-base-300"
|
||||
:disabled="disabled"
|
||||
@input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
|
||||
>
|
||||
<input
|
||||
v-model="siteRef.color"
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
class="input input-bordered input-sm flex-1"
|
||||
:disabled="disabled"
|
||||
maxlength="7"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = ''"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm w-fit"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = '#3b82f6'"
|
||||
>
|
||||
Choisir une couleur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SiteContactFormFields :form="siteRef" :disabled="disabled" />
|
||||
|
||||
<div class="modal-action">
|
||||
@@ -39,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
|
||||
|
||||
type SiteForm = {
|
||||
name: string
|
||||
color: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactAddress: string
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="modal-box max-w-md">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
{{ disabled ? 'Détails du site' : 'Modifier le site' }}
|
||||
<span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
|
||||
<span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
|
||||
</h3>
|
||||
<form class="space-y-4" @submit.prevent="emit('submit')">
|
||||
<div class="form-control">
|
||||
@@ -20,6 +20,46 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Couleur</span>
|
||||
</label>
|
||||
<div v-if="form.color" class="flex items-center gap-3">
|
||||
<input
|
||||
:value="form.color"
|
||||
type="color"
|
||||
class="w-10 h-10 rounded cursor-pointer border border-base-300"
|
||||
:disabled="disabled"
|
||||
@input="form.color = $event.target.value"
|
||||
>
|
||||
<input
|
||||
v-model="form.color"
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
class="input input-bordered input-sm flex-1"
|
||||
:disabled="disabled"
|
||||
maxlength="7"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="disabled"
|
||||
@click="form.color = ''"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm w-fit"
|
||||
:disabled="disabled"
|
||||
@click="form.color = '#3b82f6'"
|
||||
>
|
||||
Choisir une couleur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SiteContactFormFields :form="props.form" :disabled="disabled" />
|
||||
|
||||
<div class="border-t border-base-200 pt-4 space-y-4">
|
||||
@@ -28,7 +68,7 @@
|
||||
<h4 class="font-semibold text-sm">
|
||||
Documents liés
|
||||
</h4>
|
||||
<p class="text-xs text-gray-500">
|
||||
<p class="text-xs text-base-content/50">
|
||||
Ajoutez des documents (PDF, images...) relatifs à ce site.
|
||||
</p>
|
||||
</div>
|
||||
@@ -74,7 +114,7 @@
|
||||
<div class="font-medium">
|
||||
{{ document.name }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<div class="text-xs text-base-content/50">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
417
app/composables/useComponentCreate.ts
Normal file
417
app/composables/useComponentCreate.ts
Normal file
@@ -0,0 +1,417 @@
|
||||
/**
|
||||
* Component creation page – orchestration composable.
|
||||
*
|
||||
* Pure structure-assignment helpers live in
|
||||
* `~/shared/utils/structureAssignmentHelpers.ts`.
|
||||
*/
|
||||
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from '#imports'
|
||||
import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
|
||||
import { useComponentTypes } from '~/composables/useComponentTypes'
|
||||
import { useComposants } from '~/composables/useComposants'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { useProducts } from '~/composables/useProducts'
|
||||
import { useProductTypes } from '~/composables/useProductTypes'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { humanizeError } from '~/shared/utils/errorMessages'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
normalizeCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import {
|
||||
getStructurePieces,
|
||||
resolvePieceLabel as _resolvePieceLabel,
|
||||
resolveProductLabel as _resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
fetchModelTypeNames,
|
||||
buildTypeLabelMap,
|
||||
} from '~/shared/utils/structureDisplayUtils'
|
||||
import {
|
||||
hasAssignments,
|
||||
initializeStructureAssignments,
|
||||
isAssignmentNodeComplete,
|
||||
serializeStructureAssignments,
|
||||
} from '~/shared/utils/structureAssignmentHelpers'
|
||||
import type { ComponentModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
|
||||
interface ComponentCatalogType extends ModelType {
|
||||
structure: ComponentModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main composable
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function useComponentCreate() {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
|
||||
const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { productTypes, loadProductTypes } = useProductTypes()
|
||||
const {
|
||||
createComposant,
|
||||
composants: componentCatalogRef,
|
||||
loading: componentsLoading,
|
||||
} = useComposants()
|
||||
const {
|
||||
pieces: pieceCatalogRef,
|
||||
loading: piecesLoading,
|
||||
} = usePieces()
|
||||
const {
|
||||
products: productCatalogRef,
|
||||
loading: productsLoading,
|
||||
} = useProducts()
|
||||
const toast = useToast()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const { uploadDocuments } = useDocuments()
|
||||
const { canEdit } = usePermissions()
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Local state
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
|
||||
const submitting = ref(false)
|
||||
const creationForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
const lastSuggestedName = ref('')
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const structureAssignments = ref<StructureAssignmentNode | null>(null)
|
||||
const selectedDocuments = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Computed
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
const availablePieces = computed(() => pieceCatalogRef.value ?? [])
|
||||
const availableProducts = computed(() => productCatalogRef.value ?? [])
|
||||
const availableComponents = computed(() => componentCatalogRef.value ?? [])
|
||||
const structureDataLoading = computed(
|
||||
() => piecesLoading.value || componentsLoading.value || productsLoading.value,
|
||||
)
|
||||
|
||||
const fetchedPieceTypeMap = ref<Record<string, string>>({})
|
||||
const pieceTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
|
||||
)
|
||||
const productTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(productTypes.value),
|
||||
)
|
||||
const componentTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(componentTypes.value),
|
||||
)
|
||||
|
||||
const componentTypeList = computed<ComponentCatalogType[]>(() =>
|
||||
(componentTypes.value || [])
|
||||
.filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
|
||||
)
|
||||
|
||||
const typeOptionLabel = (type?: ComponentCatalogType) =>
|
||||
type?.name || 'Catégorie'
|
||||
|
||||
const typeOptionDescription = (type?: ComponentCatalogType) =>
|
||||
type?.description ? String(type.description) : ''
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
|
||||
const structure = selectedType.value?.structure ?? null
|
||||
return structure ? normalizeStructureForEditor(structure) : null
|
||||
})
|
||||
|
||||
const structureHasRequirements = computed(() =>
|
||||
hasAssignments(structureAssignments.value),
|
||||
)
|
||||
|
||||
const structureSelectionsComplete = computed(() => {
|
||||
if (!structureHasRequirements.value) {
|
||||
return true
|
||||
}
|
||||
if (structureDataLoading.value) {
|
||||
return false
|
||||
}
|
||||
if (!structureAssignments.value) {
|
||||
return false
|
||||
}
|
||||
return isAssignmentNodeComplete(structureAssignments.value, true)
|
||||
})
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() => Boolean(
|
||||
canEdit.value
|
||||
&& selectedType.value
|
||||
&& creationForm.name
|
||||
&& requiredCustomFieldsFilled.value
|
||||
&& structureSelectionsComplete.value
|
||||
&& !submitting.value,
|
||||
))
|
||||
|
||||
const resolvePieceLabel = (piece: Record<string, any>) =>
|
||||
_resolvePieceLabel(piece, pieceTypeLabelMap.value)
|
||||
|
||||
const resolveProductLabel = (product: Record<string, any>) =>
|
||||
_resolveProductLabel(product, productTypeLabelMap.value)
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Watchers
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
watch(
|
||||
() => route.query.typeId,
|
||||
(value) => {
|
||||
if (typeof value === 'string') {
|
||||
selectedTypeId.value = value
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(selectedTypeId, (id) => {
|
||||
const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
|
||||
if ((id || '') === current) {
|
||||
return
|
||||
}
|
||||
const nextQuery = { ...route.query }
|
||||
if (id) {
|
||||
nextQuery.typeId = id
|
||||
}
|
||||
else {
|
||||
delete nextQuery.typeId
|
||||
}
|
||||
router.replace({ path: route.path, query: nextQuery }).catch(() => {})
|
||||
})
|
||||
|
||||
const clearCreationForm = () => {
|
||||
creationForm.name = ''
|
||||
creationForm.description = ''
|
||||
creationForm.reference = ''
|
||||
creationForm.constructeurIds = []
|
||||
creationForm.prix = ''
|
||||
lastSuggestedName.value = ''
|
||||
structureAssignments.value = null
|
||||
}
|
||||
|
||||
watch(selectedType, (type) => {
|
||||
if (!type) {
|
||||
clearCreationForm()
|
||||
customFieldInputs.value = []
|
||||
structureAssignments.value = null
|
||||
return
|
||||
}
|
||||
if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
|
||||
creationForm.name = type.name
|
||||
}
|
||||
lastSuggestedName.value = creationForm.name
|
||||
customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
|
||||
structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
|
||||
})
|
||||
|
||||
watch(
|
||||
selectedTypeStructure,
|
||||
(structure) => {
|
||||
const ids = getStructurePieces(structure)
|
||||
.map((piece: any) => piece?.typePieceId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (!ids.length) {
|
||||
return
|
||||
}
|
||||
fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Submission
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
const submitCreation = async () => {
|
||||
if (!selectedType.value) {
|
||||
toast.showError('Sélectionnez une catégorie de composant.')
|
||||
return
|
||||
}
|
||||
const payload: Record<string, any> = {
|
||||
name: creationForm.name.trim(),
|
||||
typeComposantId: selectedType.value.id,
|
||||
}
|
||||
|
||||
const description = creationForm.description.trim()
|
||||
if (description) {
|
||||
payload.description = description
|
||||
}
|
||||
|
||||
const reference = creationForm.reference.trim()
|
||||
if (reference) {
|
||||
payload.reference = reference
|
||||
}
|
||||
|
||||
if (creationForm.constructeurIds.length) {
|
||||
payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
|
||||
}
|
||||
|
||||
const rawPrice = typeof creationForm.prix === 'string'
|
||||
? creationForm.prix.trim()
|
||||
: creationForm.prix === null || creationForm.prix === undefined
|
||||
? ''
|
||||
: String(creationForm.prix).trim()
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
}
|
||||
|
||||
const rootProductSelection
|
||||
= structureAssignments.value?.products?.find(
|
||||
(product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
|
||||
) ?? null
|
||||
|
||||
if (rootProductSelection?.selectedProductId) {
|
||||
payload.productId = rootProductSelection.selectedProductId.trim()
|
||||
}
|
||||
|
||||
if (structureHasRequirements.value && !structureSelectionsComplete.value) {
|
||||
toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
|
||||
return
|
||||
}
|
||||
|
||||
const serializedStructure = structureHasRequirements.value
|
||||
? serializeStructureAssignments(structureAssignments.value)
|
||||
: null
|
||||
|
||||
if (serializedStructure) {
|
||||
payload.structure = serializedStructure
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const result = await createComposant(payload)
|
||||
if (result.success) {
|
||||
const createdComponent = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'composant',
|
||||
createdComponent.id,
|
||||
[createdComponent?.typeComposant?.customFields],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
if (selectedDocuments.value.length && result.data?.id) {
|
||||
uploadingDocuments.value = true
|
||||
const uploadResult = await uploadDocuments(
|
||||
{
|
||||
files: selectedDocuments.value,
|
||||
context: { composantId: result.data.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (!uploadResult.success) {
|
||||
const message = uploadResult.error
|
||||
? `Documents non ajoutés : ${uploadResult.error}`
|
||||
: 'Documents non ajoutés : une erreur est survenue.'
|
||||
toast.showError(message)
|
||||
}
|
||||
selectedDocuments.value = []
|
||||
}
|
||||
toast.showSuccess('Composant créé avec succès')
|
||||
await router.push('/component-catalog')
|
||||
}
|
||||
else if (result.error) {
|
||||
toast.showError(result.error)
|
||||
}
|
||||
}
|
||||
catch (error: any) {
|
||||
toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
|
||||
}
|
||||
finally {
|
||||
submitting.value = false
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Initialization
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([
|
||||
loadComponentTypes(),
|
||||
loadPieceTypes(),
|
||||
loadProductTypes(),
|
||||
])
|
||||
})
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Public API
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
return {
|
||||
// State
|
||||
selectedTypeId,
|
||||
submitting,
|
||||
creationForm,
|
||||
customFieldInputs,
|
||||
structureAssignments,
|
||||
selectedDocuments,
|
||||
uploadingDocuments,
|
||||
|
||||
// Computed
|
||||
loadingTypes,
|
||||
componentTypeList,
|
||||
selectedType,
|
||||
selectedTypeStructure,
|
||||
availablePieces,
|
||||
availableProducts,
|
||||
availableComponents,
|
||||
piecesLoading,
|
||||
productsLoading,
|
||||
componentsLoading,
|
||||
structureDataLoading,
|
||||
pieceTypeLabelMap,
|
||||
productTypeLabelMap,
|
||||
componentTypeLabelMap,
|
||||
structureHasRequirements,
|
||||
structureSelectionsComplete,
|
||||
canEdit,
|
||||
canSubmit,
|
||||
|
||||
// Functions
|
||||
typeOptionLabel,
|
||||
typeOptionDescription,
|
||||
formatStructurePreview,
|
||||
resolvePieceLabel,
|
||||
resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
submitCreation,
|
||||
}
|
||||
}
|
||||
461
app/composables/useComponentEdit.ts
Normal file
461
app/composables/useComponentEdit.ts
Normal file
@@ -0,0 +1,461 @@
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRouter } from '#imports'
|
||||
import { useComponentTypes } from '~/composables/useComponentTypes'
|
||||
import { useComposants } from '~/composables/useComposants'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { useProductTypes } from '~/composables/useProductTypes'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { useProducts } from '~/composables/useProducts'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { extractRelationId } from '~/shared/apiRelations'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { useComponentHistory } from '~/composables/useComponentHistory'
|
||||
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import {
|
||||
getStructurePieces,
|
||||
getStructureProducts,
|
||||
resolvePieceLabel as _resolvePieceLabel,
|
||||
resolveProductLabel as _resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
fetchModelTypeNames,
|
||||
buildTypeLabelMap,
|
||||
} from '~/shared/utils/structureDisplayUtils'
|
||||
import type { ComponentModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
buildCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
import { collectStructureSelections } from '~/shared/utils/structureSelectionUtils'
|
||||
|
||||
interface ComponentCatalogType extends ModelType {
|
||||
structure: ComponentModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
const historyFieldLabels: Record<string, string> = {
|
||||
name: 'Nom',
|
||||
reference: 'Référence',
|
||||
prix: 'Prix',
|
||||
structure: 'Structure',
|
||||
typeComposant: 'Catégorie',
|
||||
product: 'Produit lié',
|
||||
constructeurIds: 'Fournisseurs',
|
||||
}
|
||||
|
||||
export function useComponentEdit(componentId: string) {
|
||||
const { canEdit } = usePermissions()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
const { componentTypes, loadComponentTypes } = useComponentTypes()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { productTypes, loadProductTypes } = useProductTypes()
|
||||
const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
|
||||
const { pieces, loadPieces } = usePieces()
|
||||
const { products, loadProducts } = useProducts()
|
||||
const { ensureConstructeurs } = useConstructeurs()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const toast = useToast()
|
||||
const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
|
||||
const {
|
||||
history,
|
||||
loading: historyLoading,
|
||||
error: historyError,
|
||||
loadHistory,
|
||||
} = useComponentHistory()
|
||||
|
||||
const component = ref<any | null>(null)
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
const loadingDocuments = ref(false)
|
||||
const componentDocuments = ref<any[]>([])
|
||||
const previewDocument = ref<any | null>(null)
|
||||
const previewVisible = ref(false)
|
||||
|
||||
const selectedTypeId = ref<string>('')
|
||||
const editionForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const fetchedPieceTypeMap = ref<Record<string, string>>({})
|
||||
const pieceTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
|
||||
)
|
||||
const fetchedProductTypeMap = ref<Record<string, string>>({})
|
||||
const productTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
|
||||
)
|
||||
const pieceCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(pieces.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
const productCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(products.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
const componentCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(componentCatalogRef.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
|
||||
const openPreview = (doc: any) => {
|
||||
if (!doc || !canPreviewDocument(doc)) {
|
||||
return
|
||||
}
|
||||
previewDocument.value = doc
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false
|
||||
previewDocument.value = null
|
||||
}
|
||||
|
||||
const removeDocument = async (documentId: string | number | null | undefined) => {
|
||||
if (!documentId) {
|
||||
return
|
||||
}
|
||||
const result = await deleteDocument(documentId, { updateStore: false })
|
||||
if (result.success) {
|
||||
componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshDocuments = async () => {
|
||||
if (!component.value?.id) {
|
||||
componentDocuments.value = []
|
||||
return
|
||||
}
|
||||
loadingDocuments.value = true
|
||||
try {
|
||||
const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
|
||||
if (result.success) {
|
||||
componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleFilesAdded = async (files: File[]) => {
|
||||
if (!files?.length || !component.value?.id) {
|
||||
return
|
||||
}
|
||||
uploadingDocuments.value = true
|
||||
try {
|
||||
const result = await uploadDocuments(
|
||||
{
|
||||
files,
|
||||
context: { composantId: component.value.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (result.success) {
|
||||
selectedFiles.value = []
|
||||
await refreshDocuments()
|
||||
}
|
||||
}
|
||||
finally {
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const componentTypeList = computed<ComponentCatalogType[]>(() =>
|
||||
(componentTypes.value || [])
|
||||
.filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
|
||||
)
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
|
||||
const structure = selectedType.value?.structure ?? null
|
||||
return structure ? normalizeStructureForEditor(structure) : null
|
||||
})
|
||||
|
||||
const refreshCustomFieldInputs = (
|
||||
structureOverride?: ComponentModelStructure | null,
|
||||
valuesOverride?: any[] | null,
|
||||
) => {
|
||||
const structure = structureOverride ?? selectedTypeStructure.value ?? null
|
||||
const values = valuesOverride ?? component.value?.customFieldValues ?? null
|
||||
customFieldInputs.value = buildCustomFieldInputs(structure, values)
|
||||
}
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() => Boolean(
|
||||
canEdit.value
|
||||
&& component.value
|
||||
&& editionForm.name
|
||||
&& requiredCustomFieldsFilled.value
|
||||
&& !saving.value,
|
||||
))
|
||||
|
||||
const fetchComponent = async () => {
|
||||
if (!componentId || typeof componentId !== 'string') {
|
||||
component.value = null
|
||||
componentDocuments.value = []
|
||||
return
|
||||
}
|
||||
const result = await get(`/composants/${componentId}`)
|
||||
if (result.success) {
|
||||
component.value = result.data
|
||||
componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
|
||||
|
||||
const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
|
||||
refreshCustomFieldInputs(undefined, customValues)
|
||||
|
||||
loadHistory(result.data.id).catch(() => {})
|
||||
}
|
||||
else {
|
||||
component.value = null
|
||||
componentDocuments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const resolvePieceLabel = (piece: Record<string, any>) =>
|
||||
_resolvePieceLabel(piece, pieceTypeLabelMap.value)
|
||||
|
||||
const resolveProductLabel = (product: Record<string, any>) =>
|
||||
_resolveProductLabel(product, productTypeLabelMap.value)
|
||||
|
||||
const structureSelections = computed(() => {
|
||||
const selections = collectStructureSelections(
|
||||
component.value?.structure,
|
||||
{
|
||||
pieceCatalogMap: pieceCatalogMap.value,
|
||||
productCatalogMap: productCatalogMap.value,
|
||||
componentCatalogMap: componentCatalogMap.value,
|
||||
},
|
||||
{ resolvePieceLabel, resolveProductLabel, resolveSubcomponentLabel },
|
||||
)
|
||||
const total
|
||||
= selections.pieces.length + selections.products.length + selections.components.length
|
||||
return {
|
||||
...selections,
|
||||
total,
|
||||
hasAny: total > 0,
|
||||
}
|
||||
})
|
||||
|
||||
const submitEdition = async () => {
|
||||
if (!component.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const rawPrice = typeof editionForm.prix === 'string'
|
||||
? editionForm.prix.trim()
|
||||
: editionForm.prix === null || editionForm.prix === undefined
|
||||
? ''
|
||||
: String(editionForm.prix).trim()
|
||||
|
||||
const payload: Record<string, any> = {
|
||||
name: editionForm.name.trim(),
|
||||
description: editionForm.description.trim() || null,
|
||||
}
|
||||
|
||||
const reference = editionForm.reference.trim()
|
||||
payload.reference = reference || null
|
||||
payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
}
|
||||
else {
|
||||
payload.prix = null
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const result = await updateComposant(component.value.id, payload)
|
||||
if (result.success && result.data) {
|
||||
const updatedComponent = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'composant',
|
||||
updatedComponent.id,
|
||||
[
|
||||
updatedComponent?.typeComposant?.customFields,
|
||||
],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
await router.push('/component-catalog')
|
||||
}
|
||||
}
|
||||
catch (error: any) {
|
||||
toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Watchers ---
|
||||
|
||||
const initialized = ref(false)
|
||||
|
||||
watch(
|
||||
[component, selectedTypeStructure],
|
||||
([currentComponent, currentStructure]) => {
|
||||
if (!currentComponent) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!initialized.value) {
|
||||
const resolvedTypeId = currentComponent.typeComposantId
|
||||
|| extractRelationId(currentComponent.typeComposant)
|
||||
|| ''
|
||||
if (resolvedTypeId && !currentComponent.typeComposantId) {
|
||||
currentComponent.typeComposantId = resolvedTypeId
|
||||
}
|
||||
selectedTypeId.value = resolvedTypeId
|
||||
|
||||
editionForm.name = currentComponent.name || ''
|
||||
editionForm.description = currentComponent.description || ''
|
||||
editionForm.reference = currentComponent.reference || ''
|
||||
editionForm.constructeurIds = uniqueConstructeurIds(
|
||||
currentComponent,
|
||||
Array.isArray(currentComponent.constructeurs) ? currentComponent.constructeurs : [],
|
||||
currentComponent.constructeur ? [currentComponent.constructeur] : [],
|
||||
)
|
||||
editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
|
||||
if (editionForm.constructeurIds.length) {
|
||||
void ensureConstructeurs(editionForm.constructeurIds)
|
||||
}
|
||||
|
||||
initialized.value = true
|
||||
}
|
||||
|
||||
refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
selectedTypeStructure,
|
||||
(structure) => {
|
||||
const pieceIds = getStructurePieces(structure)
|
||||
.map((piece: any) => piece?.typePieceId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (pieceIds.length) {
|
||||
fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const productIds = getStructureProducts(structure)
|
||||
.map((product: any) => product?.typeProductId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (productIds.length) {
|
||||
fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// --- Lifecycle ---
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([
|
||||
loadComponentTypes(),
|
||||
loadPieceTypes(),
|
||||
loadProductTypes(),
|
||||
fetchComponent(),
|
||||
])
|
||||
loading.value = false
|
||||
|
||||
// Defer bulk catalog loads — only needed when component has structure selections
|
||||
if (component.value?.structure) {
|
||||
Promise.allSettled([
|
||||
loadPieces({ itemsPerPage: 200 }),
|
||||
loadProducts({ itemsPerPage: 200 }),
|
||||
loadComposants({ itemsPerPage: 200 }),
|
||||
]).catch(() => {})
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
component,
|
||||
loading,
|
||||
saving,
|
||||
selectedFiles,
|
||||
uploadingDocuments,
|
||||
loadingDocuments,
|
||||
componentDocuments,
|
||||
previewDocument,
|
||||
previewVisible,
|
||||
selectedTypeId,
|
||||
editionForm,
|
||||
customFieldInputs,
|
||||
historyFieldLabels,
|
||||
|
||||
// Computed
|
||||
canEdit,
|
||||
canSubmit,
|
||||
componentTypeList,
|
||||
selectedType,
|
||||
selectedTypeStructure,
|
||||
structureSelections,
|
||||
|
||||
// History
|
||||
history,
|
||||
historyLoading,
|
||||
historyError,
|
||||
|
||||
// Methods
|
||||
openPreview,
|
||||
closePreview,
|
||||
removeDocument,
|
||||
handleFilesAdded,
|
||||
refreshDocuments,
|
||||
submitEdition,
|
||||
resolvePieceLabel,
|
||||
resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
formatStructurePreview,
|
||||
}
|
||||
}
|
||||
26
app/composables/useDarkMode.ts
Normal file
26
app/composables/useDarkMode.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
const isDark = ref(false)
|
||||
|
||||
export function useDarkMode() {
|
||||
const toggle = () => {
|
||||
isDark.value = !isDark.value
|
||||
applyTheme()
|
||||
}
|
||||
|
||||
const applyTheme = () => {
|
||||
const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
const saved = localStorage.getItem('theme')
|
||||
if (saved === 'mytheme-dark') {
|
||||
isDark.value = true
|
||||
} else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
isDark.value = true
|
||||
}
|
||||
applyTheme()
|
||||
}
|
||||
|
||||
return { isDark, toggle, init }
|
||||
}
|
||||
327
app/composables/useMachineCustomFieldDefs.ts
Normal file
327
app/composables/useMachineCustomFieldDefs.ts
Normal file
@@ -0,0 +1,327 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
|
||||
// --- Types ---
|
||||
|
||||
export type MachineFieldType = 'text' | 'number' | 'select' | 'boolean' | 'date'
|
||||
|
||||
export interface MachineCustomFieldEditorField {
|
||||
uid: string
|
||||
serverId?: string
|
||||
name: string
|
||||
type: MachineFieldType
|
||||
required: boolean
|
||||
optionsText: string
|
||||
orderIndex: number
|
||||
}
|
||||
|
||||
interface InitialDef {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
required: boolean
|
||||
options?: string[]
|
||||
orderIndex: number
|
||||
defaultValue?: unknown
|
||||
}
|
||||
|
||||
interface Deps {
|
||||
machineId: string
|
||||
initialDefs: InitialDef[]
|
||||
onSaved: () => void | Promise<void>
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
let uidCounter = 0
|
||||
const createUid = (): string => {
|
||||
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
||||
return crypto.randomUUID()
|
||||
}
|
||||
uidCounter += 1
|
||||
return `mcf-${Date.now().toString(36)}-${uidCounter}`
|
||||
}
|
||||
|
||||
const normalizeLineEndings = (value: string): string =>
|
||||
value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
|
||||
|
||||
const toEditorField = (def: InitialDef, index: number): MachineCustomFieldEditorField => ({
|
||||
uid: createUid(),
|
||||
serverId: def.id,
|
||||
name: def.name || '',
|
||||
type: (def.type || 'text') as MachineFieldType,
|
||||
required: Boolean(def.required),
|
||||
optionsText: normalizeLineEndings(
|
||||
Array.isArray(def.options) ? def.options.join('\n') : '',
|
||||
),
|
||||
orderIndex: typeof def.orderIndex === 'number' ? def.orderIndex : index,
|
||||
})
|
||||
|
||||
const hydrateFields = (defs: InitialDef[]): MachineCustomFieldEditorField[] =>
|
||||
defs
|
||||
.map((def, index) => toEditorField(def, index))
|
||||
.sort((a, b) => a.orderIndex - b.orderIndex)
|
||||
.map((field, index) => ({ ...field, orderIndex: index }))
|
||||
|
||||
const buildSnapshot = (defs: InitialDef[]): Map<string, InitialDef> => {
|
||||
const map = new Map<string, InitialDef>()
|
||||
for (const def of defs) {
|
||||
map.set(def.id, def)
|
||||
}
|
||||
return map
|
||||
}
|
||||
|
||||
const applyOrderIndex = (
|
||||
list: MachineCustomFieldEditorField[],
|
||||
): MachineCustomFieldEditorField[] =>
|
||||
list.map((field, index) => ({ ...field, orderIndex: index }))
|
||||
|
||||
const parseOptions = (optionsText: string): string[] =>
|
||||
normalizeLineEndings(optionsText)
|
||||
.split('\n')
|
||||
.map(o => o.trim())
|
||||
.filter(o => o.length > 0)
|
||||
|
||||
// --- Composable ---
|
||||
|
||||
export function useMachineCustomFieldDefs(deps: Deps) {
|
||||
const { apiCall } = useApi()
|
||||
const { showSuccess, showError } = useToast()
|
||||
|
||||
// --- State ---
|
||||
|
||||
const fields = ref<MachineCustomFieldEditorField[]>(hydrateFields(deps.initialDefs))
|
||||
const initialSnapshot = ref<Map<string, InitialDef>>(buildSnapshot(deps.initialDefs))
|
||||
const saving = ref(false)
|
||||
|
||||
// --- CRUD ---
|
||||
|
||||
const addField = () => {
|
||||
const next = fields.value.slice()
|
||||
next.push({
|
||||
uid: createUid(),
|
||||
name: '',
|
||||
type: 'text',
|
||||
required: false,
|
||||
optionsText: '',
|
||||
orderIndex: next.length,
|
||||
})
|
||||
fields.value = applyOrderIndex(next)
|
||||
}
|
||||
|
||||
const removeField = (index: number) => {
|
||||
const next = fields.value.filter((_, i) => i !== index)
|
||||
fields.value = applyOrderIndex(next)
|
||||
}
|
||||
|
||||
// --- Drag & drop ---
|
||||
|
||||
const dragState = reactive({
|
||||
draggingIndex: null as number | null,
|
||||
dropTargetIndex: null as number | null,
|
||||
})
|
||||
|
||||
const resetDragState = () => {
|
||||
dragState.draggingIndex = null
|
||||
dragState.dropTargetIndex = null
|
||||
}
|
||||
|
||||
const onDragStart = (index: number, event: DragEvent) => {
|
||||
dragState.draggingIndex = index
|
||||
dragState.dropTargetIndex = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onDragEnter = (index: number) => {
|
||||
if (dragState.draggingIndex === null) return
|
||||
dragState.dropTargetIndex = index
|
||||
}
|
||||
|
||||
const onDrop = (index: number) => {
|
||||
const from = dragState.draggingIndex
|
||||
if (from === null) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
if (from === index) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
const list = fields.value.slice()
|
||||
if (from < 0 || index < 0 || from >= list.length || index >= list.length) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
const [moved] = list.splice(from, 1)
|
||||
if (!moved) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
list.splice(index, 0, moved)
|
||||
fields.value = applyOrderIndex(list)
|
||||
resetDragState()
|
||||
}
|
||||
|
||||
const onDragEnd = () => {
|
||||
resetDragState()
|
||||
}
|
||||
|
||||
const reorderClass = (index: number): string => {
|
||||
if (dragState.draggingIndex === index) {
|
||||
return 'border-dashed border-primary bg-primary/5'
|
||||
}
|
||||
if (
|
||||
dragState.draggingIndex !== null
|
||||
&& dragState.dropTargetIndex === index
|
||||
&& dragState.draggingIndex !== index
|
||||
) {
|
||||
return 'border-primary border-dashed bg-primary/10'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// --- Save ---
|
||||
|
||||
const saveDefinitions = async () => {
|
||||
if (saving.value) return
|
||||
|
||||
// Validate: remove empty-name fields before saving
|
||||
const emptyNameFields = fields.value.filter(f => !f.name.trim() && !f.serverId)
|
||||
if (emptyNameFields.length > 0) {
|
||||
fields.value = applyOrderIndex(fields.value.filter(f => f.name.trim() || f.serverId))
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
const snapshot = initialSnapshot.value
|
||||
const currentServerIds = new Set(
|
||||
fields.value.filter(f => f.serverId).map(f => f.serverId!),
|
||||
)
|
||||
|
||||
// DELETE removed fields
|
||||
const deletedIds = [...snapshot.keys()].filter(id => !currentServerIds.has(id))
|
||||
for (const id of deletedIds) {
|
||||
const result = await apiCall(`/custom_fields/${id}`, { method: 'DELETE' })
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la suppression d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let hasNewFields = false
|
||||
|
||||
for (const field of fields.value) {
|
||||
const name = field.name.trim()
|
||||
if (!name) continue
|
||||
|
||||
const options = field.type === 'select' ? parseOptions(field.optionsText) : []
|
||||
|
||||
if (!field.serverId) {
|
||||
// POST new field
|
||||
hasNewFields = true
|
||||
const body: Record<string, unknown> = {
|
||||
name,
|
||||
type: field.type,
|
||||
required: field.required,
|
||||
options,
|
||||
orderIndex: field.orderIndex,
|
||||
machine: `/api/machines/${deps.machineId}`,
|
||||
}
|
||||
|
||||
const result = await apiCall('/custom_fields', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/ld+json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la création d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// PATCH modified field
|
||||
const original = snapshot.get(field.serverId)
|
||||
const originalOptions = Array.isArray(original?.options)
|
||||
? original.options.join('\n')
|
||||
: ''
|
||||
const currentOptions = field.type === 'select' ? field.optionsText : ''
|
||||
|
||||
const changed
|
||||
= original?.name !== name
|
||||
|| original?.type !== field.type
|
||||
|| original?.required !== field.required
|
||||
|| normalizeLineEndings(originalOptions) !== normalizeLineEndings(currentOptions)
|
||||
|| original?.orderIndex !== field.orderIndex
|
||||
|
||||
if (changed) {
|
||||
const body: Record<string, unknown> = {
|
||||
name,
|
||||
type: field.type,
|
||||
required: field.required,
|
||||
options,
|
||||
orderIndex: field.orderIndex,
|
||||
}
|
||||
|
||||
const result = await apiCall(`/custom_fields/${field.serverId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/merge-patch+json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la mise à jour d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize missing custom field values if new fields were created
|
||||
if (hasNewFields) {
|
||||
await apiCall(`/machines/${deps.machineId}/add-custom-fields`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/ld+json' },
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
}
|
||||
|
||||
showSuccess('Champs personnalisés sauvegardés avec succès')
|
||||
await deps.onSaved()
|
||||
} catch {
|
||||
showError('Erreur inattendue lors de la sauvegarde des champs personnalisés')
|
||||
await deps.onSaved()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Reinit ---
|
||||
|
||||
const reinit = (newDefs: InitialDef[]) => {
|
||||
fields.value = hydrateFields(newDefs)
|
||||
initialSnapshot.value = buildSnapshot(newDefs)
|
||||
}
|
||||
|
||||
return {
|
||||
fields,
|
||||
saving,
|
||||
dragState,
|
||||
addField,
|
||||
removeField,
|
||||
onDragStart,
|
||||
onDragEnter,
|
||||
onDrop,
|
||||
onDragEnd,
|
||||
reorderClass,
|
||||
saveDefinitions,
|
||||
reinit,
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { useSites } from '~/composables/useSites'
|
||||
import { useMachinePrint } from '~/composables/useMachinePrint'
|
||||
import {
|
||||
resolveConstructeurs,
|
||||
@@ -44,6 +45,7 @@ export function useMachineDetailData(machineId: string) {
|
||||
const { get } = useApi()
|
||||
const toast = useToast()
|
||||
const { constructeurs, loadConstructeurs } = useConstructeurs()
|
||||
const { sites, loadSites } = useSites()
|
||||
|
||||
const {
|
||||
printModalOpen,
|
||||
@@ -64,6 +66,7 @@ export function useMachineDetailData(machineId: string) {
|
||||
// Machine fields
|
||||
const machineName = ref('')
|
||||
const machineReference = ref('')
|
||||
const machineSiteId = ref('')
|
||||
const machineConstructeurIds = ref<string[]>([])
|
||||
|
||||
const machineConstructeurId = computed({
|
||||
@@ -229,6 +232,7 @@ export function useMachineDetailData(machineId: string) {
|
||||
machine.value.constructeurs,
|
||||
machine.value.constructeur,
|
||||
)
|
||||
machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,6 +259,7 @@ export function useMachineDetailData(machineId: string) {
|
||||
machine,
|
||||
machineName,
|
||||
machineReference,
|
||||
machineSiteId,
|
||||
machineConstructeurIds,
|
||||
machineDocumentsLoaded,
|
||||
machineComponentLinks,
|
||||
@@ -401,6 +406,7 @@ export function useMachineDetailData(machineId: string) {
|
||||
loadConstructeurs(),
|
||||
loadComponentTypes(),
|
||||
loadPieceTypes(),
|
||||
loadSites(),
|
||||
])
|
||||
}
|
||||
|
||||
@@ -419,8 +425,9 @@ export function useMachineDetailData(machineId: string) {
|
||||
machineComponentLinks, machinePieceLinks, machineProductLinks,
|
||||
|
||||
// Machine fields
|
||||
machineName, machineReference, machineConstructeurIds, machineConstructeurId,
|
||||
machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
|
||||
machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
|
||||
sites,
|
||||
|
||||
// UI state
|
||||
machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
|
||||
|
||||
@@ -13,6 +13,7 @@ export interface UseMachineDetailUpdatesDeps {
|
||||
machine: Ref<AnyRecord | null>
|
||||
machineName: Ref<string>
|
||||
machineReference: Ref<string>
|
||||
machineSiteId: Ref<string>
|
||||
machineConstructeurIds: Ref<string[]>
|
||||
machineDocumentsLoaded: Ref<boolean>
|
||||
machineComponentLinks: Ref<AnyRecord[]>
|
||||
@@ -40,6 +41,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
|
||||
machine,
|
||||
machineName,
|
||||
machineReference,
|
||||
machineSiteId,
|
||||
machineConstructeurIds,
|
||||
machineComponentLinks,
|
||||
machinePieceLinks,
|
||||
@@ -63,6 +65,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
|
||||
const result: any = await updateMachineApi(machine.value.id as string, {
|
||||
name: machineName.value,
|
||||
reference: machineReference.value,
|
||||
siteId: machineSiteId.value || undefined,
|
||||
constructeurIds: cIds,
|
||||
} as any)
|
||||
if (result.success) {
|
||||
|
||||
472
app/composables/usePieceEdit.ts
Normal file
472
app/composables/usePieceEdit.ts
Normal file
@@ -0,0 +1,472 @@
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRouter } from '#imports'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { usePieceHistory } from '~/composables/usePieceHistory'
|
||||
import { extractRelationId } from '~/shared/apiRelations'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import { formatPieceStructurePreview } from '~/shared/modelUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import type { PieceModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
import {
|
||||
getStructureProducts,
|
||||
buildProductRequirementDescriptions,
|
||||
buildProductRequirementEntries,
|
||||
resizeProductSelections,
|
||||
areProductSelectionsFilled,
|
||||
applyProductSelection,
|
||||
collectNormalizedProductIds,
|
||||
} from '~/shared/utils/pieceProductSelectionUtils'
|
||||
import { getModelType } from '~/services/modelTypes'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
buildCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
|
||||
interface PieceCatalogType extends ModelType {
|
||||
structure: PieceModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
export function usePieceEdit(pieceId: string) {
|
||||
const { canEdit } = usePermissions()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { updatePiece } = usePieces()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const toast = useToast()
|
||||
const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
|
||||
const { ensureConstructeurs } = useConstructeurs()
|
||||
const {
|
||||
history,
|
||||
loading: historyLoading,
|
||||
error: historyError,
|
||||
loadHistory,
|
||||
} = usePieceHistory()
|
||||
|
||||
const piece = ref<any | null>(null)
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
const loadingDocuments = ref(false)
|
||||
const pieceDocuments = ref<any[]>([])
|
||||
const previewDocument = ref<any | null>(null)
|
||||
const previewVisible = ref(false)
|
||||
|
||||
const historyFieldLabels: Record<string, string> = {
|
||||
name: 'Nom',
|
||||
reference: 'Référence',
|
||||
prix: 'Prix',
|
||||
typePiece: 'Catégorie',
|
||||
product: 'Produit lié',
|
||||
productIds: 'Produits liés',
|
||||
constructeurIds: 'Fournisseurs',
|
||||
}
|
||||
|
||||
const selectedTypeId = ref<string>('')
|
||||
const pieceTypeDetails = ref<any | null>(null)
|
||||
const editionForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
const productSelections = ref<(string | null)[]>([])
|
||||
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const resolvedStructure = computed<PieceModelStructure | null>(() =>
|
||||
pieceTypeDetails.value?.structure ?? selectedType.value?.structure ?? null,
|
||||
)
|
||||
|
||||
const refreshCustomFieldInputs = (
|
||||
structureOverride?: PieceModelStructure | null,
|
||||
valuesOverride?: any[] | null,
|
||||
) => {
|
||||
const structure = structureOverride ?? resolvedStructure.value ?? null
|
||||
const values = valuesOverride ?? piece.value?.customFieldValues ?? null
|
||||
customFieldInputs.value = buildCustomFieldInputs(structure, values)
|
||||
}
|
||||
|
||||
const openPreview = (doc: any) => {
|
||||
if (!doc || !canPreviewDocument(doc)) {
|
||||
return
|
||||
}
|
||||
previewDocument.value = doc
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false
|
||||
previewDocument.value = null
|
||||
}
|
||||
|
||||
const removeDocument = async (documentId: string | number | null | undefined) => {
|
||||
if (!documentId) {
|
||||
return
|
||||
}
|
||||
const result = await deleteDocument(documentId, { updateStore: false })
|
||||
if (result.success) {
|
||||
pieceDocuments.value = pieceDocuments.value.filter((doc) => doc.id !== documentId)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFilesAdded = async (files: File[]) => {
|
||||
if (!files?.length || !piece.value?.id) {
|
||||
return
|
||||
}
|
||||
uploadingDocuments.value = true
|
||||
try {
|
||||
const result = await uploadDocuments(
|
||||
{
|
||||
files,
|
||||
context: { pieceId: piece.value.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (result.success) {
|
||||
selectedFiles.value = []
|
||||
await refreshDocuments()
|
||||
}
|
||||
}
|
||||
finally {
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const refreshDocuments = async () => {
|
||||
if (!piece.value?.id) {
|
||||
pieceDocuments.value = []
|
||||
return
|
||||
}
|
||||
loadingDocuments.value = true
|
||||
try {
|
||||
const result = await loadDocumentsByPiece(piece.value.id, { updateStore: false })
|
||||
if (result.success) {
|
||||
pieceDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const structureProducts = computed(() =>
|
||||
getStructureProducts(resolvedStructure.value),
|
||||
)
|
||||
|
||||
const requiresProductSelection = computed(() => structureProducts.value.length > 0)
|
||||
|
||||
const productRequirementDescriptions = computed(() =>
|
||||
buildProductRequirementDescriptions(structureProducts.value),
|
||||
)
|
||||
|
||||
const ensureProductSelections = (count: number) => {
|
||||
productSelections.value = resizeProductSelections(productSelections.value, count)
|
||||
}
|
||||
|
||||
let pendingProductIds: string[] = []
|
||||
|
||||
const productRequirementEntries = computed(() =>
|
||||
buildProductRequirementEntries(structureProducts.value, 'piece-product-requirement'),
|
||||
)
|
||||
|
||||
const productSelectionsFilled = computed(() =>
|
||||
areProductSelectionsFilled(
|
||||
requiresProductSelection.value,
|
||||
productRequirementEntries.value,
|
||||
productSelections.value,
|
||||
),
|
||||
)
|
||||
|
||||
const setProductSelection = (index: number, value: string | null) => {
|
||||
productSelections.value = applyProductSelection(productSelections.value, index, value)
|
||||
}
|
||||
|
||||
watch(structureProducts, (products) => {
|
||||
ensureProductSelections(products.length)
|
||||
if (!pendingProductIds.length || products.length === 0) {
|
||||
return
|
||||
}
|
||||
const next = Array.from(
|
||||
{ length: products.length },
|
||||
(_, index) => pendingProductIds[index] ?? null,
|
||||
)
|
||||
productSelections.value = next
|
||||
pendingProductIds = []
|
||||
})
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() =>
|
||||
Boolean(
|
||||
canEdit.value
|
||||
&& piece.value
|
||||
&& editionForm.name
|
||||
&& requiredCustomFieldsFilled.value
|
||||
&& productSelectionsFilled.value
|
||||
&& !saving.value,
|
||||
),
|
||||
)
|
||||
|
||||
const fetchPiece = async () => {
|
||||
if (!pieceId || typeof pieceId !== 'string') {
|
||||
piece.value = null
|
||||
pieceDocuments.value = []
|
||||
return
|
||||
}
|
||||
const result = await get(`/pieces/${pieceId}`)
|
||||
if (result.success) {
|
||||
piece.value = result.data
|
||||
pieceDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
|
||||
|
||||
// Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
|
||||
const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
|
||||
refreshCustomFieldInputs(undefined, customValues)
|
||||
|
||||
// Use cached type from loadPieceTypes() instead of separate getModelType() call
|
||||
loadPieceTypeDetailsFromCache(result.data)
|
||||
|
||||
// History is non-blocking — template handles its own loading state
|
||||
loadHistory(result.data.id).catch(() => {})
|
||||
}
|
||||
else {
|
||||
piece.value = null
|
||||
pieceDocuments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const loadPieceTypeDetailsFromCache = (currentPiece: any) => {
|
||||
const typeId = currentPiece?.typePieceId
|
||||
|| extractRelationId(currentPiece?.typePiece)
|
||||
|| ''
|
||||
if (!typeId) {
|
||||
pieceTypeDetails.value = null
|
||||
return
|
||||
}
|
||||
// Look up in the already-loaded pieceTypes cache (from loadPieceTypes in onMounted)
|
||||
const cachedType = (pieceTypes.value || []).find((t: any) => t.id === typeId) ?? null
|
||||
if (cachedType) {
|
||||
pieceTypeDetails.value = cachedType
|
||||
refreshCustomFieldInputs((cachedType.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
|
||||
return
|
||||
}
|
||||
// Fallback: fetch if not in cache (edge case)
|
||||
getModelType(typeId).then((type) => {
|
||||
if (type && typeof type === 'object') {
|
||||
pieceTypeDetails.value = type
|
||||
refreshCustomFieldInputs((type.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
|
||||
}
|
||||
}).catch(() => {
|
||||
pieceTypeDetails.value = null
|
||||
})
|
||||
}
|
||||
|
||||
let initialized = false
|
||||
|
||||
watch(
|
||||
[piece, selectedType],
|
||||
([currentPiece, _currentType]) => {
|
||||
if (!currentPiece || initialized) {
|
||||
return
|
||||
}
|
||||
|
||||
const resolvedTypeId = currentPiece.typePieceId
|
||||
|| extractRelationId(currentPiece.typePiece)
|
||||
|| ''
|
||||
if (resolvedTypeId && !currentPiece.typePieceId) {
|
||||
currentPiece.typePieceId = resolvedTypeId
|
||||
}
|
||||
selectedTypeId.value = resolvedTypeId
|
||||
|
||||
editionForm.name = currentPiece.name || ''
|
||||
editionForm.description = currentPiece.description || ''
|
||||
editionForm.reference = currentPiece.reference || ''
|
||||
editionForm.constructeurIds = uniqueConstructeurIds(
|
||||
currentPiece,
|
||||
Array.isArray(currentPiece.constructeurs) ? currentPiece.constructeurs : [],
|
||||
currentPiece.constructeur ? [currentPiece.constructeur] : [],
|
||||
)
|
||||
editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
|
||||
if (editionForm.constructeurIds.length) {
|
||||
void ensureConstructeurs(editionForm.constructeurIds)
|
||||
}
|
||||
|
||||
const existingProductIds = Array.isArray(currentPiece.productIds) && currentPiece.productIds.length
|
||||
? currentPiece.productIds.map((id: unknown) => String(id))
|
||||
: currentPiece.product?.id || currentPiece.productId
|
||||
? [String(currentPiece.product?.id || currentPiece.productId)]
|
||||
: []
|
||||
pendingProductIds = existingProductIds
|
||||
ensureProductSelections(structureProducts.value.length)
|
||||
if (existingProductIds.length && structureProducts.value.length) {
|
||||
const next = Array.from(
|
||||
{ length: structureProducts.value.length },
|
||||
(_, index) => existingProductIds[index] ?? null,
|
||||
)
|
||||
productSelections.value = next
|
||||
pendingProductIds = []
|
||||
}
|
||||
|
||||
// After setting selectedTypeId, read selectedType.value (now updated) instead of
|
||||
// the stale destructured currentType which was captured before the ID change.
|
||||
const resolvedType = selectedType.value ?? pieceTypeDetails.value ?? null
|
||||
refreshCustomFieldInputs(resolvedType?.structure ?? null, currentPiece.customFieldValues)
|
||||
|
||||
initialized = true
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(selectedType, (currentType) => {
|
||||
if (!piece.value || !currentType) {
|
||||
return
|
||||
}
|
||||
refreshCustomFieldInputs(currentType.structure, piece.value.customFieldValues)
|
||||
})
|
||||
|
||||
watch(resolvedStructure, (currentStructure) => {
|
||||
if (!piece.value) {
|
||||
return
|
||||
}
|
||||
ensureProductSelections(structureProducts.value.length)
|
||||
refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
|
||||
})
|
||||
|
||||
const submitEdition = async () => {
|
||||
if (!piece.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!productSelectionsFilled.value) {
|
||||
toast.showError('Sélectionnez un produit conforme au squelette.')
|
||||
return
|
||||
}
|
||||
|
||||
const rawPrice = typeof editionForm.prix === 'string'
|
||||
? editionForm.prix.trim()
|
||||
: editionForm.prix === null || editionForm.prix === undefined
|
||||
? ''
|
||||
: String(editionForm.prix).trim()
|
||||
|
||||
const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
|
||||
|
||||
const payload: Record<string, any> = {
|
||||
name: editionForm.name.trim(),
|
||||
description: editionForm.description.trim() || null,
|
||||
constructeurIds,
|
||||
}
|
||||
|
||||
const reference = editionForm.reference.trim()
|
||||
payload.reference = reference ? reference : null
|
||||
|
||||
const normalizedProductIds = collectNormalizedProductIds(
|
||||
productRequirementEntries.value,
|
||||
productSelections.value,
|
||||
)
|
||||
|
||||
payload.productIds = normalizedProductIds
|
||||
payload.productId = normalizedProductIds[0] || null
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
}
|
||||
else {
|
||||
payload.prix = null
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const result = await updatePiece(piece.value.id, payload)
|
||||
if (result.success && result.data) {
|
||||
const updatedPiece = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'piece',
|
||||
updatedPiece.id,
|
||||
[
|
||||
updatedPiece?.typePiece?.pieceCustomFields,
|
||||
],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
await router.push('/pieces-catalog')
|
||||
}
|
||||
}
|
||||
catch (error: any) {
|
||||
toast.showError(error?.message || 'Erreur lors de la mise à jour de la pièce')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([loadPieceTypes(), fetchPiece()])
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
piece,
|
||||
loading,
|
||||
saving,
|
||||
selectedFiles,
|
||||
uploadingDocuments,
|
||||
loadingDocuments,
|
||||
pieceDocuments,
|
||||
previewDocument,
|
||||
previewVisible,
|
||||
selectedTypeId,
|
||||
editionForm,
|
||||
productSelections,
|
||||
customFieldInputs,
|
||||
canEdit,
|
||||
|
||||
// Computed
|
||||
pieceTypeList,
|
||||
selectedType,
|
||||
resolvedStructure,
|
||||
structureProducts,
|
||||
productRequirementDescriptions,
|
||||
productRequirementEntries,
|
||||
canSubmit,
|
||||
historyFieldLabels,
|
||||
|
||||
// History
|
||||
history,
|
||||
historyLoading,
|
||||
historyError,
|
||||
|
||||
// Methods
|
||||
openPreview,
|
||||
closePreview,
|
||||
removeDocument,
|
||||
handleFilesAdded,
|
||||
setProductSelection,
|
||||
submitEdition,
|
||||
formatPieceStructurePreview,
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
|
||||
type SiteForm = {
|
||||
name: string
|
||||
color: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactAddress: string
|
||||
@@ -31,6 +32,7 @@ type SiteDocument = {
|
||||
type SiteWithDocuments = {
|
||||
id: string
|
||||
name?: string
|
||||
color?: string
|
||||
contactName?: string
|
||||
contactPhone?: string
|
||||
contactAddress?: string
|
||||
@@ -54,6 +56,7 @@ export function useSiteManagement() {
|
||||
|
||||
const newSite = reactive<SiteForm>({
|
||||
name: '',
|
||||
color: '',
|
||||
contactName: '',
|
||||
contactPhone: '',
|
||||
contactAddress: '',
|
||||
@@ -63,6 +66,7 @@ export function useSiteManagement() {
|
||||
|
||||
const editSiteForm = reactive<SiteForm>({
|
||||
name: '',
|
||||
color: '',
|
||||
contactName: '',
|
||||
contactPhone: '',
|
||||
contactAddress: '',
|
||||
@@ -81,6 +85,7 @@ export function useSiteManagement() {
|
||||
|
||||
const resetNewSite = () => {
|
||||
newSite.name = ''
|
||||
newSite.color = ''
|
||||
newSite.contactName = ''
|
||||
newSite.contactPhone = ''
|
||||
newSite.contactAddress = ''
|
||||
@@ -101,6 +106,7 @@ export function useSiteManagement() {
|
||||
const handleCreateSite = async () => {
|
||||
const result = await createSite({
|
||||
name: newSite.name,
|
||||
color: newSite.color,
|
||||
contactName: newSite.contactName,
|
||||
contactPhone: newSite.contactPhone,
|
||||
contactAddress: newSite.contactAddress,
|
||||
@@ -116,6 +122,7 @@ export function useSiteManagement() {
|
||||
const editSite = (site: SiteWithDocuments) => {
|
||||
siteBeingEdited.value = site
|
||||
editSiteForm.name = site.name || ''
|
||||
editSiteForm.color = site.color || ''
|
||||
editSiteForm.contactName = site.contactName || ''
|
||||
editSiteForm.contactPhone = site.contactPhone || ''
|
||||
editSiteForm.contactAddress = site.contactAddress || ''
|
||||
@@ -148,6 +155,7 @@ export function useSiteManagement() {
|
||||
|
||||
const baseUpdate = {
|
||||
name: editSiteForm.name,
|
||||
color: editSiteForm.color,
|
||||
contactName: editSiteForm.contactName,
|
||||
contactPhone: editSiteForm.contactPhone,
|
||||
contactAddress: editSiteForm.contactAddress,
|
||||
|
||||
@@ -6,6 +6,7 @@ import { extractCollection } from '~/shared/utils/apiHelpers'
|
||||
export interface Site {
|
||||
id: string
|
||||
name?: string
|
||||
color?: string
|
||||
contactName?: string
|
||||
contactPhone?: string
|
||||
contactAddress?: string
|
||||
|
||||
@@ -76,6 +76,7 @@ export function useToast() {
|
||||
|
||||
const clearAll = (): void => {
|
||||
toasts.value = []
|
||||
recentMessages.clear()
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -69,6 +69,22 @@ const badgeClass = (type: ChangeType) => {
|
||||
}
|
||||
|
||||
const releases: Release[] = [
|
||||
{
|
||||
version: 'v1.9.0',
|
||||
date: '2026-03-09',
|
||||
changes: [
|
||||
{ type: 'feat', text: 'Gestion des champs personnalisés sur les machines : ajout, modification et suppression de définitions de champs directement depuis la fiche machine' },
|
||||
{ type: 'feat', text: 'Refonte UI globale : amélioration du styling, des layouts et du responsive sur l\'ensemble des composants et pages' },
|
||||
{ type: 'feat', text: 'Suite de tests API complète : 167 tests couvrant toutes les entités, la sécurité et les validations' },
|
||||
{ type: 'feat', text: 'Endpoint /api/health pour le monitoring applicatif' },
|
||||
{ type: 'fix', text: 'Sécurité renforcée : désactivation de la migration de session sur le firewall API, durcissement des accès documents et sessions' },
|
||||
{ type: 'fix', text: 'Confirmation de suppression avec impact sur le catalogue produits (documents, liaisons machines en cascade)' },
|
||||
{ type: 'fix', text: 'Correction du débordement des dropdowns dans les DataTable' },
|
||||
{ type: 'perf', text: 'Refactoring massif du frontend : extraction de 15+ composables et composants partagés, réduction de la taille des fichiers' },
|
||||
{ type: 'chore', text: 'Extraction de CuidEntityTrait et abstraction du subscriber d\'audit côté backend' },
|
||||
{ type: 'chore', text: 'Ajout de DAMA DoctrineTestBundle pour l\'isolation des tests par transaction' },
|
||||
],
|
||||
},
|
||||
{
|
||||
version: 'v1.8.1',
|
||||
date: '2026-03-05',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<h1 class="text-3xl font-semibold text-base-content">
|
||||
Commentaires
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-base-content/50">
|
||||
Liste de tous les commentaires et tickets ouverts sur les fiches.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<main class="container mx-auto px-6 py-10 space-y-8">
|
||||
<header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold text-base-content">Catalogue des composants</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
<h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
|
||||
<p class="text-sm text-base-content/50 mt-1">
|
||||
Consultez et gérez tous les composants existants.
|
||||
</p>
|
||||
</div>
|
||||
@@ -11,17 +11,17 @@
|
||||
<NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
|
||||
Ajouter un composant
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/component-category" class="btn btn-outline btn-sm md:btn-md">
|
||||
<NuxtLink to="/component-category" class="btn btn-ghost btn-sm md:btn-md">
|
||||
Gérer les catégories
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="card border border-base-200 bg-base-100 shadow-sm">
|
||||
<section class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-4">
|
||||
<header class="flex flex-col gap-2">
|
||||
<h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
|
||||
<p class="text-sm text-base-content/70">
|
||||
<header class="flex flex-col gap-1">
|
||||
<h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
|
||||
<p class="text-sm text-base-content/50">
|
||||
Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
|
||||
</p>
|
||||
</header>
|
||||
@@ -95,7 +95,7 @@
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<NuxtLink
|
||||
:to="`/component/${row.component.id}/edit`"
|
||||
class="btn btn-ghost btn-xs"
|
||||
@@ -105,7 +105,7 @@
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs"
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
:disabled="loadingComposants"
|
||||
@click="handleDeleteComponent(row.component)"
|
||||
>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="componentDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="componentDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
|
||||
<span class="loading loading-spinner loading-lg" aria-hidden="true" />
|
||||
<p class="text-sm text-base-content/70">Chargement du composant…</p>
|
||||
@@ -269,496 +270,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from '#imports'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import { useComponentTypes } from '~/composables/useComponentTypes'
|
||||
import { useComposants } from '~/composables/useComposants'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { useProductTypes } from '~/composables/useProductTypes'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { useProducts } from '~/composables/useProducts'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { extractRelationId } from '~/shared/apiRelations'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { useComponentHistory } from '~/composables/useComponentHistory'
|
||||
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import {
|
||||
getStructurePieces,
|
||||
getStructureProducts,
|
||||
resolvePieceLabel as _resolvePieceLabel,
|
||||
resolveProductLabel as _resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
fetchModelTypeNames,
|
||||
buildTypeLabelMap,
|
||||
} from '~/shared/utils/structureDisplayUtils'
|
||||
import type { ComponentModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
buildCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
import { useRoute } from '#imports'
|
||||
import { useComponentEdit } from '~/composables/useComponentEdit'
|
||||
|
||||
interface ComponentCatalogType extends ModelType {
|
||||
structure: ComponentModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
const { canEdit } = usePermissions()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
const { componentTypes, loadComponentTypes } = useComponentTypes()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { productTypes, loadProductTypes } = useProductTypes()
|
||||
const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
|
||||
const { pieces, loadPieces } = usePieces()
|
||||
const { products, loadProducts } = useProducts()
|
||||
const { ensureConstructeurs } = useConstructeurs()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const toast = useToast()
|
||||
const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
|
||||
|
||||
const {
|
||||
history,
|
||||
loading: historyLoading,
|
||||
error: historyError,
|
||||
loadHistory,
|
||||
} = useComponentHistory()
|
||||
|
||||
const component = ref<any | null>(null)
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
const loadingDocuments = ref(false)
|
||||
const componentDocuments = ref<any[]>([])
|
||||
const previewDocument = ref<any | null>(null)
|
||||
const previewVisible = ref(false)
|
||||
|
||||
const historyFieldLabels: Record<string, string> = {
|
||||
name: 'Nom',
|
||||
reference: 'Référence',
|
||||
prix: 'Prix',
|
||||
structure: 'Structure',
|
||||
typeComposant: 'Catégorie',
|
||||
product: 'Produit lié',
|
||||
constructeurIds: 'Fournisseurs',
|
||||
}
|
||||
|
||||
const selectedTypeId = ref<string>('')
|
||||
const editionForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const fetchedPieceTypeMap = ref<Record<string, string>>({})
|
||||
const pieceTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
|
||||
)
|
||||
const fetchedProductTypeMap = ref<Record<string, string>>({})
|
||||
const productTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
|
||||
)
|
||||
const pieceCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(pieces.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
const productCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(products.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
const componentCatalogMap = computed(() =>
|
||||
new Map(
|
||||
(componentCatalogRef.value || [])
|
||||
.filter((item: any) => item?.id)
|
||||
.map((item: any) => [String(item.id), item]),
|
||||
),
|
||||
)
|
||||
const openPreview = (doc: any) => {
|
||||
if (!doc || !canPreviewDocument(doc)) {
|
||||
return
|
||||
}
|
||||
previewDocument.value = doc
|
||||
previewVisible.value = true
|
||||
}
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false
|
||||
previewDocument.value = null
|
||||
}
|
||||
const removeDocument = async (documentId: string | number | null | undefined) => {
|
||||
if (!documentId) {
|
||||
return
|
||||
}
|
||||
const result = await deleteDocument(documentId, { updateStore: false })
|
||||
if (result.success) {
|
||||
componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
|
||||
}
|
||||
}
|
||||
const handleFilesAdded = async (files: File[]) => {
|
||||
if (!files?.length || !component.value?.id) {
|
||||
return
|
||||
}
|
||||
uploadingDocuments.value = true
|
||||
try {
|
||||
const result = await uploadDocuments(
|
||||
{
|
||||
files,
|
||||
context: { composantId: component.value.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (result.success) {
|
||||
selectedFiles.value = []
|
||||
await refreshDocuments()
|
||||
}
|
||||
} finally {
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
const refreshDocuments = async () => {
|
||||
if (!component.value?.id) {
|
||||
componentDocuments.value = []
|
||||
return
|
||||
}
|
||||
loadingDocuments.value = true
|
||||
try {
|
||||
const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
|
||||
if (result.success) {
|
||||
componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
|
||||
}
|
||||
} finally {
|
||||
loadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const componentTypeList = computed<ComponentCatalogType[]>(() =>
|
||||
(componentTypes.value || [])
|
||||
.filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
|
||||
)
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
|
||||
const structure = selectedType.value?.structure ?? null
|
||||
return structure ? normalizeStructureForEditor(structure) : null
|
||||
})
|
||||
|
||||
const refreshCustomFieldInputs = (
|
||||
structureOverride?: ComponentModelStructure | null,
|
||||
valuesOverride?: any[] | null,
|
||||
) => {
|
||||
const structure = structureOverride ?? selectedTypeStructure.value ?? null
|
||||
const values = valuesOverride ?? component.value?.customFieldValues ?? null
|
||||
customFieldInputs.value = buildCustomFieldInputs(structure, values)
|
||||
}
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() => Boolean(
|
||||
canEdit.value &&
|
||||
component.value &&
|
||||
editionForm.name &&
|
||||
requiredCustomFieldsFilled.value &&
|
||||
!saving.value,
|
||||
))
|
||||
|
||||
const fetchComponent = async () => {
|
||||
const id = route.params.id
|
||||
if (!id || typeof id !== 'string') {
|
||||
component.value = null
|
||||
componentDocuments.value = []
|
||||
return
|
||||
}
|
||||
const result = await get(`/composants/${id}`)
|
||||
if (result.success) {
|
||||
component.value = result.data
|
||||
componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
|
||||
|
||||
const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
|
||||
refreshCustomFieldInputs(undefined, customValues)
|
||||
|
||||
loadHistory(result.data.id).catch(() => {})
|
||||
} else {
|
||||
component.value = null
|
||||
componentDocuments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const initialized = ref(false)
|
||||
|
||||
watch(
|
||||
[component, selectedTypeStructure],
|
||||
([currentComponent, currentStructure]) => {
|
||||
if (!currentComponent) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!initialized.value) {
|
||||
const resolvedTypeId = currentComponent.typeComposantId
|
||||
|| extractRelationId(currentComponent.typeComposant)
|
||||
|| ''
|
||||
if (resolvedTypeId && !currentComponent.typeComposantId) {
|
||||
currentComponent.typeComposantId = resolvedTypeId
|
||||
}
|
||||
selectedTypeId.value = resolvedTypeId
|
||||
|
||||
editionForm.name = currentComponent.name || ''
|
||||
editionForm.description = currentComponent.description || ''
|
||||
editionForm.reference = currentComponent.reference || ''
|
||||
editionForm.constructeurIds = uniqueConstructeurIds(
|
||||
currentComponent,
|
||||
Array.isArray(currentComponent.constructeurs) ? currentComponent.constructeurs : [],
|
||||
currentComponent.constructeur ? [currentComponent.constructeur] : [],
|
||||
)
|
||||
editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
|
||||
if (editionForm.constructeurIds.length) {
|
||||
void ensureConstructeurs(editionForm.constructeurIds)
|
||||
}
|
||||
|
||||
initialized.value = true
|
||||
}
|
||||
|
||||
refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const submitEdition = async () => {
|
||||
if (!component.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const rawPrice = typeof editionForm.prix === 'string'
|
||||
? editionForm.prix.trim()
|
||||
: editionForm.prix === null || editionForm.prix === undefined
|
||||
? ''
|
||||
: String(editionForm.prix).trim()
|
||||
|
||||
const payload: Record<string, any> = {
|
||||
name: editionForm.name.trim(),
|
||||
description: editionForm.description.trim() || null,
|
||||
}
|
||||
|
||||
const reference = editionForm.reference.trim()
|
||||
payload.reference = reference ? reference : null
|
||||
payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
} else {
|
||||
payload.prix = null
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const result = await updateComposant(component.value.id, payload)
|
||||
if (result.success && result.data) {
|
||||
const updatedComponent = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'composant',
|
||||
updatedComponent.id,
|
||||
[
|
||||
updatedComponent?.typeComposant?.customFields,
|
||||
],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
await router.push('/component-catalog')
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const isNonEmptyString = (value: unknown): value is string =>
|
||||
typeof value === 'string' && value.trim().length > 0
|
||||
|
||||
const resolvePieceLabel = (piece: Record<string, any>) =>
|
||||
_resolvePieceLabel(piece, pieceTypeLabelMap.value)
|
||||
|
||||
const resolveProductLabel = (product: Record<string, any>) =>
|
||||
_resolveProductLabel(product, productTypeLabelMap.value)
|
||||
|
||||
watch(
|
||||
component,
|
||||
loading,
|
||||
saving,
|
||||
selectedFiles,
|
||||
uploadingDocuments,
|
||||
loadingDocuments,
|
||||
componentDocuments,
|
||||
previewDocument,
|
||||
previewVisible,
|
||||
selectedTypeId,
|
||||
editionForm,
|
||||
customFieldInputs,
|
||||
historyFieldLabels,
|
||||
canEdit,
|
||||
canSubmit,
|
||||
componentTypeList,
|
||||
selectedType,
|
||||
selectedTypeStructure,
|
||||
(structure) => {
|
||||
const pieceIds = getStructurePieces(structure)
|
||||
.map((piece: any) => piece?.typePieceId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (pieceIds.length) {
|
||||
fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const productIds = getStructureProducts(structure)
|
||||
.map((product: any) => product?.typeProductId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (productIds.length) {
|
||||
fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
type SelectionEntry = {
|
||||
id: string
|
||||
path: string
|
||||
requirementLabel: string
|
||||
resolvedName: string
|
||||
}
|
||||
|
||||
const collectStructureSelections = (root: any): {
|
||||
pieces: SelectionEntry[]
|
||||
products: SelectionEntry[]
|
||||
components: SelectionEntry[]
|
||||
} => {
|
||||
const piecesSelected: SelectionEntry[] = []
|
||||
const productsSelected: SelectionEntry[] = []
|
||||
const componentsSelected: SelectionEntry[] = []
|
||||
|
||||
if (!root || typeof root !== 'object') {
|
||||
return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
|
||||
}
|
||||
|
||||
const visitNode = (node: any, fallbackPath = 'racine') => {
|
||||
if (!node || typeof node !== 'object') {
|
||||
return
|
||||
}
|
||||
|
||||
const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
|
||||
|
||||
const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
|
||||
nodePieces.forEach((entry: any, index: number) => {
|
||||
const selectedId = entry?.selectedPieceId
|
||||
if (!isNonEmptyString(selectedId)) {
|
||||
return
|
||||
}
|
||||
const definition = entry?.definition ?? entry
|
||||
const catalogPiece = pieceCatalogMap.value.get(selectedId)
|
||||
piecesSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
|
||||
requirementLabel: resolvePieceLabel(definition),
|
||||
resolvedName: catalogPiece?.name || selectedId,
|
||||
})
|
||||
})
|
||||
|
||||
const nodeProducts = Array.isArray(node.products) ? node.products : []
|
||||
nodeProducts.forEach((entry: any, index: number) => {
|
||||
const selectedId = entry?.selectedProductId
|
||||
if (!isNonEmptyString(selectedId)) {
|
||||
return
|
||||
}
|
||||
const definition = entry?.definition ?? entry
|
||||
const catalogProduct = productCatalogMap.value.get(selectedId)
|
||||
productsSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
|
||||
requirementLabel: resolveProductLabel(definition),
|
||||
resolvedName: catalogProduct?.name || selectedId,
|
||||
})
|
||||
})
|
||||
|
||||
const nodeChildren = Array.isArray(node.subcomponents)
|
||||
? node.subcomponents
|
||||
: Array.isArray(node.subComponents)
|
||||
? node.subComponents
|
||||
: []
|
||||
|
||||
nodeChildren.forEach((child: any, index: number) => {
|
||||
const selectedId = child?.selectedComponentId
|
||||
if (isNonEmptyString(selectedId)) {
|
||||
const definition = child?.definition ?? child
|
||||
const catalogComponent = componentCatalogMap.value.get(selectedId)
|
||||
componentsSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
|
||||
requirementLabel: resolveSubcomponentLabel(definition),
|
||||
resolvedName: catalogComponent?.name || selectedId,
|
||||
})
|
||||
}
|
||||
|
||||
visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
|
||||
})
|
||||
}
|
||||
|
||||
visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
|
||||
|
||||
return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
|
||||
}
|
||||
|
||||
const structureSelections = computed(() => {
|
||||
const selections = collectStructureSelections(component.value?.structure)
|
||||
const total =
|
||||
selections.pieces.length + selections.products.length + selections.components.length
|
||||
return {
|
||||
...selections,
|
||||
total,
|
||||
hasAny: total > 0,
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([
|
||||
loadComponentTypes(),
|
||||
loadPieceTypes(),
|
||||
loadProductTypes(),
|
||||
fetchComponent(),
|
||||
])
|
||||
loading.value = false
|
||||
|
||||
// Defer bulk catalog loads — only needed when component has structure selections
|
||||
if (component.value?.structure) {
|
||||
Promise.allSettled([
|
||||
loadPieces({ itemsPerPage: 200 }),
|
||||
loadProducts({ itemsPerPage: 200 }),
|
||||
loadComposants({ itemsPerPage: 200 }),
|
||||
]).catch(() => {})
|
||||
}
|
||||
})
|
||||
structureSelections,
|
||||
history,
|
||||
historyLoading,
|
||||
historyError,
|
||||
openPreview,
|
||||
closePreview,
|
||||
removeDocument,
|
||||
handleFilesAdded,
|
||||
submitEdition,
|
||||
resolvePieceLabel,
|
||||
resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
formatStructurePreview,
|
||||
} = useComponentEdit(String(route.params.id))
|
||||
</script>
|
||||
|
||||
@@ -215,567 +215,38 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from '#imports'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import ComponentStructureAssignmentNode, {
|
||||
type StructureAssignmentNode,
|
||||
} from '~/components/ComponentStructureAssignmentNode.vue'
|
||||
import SearchSelect from '~/components/common/SearchSelect.vue'
|
||||
import { useComponentTypes } from '~/composables/useComponentTypes'
|
||||
import { useComposants } from '~/composables/useComposants'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { useProducts } from '~/composables/useProducts'
|
||||
import { useProductTypes } from '~/composables/useProductTypes'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { humanizeError } from '~/shared/utils/errorMessages'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
normalizeCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import {
|
||||
getStructurePieces,
|
||||
resolvePieceLabel as _resolvePieceLabel,
|
||||
resolveProductLabel as _resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
fetchModelTypeNames,
|
||||
buildTypeLabelMap,
|
||||
} from '~/shared/utils/structureDisplayUtils'
|
||||
import type {
|
||||
ComponentModelPiece,
|
||||
ComponentModelProduct,
|
||||
ComponentModelStructure,
|
||||
ComponentModelStructureNode,
|
||||
} from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
|
||||
interface ComponentCatalogType extends ModelType {
|
||||
structure: ComponentModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
|
||||
const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { productTypes, loadProductTypes } = useProductTypes()
|
||||
const {
|
||||
createComposant,
|
||||
composants: componentCatalogRef,
|
||||
loading: componentsLoading,
|
||||
} = useComposants()
|
||||
const {
|
||||
pieces: pieceCatalogRef,
|
||||
loading: piecesLoading,
|
||||
} = usePieces()
|
||||
const {
|
||||
products: productCatalogRef,
|
||||
loading: productsLoading,
|
||||
} = useProducts()
|
||||
const toast = useToast()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const { uploadDocuments } = useDocuments()
|
||||
const { canEdit } = usePermissions()
|
||||
|
||||
const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
|
||||
const submitting = ref(false)
|
||||
const creationForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
const lastSuggestedName = ref('')
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const structureAssignments = ref<StructureAssignmentNode | null>(null)
|
||||
const selectedDocuments = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
|
||||
const availablePieces = computed(() => pieceCatalogRef.value ?? [])
|
||||
const availableProducts = computed(() => productCatalogRef.value ?? [])
|
||||
const availableComponents = computed(() => componentCatalogRef.value ?? [])
|
||||
const structureDataLoading = computed(
|
||||
() => piecesLoading.value || componentsLoading.value || productsLoading.value,
|
||||
)
|
||||
|
||||
const fetchedPieceTypeMap = ref<Record<string, string>>({})
|
||||
const pieceTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
|
||||
)
|
||||
const productTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(productTypes.value),
|
||||
)
|
||||
const componentTypeLabelMap = computed(() =>
|
||||
buildTypeLabelMap(componentTypes.value),
|
||||
)
|
||||
|
||||
watch(
|
||||
() => route.query.typeId,
|
||||
(value) => {
|
||||
if (typeof value === 'string') {
|
||||
selectedTypeId.value = value
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(selectedTypeId, (id) => {
|
||||
const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
|
||||
if ((id || '') === current) {
|
||||
return
|
||||
}
|
||||
const nextQuery = { ...route.query }
|
||||
if (id) {
|
||||
nextQuery.typeId = id
|
||||
} else {
|
||||
delete nextQuery.typeId
|
||||
}
|
||||
router.replace({ path: route.path, query: nextQuery }).catch(() => {})
|
||||
})
|
||||
|
||||
const componentTypeList = computed<ComponentCatalogType[]>(() =>
|
||||
(componentTypes.value || [])
|
||||
.filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
|
||||
)
|
||||
|
||||
const typeOptionLabel = (type?: ComponentCatalogType) =>
|
||||
type?.name || 'Catégorie'
|
||||
|
||||
const typeOptionDescription = (type?: ComponentCatalogType) =>
|
||||
type?.description ? String(type.description) : ''
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
|
||||
const structure = selectedType.value?.structure ?? null
|
||||
return structure ? normalizeStructureForEditor(structure) : null
|
||||
})
|
||||
|
||||
watch(selectedType, (type) => {
|
||||
if (!type) {
|
||||
clearCreationForm()
|
||||
customFieldInputs.value = []
|
||||
structureAssignments.value = null
|
||||
return
|
||||
}
|
||||
if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
|
||||
creationForm.name = type.name
|
||||
}
|
||||
lastSuggestedName.value = creationForm.name
|
||||
customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
|
||||
structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
|
||||
})
|
||||
|
||||
const extractSubcomponents = (
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelStructureNode[] => {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).subcomponents)
|
||||
? (definition as any).subcomponents
|
||||
: Array.isArray((definition as any).subComponents)
|
||||
? (definition as any).subComponents
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelStructureNode =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
const extractPiecesFromNode = (
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelPiece[] => {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).pieces)
|
||||
? (definition as any).pieces
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelPiece =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
const extractProductsFromNode = (
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelProduct[] => {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).products)
|
||||
? (definition as any).products
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelProduct =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
const buildAssignmentNode = (
|
||||
definition: ComponentModelStructureNode | ComponentModelStructure,
|
||||
path: string,
|
||||
): StructureAssignmentNode => {
|
||||
const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
|
||||
path: `${path}:piece-${index}`,
|
||||
definition: piece,
|
||||
selectedPieceId: '',
|
||||
}))
|
||||
|
||||
const products = extractProductsFromNode(definition).map((product, index) => ({
|
||||
path: `${path}:product-${index}`,
|
||||
definition: product,
|
||||
selectedProductId: '',
|
||||
}))
|
||||
|
||||
const subcomponents = extractSubcomponents(definition).map(
|
||||
(child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
|
||||
)
|
||||
|
||||
return {
|
||||
path,
|
||||
definition,
|
||||
selectedComponentId: '',
|
||||
pieces,
|
||||
products,
|
||||
subcomponents,
|
||||
}
|
||||
}
|
||||
|
||||
const initializeStructureAssignments = (
|
||||
structure: ComponentModelStructure | null,
|
||||
): StructureAssignmentNode | null => {
|
||||
if (!structure || typeof structure !== 'object') {
|
||||
return null
|
||||
}
|
||||
return buildAssignmentNode(structure, 'root')
|
||||
}
|
||||
|
||||
const hasAssignments = (node: StructureAssignmentNode | null): boolean => {
|
||||
if (!node) {
|
||||
return false
|
||||
}
|
||||
if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
|
||||
return true
|
||||
}
|
||||
return node.subcomponents.some((child) => hasAssignments(child))
|
||||
}
|
||||
|
||||
const structureHasRequirements = computed(() =>
|
||||
hasAssignments(structureAssignments.value),
|
||||
)
|
||||
|
||||
const isAssignmentNodeComplete = (
|
||||
node: StructureAssignmentNode,
|
||||
isRootNode = false,
|
||||
): boolean => {
|
||||
const piecesComplete = node.pieces.every(
|
||||
(piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
|
||||
)
|
||||
const productsComplete = node.products.every(
|
||||
(product) => !!product.selectedProductId && product.selectedProductId.length > 0,
|
||||
)
|
||||
const subcomponentsComplete = node.subcomponents.every(
|
||||
(child) =>
|
||||
!!child.selectedComponentId &&
|
||||
child.selectedComponentId.length > 0 &&
|
||||
isAssignmentNodeComplete(child, false),
|
||||
)
|
||||
return (
|
||||
piecesComplete &&
|
||||
productsComplete &&
|
||||
subcomponentsComplete &&
|
||||
(isRootNode || !!node.selectedComponentId)
|
||||
)
|
||||
}
|
||||
|
||||
const structureSelectionsComplete = computed(() => {
|
||||
if (!structureHasRequirements.value) {
|
||||
return true
|
||||
}
|
||||
if (structureDataLoading.value) {
|
||||
return false
|
||||
}
|
||||
if (!structureAssignments.value) {
|
||||
return false
|
||||
}
|
||||
return isAssignmentNodeComplete(structureAssignments.value, true)
|
||||
})
|
||||
|
||||
const stripNullish = (input: Record<string, any>) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(input).filter(
|
||||
([, value]) => value !== null && value !== undefined && value !== '',
|
||||
),
|
||||
)
|
||||
|
||||
const sanitizeStructureDefinition = (
|
||||
definition: ComponentModelStructureNode,
|
||||
) =>
|
||||
stripNullish({
|
||||
alias: definition.alias ?? null,
|
||||
typeComposantId: definition.typeComposantId ?? null,
|
||||
typeComposantLabel: definition.typeComposantLabel ?? null,
|
||||
modelId: definition.modelId ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
|
||||
const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
|
||||
stripNullish({
|
||||
role: (definition as any).role ?? null,
|
||||
typePieceId: definition.typePieceId ?? null,
|
||||
typePieceLabel: definition.typePieceLabel ?? null,
|
||||
reference: definition.reference ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
|
||||
const sanitizeProductDefinition = (definition: ComponentModelProduct) =>
|
||||
stripNullish({
|
||||
role: (definition as any).role ?? null,
|
||||
typeProductId: definition.typeProductId ?? null,
|
||||
typeProductLabel: (definition as any).typeProductLabel ?? null,
|
||||
reference: (definition as any).reference ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
|
||||
const serializeStructureAssignments = (
|
||||
root: StructureAssignmentNode | null,
|
||||
) => {
|
||||
if (!root) {
|
||||
return null
|
||||
}
|
||||
|
||||
const serializeNode = (
|
||||
assignment: StructureAssignmentNode,
|
||||
isRootNode = false,
|
||||
): Record<string, any> => {
|
||||
const serializedPieces = assignment.pieces
|
||||
.filter((piece) => !!piece.selectedPieceId)
|
||||
.map((piece) =>
|
||||
stripNullish({
|
||||
path: piece.path,
|
||||
definition: sanitizePieceDefinition(piece.definition),
|
||||
selectedPieceId: piece.selectedPieceId,
|
||||
}),
|
||||
)
|
||||
|
||||
const serializedProducts = assignment.products
|
||||
.filter((product) => !!product.selectedProductId)
|
||||
.map((product) =>
|
||||
stripNullish({
|
||||
path: product.path,
|
||||
definition: sanitizeProductDefinition(product.definition),
|
||||
selectedProductId: product.selectedProductId,
|
||||
}),
|
||||
)
|
||||
|
||||
const serializedSubcomponents = assignment.subcomponents
|
||||
.map((child) => serializeNode(child, false))
|
||||
.filter((child) => Object.keys(child).length > 0)
|
||||
|
||||
const base: Record<string, any> = {
|
||||
path: assignment.path,
|
||||
definition: sanitizeStructureDefinition(assignment.definition),
|
||||
}
|
||||
|
||||
if (!isRootNode) {
|
||||
base.selectedComponentId = assignment.selectedComponentId
|
||||
}
|
||||
if (serializedPieces.length) {
|
||||
base.pieces = serializedPieces
|
||||
}
|
||||
if (serializedProducts.length) {
|
||||
base.products = serializedProducts
|
||||
}
|
||||
if (serializedSubcomponents.length) {
|
||||
base.subcomponents = serializedSubcomponents
|
||||
}
|
||||
|
||||
return stripNullish(base)
|
||||
}
|
||||
|
||||
const serializedRoot = serializeNode(root, true)
|
||||
if (
|
||||
(!serializedRoot.pieces || serializedRoot.pieces.length === 0) &&
|
||||
(!serializedRoot.products || serializedRoot.products.length === 0) &&
|
||||
(!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
|
||||
) {
|
||||
return null
|
||||
}
|
||||
return serializedRoot
|
||||
}
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() => Boolean(
|
||||
canEdit.value &&
|
||||
selectedType.value &&
|
||||
creationForm.name &&
|
||||
requiredCustomFieldsFilled.value &&
|
||||
structureSelectionsComplete.value &&
|
||||
!submitting.value,
|
||||
))
|
||||
|
||||
const resolvePieceLabel = (piece: Record<string, any>) =>
|
||||
_resolvePieceLabel(piece, pieceTypeLabelMap.value)
|
||||
|
||||
const resolveProductLabel = (product: Record<string, any>) =>
|
||||
_resolveProductLabel(product, productTypeLabelMap.value)
|
||||
|
||||
watch(
|
||||
selectedTypeId,
|
||||
submitting,
|
||||
creationForm,
|
||||
customFieldInputs,
|
||||
structureAssignments,
|
||||
selectedDocuments,
|
||||
uploadingDocuments,
|
||||
loadingTypes,
|
||||
componentTypeList,
|
||||
selectedType,
|
||||
selectedTypeStructure,
|
||||
(structure) => {
|
||||
const ids = getStructurePieces(structure)
|
||||
.map((piece: any) => piece?.typePieceId)
|
||||
.filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
|
||||
if (!ids.length) {
|
||||
return
|
||||
}
|
||||
fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
|
||||
.then((additions) => {
|
||||
if (Object.keys(additions).length) {
|
||||
fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const clearCreationForm = () => {
|
||||
creationForm.name = ''
|
||||
creationForm.description = ''
|
||||
creationForm.reference = ''
|
||||
creationForm.constructeurIds = []
|
||||
creationForm.prix = ''
|
||||
lastSuggestedName.value = ''
|
||||
structureAssignments.value = null
|
||||
}
|
||||
|
||||
const submitCreation = async () => {
|
||||
if (!selectedType.value) {
|
||||
toast.showError('Sélectionnez une catégorie de composant.')
|
||||
return
|
||||
}
|
||||
const payload: Record<string, any> = {
|
||||
name: creationForm.name.trim(),
|
||||
typeComposantId: selectedType.value.id,
|
||||
}
|
||||
|
||||
const description = creationForm.description.trim()
|
||||
if (description) {
|
||||
payload.description = description
|
||||
}
|
||||
|
||||
const reference = creationForm.reference.trim()
|
||||
if (reference) {
|
||||
payload.reference = reference
|
||||
}
|
||||
|
||||
if (creationForm.constructeurIds.length) {
|
||||
payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
|
||||
}
|
||||
|
||||
const rawPrice = typeof creationForm.prix === 'string'
|
||||
? creationForm.prix.trim()
|
||||
: creationForm.prix === null || creationForm.prix === undefined
|
||||
? ''
|
||||
: String(creationForm.prix).trim()
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
}
|
||||
|
||||
const rootProductSelection =
|
||||
structureAssignments.value?.products?.find(
|
||||
(product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
|
||||
) ?? null
|
||||
|
||||
if (rootProductSelection?.selectedProductId) {
|
||||
payload.productId = rootProductSelection.selectedProductId.trim()
|
||||
}
|
||||
|
||||
if (structureHasRequirements.value && !structureSelectionsComplete.value) {
|
||||
toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
|
||||
return
|
||||
}
|
||||
|
||||
const serializedStructure = structureHasRequirements.value
|
||||
? serializeStructureAssignments(structureAssignments.value)
|
||||
: null
|
||||
|
||||
if (serializedStructure) {
|
||||
payload.structure = serializedStructure
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const result = await createComposant(payload)
|
||||
if (result.success) {
|
||||
const createdComponent = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'composant',
|
||||
createdComponent.id,
|
||||
[createdComponent?.typeComposant?.customFields],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
if (selectedDocuments.value.length && result.data?.id) {
|
||||
uploadingDocuments.value = true
|
||||
const uploadResult = await uploadDocuments(
|
||||
{
|
||||
files: selectedDocuments.value,
|
||||
context: { composantId: result.data.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (!uploadResult.success) {
|
||||
const message = uploadResult.error
|
||||
? `Documents non ajoutés : ${uploadResult.error}`
|
||||
: 'Documents non ajoutés : une erreur est survenue.'
|
||||
toast.showError(message)
|
||||
}
|
||||
selectedDocuments.value = []
|
||||
}
|
||||
toast.showSuccess('Composant créé avec succès')
|
||||
await router.push('/component-catalog')
|
||||
} else if (result.error) {
|
||||
toast.showError(result.error)
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([
|
||||
loadComponentTypes(),
|
||||
loadPieceTypes(),
|
||||
loadProductTypes(),
|
||||
])
|
||||
})
|
||||
availablePieces,
|
||||
availableProducts,
|
||||
availableComponents,
|
||||
piecesLoading,
|
||||
productsLoading,
|
||||
componentsLoading,
|
||||
structureDataLoading,
|
||||
pieceTypeLabelMap,
|
||||
productTypeLabelMap,
|
||||
componentTypeLabelMap,
|
||||
structureHasRequirements,
|
||||
structureSelectionsComplete,
|
||||
canEdit,
|
||||
canSubmit,
|
||||
typeOptionLabel,
|
||||
typeOptionDescription,
|
||||
formatStructurePreview,
|
||||
resolvePieceLabel,
|
||||
resolveProductLabel,
|
||||
resolveSubcomponentLabel,
|
||||
submitCreation,
|
||||
} = useComponentCreate()
|
||||
</script>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-4">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
@@ -49,11 +49,11 @@
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex justify-end gap-2">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
|
||||
{{ canEdit ? 'Modifier' : 'Consulter' }}
|
||||
</button>
|
||||
<button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(row)">
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@close="closePreview"
|
||||
/>
|
||||
|
||||
<section class="card bg-base-100 shadow-lg">
|
||||
<section class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-6">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
@@ -68,7 +68,7 @@
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-semibold">{{ row.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ row.filename }}</div>
|
||||
<div class="text-xs text-base-content/50">{{ row.filename }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -88,7 +88,7 @@
|
||||
<span v-else-if="row.composant">Composant · {{ row.composant.name }}</span>
|
||||
<span v-else-if="row.piece">Pièce · {{ row.piece.name }}</span>
|
||||
<span v-else-if="row.product">Produit · {{ row.product.name }}</span>
|
||||
<span v-else class="text-gray-400">Non défini</span>
|
||||
<span v-else class="text-base-content/30">Non défini</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,57 +1,51 @@
|
||||
<template>
|
||||
<main class="container mx-auto px-6 py-8">
|
||||
<!-- Hierarchical View -->
|
||||
<div class="my-8">
|
||||
<!-- Header with Stats -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">
|
||||
<h2 class="text-3xl font-bold text-base-content tracking-tight">
|
||||
Vue d'ensemble
|
||||
</h2>
|
||||
<p class="text-gray-600">
|
||||
<p class="text-base-content/50 mt-1">
|
||||
Machines organisées par site
|
||||
</p>
|
||||
</div>
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">
|
||||
Sites
|
||||
</div>
|
||||
<div class="stat-value text-primary">
|
||||
{{ sites.length }}
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
|
||||
<p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
|
||||
<p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">
|
||||
Machines
|
||||
</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{{ totalMachines }}
|
||||
</div>
|
||||
<div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
|
||||
<p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
|
||||
<p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="card bg-base-100 shadow-lg mb-6">
|
||||
<div class="card-body">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<div class="card bg-base-100 shadow-sm mb-8">
|
||||
<div class="card-body py-4">
|
||||
<div class="flex flex-col md:flex-row md:items-end gap-4">
|
||||
<div class="form-control flex-1">
|
||||
<label class="label">
|
||||
<span class="label-text">Rechercher</span>
|
||||
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
type="text"
|
||||
placeholder="Nom de machine ou site..."
|
||||
class="input input-bordered"
|
||||
>
|
||||
<div class="relative">
|
||||
<IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
type="text"
|
||||
placeholder="Nom de machine ou site..."
|
||||
class="input input-bordered pl-10 w-full"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<div class="form-control md:w-64">
|
||||
<label class="label">
|
||||
<span class="label-text">Site</span>
|
||||
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
|
||||
</label>
|
||||
<select v-model="selectedSiteFilter" class="select select-bordered">
|
||||
<select v-model="selectedSiteFilter" class="select select-bordered w-full">
|
||||
<option value="">
|
||||
Tous les sites
|
||||
</option>
|
||||
@@ -69,30 +63,32 @@
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex justify-center items-center py-12">
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
<div v-if="loading" class="flex justify-center items-center py-16">
|
||||
<span class="loading loading-spinner loading-lg text-primary" />
|
||||
</div>
|
||||
|
||||
<!-- Hierarchical Machines View -->
|
||||
<div v-else-if="filteredSites.length === 0" class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<IconLucideFactory
|
||||
class="w-16 h-16 mx-auto text-gray-400 mb-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="filteredSites.length === 0" class="text-center py-16">
|
||||
<div class="max-w-sm mx-auto">
|
||||
<div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
|
||||
<IconLucideFactory
|
||||
class="w-8 h-8 text-base-content/30"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-base-content mb-1">
|
||||
Aucune machine trouvée
|
||||
</h3>
|
||||
<p class="text-gray-500 mb-4">
|
||||
<p class="text-sm text-base-content/50 mb-6">
|
||||
Commencez par ajouter des sites et des machines.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<button v-if="canEdit" class="btn btn-primary" @click="showAddSiteModal = true">
|
||||
<button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
|
||||
Ajouter un site
|
||||
</button>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-secondary"
|
||||
class="btn btn-ghost btn-sm"
|
||||
@click="showAddMachineModal = true"
|
||||
>
|
||||
Ajouter une machine
|
||||
@@ -101,130 +97,119 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Sites List -->
|
||||
<div v-else class="space-y-5">
|
||||
<div
|
||||
v-for="site in filteredSites"
|
||||
:key="site.id"
|
||||
class="card bg-base-100 shadow-lg"
|
||||
class="card site-card shadow-md overflow-hidden"
|
||||
:style="{
|
||||
borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
|
||||
background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
|
||||
}"
|
||||
>
|
||||
<!-- Site Header -->
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar placeholder">
|
||||
<div
|
||||
class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
|
||||
>
|
||||
<IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
|
||||
</div>
|
||||
<!-- Site Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
|
||||
:style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
|
||||
>
|
||||
<IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">
|
||||
<div class="min-w-0">
|
||||
<h3
|
||||
class="text-lg font-bold tracking-tight text-base-content"
|
||||
>
|
||||
{{ site.name }}
|
||||
</h3>
|
||||
<div class="text-sm text-gray-600 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconLucideUser
|
||||
class="w-4 h-4 text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="font-medium">{{ site.contactName }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<IconLucidePhone
|
||||
class="w-4 h-4 text-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{{ formatPhoneDisplay(site.contactPhone) }}</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<IconLucideMapPinned
|
||||
class="w-4 h-4 text-accent mt-1"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>
|
||||
{{ site.contactAddress }}<br>
|
||||
{{ site.contactPostalCode }} {{ site.contactCity }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
|
||||
<span v-if="site.contactName" class="flex items-center gap-1.5">
|
||||
<IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
|
||||
{{ site.contactName }}
|
||||
</span>
|
||||
<span v-if="site.contactPhone" class="flex items-center gap-1.5">
|
||||
<IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
|
||||
{{ formatPhoneDisplay(site.contactPhone) }}
|
||||
</span>
|
||||
<span v-if="site.contactCity" class="flex items-center gap-1.5">
|
||||
<IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
|
||||
{{ site.contactPostalCode }} {{ site.contactCity }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="badge badge-primary badge-lg">
|
||||
{{ site.machines?.length || 0 }} machines
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<span
|
||||
class="badge font-bold"
|
||||
:style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
|
||||
:class="!site.color ? 'badge-primary' : ''"
|
||||
>
|
||||
{{ site.machines?.length || 0 }}
|
||||
</span>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
class="btn btn-ghost btn-xs btn-circle"
|
||||
@click="toggleSiteCollapse(site.id)"
|
||||
>
|
||||
<IconLucideChevronDown
|
||||
class="w-5 h-5 transition-transform"
|
||||
:class="
|
||||
collapsedSites.includes(site.id) ? 'rotate-180' : ''
|
||||
"
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Machines List -->
|
||||
<!-- Machines Grid -->
|
||||
<div
|
||||
v-if="
|
||||
!collapsedSites.includes(site.id) &&
|
||||
site.machines &&
|
||||
site.machines.length > 0
|
||||
"
|
||||
class="space-y-3"
|
||||
class="mt-4 pt-4 border-t border-base-200/80"
|
||||
>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<div
|
||||
v-for="machine in site.machines"
|
||||
:key="machine.id"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
|
||||
class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
|
||||
@click="viewMachineDetails(machine)"
|
||||
>
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="font-semibold text-sm">
|
||||
{{ machine.name }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="font-semibold text-sm text-base-content group-hover:text-primary transition-colors truncate">
|
||||
{{ machine.name }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1 text-xs text-gray-600">
|
||||
<div
|
||||
v-if="machine.reference"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
|
||||
<span>{{ machine.reference }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
|
||||
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
|
||||
<span>{{ machine.reference }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-3">
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-xs btn-outline"
|
||||
@click.stop="editMachine(machine)"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-xs btn-error"
|
||||
@click.stop="confirmDeleteMachine(machine)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="`/machine/${machine.id}`"
|
||||
class="btn btn-xs btn-primary"
|
||||
>
|
||||
Détails
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-ghost btn-sm"
|
||||
@click.stop="editMachine(machine)"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-ghost btn-sm text-error"
|
||||
@click.stop="confirmDeleteMachine(machine)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="`/machine/${machine.id}`"
|
||||
class="btn btn-primary btn-sm"
|
||||
@click.stop
|
||||
>
|
||||
Détails
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -236,17 +221,17 @@
|
||||
!collapsedSites.includes(site.id) &&
|
||||
(!site.machines || site.machines.length === 0)
|
||||
"
|
||||
class="text-center py-6"
|
||||
class="text-center py-8 mt-4 border-t border-base-200/80"
|
||||
>
|
||||
<div class="text-gray-400 mb-2">
|
||||
<IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
|
||||
<div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
|
||||
<IconLucideFactory class="w-5 h-5 text-base-content/25" aria-hidden="true" />
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-3">
|
||||
<p class="text-sm text-base-content/40 mb-3">
|
||||
Aucune machine dans ce site
|
||||
</p>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="btn btn-sm btn-primary"
|
||||
class="btn btn-sm btn-primary btn-outline"
|
||||
@click="addMachineToSite(site)"
|
||||
>
|
||||
Ajouter une machine
|
||||
@@ -258,7 +243,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Add Site Modal -->
|
||||
<HomeAddSiteModal
|
||||
<AddSiteModal
|
||||
:open="showAddSiteModal"
|
||||
:disabled="!canEdit"
|
||||
@close="showAddSiteModal = false"
|
||||
@@ -266,7 +251,7 @@
|
||||
/>
|
||||
|
||||
<!-- Add Machine Modal -->
|
||||
<HomeAddMachineModal
|
||||
<AddMachineModal
|
||||
:open="showAddMachineModal"
|
||||
:sites="sites"
|
||||
:disabled="!canEdit"
|
||||
@@ -290,6 +275,7 @@ import IconLucidePhone from '~icons/lucide/phone'
|
||||
import IconLucideMapPinned from '~icons/lucide/map-pinned'
|
||||
import IconLucideChevronDown from '~icons/lucide/chevron-down'
|
||||
import IconLucideTag from '~icons/lucide/tag'
|
||||
import IconLucideSearch from '~icons/lucide/search'
|
||||
import { formatPhone } from '~/utils/formatters/phone'
|
||||
import { extractRelationId } from '~/shared/apiRelations'
|
||||
|
||||
@@ -410,12 +396,10 @@ const toggleSiteCollapse = (siteId) => {
|
||||
}
|
||||
|
||||
const viewMachineDetails = (machine) => {
|
||||
// Navigation vers la page de détails de la machine
|
||||
navigateTo(`/machine/${machine.id}`)
|
||||
}
|
||||
|
||||
const editMachine = (machine) => {
|
||||
// Rediriger vers la page d'édition de la machine
|
||||
navigateTo(`/machine/${machine.id}?edit=true`)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<main class="container mx-auto px-6 py-8">
|
||||
<div>
|
||||
<main class="container mx-auto px-6 py-8">
|
||||
<!-- Loading State -->
|
||||
<div v-if="d.loading.value" class="flex justify-center items-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
<div v-if="d.loading.value" class="flex justify-center items-center py-16">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
|
||||
<!-- Machine Details -->
|
||||
@@ -38,7 +39,11 @@
|
||||
rounded
|
||||
>
|
||||
<div class="flex justify-center gap-4">
|
||||
<div v-if="d.machine.value.site?.name" class="badge badge-outline">
|
||||
<div
|
||||
v-if="d.machine.value.site?.name"
|
||||
class="badge badge-outline font-semibold"
|
||||
:style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
|
||||
>
|
||||
{{ d.machine.value.site?.name }}
|
||||
</div>
|
||||
<div v-if="d.machine.value.reference" class="badge badge-outline">
|
||||
@@ -52,17 +57,24 @@
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:machine-name="d.machineName.value"
|
||||
:machine-reference="d.machineReference.value"
|
||||
:machine-site-id="d.machineSiteId.value"
|
||||
:machine-site-name="d.machine.value?.site?.name ?? ''"
|
||||
:sites="d.sites.value"
|
||||
:machine-constructeur-ids="d.machineConstructeurIds.value"
|
||||
:machine-constructeurs-display="d.machineConstructeursDisplay.value"
|
||||
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
||||
:visible-custom-fields="d.visibleMachineCustomFields.value"
|
||||
:get-machine-field-id="d.getMachineFieldId"
|
||||
:machine-id="machineId"
|
||||
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
||||
@update:machine-name="d.machineName.value = $event"
|
||||
@update:machine-reference="d.machineReference.value = $event"
|
||||
@update:machine-site-id="d.machineSiteId.value = $event"
|
||||
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
||||
@blur-field="d.updateMachineInfo"
|
||||
@set-custom-field-value="d.setMachineCustomFieldValue"
|
||||
@update-custom-field="d.updateMachineCustomField"
|
||||
@custom-fields-saved="d.loadMachineData()"
|
||||
/>
|
||||
|
||||
<!-- Documents -->
|
||||
@@ -136,26 +148,29 @@
|
||||
<!-- Error State -->
|
||||
<div v-else class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<IconLucideAlertTriangle class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
|
||||
<p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
|
||||
<div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
|
||||
<IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
|
||||
<p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
|
||||
<NuxtLink to="/machines" class="btn btn-primary">
|
||||
Retour aux machines
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
<MachinePrintSelectionModal
|
||||
:open="d.printModalOpen.value"
|
||||
:selection="d.printSelection"
|
||||
:components="d.components.value"
|
||||
:pieces="d.machinePieces.value"
|
||||
@close="d.closePrintModal"
|
||||
@confirm="d.handlePrintConfirm"
|
||||
@select-all="d.setAllPrintSelection(true)"
|
||||
@deselect-all="d.setAllPrintSelection(false)"
|
||||
/>
|
||||
<MachinePrintSelectionModal
|
||||
:open="d.printModalOpen.value"
|
||||
:selection="d.printSelection"
|
||||
:components="d.components.value"
|
||||
:pieces="d.machinePieces.value"
|
||||
@close="d.closePrintModal"
|
||||
@confirm="d.handlePrintConfirm"
|
||||
@select-all="d.setAllPrintSelection(true)"
|
||||
@deselect-all="d.setAllPrintSelection(false)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg mb-6">
|
||||
<div class="card bg-base-100 shadow-sm mb-6">
|
||||
<div class="card-body">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
@@ -65,10 +65,14 @@
|
||||
<div
|
||||
v-for="machine in filteredMachines"
|
||||
:key="machine.id"
|
||||
class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
|
||||
class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
|
||||
:style="{
|
||||
borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
|
||||
background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
|
||||
}"
|
||||
@click="viewMachineDetails(machine)"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="card-body flex flex-col">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="card-title text-lg">
|
||||
{{ machine.name }}
|
||||
@@ -77,8 +81,11 @@
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
|
||||
<IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
|
||||
<span
|
||||
class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
|
||||
:style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
|
||||
>{{ machine.site?.name || 'Site inconnu' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.reference" class="flex items-center gap-2">
|
||||
@@ -87,15 +94,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
|
||||
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
|
||||
Modifier
|
||||
</button>
|
||||
<button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
|
||||
Supprimer
|
||||
</button>
|
||||
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
|
||||
Voir détails
|
||||
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
|
||||
Détails
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card bg-base-100 shadow-sm">
|
||||
<div class="card-body space-y-6">
|
||||
<!-- Basic fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<template #cell-description="{ row }">
|
||||
<div v-if="row.piece.description" class="group relative">
|
||||
<span class="block cursor-help truncate">{{ row.piece.description }}</span>
|
||||
<div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
|
||||
<div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-sm group-hover:pointer-events-auto group-hover:visible">
|
||||
<p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,7 +118,7 @@
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<NuxtLink
|
||||
:to="`/pieces/${row.piece.id}/edit`"
|
||||
class="btn btn-ghost btn-xs"
|
||||
@@ -128,7 +128,7 @@
|
||||
<button
|
||||
v-if="canEdit"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs"
|
||||
class="btn btn-ghost btn-xs text-error"
|
||||
:disabled="loadingPieces"
|
||||
@click="handleDeletePiece(row.piece)"
|
||||
>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="pieceDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="pieceDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
|
||||
<span class="loading loading-spinner loading-lg" aria-hidden="true" />
|
||||
<p class="text-sm text-base-content/70">Chargement de la pièce…</p>
|
||||
@@ -265,458 +266,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from '#imports'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import ProductSelect from '~/components/ProductSelect.vue'
|
||||
import { usePieceTypes } from '~/composables/usePieceTypes'
|
||||
import { usePieces } from '~/composables/usePieces'
|
||||
import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import { usePieceHistory } from '~/composables/usePieceHistory'
|
||||
import { extractRelationId } from '~/shared/apiRelations'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import { formatPieceStructurePreview } from '~/shared/modelUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
import { getModelType } from '~/services/modelTypes'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
buildCustomFieldInputs,
|
||||
requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
|
||||
saveCustomFieldValues as _saveCustomFieldValues,
|
||||
} from '~/shared/utils/customFieldFormUtils'
|
||||
import { useRoute } from '#imports'
|
||||
import { usePieceEdit } from '~/composables/usePieceEdit'
|
||||
|
||||
interface PieceCatalogType extends ModelType {
|
||||
structure: PieceModelStructure | null
|
||||
customFields?: Array<Record<string, any>>
|
||||
}
|
||||
|
||||
const { canEdit } = usePermissions()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { get } = useApi()
|
||||
const { pieceTypes, loadPieceTypes } = usePieceTypes()
|
||||
const { updatePiece } = usePieces()
|
||||
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
|
||||
const toast = useToast()
|
||||
const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
|
||||
const { ensureConstructeurs } = useConstructeurs()
|
||||
|
||||
const {
|
||||
piece,
|
||||
loading,
|
||||
saving,
|
||||
selectedFiles,
|
||||
uploadingDocuments,
|
||||
loadingDocuments,
|
||||
pieceDocuments,
|
||||
previewDocument,
|
||||
previewVisible,
|
||||
selectedTypeId,
|
||||
editionForm,
|
||||
productSelections,
|
||||
customFieldInputs,
|
||||
canEdit,
|
||||
pieceTypeList,
|
||||
selectedType,
|
||||
resolvedStructure,
|
||||
structureProducts,
|
||||
productRequirementDescriptions,
|
||||
productRequirementEntries,
|
||||
canSubmit,
|
||||
historyFieldLabels,
|
||||
history,
|
||||
loading: historyLoading,
|
||||
error: historyError,
|
||||
loadHistory,
|
||||
} = usePieceHistory()
|
||||
|
||||
const piece = ref<any | null>(null)
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const uploadingDocuments = ref(false)
|
||||
const loadingDocuments = ref(false)
|
||||
const pieceDocuments = ref<any[]>([])
|
||||
const previewDocument = ref<any | null>(null)
|
||||
const previewVisible = ref(false)
|
||||
|
||||
const historyFieldLabels: Record<string, string> = {
|
||||
name: 'Nom',
|
||||
reference: 'Référence',
|
||||
prix: 'Prix',
|
||||
typePiece: 'Catégorie',
|
||||
product: 'Produit lié',
|
||||
productIds: 'Produits liés',
|
||||
constructeurIds: 'Fournisseurs',
|
||||
}
|
||||
|
||||
const selectedTypeId = ref<string>('')
|
||||
const pieceTypeDetails = ref<any | null>(null)
|
||||
const editionForm = reactive({
|
||||
name: '' as string,
|
||||
description: '' as string,
|
||||
reference: '' as string,
|
||||
constructeurIds: [] as string[],
|
||||
prix: '' as string,
|
||||
})
|
||||
const productSelections = ref<(string | null)[]>([])
|
||||
|
||||
const customFieldInputs = ref<CustomFieldInput[]>([])
|
||||
const resolvedStructure = computed<PieceModelStructure | null>(() =>
|
||||
pieceTypeDetails.value?.structure ?? selectedType.value?.structure ?? null,
|
||||
)
|
||||
|
||||
const refreshCustomFieldInputs = (
|
||||
structureOverride?: PieceModelStructure | null,
|
||||
valuesOverride?: any[] | null,
|
||||
) => {
|
||||
const structure = structureOverride ?? resolvedStructure.value ?? null
|
||||
const values = valuesOverride ?? piece.value?.customFieldValues ?? null
|
||||
customFieldInputs.value = buildCustomFieldInputs(structure, values)
|
||||
}
|
||||
const openPreview = (doc: any) => {
|
||||
if (!doc || !canPreviewDocument(doc)) {
|
||||
return
|
||||
}
|
||||
previewDocument.value = doc
|
||||
previewVisible.value = true
|
||||
}
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false
|
||||
previewDocument.value = null
|
||||
}
|
||||
const removeDocument = async (documentId: string | number | null | undefined) => {
|
||||
if (!documentId) {
|
||||
return
|
||||
}
|
||||
const result = await deleteDocument(documentId, { updateStore: false })
|
||||
if (result.success) {
|
||||
pieceDocuments.value = pieceDocuments.value.filter((doc) => doc.id !== documentId)
|
||||
}
|
||||
}
|
||||
const handleFilesAdded = async (files: File[]) => {
|
||||
if (!files?.length || !piece.value?.id) {
|
||||
return
|
||||
}
|
||||
uploadingDocuments.value = true
|
||||
try {
|
||||
const result = await uploadDocuments(
|
||||
{
|
||||
files,
|
||||
context: { pieceId: piece.value.id },
|
||||
},
|
||||
{ updateStore: false },
|
||||
)
|
||||
if (result.success) {
|
||||
selectedFiles.value = []
|
||||
await refreshDocuments()
|
||||
}
|
||||
} finally {
|
||||
uploadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
const refreshDocuments = async () => {
|
||||
if (!piece.value?.id) {
|
||||
pieceDocuments.value = []
|
||||
return
|
||||
}
|
||||
loadingDocuments.value = true
|
||||
try {
|
||||
const result = await loadDocumentsByPiece(piece.value.id, { updateStore: false })
|
||||
if (result.success) {
|
||||
pieceDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
|
||||
}
|
||||
} finally {
|
||||
loadingDocuments.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
|
||||
|
||||
const selectedType = computed(() => {
|
||||
if (!selectedTypeId.value) {
|
||||
return null
|
||||
}
|
||||
return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const getStructureProducts = (structure: PieceModelStructure | null) =>
|
||||
Array.isArray(structure?.products) ? structure.products : []
|
||||
|
||||
const structureProducts = computed(() =>
|
||||
getStructureProducts(resolvedStructure.value),
|
||||
)
|
||||
|
||||
const requiresProductSelection = computed(() => structureProducts.value.length > 0)
|
||||
|
||||
const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
|
||||
if (!requirement) {
|
||||
return `Produit ${index + 1}`
|
||||
}
|
||||
const parts: string[] = []
|
||||
if (requirement.role) {
|
||||
parts.push(requirement.role)
|
||||
}
|
||||
if (requirement.typeProductLabel) {
|
||||
parts.push(requirement.typeProductLabel)
|
||||
} else if (requirement.typeProductId) {
|
||||
parts.push(`Catégorie #${requirement.typeProductId}`)
|
||||
}
|
||||
if (requirement.familyCode) {
|
||||
parts.push(`Famille ${requirement.familyCode}`)
|
||||
}
|
||||
if (parts.length === 0) {
|
||||
parts.push(`Produit ${index + 1}`)
|
||||
}
|
||||
return parts.join(' • ')
|
||||
}
|
||||
|
||||
const productRequirementDescriptions = computed(() =>
|
||||
structureProducts.value.map((requirement, index) =>
|
||||
describeProductRequirement(requirement, index),
|
||||
),
|
||||
)
|
||||
|
||||
const ensureProductSelections = (count: number) => {
|
||||
const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
|
||||
productSelections.value = next
|
||||
}
|
||||
|
||||
let pendingProductIds: string[] = []
|
||||
|
||||
const productRequirementEntries = computed(() =>
|
||||
structureProducts.value.map((requirement, index) => ({
|
||||
index,
|
||||
key: `piece-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
|
||||
label: describeProductRequirement(requirement, index),
|
||||
typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
|
||||
})),
|
||||
)
|
||||
|
||||
const productSelectionsFilled = computed(() =>
|
||||
!requiresProductSelection.value ||
|
||||
productRequirementEntries.value.every((entry) => {
|
||||
const value = productSelections.value[entry.index]
|
||||
return typeof value === 'string' && value.trim().length > 0
|
||||
}),
|
||||
)
|
||||
|
||||
const setProductSelection = (index: number, value: string | null) => {
|
||||
const normalized = typeof value === 'string' ? value : null
|
||||
const next = [...productSelections.value]
|
||||
next[index] = normalized
|
||||
productSelections.value = next
|
||||
}
|
||||
|
||||
watch(structureProducts, (products) => {
|
||||
ensureProductSelections(products.length)
|
||||
if (!pendingProductIds.length || products.length === 0) {
|
||||
return
|
||||
}
|
||||
const next = Array.from(
|
||||
{ length: products.length },
|
||||
(_, index) => pendingProductIds[index] ?? null,
|
||||
)
|
||||
productSelections.value = next
|
||||
pendingProductIds = []
|
||||
})
|
||||
|
||||
const requiredCustomFieldsFilled = computed(() =>
|
||||
_requiredCustomFieldsFilled(customFieldInputs.value),
|
||||
)
|
||||
|
||||
const canSubmit = computed(() =>
|
||||
Boolean(
|
||||
canEdit.value &&
|
||||
piece.value &&
|
||||
editionForm.name &&
|
||||
requiredCustomFieldsFilled.value &&
|
||||
productSelectionsFilled.value &&
|
||||
!saving.value,
|
||||
),
|
||||
)
|
||||
|
||||
const fetchPiece = async () => {
|
||||
const id = route.params.id
|
||||
if (!id || typeof id !== 'string') {
|
||||
piece.value = null
|
||||
pieceDocuments.value = []
|
||||
return
|
||||
}
|
||||
const result = await get(`/pieces/${id}`)
|
||||
if (result.success) {
|
||||
piece.value = result.data
|
||||
pieceDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
|
||||
|
||||
// Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
|
||||
const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
|
||||
refreshCustomFieldInputs(undefined, customValues)
|
||||
|
||||
// Use cached type from loadPieceTypes() instead of separate getModelType() call
|
||||
loadPieceTypeDetailsFromCache(result.data)
|
||||
|
||||
// History is non-blocking — template handles its own loading state
|
||||
loadHistory(result.data.id).catch(() => {})
|
||||
} else {
|
||||
piece.value = null
|
||||
pieceDocuments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const loadPieceTypeDetailsFromCache = (currentPiece: any) => {
|
||||
const typeId = currentPiece?.typePieceId
|
||||
|| extractRelationId(currentPiece?.typePiece)
|
||||
|| ''
|
||||
if (!typeId) {
|
||||
pieceTypeDetails.value = null
|
||||
return
|
||||
}
|
||||
// Look up in the already-loaded pieceTypes cache (from loadPieceTypes in onMounted)
|
||||
const cachedType = (pieceTypes.value || []).find((t: any) => t.id === typeId) ?? null
|
||||
if (cachedType) {
|
||||
pieceTypeDetails.value = cachedType
|
||||
refreshCustomFieldInputs((cachedType.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
|
||||
return
|
||||
}
|
||||
// Fallback: fetch if not in cache (edge case)
|
||||
getModelType(typeId).then((type) => {
|
||||
if (type && typeof type === 'object') {
|
||||
pieceTypeDetails.value = type
|
||||
refreshCustomFieldInputs((type.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
|
||||
}
|
||||
}).catch(() => {
|
||||
pieceTypeDetails.value = null
|
||||
})
|
||||
}
|
||||
|
||||
let initialized = false
|
||||
|
||||
watch(
|
||||
[piece, selectedType],
|
||||
([currentPiece, currentType]) => {
|
||||
if (!currentPiece || initialized) {
|
||||
return
|
||||
}
|
||||
|
||||
const resolvedTypeId = currentPiece.typePieceId
|
||||
|| extractRelationId(currentPiece.typePiece)
|
||||
|| ''
|
||||
if (resolvedTypeId && !currentPiece.typePieceId) {
|
||||
currentPiece.typePieceId = resolvedTypeId
|
||||
}
|
||||
selectedTypeId.value = resolvedTypeId
|
||||
|
||||
editionForm.name = currentPiece.name || ''
|
||||
editionForm.description = currentPiece.description || ''
|
||||
editionForm.reference = currentPiece.reference || ''
|
||||
editionForm.constructeurIds = uniqueConstructeurIds(
|
||||
currentPiece,
|
||||
Array.isArray(currentPiece.constructeurs) ? currentPiece.constructeurs : [],
|
||||
currentPiece.constructeur ? [currentPiece.constructeur] : [],
|
||||
)
|
||||
editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
|
||||
if (editionForm.constructeurIds.length) {
|
||||
void ensureConstructeurs(editionForm.constructeurIds)
|
||||
}
|
||||
|
||||
const existingProductIds = Array.isArray(currentPiece.productIds) && currentPiece.productIds.length
|
||||
? currentPiece.productIds.map((id: unknown) => String(id))
|
||||
: currentPiece.product?.id || currentPiece.productId
|
||||
? [String(currentPiece.product?.id || currentPiece.productId)]
|
||||
: []
|
||||
pendingProductIds = existingProductIds
|
||||
ensureProductSelections(structureProducts.value.length)
|
||||
if (existingProductIds.length && structureProducts.value.length) {
|
||||
const next = Array.from(
|
||||
{ length: structureProducts.value.length },
|
||||
(_, index) => existingProductIds[index] ?? null,
|
||||
)
|
||||
productSelections.value = next
|
||||
pendingProductIds = []
|
||||
}
|
||||
|
||||
// After setting selectedTypeId, read selectedType.value (now updated) instead of
|
||||
// the stale destructured currentType which was captured before the ID change.
|
||||
const resolvedType = selectedType.value ?? pieceTypeDetails.value ?? null
|
||||
refreshCustomFieldInputs(resolvedType?.structure ?? null, currentPiece.customFieldValues)
|
||||
|
||||
initialized = true
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(selectedType, (currentType) => {
|
||||
if (!piece.value || !currentType) {
|
||||
return
|
||||
}
|
||||
refreshCustomFieldInputs(currentType.structure, piece.value.customFieldValues)
|
||||
})
|
||||
|
||||
watch(resolvedStructure, (currentStructure) => {
|
||||
if (!piece.value) {
|
||||
return
|
||||
}
|
||||
ensureProductSelections(structureProducts.value.length)
|
||||
refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
|
||||
})
|
||||
|
||||
const submitEdition = async () => {
|
||||
if (!piece.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!productSelectionsFilled.value) {
|
||||
toast.showError('Sélectionnez un produit conforme au squelette.')
|
||||
return
|
||||
}
|
||||
|
||||
const rawPrice = typeof editionForm.prix === 'string'
|
||||
? editionForm.prix.trim()
|
||||
: editionForm.prix === null || editionForm.prix === undefined
|
||||
? ''
|
||||
: String(editionForm.prix).trim()
|
||||
|
||||
const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
|
||||
|
||||
const payload: Record<string, any> = {
|
||||
name: editionForm.name.trim(),
|
||||
description: editionForm.description.trim() || null,
|
||||
constructeurIds,
|
||||
}
|
||||
|
||||
const reference = editionForm.reference.trim()
|
||||
payload.reference = reference ? reference : null
|
||||
|
||||
const normalizedProductIds = productRequirementEntries.value
|
||||
.map((entry) => productSelections.value[entry.index])
|
||||
.filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
|
||||
.map((value) => value.trim())
|
||||
|
||||
payload.productIds = normalizedProductIds
|
||||
payload.productId = normalizedProductIds[0] || null
|
||||
|
||||
if (rawPrice) {
|
||||
const parsed = Number(rawPrice)
|
||||
if (!Number.isNaN(parsed)) {
|
||||
payload.prix = String(parsed)
|
||||
}
|
||||
} else {
|
||||
payload.prix = null
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const result = await updatePiece(piece.value.id, payload)
|
||||
if (result.success && result.data) {
|
||||
const updatedPiece = result.data as Record<string, any>
|
||||
await _saveCustomFieldValues(
|
||||
'piece',
|
||||
updatedPiece.id,
|
||||
[
|
||||
updatedPiece?.typePiece?.pieceCustomFields,
|
||||
],
|
||||
{ customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
|
||||
)
|
||||
await router.push('/pieces-catalog')
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.showError(error?.message || 'Erreur lors de la mise à jour de la pièce')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.allSettled([loadPieceTypes(), fetchPiece()])
|
||||
loading.value = false
|
||||
})
|
||||
historyLoading,
|
||||
historyError,
|
||||
openPreview,
|
||||
closePreview,
|
||||
removeDocument,
|
||||
handleFilesAdded,
|
||||
setProductSelection,
|
||||
submitEdition,
|
||||
formatPieceStructurePreview,
|
||||
} = usePieceEdit(String(route.params.id))
|
||||
</script>
|
||||
|
||||
@@ -224,8 +224,17 @@ import { useCustomFields } from '~/composables/useCustomFields'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { formatPieceStructurePreview } from '~/shared/modelUtils'
|
||||
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
|
||||
import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
|
||||
import type { PieceModelStructure } from '~/shared/types/inventory'
|
||||
import type { ModelType } from '~/services/modelTypes'
|
||||
import {
|
||||
getStructureProducts,
|
||||
buildProductRequirementDescriptions,
|
||||
buildProductRequirementEntries,
|
||||
resizeProductSelections,
|
||||
areProductSelectionsFilled,
|
||||
applyProductSelection,
|
||||
collectNormalizedProductIds,
|
||||
} from '~/shared/utils/pieceProductSelectionUtils'
|
||||
import {
|
||||
type CustomFieldInput,
|
||||
normalizeCustomFieldInputs,
|
||||
@@ -303,70 +312,34 @@ const selectedType = computed(() => {
|
||||
return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
|
||||
})
|
||||
|
||||
const getStructureProducts = (structure: PieceModelStructure | null) =>
|
||||
Array.isArray(structure?.products) ? structure.products : []
|
||||
|
||||
const structureProducts = computed(() =>
|
||||
getStructureProducts(selectedType.value?.structure ?? null),
|
||||
)
|
||||
|
||||
const requiresProductSelection = computed(() => structureProducts.value.length > 0)
|
||||
|
||||
const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
|
||||
if (!requirement) {
|
||||
return `Produit ${index + 1}`
|
||||
}
|
||||
const parts: string[] = []
|
||||
if (requirement.role) {
|
||||
parts.push(requirement.role)
|
||||
}
|
||||
if (requirement.typeProductLabel) {
|
||||
parts.push(requirement.typeProductLabel)
|
||||
} else if (requirement.typeProductId) {
|
||||
parts.push(`Catégorie #${requirement.typeProductId}`)
|
||||
}
|
||||
if (requirement.familyCode) {
|
||||
parts.push(`Famille ${requirement.familyCode}`)
|
||||
}
|
||||
if (parts.length === 0) {
|
||||
parts.push(`Produit ${index + 1}`)
|
||||
}
|
||||
return parts.join(' • ')
|
||||
}
|
||||
|
||||
const productRequirementDescriptions = computed(() =>
|
||||
structureProducts.value.map((requirement, index) =>
|
||||
describeProductRequirement(requirement, index),
|
||||
),
|
||||
buildProductRequirementDescriptions(structureProducts.value),
|
||||
)
|
||||
|
||||
const ensureProductSelections = (count: number) => {
|
||||
const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
|
||||
productSelections.value = next
|
||||
productSelections.value = resizeProductSelections(productSelections.value, count)
|
||||
}
|
||||
|
||||
const productRequirementEntries = computed(() =>
|
||||
structureProducts.value.map((requirement, index) => ({
|
||||
index,
|
||||
key: `piece-create-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
|
||||
label: describeProductRequirement(requirement, index),
|
||||
typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
|
||||
})),
|
||||
buildProductRequirementEntries(structureProducts.value, 'piece-create-product-requirement'),
|
||||
)
|
||||
|
||||
const productSelectionsFilled = computed(() =>
|
||||
!requiresProductSelection.value ||
|
||||
productRequirementEntries.value.every((entry) => {
|
||||
const value = productSelections.value[entry.index]
|
||||
return typeof value === 'string' && value.trim().length > 0
|
||||
}),
|
||||
areProductSelectionsFilled(
|
||||
requiresProductSelection.value,
|
||||
productRequirementEntries.value,
|
||||
productSelections.value,
|
||||
),
|
||||
)
|
||||
|
||||
const setProductSelection = (index: number, value: string | null) => {
|
||||
const normalized = typeof value === 'string' ? value : null
|
||||
const next = [...productSelections.value]
|
||||
next[index] = normalized
|
||||
productSelections.value = next
|
||||
productSelections.value = applyProductSelection(productSelections.value, index, value)
|
||||
}
|
||||
|
||||
watch(structureProducts, (products) => {
|
||||
@@ -440,10 +413,10 @@ const submitCreation = async () => {
|
||||
|
||||
payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
|
||||
|
||||
const normalizedProductIds = productRequirementEntries.value
|
||||
.map((entry) => productSelections.value[entry.index])
|
||||
.filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
|
||||
.map((value) => value.trim())
|
||||
const normalizedProductIds = collectNormalizedProductIds(
|
||||
productRequirementEntries.value,
|
||||
productSelections.value,
|
||||
)
|
||||
if (normalizedProductIds.length) {
|
||||
payload.productIds = normalizedProductIds
|
||||
payload.productId = normalizedProductIds[0]
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex justify-end gap-2">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<NuxtLink
|
||||
:to="`/product/${row.product.id}/edit`"
|
||||
class="btn btn-ghost btn-xs"
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="productDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div>
|
||||
<DocumentPreviewModal
|
||||
:document="previewDocument"
|
||||
:visible="previewVisible"
|
||||
:documents="productDocuments"
|
||||
@close="closePreview"
|
||||
/>
|
||||
<main class="container mx-auto px-6 py-10">
|
||||
<div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
|
||||
<span class="loading loading-spinner loading-lg" aria-hidden="true" />
|
||||
<p class="text-sm text-base-content/70">Chargement du produit…</p>
|
||||
@@ -204,7 +205,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -298,20 +300,12 @@ const canSubmit = computed(() =>
|
||||
|
||||
const structurePreview = computed(() => formatProductStructurePreview(structure.value))
|
||||
|
||||
|
||||
const openPreview = (doc: any) => {
|
||||
if (!doc || !canPreviewDocument(doc)) {
|
||||
return
|
||||
}
|
||||
if (!doc || !canPreviewDocument(doc)) return
|
||||
previewDocument.value = doc
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
const closePreview = () => {
|
||||
previewVisible.value = false
|
||||
previewDocument.value = null
|
||||
}
|
||||
|
||||
const closePreview = () => { previewVisible.value = false; previewDocument.value = null }
|
||||
|
||||
const loadProduct = async () => {
|
||||
const id = route.params.id
|
||||
|
||||
@@ -24,11 +24,11 @@
|
||||
|
||||
<div v-else-if="sites.length === 0" class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||||
<IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
|
||||
<h3 class="text-lg font-medium text-base-content mb-2">
|
||||
Aucun site trouvé
|
||||
</h3>
|
||||
<p class="text-gray-500 mb-4">
|
||||
<p class="text-base-content/50 mb-4">
|
||||
Commencez par ajouter votre premier site.
|
||||
</p>
|
||||
<button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
|
||||
|
||||
104
app/shared/utils/pieceProductSelectionUtils.ts
Normal file
104
app/shared/utils/pieceProductSelectionUtils.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
|
||||
|
||||
/**
|
||||
* Extract the products array from a piece model structure, defaulting to [].
|
||||
*/
|
||||
export const getStructureProducts = (structure: PieceModelStructure | null): PieceModelProduct[] =>
|
||||
Array.isArray(structure?.products) ? structure.products : []
|
||||
|
||||
/**
|
||||
* Build a human-readable label for a single product requirement.
|
||||
*/
|
||||
export const describeProductRequirement = (requirement: PieceModelProduct, index: number): string => {
|
||||
if (!requirement) {
|
||||
return `Produit ${index + 1}`
|
||||
}
|
||||
const parts: string[] = []
|
||||
if (requirement.role) {
|
||||
parts.push(requirement.role)
|
||||
}
|
||||
if (requirement.typeProductLabel) {
|
||||
parts.push(requirement.typeProductLabel)
|
||||
} else if (requirement.typeProductId) {
|
||||
parts.push(`Catégorie #${requirement.typeProductId}`)
|
||||
}
|
||||
if (requirement.familyCode) {
|
||||
parts.push(`Famille ${requirement.familyCode}`)
|
||||
}
|
||||
if (parts.length === 0) {
|
||||
parts.push(`Produit ${index + 1}`)
|
||||
}
|
||||
return parts.join(' • ')
|
||||
}
|
||||
|
||||
/**
|
||||
* Build description strings for every product requirement in a structure.
|
||||
*/
|
||||
export const buildProductRequirementDescriptions = (
|
||||
products: PieceModelProduct[],
|
||||
): string[] =>
|
||||
products.map((requirement, index) => describeProductRequirement(requirement, index))
|
||||
|
||||
/**
|
||||
* Build the entry objects used to render product selection inputs.
|
||||
*/
|
||||
export const buildProductRequirementEntries = (
|
||||
products: PieceModelProduct[],
|
||||
keyPrefix: string,
|
||||
) =>
|
||||
products.map((requirement, index) => ({
|
||||
index,
|
||||
key: `${keyPrefix}-${index}-${requirement?.typeProductId || 'any'}`,
|
||||
label: describeProductRequirement(requirement, index),
|
||||
typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
|
||||
}))
|
||||
|
||||
/**
|
||||
* Resize the selections array to match the expected count, preserving existing values.
|
||||
*/
|
||||
export const resizeProductSelections = (
|
||||
current: (string | null)[],
|
||||
count: number,
|
||||
): (string | null)[] =>
|
||||
Array.from({ length: count }, (_, index) => current[index] ?? null)
|
||||
|
||||
/**
|
||||
* Return true when all required product slots have a non-empty string value,
|
||||
* or when no product selection is required.
|
||||
*/
|
||||
export const areProductSelectionsFilled = (
|
||||
requiresSelection: boolean,
|
||||
entries: { index: number }[],
|
||||
selections: (string | null)[],
|
||||
): boolean =>
|
||||
!requiresSelection ||
|
||||
entries.every((entry) => {
|
||||
const value = selections[entry.index]
|
||||
return typeof value === 'string' && value.trim().length > 0
|
||||
})
|
||||
|
||||
/**
|
||||
* Set a single product selection by index, returning a new array.
|
||||
*/
|
||||
export const applyProductSelection = (
|
||||
current: (string | null)[],
|
||||
index: number,
|
||||
value: string | null,
|
||||
): (string | null)[] => {
|
||||
const normalized = typeof value === 'string' ? value : null
|
||||
const next = [...current]
|
||||
next[index] = normalized
|
||||
return next
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract normalized product IDs from the current selections based on requirement entries.
|
||||
*/
|
||||
export const collectNormalizedProductIds = (
|
||||
entries: { index: number }[],
|
||||
selections: (string | null)[],
|
||||
): string[] =>
|
||||
entries
|
||||
.map((entry) => selections[entry.index])
|
||||
.filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
|
||||
.map((value) => value.trim())
|
||||
257
app/shared/utils/structureAssignmentHelpers.ts
Normal file
257
app/shared/utils/structureAssignmentHelpers.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Pure helper functions for building, validating and serializing
|
||||
* component structure assignment trees.
|
||||
*
|
||||
* Extracted from useComponentCreate composable to keep file sizes manageable.
|
||||
*/
|
||||
|
||||
import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
|
||||
import type {
|
||||
ComponentModelPiece,
|
||||
ComponentModelProduct,
|
||||
ComponentModelStructure,
|
||||
ComponentModelStructureNode,
|
||||
} from '~/shared/types/inventory'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Extraction helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function extractSubcomponents(
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelStructureNode[] {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).subcomponents)
|
||||
? (definition as any).subcomponents
|
||||
: Array.isArray((definition as any).subComponents)
|
||||
? (definition as any).subComponents
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelStructureNode =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
export function extractPiecesFromNode(
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelPiece[] {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).pieces)
|
||||
? (definition as any).pieces
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelPiece =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
export function extractProductsFromNode(
|
||||
definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
|
||||
): ComponentModelProduct[] {
|
||||
if (!definition || typeof definition !== 'object') {
|
||||
return []
|
||||
}
|
||||
const raw = Array.isArray((definition as any).products)
|
||||
? (definition as any).products
|
||||
: []
|
||||
return raw.filter(
|
||||
(item: unknown): item is ComponentModelProduct =>
|
||||
!!item && typeof item === 'object',
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Assignment tree building
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function buildAssignmentNode(
|
||||
definition: ComponentModelStructureNode | ComponentModelStructure,
|
||||
path: string,
|
||||
): StructureAssignmentNode {
|
||||
const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
|
||||
path: `${path}:piece-${index}`,
|
||||
definition: piece,
|
||||
selectedPieceId: '',
|
||||
}))
|
||||
|
||||
const products = extractProductsFromNode(definition).map((product, index) => ({
|
||||
path: `${path}:product-${index}`,
|
||||
definition: product,
|
||||
selectedProductId: '',
|
||||
}))
|
||||
|
||||
const subcomponents = extractSubcomponents(definition).map(
|
||||
(child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
|
||||
)
|
||||
|
||||
return {
|
||||
path,
|
||||
definition,
|
||||
selectedComponentId: '',
|
||||
pieces,
|
||||
products,
|
||||
subcomponents,
|
||||
}
|
||||
}
|
||||
|
||||
export function initializeStructureAssignments(
|
||||
structure: ComponentModelStructure | null,
|
||||
): StructureAssignmentNode | null {
|
||||
if (!structure || typeof structure !== 'object') {
|
||||
return null
|
||||
}
|
||||
return buildAssignmentNode(structure, 'root')
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Validation
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function hasAssignments(node: StructureAssignmentNode | null): boolean {
|
||||
if (!node) {
|
||||
return false
|
||||
}
|
||||
if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
|
||||
return true
|
||||
}
|
||||
return node.subcomponents.some((child) => hasAssignments(child))
|
||||
}
|
||||
|
||||
export function isAssignmentNodeComplete(
|
||||
node: StructureAssignmentNode,
|
||||
isRootNode = false,
|
||||
): boolean {
|
||||
const piecesComplete = node.pieces.every(
|
||||
(piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
|
||||
)
|
||||
const productsComplete = node.products.every(
|
||||
(product) => !!product.selectedProductId && product.selectedProductId.length > 0,
|
||||
)
|
||||
const subcomponentsComplete = node.subcomponents.every(
|
||||
(child) =>
|
||||
!!child.selectedComponentId
|
||||
&& child.selectedComponentId.length > 0
|
||||
&& isAssignmentNodeComplete(child, false),
|
||||
)
|
||||
return (
|
||||
piecesComplete
|
||||
&& productsComplete
|
||||
&& subcomponentsComplete
|
||||
&& (isRootNode || !!node.selectedComponentId)
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Serialization
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function stripNullish(input: Record<string, any>) {
|
||||
return Object.fromEntries(
|
||||
Object.entries(input).filter(
|
||||
([, value]) => value !== null && value !== undefined && value !== '',
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
export function sanitizeStructureDefinition(
|
||||
definition: ComponentModelStructureNode,
|
||||
) {
|
||||
return stripNullish({
|
||||
alias: definition.alias ?? null,
|
||||
typeComposantId: definition.typeComposantId ?? null,
|
||||
typeComposantLabel: definition.typeComposantLabel ?? null,
|
||||
modelId: definition.modelId ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
}
|
||||
|
||||
export function sanitizePieceDefinition(definition: ComponentModelPiece) {
|
||||
return stripNullish({
|
||||
role: (definition as any).role ?? null,
|
||||
typePieceId: definition.typePieceId ?? null,
|
||||
typePieceLabel: definition.typePieceLabel ?? null,
|
||||
reference: definition.reference ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
}
|
||||
|
||||
export function sanitizeProductDefinition(definition: ComponentModelProduct) {
|
||||
return stripNullish({
|
||||
role: (definition as any).role ?? null,
|
||||
typeProductId: definition.typeProductId ?? null,
|
||||
typeProductLabel: (definition as any).typeProductLabel ?? null,
|
||||
reference: (definition as any).reference ?? null,
|
||||
familyCode: (definition as any).familyCode ?? null,
|
||||
})
|
||||
}
|
||||
|
||||
export function serializeStructureAssignments(
|
||||
root: StructureAssignmentNode | null,
|
||||
) {
|
||||
if (!root) {
|
||||
return null
|
||||
}
|
||||
|
||||
const serializeNode = (
|
||||
assignment: StructureAssignmentNode,
|
||||
isRootNode = false,
|
||||
): Record<string, any> => {
|
||||
const serializedPieces = assignment.pieces
|
||||
.filter((piece) => !!piece.selectedPieceId)
|
||||
.map((piece) =>
|
||||
stripNullish({
|
||||
path: piece.path,
|
||||
definition: sanitizePieceDefinition(piece.definition),
|
||||
selectedPieceId: piece.selectedPieceId,
|
||||
}),
|
||||
)
|
||||
|
||||
const serializedProducts = assignment.products
|
||||
.filter((product) => !!product.selectedProductId)
|
||||
.map((product) =>
|
||||
stripNullish({
|
||||
path: product.path,
|
||||
definition: sanitizeProductDefinition(product.definition),
|
||||
selectedProductId: product.selectedProductId,
|
||||
}),
|
||||
)
|
||||
|
||||
const serializedSubcomponents = assignment.subcomponents
|
||||
.map((child) => serializeNode(child, false))
|
||||
.filter((child) => Object.keys(child).length > 0)
|
||||
|
||||
const base: Record<string, any> = {
|
||||
path: assignment.path,
|
||||
definition: sanitizeStructureDefinition(assignment.definition),
|
||||
}
|
||||
|
||||
if (!isRootNode) {
|
||||
base.selectedComponentId = assignment.selectedComponentId
|
||||
}
|
||||
if (serializedPieces.length) {
|
||||
base.pieces = serializedPieces
|
||||
}
|
||||
if (serializedProducts.length) {
|
||||
base.products = serializedProducts
|
||||
}
|
||||
if (serializedSubcomponents.length) {
|
||||
base.subcomponents = serializedSubcomponents
|
||||
}
|
||||
|
||||
return stripNullish(base)
|
||||
}
|
||||
|
||||
const serializedRoot = serializeNode(root, true)
|
||||
if (
|
||||
(!serializedRoot.pieces || serializedRoot.pieces.length === 0)
|
||||
&& (!serializedRoot.products || serializedRoot.products.length === 0)
|
||||
&& (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
|
||||
) {
|
||||
return null
|
||||
}
|
||||
return serializedRoot
|
||||
}
|
||||
107
app/shared/utils/structureSelectionUtils.ts
Normal file
107
app/shared/utils/structureSelectionUtils.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
export type SelectionEntry = {
|
||||
id: string
|
||||
path: string
|
||||
requirementLabel: string
|
||||
resolvedName: string
|
||||
}
|
||||
|
||||
export type StructureSelectionResult = {
|
||||
pieces: SelectionEntry[]
|
||||
products: SelectionEntry[]
|
||||
components: SelectionEntry[]
|
||||
}
|
||||
|
||||
type CatalogMap = Map<string, { name?: string, [key: string]: any }>
|
||||
|
||||
type LabelResolvers = {
|
||||
resolvePieceLabel: (definition: Record<string, any>) => string
|
||||
resolveProductLabel: (definition: Record<string, any>) => string
|
||||
resolveSubcomponentLabel: (definition: Record<string, any>) => string
|
||||
}
|
||||
|
||||
const isNonEmptyString = (value: unknown): value is string =>
|
||||
typeof value === 'string' && value.trim().length > 0
|
||||
|
||||
export function collectStructureSelections(
|
||||
root: any,
|
||||
catalogs: {
|
||||
pieceCatalogMap: CatalogMap
|
||||
productCatalogMap: CatalogMap
|
||||
componentCatalogMap: CatalogMap
|
||||
},
|
||||
resolvers: LabelResolvers,
|
||||
): StructureSelectionResult {
|
||||
const piecesSelected: SelectionEntry[] = []
|
||||
const productsSelected: SelectionEntry[] = []
|
||||
const componentsSelected: SelectionEntry[] = []
|
||||
|
||||
if (!root || typeof root !== 'object') {
|
||||
return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
|
||||
}
|
||||
|
||||
const visitNode = (node: any, fallbackPath = 'racine') => {
|
||||
if (!node || typeof node !== 'object') {
|
||||
return
|
||||
}
|
||||
|
||||
const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
|
||||
|
||||
const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
|
||||
nodePieces.forEach((entry: any, index: number) => {
|
||||
const selectedId = entry?.selectedPieceId
|
||||
if (!isNonEmptyString(selectedId)) {
|
||||
return
|
||||
}
|
||||
const definition = entry?.definition ?? entry
|
||||
const catalogPiece = catalogs.pieceCatalogMap.get(selectedId)
|
||||
piecesSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
|
||||
requirementLabel: resolvers.resolvePieceLabel(definition),
|
||||
resolvedName: catalogPiece?.name || selectedId,
|
||||
})
|
||||
})
|
||||
|
||||
const nodeProducts = Array.isArray(node.products) ? node.products : []
|
||||
nodeProducts.forEach((entry: any, index: number) => {
|
||||
const selectedId = entry?.selectedProductId
|
||||
if (!isNonEmptyString(selectedId)) {
|
||||
return
|
||||
}
|
||||
const definition = entry?.definition ?? entry
|
||||
const catalogProduct = catalogs.productCatalogMap.get(selectedId)
|
||||
productsSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
|
||||
requirementLabel: resolvers.resolveProductLabel(definition),
|
||||
resolvedName: catalogProduct?.name || selectedId,
|
||||
})
|
||||
})
|
||||
|
||||
const nodeChildren = Array.isArray(node.subcomponents)
|
||||
? node.subcomponents
|
||||
: Array.isArray(node.subComponents)
|
||||
? node.subComponents
|
||||
: []
|
||||
|
||||
nodeChildren.forEach((child: any, index: number) => {
|
||||
const selectedId = child?.selectedComponentId
|
||||
if (isNonEmptyString(selectedId)) {
|
||||
const definition = child?.definition ?? child
|
||||
const catalogComponent = catalogs.componentCatalogMap.get(selectedId)
|
||||
componentsSelected.push({
|
||||
id: selectedId,
|
||||
path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
|
||||
requirementLabel: resolvers.resolveSubcomponentLabel(definition),
|
||||
resolvedName: catalogComponent?.name || selectedId,
|
||||
})
|
||||
}
|
||||
|
||||
visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
|
||||
})
|
||||
}
|
||||
|
||||
visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
|
||||
|
||||
return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
|
||||
}
|
||||
@@ -18,6 +18,11 @@ const appVersion = process.env.NUXT_PUBLIC_APP_VERSION || getAppVersion()
|
||||
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
components: {
|
||||
dirs: [
|
||||
{ path: '~/components', pathPrefix: false },
|
||||
],
|
||||
},
|
||||
ssr: false, // Désactive le SSR pour un mode SPA pur (Client-Side Rendering uniquement)
|
||||
devtools: { enabled: true },
|
||||
devServer: {
|
||||
|
||||
@@ -153,7 +153,7 @@ describe('loadTypes', () => {
|
||||
expect(result.error).toBe('Network error')
|
||||
expect(types.value).toEqual([])
|
||||
expect(mockShowError).toHaveBeenCalledWith(
|
||||
expect.stringContaining('Network error'),
|
||||
'Impossible de charger les types de composant.',
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user