feat(frontend): replace inline icons with lucide components
This commit is contained in:
Matthieu
54
app/app.vue
54
app/app.vue
@@ -5,9 +5,7 @@
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
|
||||
</svg>
|
||||
<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">
|
||||
<li class="pt-1 pb-2 lg:hidden">
|
||||
@@ -15,10 +13,7 @@
|
||||
@click="openDisplaySettings"
|
||||
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"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
|
||||
Paramètres d'affichage
|
||||
</button>
|
||||
</li>
|
||||
@@ -89,10 +84,8 @@
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-lg w-10">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
|
||||
</svg>
|
||||
<div class="bg-primary text-primary-content rounded-lg w-10 grid place-items-center">
|
||||
<IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink to="/" class="btn btn-ghost text-xl">Inventaire Pro</NuxtLink>
|
||||
@@ -173,43 +166,31 @@
|
||||
class="btn btn-ghost btn-circle hidden lg:inline-flex"
|
||||
title="Paramètres d'affichage"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<!-- Menu Nouveau -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-primary">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
|
||||
Nouveau
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li>
|
||||
<NuxtLink to="/machines?add=true" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
<IconLucideCpu class="w-4 h-4" aria-hidden="true" />
|
||||
Nouvelle Machine
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/generator" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<IconLucideFilePlus class="w-4 h-4" aria-hidden="true" />
|
||||
Nouveau Type
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/sites?add=true" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<IconLucideMapPin class="w-4 h-4" aria-hidden="true" />
|
||||
Nouveau Site
|
||||
</NuxtLink>
|
||||
</li>
|
||||
@@ -236,17 +217,13 @@
|
||||
<li>
|
||||
<NuxtLink to="/profiles/manage" class="justify-between">
|
||||
Gestion des profils
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="text-error justify-between" @click="handleLogout">
|
||||
Déconnexion
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1" />
|
||||
</svg>
|
||||
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -282,6 +259,15 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, navigateTo } from '#imports'
|
||||
import { useProfileSession } from '~/composables/useProfileSession'
|
||||
import IconLucideMenu from '~icons/lucide/menu'
|
||||
import IconLucideSettings from '~icons/lucide/settings'
|
||||
import IconLucideBoxes from '~icons/lucide/boxes'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideCpu from '~icons/lucide/cpu'
|
||||
import IconLucideFilePlus from '~icons/lucide/file-plus'
|
||||
import IconLucideMapPin from '~icons/lucide/map-pin'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideLogOut from '~icons/lucide/log-out'
|
||||
|
||||
// État du modal des paramètres d'affichage
|
||||
const displaySettingsOpen = ref(false)
|
||||
|
||||
@@ -17,9 +17,7 @@
|
||||
:aria-expanded="!isCollapsed"
|
||||
:title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<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">
|
||||
@@ -195,7 +193,11 @@
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-xl" :class="documentIcon(document).colorClass">
|
||||
{{ documentIcon(document).icon }}
|
||||
<component
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-medium">{{ document.name }}</div>
|
||||
@@ -277,6 +279,7 @@ import { useDocuments } from '~/composables/useDocuments'
|
||||
import { getFileIcon } from '~/utils/fileIcons'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
|
||||
const props = defineProps({
|
||||
component: {
|
||||
|
||||
@@ -16,9 +16,7 @@
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
|
||||
@click="ensureOptionsLoaded(true)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l4-4 4 4m0-8l-4 4-4-4" />
|
||||
</svg>
|
||||
<IconLucideChevronsUpDown class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
v-if="openDropdown"
|
||||
@@ -90,6 +88,7 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -7,9 +7,7 @@
|
||||
@drop.prevent="onDrop"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-center">
|
||||
<svg class="w-10 h-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 00-.88 7.912L6 24h12a4 4 0 00.88-7.912L18 16H7zm5-14a4 4 0 014 4v4h1.586a1 1 0 01.707 1.707l-5.586 5.586a1 1 0 01-1.414 0L7.707 11.707A1 1 0 018.414 10H10V6a4 4 0 014-4z" />
|
||||
</svg>
|
||||
<IconLucideCloudUpload class="w-10 h-10 text-primary" aria-hidden="true" />
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold">{{ title }}</h3>
|
||||
@@ -35,7 +33,12 @@
|
||||
<ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
|
||||
<li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xl" :class="getIcon(file).colorClass">{{ getIcon(file).icon }}</span>
|
||||
<component
|
||||
:is="getIcon(file).component"
|
||||
class="h-6 w-6"
|
||||
:class="getIcon(file).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<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>
|
||||
@@ -54,6 +57,7 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { getFileIcon } from '~/utils/fileIcons'
|
||||
import IconLucideCloudUpload from '~icons/lucide/cloud-upload'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucidePackage
|
||||
class="w-4 h-4 text-purple-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
:id="`piece-name-${piece.id}`"
|
||||
@@ -201,7 +202,11 @@
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-xl" :class="documentIcon(document).colorClass">
|
||||
{{ documentIcon(document).icon }}
|
||||
<component
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-medium">{{ document.name }}</div>
|
||||
@@ -250,6 +255,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import ConstructeurSelect from './ConstructeurSelect.vue'
|
||||
import IconLucidePackage from '~icons/lucide/package'
|
||||
|
||||
const props = defineProps({
|
||||
piece: {
|
||||
|
||||
@@ -17,18 +17,26 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Icon -->
|
||||
<div class="flex-shrink-0">
|
||||
<svg v-if="toast.type === 'success'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<svg v-else-if="toast.type === 'error'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<svg v-else-if="toast.type === 'warning'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
|
||||
</svg>
|
||||
<svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<IconLucideCheck
|
||||
v-if="toast.type === 'success'"
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucideX
|
||||
v-else-if="toast.type === 'error'"
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucideAlertTriangle
|
||||
v-else-if="toast.type === 'warning'"
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucideInfo
|
||||
v-else
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
@@ -41,9 +49,7 @@
|
||||
@click="removeToast(toast.id)"
|
||||
class="btn btn-ghost btn-xs"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<IconLucideX class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,6 +60,10 @@
|
||||
|
||||
<script setup>
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucideCheck from '~icons/lucide/check'
|
||||
import IconLucideX from '~icons/lucide/x'
|
||||
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
|
||||
import IconLucideInfo from '~icons/lucide/info'
|
||||
|
||||
const { toasts, removeToast } = useToast()
|
||||
|
||||
@@ -92,4 +102,4 @@ const getToastClasses = (type) => {
|
||||
.toast-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -8,19 +8,13 @@
|
||||
@click="toggleComponent"
|
||||
title="Plier / déplier le composant"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
<IconLucideCpu class="w-5 h-5 text-blue-500" aria-hidden="true" />
|
||||
<h4 class="text-lg font-medium">{{ component.name }}</h4>
|
||||
<span v-if="!expanded && component.reference" class="text-xs text-gray-500">(Ref: {{ component.reference }})</span>
|
||||
</div>
|
||||
@@ -50,15 +44,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSection('customFields')"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expandedSections.customFields }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="expandedSections.customFields" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
@@ -79,15 +69,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSection('pieces')"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expandedSections.pieces }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="expandedSections.pieces" class="space-y-2">
|
||||
@@ -103,19 +89,13 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="togglePieceDetails(pieceIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isPieceExpanded(pieceIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucidePackage class="w-4 h-4 text-red-500" aria-hidden="true" />
|
||||
<span class="font-medium">{{ piece.name }}</span>
|
||||
<span v-if="!isPieceExpanded(pieceIndex) && piece.reference" class="text-xs text-gray-500">(Ref: {{ piece.reference }})</span>
|
||||
</div>
|
||||
@@ -142,18 +122,14 @@
|
||||
<span class="text-xs font-medium text-gray-600">Champs personnalisés</span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="togglePieceCustomFields(pieceIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isPieceCustomFieldSectionExpanded(pieceIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isPieceCustomFieldSectionExpanded(pieceIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
@@ -178,15 +154,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSection('subComponents')"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expandedSections.subComponents }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="expandedSections.subComponents" class="space-y-3">
|
||||
@@ -196,25 +168,19 @@
|
||||
class="border border-gray-200 rounded p-3 bg-gray-50"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubComponentDetails(subIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubComponentExpanded(subIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubComponentDetails(subIndex)"
|
||||
>
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubComponentExpanded(subIndex) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<IconLucideCheckCircle2 class="w-4 h-4 text-green-500" aria-hidden="true" />
|
||||
<span class="font-medium">{{ subComponent.name }}</span>
|
||||
<span v-if="!isSubComponentExpanded(subIndex) && subComponent.reference" class="text-xs text-gray-500">(Ref: {{ subComponent.reference }})</span>
|
||||
</div>
|
||||
@@ -244,15 +210,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubComponentCustomFieldSection(subIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubComponentCustomFieldSectionExpanded(subIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isSubComponentCustomFieldSectionExpanded(subIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
@@ -273,15 +235,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubComponentPieceSection(subIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubComponentPieceSectionExpanded(subIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isSubComponentPieceSectionExpanded(subIndex)" class="space-y-1">
|
||||
@@ -297,19 +255,13 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubPieceDetails(subIndex, pieceIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubPieceExpanded(subIndex, pieceIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-3 h-3 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucidePackage class="w-3 h-3 text-red-500" aria-hidden="true" />
|
||||
<span class="text-xs font-medium">{{ piece.name }}</span>
|
||||
<span v-if="!isSubPieceExpanded(subIndex, pieceIndex) && piece.reference" class="text-[10px] text-gray-500">(Ref: {{ piece.reference }})</span>
|
||||
</div>
|
||||
@@ -339,15 +291,11 @@
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleSubPieceCustomFields(subIndex, pieceIndex)"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isSubPieceCustomFieldSectionExpanded(subIndex, pieceIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isSubPieceCustomFieldSectionExpanded(subIndex, pieceIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
@@ -373,6 +321,10 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideCpu from '~icons/lucide/cpu'
|
||||
import IconLucidePackage from '~icons/lucide/package'
|
||||
import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
|
||||
|
||||
const props = defineProps({
|
||||
component: {
|
||||
|
||||
@@ -6,18 +6,12 @@
|
||||
Réinitialiser
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
<svg
|
||||
<IconLucideRefreshCw
|
||||
v-if="saving"
|
||||
class="w-5 h-5 mr-2 animate-spin"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
<svg v-else class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucideCheck v-else class="w-5 h-5 mr-2" aria-hidden="true" />
|
||||
{{ saving ? 'Sauvegarde...' : 'Sauvegarder les modifications' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -26,6 +20,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import IconLucideRefreshCw from '~icons/lucide/refresh-cw'
|
||||
import IconLucideCheck from '~icons/lucide/check'
|
||||
|
||||
defineProps({
|
||||
saving: {
|
||||
type: Boolean,
|
||||
|
||||
@@ -8,15 +8,11 @@
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection"
|
||||
>
|
||||
<svg
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h3 class="card-title text-lg">Composants</h3>
|
||||
<span class="badge badge-accent">{{ components.length }}</span>
|
||||
@@ -37,19 +33,13 @@
|
||||
@click="toggleComponent(index)"
|
||||
title="Plier / déplier le composant"
|
||||
>
|
||||
<svg
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isComponentExpanded(index) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<IconLucideSettings2 class="w-4 h-4 text-green-500" aria-hidden="true" />
|
||||
<h5 class="text-sm font-medium">Composant {{ index + 1 }}</h5>
|
||||
<span v-if="!isComponentExpanded(index)" class="text-xs text-gray-500 truncate max-w-[160px]">
|
||||
{{ component.name || 'Sans nom' }}
|
||||
@@ -61,9 +51,7 @@
|
||||
class="btn btn-square btn-error btn-sm"
|
||||
title="Supprimer ce composant"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<IconLucideX class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -140,18 +128,14 @@
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="button" @click="addComponent" class="btn btn-primary btn-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter un composant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-end">
|
||||
<button type="button" @click="addComponent" class="btn btn-primary btn-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter un composant
|
||||
</button>
|
||||
</div>
|
||||
@@ -165,6 +149,10 @@ import TypeEditCustomFieldsSection from '~/components/TypeEditCustomFieldsSectio
|
||||
import TypeMachinePieceForm from '~/components/TypeMachinePieceForm.vue'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideSettings2 from '~icons/lucide/settings-2'
|
||||
import IconLucideX from '~icons/lucide/x'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -8,15 +8,11 @@
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection"
|
||||
>
|
||||
<svg
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h3 class="card-title text-lg">Champs personnalisés du type</h3>
|
||||
<span class="badge badge-primary">{{ fields.length }}</span>
|
||||
@@ -37,19 +33,13 @@
|
||||
@click="toggleField(fieldIndex)"
|
||||
title="Plier / déplier le champ"
|
||||
>
|
||||
<svg
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isFieldExpanded(fieldIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucideListChecks class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<h5 class="text-sm font-medium">Champ personnalisé {{ fieldIndex + 1 }}</h5>
|
||||
<span v-if="!isFieldExpanded(fieldIndex)" class="text-xs text-gray-500 truncate max-w-[160px]">
|
||||
{{ field.name || 'Sans nom' }}
|
||||
@@ -61,9 +51,7 @@
|
||||
class="btn btn-square btn-error btn-sm"
|
||||
title="Supprimer ce champ"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<IconLucideX class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -148,18 +136,14 @@
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="button" @click="addField" class="btn btn-primary btn-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter un champ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-end">
|
||||
<button type="button" @click="addField" class="btn btn-primary btn-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter un champ
|
||||
</button>
|
||||
</div>
|
||||
@@ -169,6 +153,10 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideListChecks from '~icons/lucide/list-checks'
|
||||
import IconLucideX from '~icons/lucide/x'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -8,15 +8,11 @@
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection"
|
||||
>
|
||||
<svg
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h3 class="card-title text-lg">Pièces principales</h3>
|
||||
<span class="badge badge-secondary">{{ pieces.length }}</span>
|
||||
@@ -37,6 +33,7 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import TypeMachinePieceForm from '~/components/TypeMachinePieceForm.vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -8,19 +8,13 @@
|
||||
@click="toggleDetails"
|
||||
title="Plier / déplier la pièce"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': expanded }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucidePackage class="w-5 h-5 text-red-500" aria-hidden="true" />
|
||||
<h4 class="font-medium">{{ piece.name }}</h4>
|
||||
<span v-if="!expanded && piece.reference" class="text-xs text-gray-500">(Ref: {{ piece.reference }})</span>
|
||||
</div>
|
||||
@@ -62,6 +56,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucidePackage from '~icons/lucide/package'
|
||||
|
||||
const props = defineProps({
|
||||
piece: {
|
||||
|
||||
@@ -1,166 +1,150 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="toggleAllPieces"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="allExpanded"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 12H6"
|
||||
></path>
|
||||
<path
|
||||
v-else
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v12m6-6H6"
|
||||
></path>
|
||||
</svg>
|
||||
{{ allExpanded ? 'Tout plier' : 'Tout déplier' }}
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 mr-2 transform transition-transform"
|
||||
:class="allExpanded ? 'rotate-90' : ''"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{{ allExpanded ? 'Tout plier' : 'Tout déplier' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-for="(piece, index) in pieces" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
<div
|
||||
v-for="(piece, index) in pieces"
|
||||
:key="piece.id ?? index"
|
||||
class="border border-base-200 rounded-lg bg-base-100 p-4 space-y-3"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="togglePieceDetails(index)"
|
||||
title="Plier / déplier la pièce"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isPieceExpanded(index) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h5 class="text-sm font-medium">Nouvelle pièce {{ index + 1 }}</h5>
|
||||
<span v-if="!isPieceExpanded(index)" class="text-xs text-gray-500 truncate max-w-[160px]">
|
||||
{{ piece.name || 'Sans nom' }}
|
||||
</span>
|
||||
<div>
|
||||
<h5 class="text-sm font-medium">Pièce {{ index + 1 }}</h5>
|
||||
<span
|
||||
v-if="!isPieceExpanded(index)"
|
||||
class="text-xs text-gray-500 block max-w-[200px] truncate"
|
||||
>
|
||||
{{ piece.name || 'Sans nom' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click="removePiece(index)"
|
||||
class="btn btn-square btn-error btn-sm"
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-square btn-error btn-xs"
|
||||
@click="removePiece(index)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<IconLucideX class="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isPieceExpanded(index)" class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Nom de la pièce</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="piece.name"
|
||||
type="text"
|
||||
placeholder="Nom de la pièce"
|
||||
class="input input-bordered input-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Référence</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="piece.reference"
|
||||
type="text"
|
||||
placeholder="Référence"
|
||||
class="input input-bordered input-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Constructeur</span>
|
||||
</label>
|
||||
<ConstructeurSelect
|
||||
:model-value="piece.constructeurId || piece.constructeur?.id || null"
|
||||
placeholder="Rechercher un constructeur..."
|
||||
@update:modelValue="(value) => setPieceConstructeur(index, value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Emplacement</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="piece.emplacement"
|
||||
type="text"
|
||||
placeholder="Emplacement"
|
||||
class="input input-bordered input-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Champs personnalisés de cette pièce -->
|
||||
<div v-if="isPieceExpanded(index) && piece.customFields && piece.customFields.length > 0" class="mt-4">
|
||||
<h6 class="text-xs font-medium text-gray-600 mb-2">Champs personnalisés de cette pièce :</h6>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="(field, fieldIndex) in piece.customFields"
|
||||
:key="fieldIndex"
|
||||
class="border border-gray-200 rounded p-2 bg-white"
|
||||
<div v-if="isPieceExpanded(index)" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Nom</span></label>
|
||||
<input
|
||||
v-model="piece.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Nom de la pièce"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Référence</span></label>
|
||||
<input
|
||||
v-model="piece.reference"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Référence"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Constructeur</span></label>
|
||||
<ConstructeurSelect
|
||||
:model-value="piece.constructeurId || piece.constructeur?.id || null"
|
||||
placeholder="Sélectionner un constructeur"
|
||||
@update:modelValue="value => setPieceConstructeur(index, value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Emplacement</span></label>
|
||||
<input
|
||||
v-model="piece.emplacement"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Emplacement"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">Prix</span></label>
|
||||
<input
|
||||
v-model="piece.prix"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Prix (optionnel)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="(field, fieldIndex) in piece.customFields || []"
|
||||
:key="field.id || `${index}-${fieldIndex}`"
|
||||
class="border border-base-200 rounded-lg bg-base-200/60 p-3 space-y-2"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="togglePieceCustomFieldDetails(index, fieldIndex)"
|
||||
title="Plier / déplier le champ"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
<IconLucideChevronRight
|
||||
class="w-3 h-3 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': isPieceCustomFieldExpanded(index, fieldIndex) }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<span class="text-xs font-medium">Champ {{ fieldIndex + 1 }}</span>
|
||||
<span v-if="!isPieceCustomFieldExpanded(index, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[120px]">
|
||||
<span
|
||||
v-if="!isPieceCustomFieldExpanded(index, fieldIndex)"
|
||||
class="text-[10px] text-gray-500 max-w-[160px] truncate"
|
||||
>
|
||||
{{ field.name || 'Sans nom' }}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeCustomField(index, fieldIndex)"
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-square btn-error btn-xs"
|
||||
@click="removeCustomField(index, fieldIndex)"
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<IconLucideX class="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isPieceCustomFieldExpanded(index, fieldIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<input
|
||||
v-model="field.name"
|
||||
type="text"
|
||||
placeholder="Nom du champ"
|
||||
class="input input-bordered input-xs w-full"
|
||||
|
||||
<div v-if="isPieceCustomFieldExpanded(index, fieldIndex)" class="space-y-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<input
|
||||
v-model="field.name"
|
||||
type="text"
|
||||
class="input input-bordered input-xs w-full"
|
||||
placeholder="Nom du champ"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select v-model="field.type" class="select select-bordered select-xs w-full">
|
||||
<option value="">Type</option>
|
||||
<option value="text">Texte</option>
|
||||
@@ -170,63 +154,49 @@
|
||||
<option value="date">Date</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isPieceCustomFieldExpanded(index, fieldIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="field.required"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs"
|
||||
/>
|
||||
<span class="text-xs">Obligatoire</span>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
v-model="field.defaultValue"
|
||||
type="text"
|
||||
placeholder="Valeur par défaut"
|
||||
class="input input-bordered input-xs w-full"
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<label class="flex items-center gap-2 text-xs">
|
||||
<input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" />
|
||||
Obligatoire
|
||||
</label>
|
||||
<input
|
||||
v-model="field.defaultValue"
|
||||
type="text"
|
||||
class="input input-bordered input-xs w-full"
|
||||
placeholder="Valeur par défaut"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Options pour les champs de type SELECT -->
|
||||
<div v-if="isPieceCustomFieldExpanded(index, fieldIndex) && field.type === 'select'" class="mt-2">
|
||||
<textarea
|
||||
v-model="field.optionsText"
|
||||
placeholder="Option 1 Option 2 Option 3"
|
||||
class="textarea textarea-bordered textarea-xs w-full h-16"
|
||||
@input="updateFieldOptions(index, fieldIndex)"
|
||||
></textarea>
|
||||
|
||||
<div v-if="field.type === 'select'">
|
||||
<textarea
|
||||
v-model="field.optionsText"
|
||||
class="textarea textarea-bordered textarea-xs w-full h-16"
|
||||
placeholder="Option 1 Option 2 Option 3"
|
||||
@input="updateFieldOptions(index, fieldIndex)"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="addCustomField(index)"
|
||||
>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter un champ personnalisé
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton pour ajouter des champs personnalisés -->
|
||||
<div v-if="isPieceExpanded(index)" class="mt-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="addCustomField(index)"
|
||||
class="btn btn-outline btn-sm"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
Ajouter champs personnalisés
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="addPiece"
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="addPiece"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Ajouter une pièce de machine
|
||||
</button>
|
||||
</div>
|
||||
@@ -236,6 +206,9 @@
|
||||
import { ref, reactive, onMounted, watch } from 'vue'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
||||
import IconLucideX from '~icons/lucide/x'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
||||
@@ -45,10 +45,7 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredDocuments.length === 0" class="text-center py-16 text-sm text-gray-500">
|
||||
<svg class="mx-auto mb-4 h-14 w-14 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 000 2.828L11.586 19a2 2 0 002.828 0L21 12.414V7H15.172z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 17L3 20m0 0l3 3m-3-3h12" />
|
||||
</svg>
|
||||
<IconLucideFileSearch class="mx-auto mb-4 h-14 w-14 text-gray-400" aria-hidden="true" />
|
||||
Aucun document ne correspond à votre recherche pour l'instant.
|
||||
</div>
|
||||
|
||||
@@ -69,7 +66,11 @@
|
||||
<td>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xl" :class="documentIcon(document).colorClass">
|
||||
{{ documentIcon(document).icon }}
|
||||
<component
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-semibold">{{ document.name }}</div>
|
||||
@@ -120,6 +121,7 @@ import { useDocuments } from '~/composables/useDocuments'
|
||||
import { getFileIcon } from '~/utils/fileIcons'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import IconLucideFileSearch from '~icons/lucide/file-search'
|
||||
|
||||
|
||||
const { documents, loading, loadDocuments } = useDocuments()
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
<div class="card-body space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
<IconLucidePlus
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="card-title text-2xl">Nouveau type de machine</h2>
|
||||
@@ -50,16 +51,12 @@
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 line-clamp-3">{{ type.description || 'Aucune description' }}</p>
|
||||
<div class="text-xs text-gray-500 flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-3-3v6m-7 5h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<IconLucideClipboardList class="h-4 w-4" aria-hidden="true" />
|
||||
{{ type.components?.length || 0 }} composant(s)
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
<IconLucideList class="h-4 w-4" aria-hidden="true" />
|
||||
{{ type.machinePieces?.length || 0 }} pièce(s) machine
|
||||
</span>
|
||||
</div>
|
||||
@@ -79,6 +76,9 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideClipboardList from '~icons/lucide/clipboard-list'
|
||||
import IconLucideList from '~icons/lucide/list'
|
||||
|
||||
const { machineTypes, loadMachineTypes, createMachineType } = useMachineTypesApi()
|
||||
const { showError } = useToast()
|
||||
|
||||
@@ -70,9 +70,7 @@
|
||||
<!-- Hierarchical Machines View -->
|
||||
<div v-else-if="filteredSites.length === 0" class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<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">Aucune machine trouvée</h3>
|
||||
<p class="text-gray-500 mb-4">Commencez par ajouter des sites et des machines.</p>
|
||||
<div class="flex gap-2 justify-center">
|
||||
@@ -97,32 +95,23 @@
|
||||
<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">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">{{ site.name }}</h3>
|
||||
<div class="text-sm text-gray-600 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<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">
|
||||
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3l2 3h6l2-3h3a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
|
||||
<span>{{ site.contactPhone }}</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-accent mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.38 0 2.5-1.12 2.5-2.5S13.38 6 12 6s-2.5 1.12-2.5 2.5S10.62 11 12 11zm0 0c-2.21 0-4 1.343-4 3v1.5h8V14c0-1.657-1.79-3-4-3z" />
|
||||
</svg>
|
||||
<IconLucideMapPinned class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
|
||||
<span>
|
||||
{{ site.contactAddress }}<br />
|
||||
{{ site.contactPostalCode }} {{ site.contactCity }}
|
||||
@@ -134,9 +123,11 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="badge badge-primary badge-lg">{{ site.machines?.length || 0 }} machines</div>
|
||||
<button @click="toggleSiteCollapse(site.id)" class="btn btn-ghost btn-sm">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<IconLucideChevronDown
|
||||
class="w-5 h-5 transition-transform"
|
||||
:class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,23 +152,17 @@
|
||||
|
||||
<div class="space-y-1 text-xs text-gray-600">
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<IconLucideSettings2 class="w-3 h-3" aria-hidden="true" />
|
||||
<span>{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.reference" class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
|
||||
<span>{{ machine.reference }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.emplacement" class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<IconLucideBuilding class="w-3 h-3" aria-hidden="true" />
|
||||
<span>{{ machine.emplacement }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -201,9 +186,7 @@
|
||||
<!-- Empty Site State -->
|
||||
<div v-else-if="!collapsedSites.includes(site.id) && (!site.machines || site.machines.length === 0)" class="text-center py-6">
|
||||
<div class="text-gray-400 mb-2">
|
||||
<svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-3">Aucune machine dans ce site</p>
|
||||
<button @click="addMachineToSite(site)" class="btn btn-sm btn-primary">
|
||||
@@ -423,6 +406,15 @@ import { useSites } from '~/composables/useSites'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useMachines } from '~/composables/useMachines'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucideFactory from '~icons/lucide/factory'
|
||||
import IconLucideMapPin from '~icons/lucide/map-pin'
|
||||
import IconLucideUser from '~icons/lucide/user'
|
||||
import IconLucidePhone from '~icons/lucide/phone'
|
||||
import IconLucideMapPinned from '~icons/lucide/map-pinned'
|
||||
import IconLucideChevronDown from '~icons/lucide/chevron-down'
|
||||
import IconLucideSettings2 from '~icons/lucide/settings-2'
|
||||
import IconLucideTag from '~icons/lucide/tag'
|
||||
import IconLucideBuilding from '~icons/lucide/building'
|
||||
|
||||
|
||||
const { sites, loading, loadSites, createSite } = useSites()
|
||||
|
||||
@@ -19,331 +19,58 @@
|
||||
<div class="flex items-center gap-2 print:hidden" data-print-hide>
|
||||
<button
|
||||
@click="toggleEditMode"
|
||||
class="btn btn-primary"
|
||||
class="btn btn-primary btn-sm"
|
||||
:class="{ 'btn-outline': isEditMode }"
|
||||
>
|
||||
<svg v-if="!isEditMode" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
<svg v-else class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
{{ isEditMode ? 'Voir détails' : 'Modifier' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!isEditMode"
|
||||
@click="openPrintModal"
|
||||
type="button"
|
||||
class="btn btn-outline btn-secondary"
|
||||
>
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2V9a2 2 0 00-2-2h-2V4a1 1 0 00-1-1H8a1 1 0 00-1 1v3H5a2 2 0 00-2 2v6a2 2 0 002 2h2">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17H7v5h10v-5z"></path>
|
||||
</svg>
|
||||
Imprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Debug info -->
|
||||
<div v-if="debug" class="bg-yellow-100 p-4 rounded-lg">
|
||||
<p>Debug: Machine trouvée - {{ machine.name }}</p>
|
||||
<p>Components count: {{ components.length }}</p>
|
||||
<p>Pieces count: {{ pieces.length }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<PageHero
|
||||
:title="machine.name"
|
||||
:subtitle="machine.description || machine.typeMachine?.description"
|
||||
min-height="min-h-[20vh]"
|
||||
max-width="max-w-md"
|
||||
rounded
|
||||
>
|
||||
<div class="flex justify-center gap-4">
|
||||
<div class="badge badge-outline">{{ machine.typeMachine?.category || 'N/A' }}</div>
|
||||
<div class="badge badge-outline">{{ machine.site?.name }}</div>
|
||||
<div v-if="machine.reference" class="badge badge-outline">{{ machine.reference }}</div>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<!-- Machine Info Card -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Informations de la machine</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Nom</span>
|
||||
</label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
:id="getMachineFieldId('name')"
|
||||
v-model="machineName"
|
||||
type="text"
|
||||
class="input input-bordered"
|
||||
@blur="updateMachineInfo"
|
||||
/>
|
||||
<div v-else class="input input-bordered bg-base-200">
|
||||
{{ machineName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Référence</span>
|
||||
</label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
:id="getMachineFieldId('reference')"
|
||||
v-model="machineReference"
|
||||
type="text"
|
||||
class="input input-bordered"
|
||||
@blur="updateMachineInfo"
|
||||
/>
|
||||
<div v-else class="input input-bordered bg-base-200">
|
||||
{{ machineReference || 'Non définie' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Emplacement</span>
|
||||
</label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
:id="getMachineFieldId('emplacement')"
|
||||
v-model="machineEmplacement"
|
||||
type="text"
|
||||
class="input input-bordered"
|
||||
@blur="updateMachineInfo"
|
||||
/>
|
||||
<div v-else class="input input-bordered bg-base-200">
|
||||
{{ machineEmplacement || 'Non défini' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Constructeur</span>
|
||||
</label>
|
||||
<ConstructeurSelect
|
||||
v-if="isEditMode"
|
||||
class="w-full"
|
||||
:key="machine.value?.id"
|
||||
:model-value="machineConstructeurId"
|
||||
placeholder="Rechercher un constructeur..."
|
||||
@update:modelValue="handleMachineConstructeurChange"
|
||||
/>
|
||||
<div v-else class="input input-bordered bg-base-200">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Champs personnalisés de la machine -->
|
||||
<div v-if="machine && machine.customFieldValues && machine.customFieldValues.length > 0" 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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="fieldValue in machine.customFieldValues"
|
||||
:key="fieldValue.id"
|
||||
class="form-control"
|
||||
>
|
||||
<label class="label">
|
||||
<span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
|
||||
<span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Mode édition -->
|
||||
<template v-if="isEditMode">
|
||||
<!-- Champ de type TEXT -->
|
||||
<input
|
||||
v-if="fieldValue.customField.type === 'text'"
|
||||
:value="fieldValue.value"
|
||||
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
||||
type="text"
|
||||
:placeholder="fieldValue.customField.defaultValue || ''"
|
||||
class="input input-bordered input-sm"
|
||||
:required="fieldValue.customField.required"
|
||||
@blur="updateMachineCustomField(fieldValue.id)"
|
||||
/>
|
||||
|
||||
<!-- Champ de type NUMBER -->
|
||||
<input
|
||||
v-else-if="fieldValue.customField.type === 'number'"
|
||||
:value="fieldValue.value"
|
||||
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
||||
type="number"
|
||||
:placeholder="fieldValue.customField.defaultValue || ''"
|
||||
class="input input-bordered input-sm"
|
||||
:required="fieldValue.customField.required"
|
||||
@blur="updateMachineCustomField(fieldValue.id)"
|
||||
/>
|
||||
|
||||
<!-- Champ de type SELECT -->
|
||||
<select
|
||||
v-else-if="fieldValue.customField.type === 'select'"
|
||||
:value="fieldValue.value"
|
||||
@change="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
||||
class="select select-bordered select-sm"
|
||||
:required="fieldValue.customField.required"
|
||||
@blur="updateMachineCustomField(fieldValue.id)"
|
||||
>
|
||||
<option value="">{{ fieldValue.customField.defaultValue || 'Sélectionner...' }}</option>
|
||||
<option
|
||||
v-for="option in fieldValue.customField.options"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- Champ de type BOOLEAN -->
|
||||
<div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
|
||||
<input
|
||||
:value="fieldValue.value"
|
||||
@change="setMachineCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm"
|
||||
:checked="fieldValue.value === 'true'"
|
||||
@blur="updateMachineCustomField(fieldValue.id)"
|
||||
/>
|
||||
<span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Champ de type DATE -->
|
||||
<input
|
||||
v-else-if="fieldValue.customField.type === 'date'"
|
||||
:value="fieldValue.value"
|
||||
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
||||
type="date"
|
||||
:placeholder="fieldValue.customField.defaultValue || ''"
|
||||
class="input input-bordered input-sm"
|
||||
:required="fieldValue.customField.required"
|
||||
@blur="updateMachineCustomField(fieldValue.id)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Mode lecture seule -->
|
||||
<template v-else>
|
||||
<div class="input input-bordered input-sm bg-base-200">
|
||||
{{ fieldValue.value || fieldValue.customField.defaultValue || 'Non défini' }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-lg mt-6">
|
||||
<div class="card-body space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="card-title">Documents de la machine</h2>
|
||||
<p class="text-xs text-gray-500">Ajoutez ou consultez les documents liés à cette machine.</p>
|
||||
</div>
|
||||
<span v-if="isEditMode && machineDocumentFiles.length" class="badge badge-outline">
|
||||
{{ machineDocumentFiles.length }} fichier{{ machineDocumentFiles.length > 1 ? 's' : '' }} sélectionné{{ machineDocumentFiles.length > 1 ? 's' : '' }}
|
||||
<IconLucideSquarePen
|
||||
v-if="!isEditMode"
|
||||
class="w-4 h-4 mr-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucideCheck
|
||||
v-else
|
||||
class="w-4 h-4 mr-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-sm">
|
||||
{{ isEditMode ? 'Quitter le mode édition' : 'Activer le mode édition' }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<DocumentUpload
|
||||
v-if="isEditMode"
|
||||
v-model="machineDocumentFiles"
|
||||
title="Déposer des fichiers pour la machine"
|
||||
subtitle="Formats acceptés : PDF, images, documents..."
|
||||
@files-added="handleMachineFilesAdded"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm"
|
||||
@click="toggleAllComponents"
|
||||
>
|
||||
<IconLucideChevronDown
|
||||
class="w-4 h-4 mr-2 transform transition-transform"
|
||||
:class="componentsCollapsed ? '-rotate-90' : 'rotate-0'"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-sm">
|
||||
{{ componentsCollapsed ? 'Tout déplier' : 'Tout replier' }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div v-if="machineDocumentsList.length" class="space-y-2">
|
||||
<div
|
||||
v-for="document in machineDocumentsList"
|
||||
:key="document.id"
|
||||
class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-xl" :class="documentIcon(document).colorClass">
|
||||
{{ documentIcon(document).icon }}
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-medium">{{ document.name }}</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<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>
|
||||
<button
|
||||
v-if="isEditMode"
|
||||
type="button"
|
||||
class="btn btn-error btn-xs"
|
||||
:disabled="machineDocumentsUploading"
|
||||
@click="removeMachineDocument(document.id)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="openPrintModal"
|
||||
>
|
||||
<IconLucidePrinter class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
<span class="text-sm">Imprimer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Components Section -->
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title">Composants</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm gap-2"
|
||||
@click="toggleAllComponents"
|
||||
:title="componentsCollapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 transition-transform"
|
||||
:class="componentsCollapsed ? 'rotate-0' : 'rotate-90'"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span class="text-sm">
|
||||
{{ componentsCollapsed ? 'Tout déplier' : 'Tout replier' }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Components Tree -->
|
||||
<ComponentHierarchy
|
||||
:components="components"
|
||||
:is-edit-mode="isEditMode"
|
||||
:collapse-all="componentsCollapsed"
|
||||
:toggle-token="collapseToggleToken"
|
||||
@update="updateComponent"
|
||||
@edit-piece="updatePieceFromComponent"
|
||||
/>
|
||||
</div>
|
||||
<!-- Components Tree -->
|
||||
<ComponentHierarchy
|
||||
:components="components"
|
||||
:is-edit-mode="isEditMode"
|
||||
:collapse-all="componentsCollapsed"
|
||||
:toggle-token="collapseToggleToken"
|
||||
@update="updateComponent"
|
||||
@edit-piece="updatePieceFromComponent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Machine Pieces Section -->
|
||||
@@ -371,9 +98,7 @@
|
||||
<!-- Error State -->
|
||||
<div v-else class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33"></path>
|
||||
</svg>
|
||||
<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>
|
||||
<NuxtLink to="/machines" class="btn btn-primary">
|
||||
@@ -415,6 +140,11 @@ import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import PageHero from '~/components/PageHero.vue'
|
||||
import MachinePrintSelectionModal from '~/components/MachinePrintSelectionModal.vue'
|
||||
import { buildMachinePrintContext, buildMachinePrintHtml } from '~/utils/printTemplates/machineReport'
|
||||
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
|
||||
import IconLucideSquarePen from '~icons/lucide/square-pen'
|
||||
import IconLucideCheck from '~icons/lucide/check'
|
||||
import IconLucideChevronDown from '~icons/lucide/chevron-down'
|
||||
import IconLucidePrinter from '~icons/lucide/printer'
|
||||
|
||||
const route = useRoute()
|
||||
const machineId = route.params.id
|
||||
|
||||
@@ -8,9 +8,7 @@
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold">Machines</h2>
|
||||
<button @click="showAddMachineModal = true" class="btn btn-primary">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
|
||||
Ajouter une machine
|
||||
</button>
|
||||
</div>
|
||||
@@ -63,9 +61,7 @@
|
||||
|
||||
<div v-else-if="filteredMachines.length === 0" class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<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">Aucune machine trouvée</h3>
|
||||
<p class="text-gray-500 mb-4">Commencez par ajouter votre première machine.</p>
|
||||
<button @click="showAddMachineModal = true" class="btn btn-primary">
|
||||
@@ -91,31 +87,22 @@
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<IconLucideSettings2 class="w-4 h-4 text-green-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.reference" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.reference }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.emplacement" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<IconLucideBuilding class="w-4 h-4 text-purple-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.emplacement }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,6 +232,12 @@ import { useMachines } from '~/composables/useMachines'
|
||||
import { useSites } from '~/composables/useSites'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideFactory from '~icons/lucide/factory'
|
||||
import IconLucideMapPin from '~icons/lucide/map-pin'
|
||||
import IconLucideSettings2 from '~icons/lucide/settings-2'
|
||||
import IconLucideTag from '~icons/lucide/tag'
|
||||
import IconLucideBuilding from '~icons/lucide/building'
|
||||
|
||||
const { machines, loading, loadMachines, createMachineFromType, deleteMachine } = useMachines()
|
||||
const { sites, loadSites } = useSites()
|
||||
|
||||
@@ -12,9 +12,7 @@
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold">Sites</h2>
|
||||
<button @click="showAddSiteModal = true" class="btn btn-primary">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
|
||||
Ajouter un site
|
||||
</button>
|
||||
</div>
|
||||
@@ -26,10 +24,7 @@
|
||||
|
||||
<div v-else-if="sites.length === 0" class="text-center py-12">
|
||||
<div class="max-w-md mx-auto">
|
||||
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<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">Aucun site trouvé</h3>
|
||||
<p class="text-gray-500 mb-4">Commencez par ajouter votre premier site.</p>
|
||||
<button @click="showAddSiteModal = true" class="btn btn-primary">
|
||||
@@ -52,23 +47,17 @@
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-700">
|
||||
<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<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">
|
||||
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3l2 3h6l2-3h3a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
|
||||
</svg>
|
||||
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
|
||||
<span>{{ site.contactPhone }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2 text-gray-600">
|
||||
<svg class="w-4 h-4 text-accent mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.38 0 2.5-1.12 2.5-2.5S13.38 6 12 6s-2.5 1.12-2.5 2.5S10.62 11 12 11zm0 0c-2.21 0-4 1.343-4 3v1.5h8V14c0-1.657-1.79-3-4-3z" />
|
||||
</svg>
|
||||
<IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
|
||||
<span>
|
||||
{{ site.contactAddress }}<br />
|
||||
{{ site.contactPostalCode }} {{ site.contactCity }}
|
||||
@@ -76,9 +65,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-600">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
<IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<span>{{ site.machines?.length || 0 }} machine(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,7 +299,11 @@
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-xl" :class="documentIcon(document).colorClass">
|
||||
{{ documentIcon(document).icon }}
|
||||
<component
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<div>
|
||||
<div class="font-medium">{{ document.name }}</div>
|
||||
@@ -371,6 +362,11 @@ import { getFileIcon } from '~/utils/fileIcons'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideMapPin from '~icons/lucide/map-pin'
|
||||
import IconLucideUser from '~icons/lucide/user'
|
||||
import IconLucidePhone from '~icons/lucide/phone'
|
||||
import IconLucideFactory from '~icons/lucide/factory'
|
||||
|
||||
const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSites()
|
||||
const { uploadDocuments, deleteDocument, loadDocumentsBySite } = useDocuments()
|
||||
|
||||
@@ -17,9 +17,7 @@
|
||||
</h2>
|
||||
<div class="flex gap-2">
|
||||
<NuxtLink :to="`/type/edit/${type.id}`" class="btn btn-secondary">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
<IconLucideSquarePen class="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
Éditer complètement
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/types" class="btn btn-outline">
|
||||
@@ -37,27 +35,16 @@
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="toggleGlobalExpand"
|
||||
>
|
||||
<svg
|
||||
<IconLucideMinus
|
||||
v-if="globalExpandState.expanded"
|
||||
class="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
v-if="globalExpandState.expanded"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 12H6"
|
||||
></path>
|
||||
<path
|
||||
v-else
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v12m6-6H6"
|
||||
></path>
|
||||
</svg>
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconLucidePlus
|
||||
v-else
|
||||
class="w-4 h-4 mr-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ globalExpandState.expanded ? 'Tout plier' : 'Tout déplier' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -111,6 +98,9 @@ import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucideSquarePen from '~icons/lucide/square-pen'
|
||||
import IconLucideMinus from '~icons/lucide/minus'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
|
||||
const route = useRoute()
|
||||
const { getMachineTypeById } = useMachineTypesApi()
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800">Types de Machines</h2>
|
||||
<NuxtLink to="/generator" class="btn btn-primary">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<IconLucidePlus
|
||||
class="w-5 h-5 mr-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Créer un type
|
||||
</NuxtLink>
|
||||
</div>
|
||||
@@ -43,21 +44,10 @@
|
||||
<p class="text-gray-600 mb-4">{{ type.description }}</p>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Maintenance: {{ type.maintenanceFrequency }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
{{ type.components?.length || 0 }} composants principaux
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
<IconLucidePackage
|
||||
class="w-4 h-4 mr-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ type.machinePieces?.length || 0 }} pièces totales
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,11 +64,9 @@
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredTypes.length === 0" class="text-center py-12">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-neutral text-neutral-content rounded-full w-16">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-neutral text-neutral-content rounded-full w-16">
|
||||
<IconLucideLayoutGrid class="w-8 h-8" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-600 mt-4">Aucun type trouvé</h3>
|
||||
@@ -92,6 +80,9 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucidePackage from '~icons/lucide/package'
|
||||
import IconLucideLayoutGrid from '~icons/lucide/layout-grid'
|
||||
|
||||
const { machineTypes, loading, loadMachineTypes, deleteMachineType } = useMachineTypesApi()
|
||||
|
||||
|
||||
@@ -1,74 +1,85 @@
|
||||
import IconFile from '~icons/lucide/file'
|
||||
import IconFileType from '~icons/lucide/file-type'
|
||||
import IconFileText from '~icons/lucide/file-text'
|
||||
import IconFileSpreadsheet from '~icons/lucide/file-spreadsheet'
|
||||
import IconPresentation from '~icons/lucide/presentation'
|
||||
import IconImage from '~icons/lucide/image'
|
||||
import IconArchive from '~icons/lucide/archive'
|
||||
import IconFileAudio2 from '~icons/lucide/file-audio-2'
|
||||
import IconFileVideo2 from '~icons/lucide/file-video-2'
|
||||
import IconFileCode from '~icons/lucide/file-code'
|
||||
|
||||
const iconMap = [
|
||||
{
|
||||
label: 'PDF',
|
||||
exts: ['pdf'],
|
||||
icon: '📕',
|
||||
component: IconFileType,
|
||||
colorClass: 'text-red-500'
|
||||
},
|
||||
{
|
||||
label: 'Word',
|
||||
exts: ['doc', 'docx'],
|
||||
icon: '📝',
|
||||
component: IconFileText,
|
||||
colorClass: 'text-blue-500'
|
||||
},
|
||||
{
|
||||
label: 'Excel',
|
||||
exts: ['xls', 'xlsx', 'csv'],
|
||||
icon: '📊',
|
||||
component: IconFileSpreadsheet,
|
||||
colorClass: 'text-green-500'
|
||||
},
|
||||
{
|
||||
label: 'PowerPoint',
|
||||
exts: ['ppt', 'pptx'],
|
||||
icon: '📈',
|
||||
component: IconPresentation,
|
||||
colorClass: 'text-orange-500'
|
||||
},
|
||||
{
|
||||
label: 'Image',
|
||||
exts: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'heic'],
|
||||
icon: '🖼️',
|
||||
component: IconImage,
|
||||
colorClass: 'text-purple-500'
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
exts: ['zip', 'rar', '7z', 'tar', 'gz'],
|
||||
icon: '🗜️',
|
||||
component: IconArchive,
|
||||
colorClass: 'text-amber-500'
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
exts: ['mp3', 'wav', 'ogg', 'flac', 'aac'],
|
||||
icon: '🎵',
|
||||
component: IconFileAudio2,
|
||||
colorClass: 'text-pink-500'
|
||||
},
|
||||
{
|
||||
label: 'Vidéo',
|
||||
exts: ['mp4', 'mov', 'avi', 'mkv', 'webm'],
|
||||
icon: '🎬',
|
||||
component: IconFileVideo2,
|
||||
colorClass: 'text-indigo-500'
|
||||
},
|
||||
{
|
||||
label: 'Texte',
|
||||
exts: ['txt', 'md', 'rtf'],
|
||||
icon: '📄',
|
||||
component: IconFileText,
|
||||
colorClass: 'text-gray-500'
|
||||
},
|
||||
{
|
||||
label: 'Code',
|
||||
exts: ['json', 'xml', 'yml', 'yaml', 'js', 'ts', 'py', 'java', 'cs'],
|
||||
icon: '💻',
|
||||
component: IconFileCode,
|
||||
colorClass: 'text-sky-500'
|
||||
}
|
||||
]
|
||||
|
||||
const mimeGroups = [
|
||||
{ prefix: 'image/', icon: '🖼️', colorClass: 'text-purple-500' },
|
||||
{ prefix: 'video/', icon: '🎬', colorClass: 'text-indigo-500' },
|
||||
{ prefix: 'audio/', icon: '🎵', colorClass: 'text-pink-500' },
|
||||
{ prefix: 'text/', icon: '📄', colorClass: 'text-gray-500' },
|
||||
{ prefix: 'application/pdf', icon: '📕', colorClass: 'text-red-500' },
|
||||
{ prefix: 'application/zip', icon: '🗜️', colorClass: 'text-amber-500' },
|
||||
{ prefix: 'application/x-', icon: '🗜️', colorClass: 'text-amber-500' }
|
||||
{ prefix: 'image/', component: IconImage, colorClass: 'text-purple-500', label: 'Image' },
|
||||
{ prefix: 'video/', component: IconFileVideo2, colorClass: 'text-indigo-500', label: 'Vidéo' },
|
||||
{ prefix: 'audio/', component: IconFileAudio2, colorClass: 'text-pink-500', label: 'Audio' },
|
||||
{ prefix: 'text/', component: IconFileText, colorClass: 'text-gray-500', label: 'Texte' },
|
||||
{ prefix: 'application/pdf', component: IconFileType, colorClass: 'text-red-500', label: 'PDF' },
|
||||
{ prefix: 'application/zip', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' },
|
||||
{ prefix: 'application/x-', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' }
|
||||
]
|
||||
|
||||
export const getFileIcon = ({ name = '', mime = '' } = {}) => {
|
||||
@@ -78,7 +89,7 @@ export const getFileIcon = ({ name = '', mime = '' } = {}) => {
|
||||
const match = iconMap.find(entry => entry.exts.includes(extension))
|
||||
if (match) {
|
||||
return {
|
||||
icon: match.icon,
|
||||
component: match.component,
|
||||
colorClass: match.colorClass,
|
||||
label: match.label
|
||||
}
|
||||
@@ -89,15 +100,15 @@ export const getFileIcon = ({ name = '', mime = '' } = {}) => {
|
||||
const match = mimeGroups.find(entry => mime.startsWith(entry.prefix))
|
||||
if (match) {
|
||||
return {
|
||||
icon: match.icon,
|
||||
component: match.component,
|
||||
colorClass: match.colorClass,
|
||||
label: mime
|
||||
label: match.label || mime
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
icon: '📁',
|
||||
component: IconFile,
|
||||
colorClass: 'text-primary',
|
||||
label: 'Document'
|
||||
}
|
||||
|
||||
@@ -5,6 +5,18 @@ export default defineNuxtConfig({
|
||||
devServer: {
|
||||
port: 3001,
|
||||
},
|
||||
modules: [
|
||||
[
|
||||
'unplugin-icons/nuxt',
|
||||
{
|
||||
componentPrefix: 'Icon',
|
||||
warn: process.env.NODE_ENV === 'development',
|
||||
collections: {
|
||||
lucide: () => import('@iconify-json/lucide/icons.json').then((i) => i.default),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:3000/api',
|
||||
|
||||
@@ -20,5 +20,7 @@
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/lucide": "^1.2.68",
|
||||
"unplugin-icons": "^0.19.3"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user