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

chore: update frontend configuration

Browse Source
This commit is contained in:
Matthieu
2025-09-26 11:29:47 +02:00
parent b7caa4f552
commit a78938a4d1
64 changed files with 5790 additions and 5129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/pages/component-catalog.vue
View File

@@ -2,12 +2,20 @@
<main class="container mx-auto px-6 py-8 space-y-8">
<header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-gray-800">Catalogue de composant</h1>
<p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque famille de composant.</p>
<h1 class="text-3xl font-bold text-gray-800">
Catalogue de composant
</h1>
<p class="text-sm text-gray-500">
Gérez les modèles disponibles pour chaque famille de composant.
</p>
</div>
<div class="tabs tabs-boxed">
<NuxtLink to="/component-catalog" class="tab tab-active">Composants</NuxtLink>
<NuxtLink to="/pieces-catalog" class="tab">Pièces</NuxtLink>
<NuxtLink to="/component-catalog" class="tab tab-active">
Composants
</NuxtLink>
<NuxtLink to="/pieces-catalog" class="tab">
Pièces
</NuxtLink>
</div>
</header>
@@ -36,7 +44,7 @@
type="search"
placeholder="Rechercher un modèle..."
class="input input-bordered input-sm"
/>
>
</label>
<span class="text-xs text-gray-500">{{ filteredModels.length }} modèle(s)</span>
</div>
@@ -47,7 +55,7 @@
</div>
<div v-if="loadingComponentModels" class="flex justify-center py-16">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="filteredModels.length === 0" class="py-16 text-center text-sm text-gray-500">
@@ -59,11 +67,19 @@
<thead>
<tr class="text-sm text-gray-500">
<th>Nom</th>
<th class="hidden md:table-cell">Description</th>
<th class="hidden md:table-cell">
Description
</th>
<th>Type</th>
<th class="hidden xl:table-cell">Structure</th>
<th class="hidden lg:table-cell">Modifié</th>
<th class="text-right">Actions</th>
<th class="hidden xl:table-cell">
Structure
</th>
<th class="hidden lg:table-cell">
Modifié
</th>
<th class="text-right">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -80,10 +96,16 @@
<span class="font-medium">{{ model.name }}</span>
</div>
</td>
<td class="hidden md:table-cell">{{ model.description || '—' }}</td>
<td class="hidden md:table-cell">
{{ model.description || '—' }}
</td>
<td>{{ model.typeComposant?.name || 'Non défini' }}</td>
<td class="hidden xl:table-cell text-xs text-gray-500">{{ formatStructurePreview(model.structure) }}</td>
<td class="hidden lg:table-cell text-xs text-gray-500">{{ formatFrenchDate(model.updatedAt || model.createdAt) }}</td>
<td class="hidden xl:table-cell text-xs text-gray-500">
{{ formatStructurePreview(model.structure) }}
</td>
<td class="hidden lg:table-cell text-xs text-gray-500">
{{ formatFrenchDate(model.updatedAt || model.createdAt) }}
</td>
<td class="text-right space-x-2">
<button type="button" class="btn btn-sm btn-outline" @click="startEdit(model)">
Éditer
@@ -124,7 +146,7 @@
class="input input-bordered input-sm"
placeholder="Nom du modèle"
required
/>
>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Description</span></label>
@@ -133,7 +155,7 @@
class="textarea textarea-bordered textarea-sm"
rows="3"
placeholder="Notes optionnelles"
></textarea>
/>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Type de composant</span></label>
@@ -142,7 +164,9 @@
class="select select-bordered select-sm"
required
>
<option value="" disabled>Sélectionner un type</option>
<option value="" disabled>
Sélectionner un type
</option>
<option
v-for="type in componentTypes"
:key="type.id"
@@ -153,7 +177,9 @@
</select>
</div>
<div class="divider my-0">Structure</div>
<div class="divider my-0">
Structure
</div>
<ComponentModelStructureEditor v-model="form.data.structure" />
<div class="rounded-lg border border-base-200 bg-base-200/60 p-3 text-xs text-gray-500">
Aperçu : {{ formatStructurePreview(form.data.structure) }}
@@ -190,7 +216,7 @@ const {
updateComponentModel,
deleteComponentModel,
loadingComponentModels,
getComponentModelsForType,
getComponentModelsForType
} = useComponentModels()
const { showError, showSuccess } = useToast()
@@ -205,15 +231,15 @@ const form = reactive({
name: '',
description: '',
typeComposantId: '',
structure: {},
},
structure: {}
}
})
const ensureTypeSelected = () => {
if (form.data.typeComposantId && componentTypes.value.some((type) => type.id === form.data.typeComposantId)) {
if (form.data.typeComposantId && componentTypes.value.some(type => type.id === form.data.typeComposantId)) {
return
}
if (selectedType.value !== 'all' && componentTypes.value.some((type) => type.id === selectedType.value)) {
if (selectedType.value !== 'all' && componentTypes.value.some(type => type.id === selectedType.value)) {
form.data.typeComposantId = selectedType.value
return
}
@@ -227,7 +253,7 @@ const startCreate = () => {
name: '',
description: '',
typeComposantId: selectedType.value !== 'all' ? selectedType.value : '',
structure: {},
structure: {}
}
ensureTypeSelected()
}
@@ -239,7 +265,7 @@ const startEdit = (model) => {
name: model.name,
description: model.description || '',
typeComposantId: model.typeComposantId || model.typeComposant?.id || '',
structure: model.structure || {},
structure: model.structure || {}
}
}
@@ -254,9 +280,9 @@ const filteredModels = computed(() => {
const term = searchQuery.value.toLowerCase()
return list.filter((model) => {
return (
model.name?.toLowerCase().includes(term)
|| model.description?.toLowerCase().includes(term)
|| model.typeComposant?.name?.toLowerCase().includes(term)
model.name?.toLowerCase().includes(term) ||
model.description?.toLowerCase().includes(term) ||
model.typeComposant?.name?.toLowerCase().includes(term)
)
})
})
@@ -282,7 +308,7 @@ const handleSubmit = async () => {
name: form.data.name.trim(),
description: form.data.description.trim() || undefined,
typeComposantId: form.data.typeComposantId,
structure: form.data.structure || {},
structure: form.data.structure || {}
})
if (!result.success) {
showError(result.error || 'Impossible de créer le modèle')
@@ -294,7 +320,7 @@ const handleSubmit = async () => {
name: form.data.name.trim(),
description: form.data.description.trim() || undefined,
typeComposantId: form.data.typeComposantId,
structure: form.data.structure || {},
structure: form.data.structure || {}
})
if (!result.success) {
showError(result.error || 'Impossible de mettre à jour le modèle')
@@ -312,7 +338,7 @@ const handleSubmit = async () => {
const confirmDelete = async (model) => {
const ok = confirm(`Supprimer le modèle "${model.name}" ?`)
if (!ok) return
if (!ok) { return }
const result = await deleteComponentModel(model.id)
if (!result.success) {
showError(result.error || 'Impossible de supprimer ce modèle')

62
app/pages/constructeurs.vue
View File

@@ -2,8 +2,12 @@
<main class="container mx-auto px-6 py-8 space-y-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold">Constructeurs</h1>
<p class="text-sm text-gray-500">Gérez les constructeurs et leurs coordonnées.</p>
<h1 class="text-3xl font-bold">
Constructeurs
</h1>
<p class="text-sm text-gray-500">
Gérez les constructeurs et leurs coordonnées.
</p>
</div>
<button class="btn btn-primary" @click="openCreateModal">
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
@@ -22,20 +26,26 @@
class="input input-bordered w-full"
placeholder="Nom, email ou téléphone"
@input="debouncedSearch"
/>
>
</div>
<div class="md:w-1/3">
<label class="label"><span class="label-text">Tri</span></label>
<select v-model="sortKey" class="select select-bordered w-full">
<option value="name">Nom</option>
<option value="email">Email</option>
<option value="phone">Téléphone</option>
<option value="name">
Nom
</option>
<option value="email">
Email
</option>
<option value="phone">
Téléphone
</option>
</select>
</div>
</div>
<div v-if="loading" class="py-16 text-center text-sm text-gray-500">
<span class="loading loading-spinner loading-lg mb-2"></span>
<span class="loading loading-spinner loading-lg mb-2" />
Chargement des constructeurs...
</div>
@@ -50,7 +60,9 @@
<th>Nom</th>
<th>Email</th>
<th>Téléphone</th>
<th class="text-right">Actions</th>
<th class="text-right">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -60,8 +72,12 @@
<td>{{ constructeur.phone || '—' }}</td>
<td class="text-right">
<div class="flex justify-end gap-2">
<button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">Modifier</button>
<button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">Supprimer</button>
<button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">
Modifier
</button>
<button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
Supprimer
</button>
</div>
</td>
</tr>
@@ -73,20 +89,24 @@
<dialog class="modal" :class="{ 'modal-open': modalOpen }">
<div class="modal-box">
<h3 class="font-bold text-lg mb-4">{{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur</h3>
<form @submit.prevent="saveConstructeur" class="space-y-4">
<h3 class="font-bold text-lg mb-4">
{{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur
</h3>
<form class="space-y-4" @submit.prevent="saveConstructeur">
<div class="form-control">
<label class="label"><span class="label-text">Nom</span></label>
<input v-model="form.name" type="text" class="input input-bordered" required />
<input v-model="form.name" type="text" class="input input-bordered" required>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<FieldEmail v-model="form.email" label="Email" />
<FieldPhone v-model="form.phone" label="Téléphone" />
</div>
<div class="modal-action">
<button type="button" class="btn" @click="closeModal">Annuler</button>
<button type="button" class="btn" @click="closeModal">
Annuler
</button>
<button type="submit" class="btn btn-primary" :disabled="saving">
<span v-if="saving" class="loading loading-spinner loading-xs mr-2"></span>
<span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
{{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
</button>
</div>
@@ -119,7 +139,7 @@ const filteredConstructeurs = computed(() => {
const key = sortKey.value
return (a[key] || '').localeCompare(b[key] || '')
})
if (!searchTerm.value) return sorted
if (!searchTerm.value) { return sorted }
const term = searchTerm.value.toLowerCase()
return sorted.filter(item =>
[item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term))
@@ -130,7 +150,7 @@ const debouncedSearch = debounce(async () => {
await searchConstructeurs(searchTerm.value)
}, 300)
function debounce(fn, delay) {
function debounce (fn, delay) {
let timeout
return (...args) => {
clearTimeout(timeout)
@@ -153,7 +173,7 @@ const openEditModal = (constructeur) => {
form.value = {
name: constructeur.name,
email: constructeur.email || '',
phone: constructeur.phone || '',
phone: constructeur.phone || ''
}
modalOpen.value = true
}
@@ -166,8 +186,8 @@ const closeModal = () => {
const saveConstructeur = async () => {
saving.value = true
const payload = { ...form.value }
if (!payload.email) delete payload.email
if (!payload.phone) delete payload.phone
if (!payload.email) { delete payload.email }
if (!payload.phone) { delete payload.phone }
let result
if (editingConstructeur.value) {
result = await updateConstructeur(editingConstructeur.value.id, payload)
@@ -182,7 +202,7 @@ const saveConstructeur = async () => {
}
const confirmDelete = async (constructeur) => {
if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) return
if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) { return }
const result = await deleteConstructeur(constructeur.id)
if (!result.success && result.error) {
showError(result.error)

57
app/pages/documents.vue
View File

@@ -1,7 +1,5 @@
<template>
<main class="container mx-auto px-6 py-8 space-y-8">
<DocumentPreviewModal
:document="previewDocument"
:visible="previewVisible"
@@ -20,7 +18,7 @@
type="search"
placeholder="Nom du document, type, site, machine..."
class="input input-bordered w-full"
/>
>
</div>
<div class="w-full md:w-1/3">
@@ -28,19 +26,29 @@
<span class="label-text">Filtrer par rattachement</span>
</label>
<select v-model="attachmentFilter" class="select select-bordered w-full">
<option value="all">Tous</option>
<option value="site">Sites</option>
<option value="machine">Machines</option>
<option value="composant">Composants</option>
<option value="piece">Pièces</option>
<option value="all">
Tous
</option>
<option value="site">
Sites
</option>
<option value="machine">
Machines
</option>
<option value="composant">
Composants
</option>
<option value="piece">
Pièces
</option>
</select>
</div>
</div>
<div class="divider my-0"></div>
<div class="divider my-0" />
<div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
<span class="loading loading-spinner loading-lg mb-3"></span>
<span class="loading loading-spinner loading-lg mb-3" />
Chargement des documents...
</div>
@@ -58,7 +66,9 @@
<th>Taille</th>
<th>Rattaché à</th>
<th>Date</th>
<th class="text-right">Actions</th>
<th class="text-right">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -73,8 +83,12 @@
/>
</span>
<div>
<div class="font-semibold">{{ document.name }}</div>
<div class="text-xs text-gray-500">{{ document.filename }}</div>
<div class="font-semibold">
{{ document.name }}
</div>
<div class="text-xs text-gray-500">
{{ document.filename }}
</div>
</div>
</div>
</td>
@@ -124,7 +138,6 @@ import { formatFrenchDate } from '~/utils/date'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import IconLucideFileSearch from '~icons/lucide/file-search'
const { documents, loading, loadDocuments } = useDocuments()
const searchTerm = ref('')
@@ -148,9 +161,9 @@ const filteredDocuments = computed(() => {
(filter === 'composant' && document.composantId) ||
(filter === 'piece' && document.pieceId)
if (!matchesFilter) return false
if (!matchesFilter) { return false }
if (!term) return true
if (!term) { return true }
const searchable = [
document.name,
@@ -159,7 +172,7 @@ const filteredDocuments = computed(() => {
document.site?.name,
document.machine?.name,
document.composant?.name,
document.piece?.name,
document.piece?.name
]
.filter(Boolean)
.map(value => value.toLowerCase())
@@ -169,18 +182,18 @@ const filteredDocuments = computed(() => {
})
const formatSize = (size) => {
if (size === undefined || size === null) return '—'
if (size === 0) return '0 B'
if (size === undefined || size === null) { return '—' }
if (size === 0) { return '0 B' }
const units = ['B', 'KB', 'MB', 'GB']
const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
const formatted = size / Math.pow(1024, index)
return `${formatted.toFixed(1)} ${units[index]}`
}
const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
const downloadDocument = (doc) => {
if (!doc?.path) return
if (!doc?.path) { return }
if (doc.path.startsWith('data:')) {
const link = document.createElement('a')
@@ -194,7 +207,7 @@ const downloadDocument = (doc) => {
}
const openPreview = (doc) => {
if (!canPreviewDocument(doc)) return
if (!canPreviewDocument(doc)) { return }
previewDocument.value = doc
previewVisible.value = true
}

30
app/pages/generator.vue
View File

@@ -1,7 +1,5 @@
<template>
<main class="container mx-auto px-6 py-8 space-y-8">
<div class="card bg-base-100 shadow-xl">
<div class="card-body space-y-6">
<div class="flex items-center gap-3">
@@ -12,7 +10,9 @@
/>
</span>
<div>
<h2 class="card-title text-2xl">Nouveau type de machine</h2>
<h2 class="card-title text-2xl">
Nouveau type de machine
</h2>
<p class="text-sm text-gray-500">
Complétez les informations puis enregistrez pour générer le nouveau type.
</p>
@@ -37,7 +37,9 @@
</div>
<template v-else>
<div v-if="recentTypes.length" class="space-y-4">
<h3 class="text-xl font-semibold">Types générés récemment</h3>
<h3 class="text-xl font-semibold">
Types générés récemment
</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<article
v-for="type in recentTypes"
@@ -46,10 +48,14 @@
>
<div class="card-body space-y-2">
<div class="flex items-center justify-between">
<h4 class="card-title text-base">{{ type.name }}</h4>
<h4 class="card-title text-base">
{{ type.name }}
</h4>
<span v-if="type.category" class="badge badge-outline badge-sm">{{ type.category }}</span>
</div>
<p class="text-sm text-gray-600 line-clamp-3">{{ type.description || 'Aucune description' }}</p>
<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">
<IconLucideClipboardList class="h-4 w-4" aria-hidden="true" />
@@ -94,7 +100,7 @@ const createEmptyType = () => ({
maintenanceFrequency: '',
customFields: [],
componentRequirements: [],
pieceRequirements: [],
pieceRequirements: []
})
const draftType = ref(createEmptyType())
@@ -115,7 +121,7 @@ onMounted(async () => {
})
const parseOptions = (field = {}) => {
if (field.type !== 'select') return []
if (field.type !== 'select') { return [] }
if (field.optionsText && typeof field.optionsText === 'string') {
return field.optionsText
.split('\n')
@@ -157,7 +163,7 @@ const normalizeComponentRequirements = (requirements = []) =>
minCount: toIntegerOrNull(req.minCount, 1),
maxCount: toIntegerOrNull(req.maxCount, null),
required: req.required ?? true,
allowNewModels: req.allowNewModels ?? true,
allowNewModels: req.allowNewModels ?? true
}))
const normalizePieceRequirements = (requirements = []) =>
@@ -169,10 +175,10 @@ const normalizePieceRequirements = (requirements = []) =>
minCount: toIntegerOrNull(req.minCount, 0),
maxCount: toIntegerOrNull(req.maxCount, null),
required: req.required ?? false,
allowNewModels: req.allowNewModels ?? true,
allowNewModels: req.allowNewModels ?? true
}))
const buildPayload = (typeData) => ({
const buildPayload = typeData => ({
name: typeData.name,
description: typeData.description,
category: typeData.category,
@@ -204,7 +210,7 @@ const handleSubmit = async () => {
} else if (result?.error) {
showError(result.error)
} else {
showError("Impossible de créer le type.")
showError('Impossible de créer le type.')
}
}
</script>

324
app/pages/index.vue
View File

@@ -5,17 +5,29 @@
<!-- Header with Stats -->
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Vue d'ensemble</h2>
<p class="text-gray-600">Machines organisées par site</p>
<h2 class="text-2xl font-bold text-gray-800">
Vue d'ensemble
</h2>
<p class="text-gray-600">
Machines organisées par site
</p>
</div>
<div class="stats shadow">
<div class="stat">
<div class="stat-title">Sites</div>
<div class="stat-value text-primary">{{ sites.length }}</div>
<div class="stat-title">
Sites
</div>
<div class="stat-value text-primary">
{{ sites.length }}
</div>
</div>
<div class="stat">
<div class="stat-title">Machines</div>
<div class="stat-value text-secondary">{{ totalMachines }}</div>
<div class="stat-title">
Machines
</div>
<div class="stat-value text-secondary">
{{ totalMachines }}
</div>
</div>
</div>
</div>
@@ -33,14 +45,16 @@
type="text"
placeholder="Nom de machine ou site..."
class="input input-bordered"
/>
>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Type de machine</span>
</label>
<select v-model="selectedType" class="select select-bordered">
<option value="">Tous les types</option>
<option value="">
Tous les types
</option>
<option
v-for="type in machineTypes"
:key="type.id"
@@ -55,7 +69,9 @@
<span class="label-text">Catégorie</span>
</label>
<select v-model="selectedCategory" class="select select-bordered">
<option value="">Toutes les catégories</option>
<option value="">
Toutes les catégories
</option>
<option
v-for="category in categories"
:key="category"
@@ -71,7 +87,7 @@
<!-- Loading State -->
<div v-if="loading" class="flex justify-center items-center py-12">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg" />
</div>
<!-- Hierarchical Machines View -->
@@ -88,12 +104,12 @@
Commencez par ajouter des sites et des machines.
</p>
<div class="flex gap-2 justify-center">
<button @click="showAddSiteModal = true" class="btn btn-primary">
<button class="btn btn-primary" @click="showAddSiteModal = true">
Ajouter un site
</button>
<button
@click="showAddMachineModal = true"
class="btn btn-secondary"
@click="showAddMachineModal = true"
>
Ajouter une machine
</button>
@@ -119,7 +135,9 @@
</div>
</div>
<div>
<h3 class="text-xl font-bold">{{ site.name }}</h3>
<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">
<IconLucideUser
@@ -141,7 +159,7 @@
aria-hidden="true"
/>
<span>
{{ site.contactAddress }}<br />
{{ site.contactAddress }}<br>
{{ site.contactPostalCode }} {{ site.contactCity }}
</span>
</div>
@@ -153,8 +171,8 @@
{{ site.machines?.length || 0 }} machines
</div>
<button
@click="toggleSiteCollapse(site.id)"
class="btn btn-ghost btn-sm"
@click="toggleSiteCollapse(site.id)"
>
<IconLucideChevronDown
class="w-5 h-5 transition-transform"
@@ -171,12 +189,12 @@
<div
v-if="
!collapsedSites.includes(site.id) &&
site.machines &&
site.machines.length > 0
site.machines &&
site.machines.length > 0
"
class="space-y-3"
>
<div class="divider"></div>
<div class="divider" />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="machine in site.machines"
@@ -186,7 +204,9 @@
>
<div class="card-body p-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-semibold text-sm">{{ machine.name }}</h4>
<h4 class="font-semibold text-sm">
{{ machine.name }}
</h4>
<div
class="badge badge-sm"
:class="
@@ -246,7 +266,7 @@
<div
v-else-if="
!collapsedSites.includes(site.id) &&
(!site.machines || site.machines.length === 0)
(!site.machines || site.machines.length === 0)
"
class="text-center py-6"
>
@@ -257,8 +277,8 @@
Aucune machine dans ce site
</p>
<button
@click="addMachineToSite(site)"
class="btn btn-sm btn-primary"
@click="addMachineToSite(site)"
>
Ajouter une machine
</button>
@@ -271,8 +291,10 @@
<!-- Add Site Modal -->
<div v-if="showAddSiteModal" class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
<form @submit.prevent="handleCreateSite" class="space-y-4">
<h3 class="font-bold text-lg mb-4">
Ajouter un nouveau site
</h3>
<form class="space-y-4" @submit.prevent="handleCreateSite">
<div class="form-control">
<label class="label">
<span class="label-text">Nom du site</span>
@@ -283,7 +305,7 @@
placeholder="Ex: Usine de production"
class="input input-bordered"
required
/>
>
</div>
<SiteContactFormFields :form="newSite" />
@@ -291,12 +313,14 @@
<div class="modal-action">
<button
type="button"
@click="showAddSiteModal = false"
class="btn btn-outline"
@click="showAddSiteModal = false"
>
Annuler
</button>
<button type="submit" class="btn btn-primary">Créer le site</button>
<button type="submit" class="btn btn-primary">
Créer le site
</button>
</div>
</form>
</div>
@@ -305,7 +329,9 @@
<!-- Add Machine Modal -->
<div v-if="showAddMachineModal" class="modal modal-open">
<div class="modal-box max-w-2xl">
<h3 class="font-bold text-lg mb-4">Ajouter une nouvelle machine</h3>
<h3 class="font-bold text-lg mb-4">
Ajouter une nouvelle machine
</h3>
<form @submit.prevent="handleCreateMachine">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="form-control">
@@ -318,7 +344,7 @@
placeholder="Ex: Presse hydraulique #1"
class="input input-bordered"
required
/>
>
</div>
<div class="form-control">
@@ -330,7 +356,9 @@
class="select select-bordered"
required
>
<option value="">Sélectionner un site</option>
<option value="">
Sélectionner un site
</option>
<option v-for="site in sites" :key="site.id" :value="site.id">
{{ site.name }}
</option>
@@ -348,7 +376,9 @@
class="select select-bordered"
required
>
<option value="">Sélectionner un type</option>
<option value="">
Sélectionner un type
</option>
<option
v-for="type in machineTypes"
:key="type.id"
@@ -368,7 +398,7 @@
type="text"
placeholder="Ex: PRESS-001"
class="input input-bordered"
/>
>
</div>
</div>
@@ -405,8 +435,8 @@
<div class="modal-action">
<button
type="button"
@click="showAddMachineModal = false"
class="btn btn-outline"
@click="showAddMachineModal = false"
>
Annuler
</button>
@@ -421,129 +451,129 @@
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import SiteContactFormFields from "~/components/sites/SiteContactFormFields.vue";
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 { ref, reactive, onMounted, computed } from 'vue'
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
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'
const { sites, loading, loadSites, createSite } = useSites();
const { machineTypes, loadMachineTypes } = useMachineTypesApi();
const { createMachineFromType, deleteMachine } = useMachines();
const { sites, loading, loadSites, createSite } = useSites()
const { machineTypes, loadMachineTypes } = useMachineTypesApi()
const { createMachineFromType, deleteMachine } = useMachines()
// Data
const showAddSiteModal = ref(false);
const showAddMachineModal = ref(false);
const searchTerm = ref("");
const selectedType = ref("");
const selectedCategory = ref("");
const collapsedSites = ref([]);
const showAddSiteModal = ref(false)
const showAddMachineModal = ref(false)
const searchTerm = ref('')
const selectedType = ref('')
const selectedCategory = ref('')
const collapsedSites = ref([])
const newSite = reactive({
name: "",
contactName: "",
contactPhone: "",
contactAddress: "",
contactPostalCode: "",
contactCity: "",
});
name: '',
contactName: '',
contactPhone: '',
contactAddress: '',
contactPostalCode: '',
contactCity: ''
})
const newMachine = reactive({
name: "",
siteId: "",
typeMachineId: "",
reference: "",
});
name: '',
siteId: '',
typeMachineId: '',
reference: ''
})
// Computed
const selectedMachineType = computed(() => {
if (!newMachine.typeMachineId) return null;
if (!newMachine.typeMachineId) { return null }
return machineTypes.value.find(
(type) => type.id === newMachine.typeMachineId
);
});
type => type.id === newMachine.typeMachineId
)
})
const categories = computed(() => {
const cats = new Set();
const cats = new Set()
machineTypes.value.forEach((type) => {
if (type.category) cats.add(type.category);
});
return Array.from(cats);
});
if (type.category) { cats.add(type.category) }
})
return Array.from(cats)
})
const totalMachines = computed(() => {
return sites.value.reduce((total, site) => {
return total + (site.machines?.length || 0);
}, 0);
});
return total + (site.machines?.length || 0)
}, 0)
})
const filteredSites = computed(() => {
let filtered = sites.value;
let filtered = sites.value
// Filtrer par terme de recherche
if (searchTerm.value) {
filtered = filtered.filter((site) => {
const lowerTerm = searchTerm.value.toLowerCase();
const lowerTerm = searchTerm.value.toLowerCase()
const siteMatches = [
site.name,
site.contactName,
site.contactPhone,
site.contactAddress,
site.contactPostalCode,
site.contactCity,
site.contactCity
].some((field) => {
if (!field) return false;
return field.toLowerCase().includes(lowerTerm);
});
if (!field) { return false }
return field.toLowerCase().includes(lowerTerm)
})
const machineMatches = site.machines?.some(
(machine) =>
machine =>
machine.name.toLowerCase().includes(lowerTerm) ||
machine.reference?.toLowerCase().includes(lowerTerm)
);
)
return siteMatches || machineMatches;
});
return siteMatches || machineMatches
})
}
// Filtrer par type de machine
if (selectedType.value) {
filtered = filtered
.map((site) => ({
.map(site => ({
...site,
machines:
site.machines?.filter(
(machine) => machine.typeMachineId === selectedType.value
) || [],
machine => machine.typeMachineId === selectedType.value
) || []
}))
.filter((site) => site.machines.length > 0);
.filter(site => site.machines.length > 0)
}
// Filtrer par catégorie
if (selectedCategory.value) {
filtered = filtered
.map((site) => ({
.map(site => ({
...site,
machines:
site.machines?.filter(
(machine) =>
machine =>
machine.typeMachine?.category === selectedCategory.value
) || [],
) || []
}))
.filter((site) => site.machines.length > 0);
.filter(site => site.machines.length > 0)
}
return filtered;
});
return filtered
})
// Methods
const handleCreateSite = async () => {
@@ -553,69 +583,69 @@ const handleCreateSite = async () => {
contactPhone: newSite.contactPhone,
contactAddress: newSite.contactAddress,
contactPostalCode: newSite.contactPostalCode,
contactCity: newSite.contactCity,
});
contactCity: newSite.contactCity
})
if (result.success) {
showAddSiteModal.value = false;
showAddSiteModal.value = false
// Reset form
newSite.name = "";
newSite.contactName = "";
newSite.contactPhone = "";
newSite.contactAddress = "";
newSite.contactPostalCode = "";
newSite.contactCity = "";
newSite.name = ''
newSite.contactName = ''
newSite.contactPhone = ''
newSite.contactAddress = ''
newSite.contactPostalCode = ''
newSite.contactCity = ''
}
};
}
const handleCreateMachine = async () => {
if (!selectedMachineType.value) {
console.error("Aucun type de machine sélectionné");
return;
console.error('Aucun type de machine sélectionné')
return
}
const machineData = {
name: newMachine.name,
siteId: newMachine.siteId,
reference: newMachine.reference,
};
reference: newMachine.reference
}
const result = await createMachineFromType(
machineData,
selectedMachineType.value
);
)
if (result.success) {
// Reset form
newMachine.name = "";
newMachine.siteId = "";
newMachine.typeMachineId = "";
newMachine.reference = "";
showAddMachineModal.value = false;
newMachine.name = ''
newMachine.siteId = ''
newMachine.typeMachineId = ''
newMachine.reference = ''
showAddMachineModal.value = false
}
};
}
const toggleSiteCollapse = (siteId) => {
const index = collapsedSites.value.indexOf(siteId);
const index = collapsedSites.value.indexOf(siteId)
if (index > -1) {
collapsedSites.value.splice(index, 1);
collapsedSites.value.splice(index, 1)
} else {
collapsedSites.value.push(siteId);
collapsedSites.value.push(siteId)
}
};
}
const viewMachineDetails = (machine) => {
// Navigation vers la page de détails de la machine
navigateTo(`/machine/${machine.id}`);
};
navigateTo(`/machine/${machine.id}`)
}
const editMachine = (machine) => {
// Rediriger vers la page d'édition de la machine
navigateTo(`/machine/${machine.id}?edit=true`);
};
navigateTo(`/machine/${machine.id}?edit=true`)
}
const confirmDeleteMachine = async (machine) => {
const { showError, showSuccess } = useToast();
const { showError, showSuccess } = useToast()
if (
confirm(
@@ -623,36 +653,36 @@ const confirmDeleteMachine = async (machine) => {
)
) {
try {
const result = await deleteMachine(machine.id);
const result = await deleteMachine(machine.id)
if (result.success) {
showSuccess(`Machine "${machine.name}" supprimée avec succès`);
showSuccess(`Machine "${machine.name}" supprimée avec succès`)
} else {
showError(`Erreur lors de la suppression: ${result.error}`);
showError(`Erreur lors de la suppression: ${result.error}`)
}
} catch (error) {
showError(`Erreur lors de la suppression: ${error.message}`);
showError(`Erreur lors de la suppression: ${error.message}`)
}
}
};
}
const addMachineToSite = (site) => {
newMachine.siteId = site.id;
showAddMachineModal.value = true;
};
newMachine.siteId = site.id
showAddMachineModal.value = true
}
const getCategoryBadgeClass = (category) => {
const classes = {
Production: "badge-primary",
Transformation: "badge-secondary",
Manutention: "badge-accent",
Traitement: "badge-info",
Contrôle: "badge-warning",
};
return classes[category] || "badge-neutral";
};
Production: 'badge-primary',
Transformation: 'badge-secondary',
Manutention: 'badge-accent',
Traitement: 'badge-info',
Contrôle: 'badge-warning'
}
return classes[category] || 'badge-neutral'
}
// Lifecycle
onMounted(async () => {
await Promise.all([loadSites(), loadMachineTypes()]);
});
await Promise.all([loadSites(), loadMachineTypes()])
})
</script>

52
app/pages/machine-skeleton.vue
View File

@@ -1,12 +1,12 @@
<template>
<main class="container mx-auto px-6 py-8">
<!-- Machine Types List -->
<div class="my-8">
<!-- Header with Add Button -->
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Squelettes de machine</h2>
<h2 class="text-2xl font-bold text-gray-800">
Squelettes de machine
</h2>
<NuxtLink to="/generator" class="btn btn-primary">
<IconLucidePlus
class="w-5 h-5 mr-2"
@@ -18,8 +18,8 @@
<!-- Categories Tabs -->
<div class="tabs tabs-boxed mb-6">
<a
v-for="category in categories"
<a
v-for="category in categories"
:key="category"
class="tab"
:class="{ 'tab-active': selectedCategory === category }"
@@ -31,17 +31,23 @@
<!-- Machine Types Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-for="type in filteredTypes"
<div
v-for="type in filteredTypes"
:key="type.id"
class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
>
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title text-lg">{{ type.name }}</h3>
<div class="badge badge-primary">{{ type.category }}</div>
<h3 class="card-title text-lg">
{{ type.name }}
</h3>
<div class="badge badge-primary">
{{ type.category }}
</div>
</div>
<p class="text-gray-600 mb-4">{{ type.description }}</p>
<p class="text-gray-600 mb-4">
{{ type.description }}
</p>
<div class="space-y-2 text-sm text-gray-500">
<div class="flex items-center gap-2">
<IconLucidePackage class="w-4 h-4" aria-hidden="true" />
@@ -56,8 +62,12 @@
<button class="btn btn-sm btn-error" @click.stop="confirmDeleteType(type)">
Supprimer
</button>
<NuxtLink :to="`/type/${type.id}`" class="btn btn-sm btn-outline">Voir détails</NuxtLink>
<button class="btn btn-sm btn-primary">Utiliser</button>
<NuxtLink :to="`/type/${type.id}`" class="btn btn-sm btn-outline">
Voir détails
</NuxtLink>
<button class="btn btn-sm btn-primary">
Utiliser
</button>
</div>
</div>
</div>
@@ -65,13 +75,17 @@
<!-- 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">
<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>
<p class="text-gray-500">Aucun type de machine ne correspond à cette catégorie.</p>
<h3 class="text-lg font-semibold text-gray-600 mt-4">
Aucun type trouvé
</h3>
<p class="text-gray-500">
Aucun type de machine ne correspond à cette catégorie.
</p>
</div>
</div>
</main>
@@ -90,7 +104,7 @@ const { machineTypes, loading, loadMachineTypes, deleteMachineType } = useMachin
const categories = ref([
'Toutes',
'Production',
'Transformation',
'Transformation',
'Manutention',
'Traitement',
'Contrôle'
@@ -107,7 +121,7 @@ const filteredTypes = computed(() => {
const confirmDeleteType = async (type) => {
const { showError, showSuccess } = useToast()
if (confirm(`Êtes-vous sûr de vouloir supprimer le type "${type.name}" ? Cette action est irréversible.`)) {
try {
const result = await deleteMachineType(type.id)
@@ -126,4 +140,4 @@ const confirmDeleteType = async (type) => {
onMounted(async () => {
await loadMachineTypes()
})
</script>
</script>

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

@@ -2,7 +2,9 @@
<main class="container mx-auto px-6 py-8">
<div class="my-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Parc Machines</h2>
<h2 class="text-2xl font-bold">
Parc Machines
</h2>
<NuxtLink to="/machines/new" class="btn btn-primary">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Ajouter une machine
@@ -17,7 +19,9 @@
<span class="label-text">Site</span>
</label>
<select v-model="selectedSite" class="select select-bordered">
<option value="">Tous les sites</option>
<option value="">
Tous les sites
</option>
<option v-for="site in sites" :key="site.id" :value="site.id">
{{ site.name }}
</option>
@@ -28,7 +32,9 @@
<span class="label-text">Type de machine</span>
</label>
<select v-model="selectedType" class="select select-bordered">
<option value="">Tous les types</option>
<option value="">
Tous les types
</option>
<option v-for="type in machineTypes" :key="type.id" :value="type.id">
{{ type.name }}
</option>
@@ -39,7 +45,9 @@
<span class="label-text">Catégorie</span>
</label>
<select v-model="selectedCategory" class="select select-bordered">
<option value="">Toutes les catégories</option>
<option value="">
Toutes les catégories
</option>
<option v-for="category in categories" :key="category" :value="category">
{{ category }}
</option>
@@ -50,14 +58,18 @@
</div>
<div v-if="loading" class="flex justify-center items-center py-12">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="filteredMachines.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
<p class="text-gray-500 mb-4">Commencez par ajouter votre première machine.</p>
<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>
<NuxtLink to="/machines/new" class="btn btn-primary">
Ajouter une machine
</NuxtLink>
@@ -73,11 +85,17 @@
>
<div class="card-body">
<div class="flex items-center justify-between mb-2">
<h3 class="card-title text-lg">{{ machine.name }}</h3>
<div class="badge badge-primary badge-sm">{{ machine.typeMachine?.category || 'N/A' }}</div>
<h3 class="card-title text-lg">
{{ machine.name }}
</h3>
<div class="badge badge-primary badge-sm">
{{ machine.typeMachine?.category || 'N/A' }}
</div>
</div>
<p class="text-sm text-gray-600 mb-3">{{ machine.description || machine.typeMachine?.description }}</p>
<p class="text-sm text-gray-600 mb-3">
{{ machine.description || machine.typeMachine?.description }}
</p>
<div class="space-y-2 text-sm">
<div class="flex items-center gap-2">
@@ -94,7 +112,6 @@
<IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
<span class="text-gray-600">{{ machine.reference }}</span>
</div>
</div>
<div class="card-actions justify-end mt-4">
@@ -150,15 +167,15 @@ const filteredMachines = computed(() => {
let filtered = machines.value
if (selectedSite.value) {
filtered = filtered.filter((machine) => machine.siteId === selectedSite.value)
filtered = filtered.filter(machine => machine.siteId === selectedSite.value)
}
if (selectedType.value) {
filtered = filtered.filter((machine) => machine.typeMachineId === selectedType.value)
filtered = filtered.filter(machine => machine.typeMachineId === selectedType.value)
}
if (selectedCategory.value) {
filtered = filtered.filter((machine) => machine.typeMachine?.category === selectedCategory.value)
filtered = filtered.filter(machine => machine.typeMachine?.category === selectedCategory.value)
}
return filtered
@@ -193,7 +210,7 @@ onMounted(async () => {
await Promise.all([
loadMachines(),
loadSites(),
loadMachineTypes(),
loadMachineTypes()
])
})
</script>

268
app/pages/machines/new.vue
View File

@@ -3,10 +3,16 @@
<div class="max-w-5xl mx-auto">
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
<div>
<h1 class="text-2xl font-bold">Nouvelle machine</h1>
<p class="text-sm text-gray-500">Renseignez les informations et la configuration avant de créer la machine.</p>
<h1 class="text-2xl font-bold">
Nouvelle machine
</h1>
<p class="text-sm text-gray-500">
Renseignez les informations et la configuration avant de créer la machine.
</p>
</div>
<NuxtLink to="/machines" class="btn btn-ghost">Annuler</NuxtLink>
<NuxtLink to="/machines" class="btn btn-ghost">
Annuler
</NuxtLink>
</div>
<form class="space-y-6" @submit.prevent="finalizeMachineCreation">
@@ -24,7 +30,7 @@
placeholder="Ex: Presse hydraulique #1"
class="input input-bordered"
required
/>
>
</div>
<div class="form-control">
@@ -32,7 +38,9 @@
<span class="label-text">Site</span>
</label>
<select id="machine-field-site" v-model="newMachine.siteId" class="select select-bordered" required>
<option value="">Sélectionner un site</option>
<option value="">
Sélectionner un site
</option>
<option v-for="site in sites" :key="site.id" :value="site.id">
{{ site.name }}
</option>
@@ -46,7 +54,9 @@
<span class="label-text">Type de machine</span>
</label>
<select v-model="newMachine.typeMachineId" class="select select-bordered" required>
<option value="">Sélectionner un type</option>
<option value="">
Sélectionner un type
</option>
<option v-for="type in machineTypes" :key="type.id" :value="type.id">
{{ type.name }} ({{ type.category }})
</option>
@@ -62,12 +72,14 @@
type="text"
placeholder="Ex: PRESS-001"
class="input input-bordered"
/>
>
</div>
</div>
<div v-if="selectedMachineType" class="p-4 bg-gray-50 rounded-lg space-y-2 text-sm">
<h4 class="font-semibold text-sm">Structure du type sélectionné :</h4>
<h4 class="font-semibold text-sm">
Structure du type sélectionné :
</h4>
<div class="flex flex-wrap gap-3">
<span class="inline-flex items-center gap-2">
<span class="font-medium">Familles de composants :</span>
@@ -91,13 +103,15 @@
</div>
<div v-if="selectedMachineType?.componentRequirements?.length" class="space-y-4">
<h4 class="text-sm font-semibold">Sélection des composants</h4>
<h4 class="text-sm font-semibold">
Sélection des composants
</h4>
<div
v-for="requirement in selectedMachineType.componentRequirements"
:id="`component-group-${requirement.id}`"
:key="requirement.id"
class="border border-base-200 rounded-lg p-4 space-y-3"
:id="`component-group-${requirement.id}`"
>
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
@@ -115,8 +129,8 @@
<button
type="button"
class="btn btn-sm btn-outline"
@click="addComponentSelectionEntry(requirement)"
:disabled="requirement.maxCount !== null && getComponentRequirementEntries(requirement.id).length >= requirement.maxCount"
@click="addComponentSelectionEntry(requirement)"
>
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
Ajouter
@@ -148,7 +162,7 @@
class="radio radio-xs"
:checked="entry.mode === 'model'"
@change="setComponentSelectionMode(requirement.id, entryIndex, 'model')"
/>
>
Modèle existant
</label>
<label class="inline-flex items-center gap-1">
@@ -156,9 +170,9 @@
type="radio"
class="radio radio-xs"
:checked="entry.mode === 'manual'"
@change="setComponentSelectionMode(requirement.id, entryIndex, 'manual')"
:disabled="!requirement.allowNewModels"
/>
@change="setComponentSelectionMode(requirement.id, entryIndex, 'manual')"
>
Définir manuellement
</label>
</div>
@@ -173,7 +187,9 @@
:value="entry.componentModelId || ''"
@change="updateComponentSelectionEntry(requirement.id, entryIndex, { componentModelId: $event.target.value || '' })"
>
<option value="">Sélectionner un modèle</option>
<option value="">
Sélectionner un modèle
</option>
<option
v-for="model in getComponentModelsForType(requirement.typeComposantId)"
:key="model.id"
@@ -182,7 +198,9 @@
{{ model.name }}
</option>
</select>
<p v-if="loadingComponentModels" class="text-[10px] text-gray-500 mt-1">Chargement des modèles...</p>
<p v-if="loadingComponentModels" class="text-[10px] text-gray-500 mt-1">
Chargement des modèles...
</p>
<p
v-else-if="getComponentModelsForType(requirement.typeComposantId).length === 0"
class="text-[10px] text-gray-500 mt-1"
@@ -203,7 +221,7 @@
:value="entry.name"
placeholder="Nom du composant"
@input="updateComponentSelectionEntry(requirement.id, entryIndex, { name: $event.target.value })"
/>
>
</div>
<div class="form-control">
<label class="label">
@@ -214,7 +232,7 @@
class="input input-bordered input-sm"
placeholder="(Non géré pour l'instant)"
disabled
/>
>
</div>
</div>
@@ -231,13 +249,15 @@
</div>
</div>
<div v-if="selectedMachineType?.pieceRequirements?.length" class="space-y-4">
<h4 class="text-sm font-semibold">Sélection des pièces principales</h4>
<h4 class="text-sm font-semibold">
Sélection des pièces principales
</h4>
<div
v-for="requirement in selectedMachineType.pieceRequirements"
:id="`piece-group-${requirement.id}`"
:key="requirement.id"
class="border border-base-200 rounded-lg p-4 space-y-3"
:id="`piece-group-${requirement.id}`"
>
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
@@ -255,8 +275,8 @@
<button
type="button"
class="btn btn-sm btn-outline"
@click="addPieceSelectionEntry(requirement)"
:disabled="requirement.maxCount !== null && getPieceRequirementEntries(requirement.id).length >= requirement.maxCount"
@click="addPieceSelectionEntry(requirement)"
>
<IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
Ajouter
@@ -291,7 +311,9 @@
:value="entry.pieceModelId || ''"
@change="updatePieceSelectionEntry(requirement.id, entryIndex, { pieceModelId: $event.target.value || '' })"
>
<option value="">Sélectionner un modèle</option>
<option value="">
Sélectionner un modèle
</option>
<option
v-for="model in getPieceModelsForType(requirement.typePieceId)"
:key="model.id"
@@ -300,7 +322,9 @@
{{ model.name }}
</option>
</select>
<p v-if="loadingPieceModels" class="text-[10px] text-gray-500 mt-1">Chargement des modèles...</p>
<p v-if="loadingPieceModels" class="text-[10px] text-gray-500 mt-1">
Chargement des modèles...
</p>
<p
v-else-if="getPieceModelsForType(requirement.typePieceId).length === 0"
class="text-[10px] text-gray-500 mt-1"
@@ -363,7 +387,9 @@
</div>
<div v-if="machinePreview.base.issues.length" class="rounded-md bg-warning/10 border border-warning/30 p-3 text-xs text-warning">
<p class="font-medium mb-1">Informations générales incomplètes :</p>
<p class="font-medium mb-1">
Informations générales incomplètes :
</p>
<ul class="space-y-1">
<li v-for="issue in machinePreview.base.issues" :key="issue.message">
<button
@@ -379,7 +405,9 @@
</div>
<div v-if="machinePreview.componentGroups.length" class="space-y-3">
<h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Composants hérités</h5>
<h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
Composants hérités
</h5>
<div
v-for="group in machinePreview.componentGroups"
:key="group.id"
@@ -387,7 +415,9 @@
>
<div class="flex flex-wrap items-start justify-between gap-2">
<div>
<p class="text-sm font-semibold">{{ group.label }}</p>
<p class="text-sm font-semibold">
{{ group.label }}
</p>
<p class="text-xs text-gray-500">
Type : {{ group.typeName }} · Min {{ group.min }} ·
{{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
@@ -400,7 +430,9 @@
<div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
<ul class="list-disc pl-4 space-y-1">
<li v-for="issue in group.issues" :key="issue.message">{{ issue.message }}</li>
<li v-for="issue in group.issues" :key="issue.message">
{{ issue.message }}
</li>
</ul>
</div>
@@ -420,7 +452,9 @@
<p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
{{ entry.title }}
</p>
<p v-if="entry.subtitle" class="text-xs text-gray-500">{{ entry.subtitle }}</p>
<p v-if="entry.subtitle" class="text-xs text-gray-500">
{{ entry.subtitle }}
</p>
</div>
</li>
</ul>
@@ -432,7 +466,9 @@
</div>
<div v-if="machinePreview.pieceGroups.length" class="space-y-3">
<h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Pièces associées</h5>
<h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
Pièces associées
</h5>
<div
v-for="group in machinePreview.pieceGroups"
:key="group.id"
@@ -440,7 +476,9 @@
>
<div class="flex flex-wrap items-start justify-between gap-2">
<div>
<p class="text-sm font-semibold">{{ group.label }}</p>
<p class="text-sm font-semibold">
{{ group.label }}
</p>
<p class="text-xs text-gray-500">
Type : {{ group.typeName }} · Min {{ group.min }} ·
{{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
@@ -453,7 +491,9 @@
<div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
<ul class="list-disc pl-4 space-y-1">
<li v-for="issue in group.issues" :key="issue.message">{{ issue.message }}</li>
<li v-for="issue in group.issues" :key="issue.message">
{{ issue.message }}
</li>
</ul>
</div>
@@ -473,7 +513,9 @@
<p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
{{ entry.title }}
</p>
<p v-if="entry.subtitle" class="text-xs text-gray-500">{{ entry.subtitle }}</p>
<p v-if="entry.subtitle" class="text-xs text-gray-500">
{{ entry.subtitle }}
</p>
</div>
<span v-if="entry.mode === 'manual'" class="badge badge-ghost badge-xs">manuel</span>
</li>
@@ -492,7 +534,9 @@
<div class="flex items-start gap-2">
<IconLucideAlertTriangle class="w-4 h-4 mt-0.5" aria-hidden="true" />
<div class="space-y-1">
<p class="font-medium">Points à vérifier avant la création :</p>
<p class="font-medium">
Points à vérifier avant la création :
</p>
<ul class="space-y-1">
<li v-for="issue in machinePreview.issues" :key="`${issue.scope}-${issue.message}`">
<button
@@ -522,7 +566,9 @@
</div>
<div class="flex justify-end gap-3 pt-4 border-t border-base-200">
<NuxtLink to="/machines" class="btn btn-outline">Annuler</NuxtLink>
<NuxtLink to="/machines" class="btn btn-outline">
Annuler
</NuxtLink>
<button
type="submit"
class="btn btn-primary"
@@ -539,7 +585,9 @@
<div v-if="createComponentModelModal.open" class="modal modal-open">
<div class="modal-box max-w-md">
<h3 class="font-bold text-lg mb-1">Nouveau modèle de composant</h3>
<h3 class="font-bold text-lg mb-1">
Nouveau modèle de composant
</h3>
<p class="text-sm text-gray-500 mb-4">
{{ createComponentModelModal.requirement?.label || createComponentModelModal.requirement?.typeComposant?.name || 'Famille de composants' }}
</p>
@@ -556,7 +604,7 @@
class="input input-bordered input-sm"
placeholder="Ex: Sangle 20 m"
required
/>
>
</div>
<div class="form-control">
@@ -569,11 +617,13 @@
class="textarea textarea-bordered textarea-sm"
rows="3"
placeholder="Notes sur ce modèle"
></textarea>
/>
</div>
<div class="modal-action">
<button type="button" class="btn btn-outline" @click="closeCreateComponentModelModal">Annuler</button>
<button type="button" class="btn btn-outline" @click="closeCreateComponentModelModal">
Annuler
</button>
<button type="submit" class="btn btn-primary" :class="{ loading: createComponentModelModal.submitting }">
Créer
</button>
@@ -584,7 +634,9 @@
<div v-if="createPieceModelModal.open" class="modal modal-open">
<div class="modal-box max-w-md">
<h3 class="font-bold text-lg mb-1">Nouveau modèle de pièce</h3>
<h3 class="font-bold text-lg mb-1">
Nouveau modèle de pièce
</h3>
<p class="text-sm text-gray-500 mb-4">
{{ createPieceModelModal.requirement?.label || createPieceModelModal.requirement?.typePiece?.name || 'Groupe de pièces' }}
</p>
@@ -601,7 +653,7 @@
class="input input-bordered input-sm"
placeholder="Ex: Vis standard"
required
/>
>
</div>
<div class="form-control">
@@ -614,11 +666,13 @@
class="textarea textarea-bordered textarea-sm"
rows="3"
placeholder="Notes sur ce modèle"
></textarea>
/>
</div>
<div class="modal-action">
<button type="button" class="btn btn-outline" @click="closeCreatePieceModelModal">Annuler</button>
<button type="button" class="btn btn-outline" @click="closeCreatePieceModelModal">
Annuler
</button>
<button type="submit" class="btn btn-primary" :class="{ loading: createPieceModelModal.submitting }">
Créer
</button>
@@ -657,7 +711,7 @@ const newMachine = reactive({
name: '',
siteId: '',
typeMachineId: '',
reference: '',
reference: ''
})
const componentRequirementSelections = reactive({})
@@ -670,7 +724,7 @@ const createComponentModelModal = reactive({
entryIndex: null,
name: '',
description: '',
submitting: false,
submitting: false
})
const createPieceModelModal = reactive({
@@ -680,14 +734,14 @@ const createPieceModelModal = reactive({
entryIndex: null,
name: '',
description: '',
submitting: false,
submitting: false
})
const selectedMachineType = computed(() => {
if (!newMachine.typeMachineId) {
return null
}
return machineTypes.value.find((type) => type.id === newMachine.typeMachineId) || null
return machineTypes.value.find(type => type.id === newMachine.typeMachineId) || null
})
const getStatusBadgeClass = (status) => {
@@ -700,8 +754,8 @@ const getStatusBadgeClass = (status) => {
return 'badge-error'
}
const getComponentRequirementEntries = (requirementId) => componentRequirementSelections[requirementId] || []
const getPieceRequirementEntries = (requirementId) => pieceRequirementSelections[requirementId] || []
const getComponentRequirementEntries = requirementId => componentRequirementSelections[requirementId] || []
const getPieceRequirementEntries = requirementId => pieceRequirementSelections[requirementId] || []
const machinePreview = computed(() => {
const type = selectedMachineType.value
@@ -711,7 +765,7 @@ const machinePreview = computed(() => {
const trimmedName = (newMachine.name || '').trim()
const currentSite = newMachine.siteId
? sites.value.find((site) => site.id === newMachine.siteId) || null
? sites.value.find(site => site.id === newMachine.siteId) || null
: null
const trimmedReference = (newMachine.reference || '').trim()
@@ -720,26 +774,26 @@ const machinePreview = computed(() => {
key: 'name',
label: 'Nom',
display: trimmedName || 'À renseigner',
status: trimmedName ? 'complete' : 'missing',
status: trimmedName ? 'complete' : 'missing'
},
{
key: 'site',
label: 'Site',
display: currentSite?.name || 'Sélectionner un site',
status: currentSite ? 'complete' : 'missing',
status: currentSite ? 'complete' : 'missing'
},
{
key: 'type',
label: 'Type sélectionné',
display: type.name,
status: 'complete',
status: 'complete'
},
{
key: 'reference',
label: 'Référence',
display: trimmedReference || 'Non renseignée',
status: trimmedReference ? 'complete' : 'optional',
},
status: trimmedReference ? 'complete' : 'optional'
}
]
const baseIssues = []
@@ -749,20 +803,20 @@ const machinePreview = computed(() => {
if (!currentSite) {
baseIssues.push({ message: "Sélectionner un site d'affectation.", kind: 'error', anchor: 'machine-field-site' })
}
const baseStatus = baseIssues.some((issue) => issue.kind === 'error') ? 'error' : 'ready'
const baseStatus = baseIssues.some(issue => issue.kind === 'error') ? 'error' : 'ready'
const resolveComponentModel = (requirement, modelId) => {
if (!modelId) {
return null
}
return (getComponentModelsForType(requirement.typeComposantId) || []).find((model) => model.id === modelId) || null
return (getComponentModelsForType(requirement.typeComposantId) || []).find(model => model.id === modelId) || null
}
const resolvePieceModel = (requirement, modelId) => {
if (!modelId) {
return null
}
return (getPieceModelsForType(requirement.typePieceId) || []).find((model) => model.id === modelId) || null
return (getPieceModelsForType(requirement.typePieceId) || []).find(model => model.id === modelId) || null
}
const componentGroups = (type.componentRequirements || []).map((requirement) => {
@@ -776,7 +830,7 @@ const machinePreview = computed(() => {
mode: 'model',
status: model ? 'complete' : 'pending',
title: model ? model.name : 'Sélectionner un modèle',
subtitle: model?.description || null,
subtitle: model?.description || null
}
}
const manualName = (entry.name || '').trim()
@@ -785,13 +839,13 @@ const machinePreview = computed(() => {
mode: 'manual',
status: manualName ? 'complete' : 'pending',
title: manualName || 'Nom à renseigner',
subtitle: manualName ? null : null,
subtitle: manualName ? null : null
}
})
const min = requirement.minCount ?? (requirement.required ? 1 : 0)
const max = requirement.maxCount ?? null
const completed = normalizedEntries.filter((entry) => entry.status === 'complete').length
const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
const issues = []
if (completed < min) {
@@ -802,15 +856,15 @@ const machinePreview = computed(() => {
issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `component-group-${requirement.id}` })
}
if (!requirement.allowNewModels && normalizedEntries.some((entry) => entry.mode === 'manual' && entry.status === 'complete')) {
if (!requirement.allowNewModels && normalizedEntries.some(entry => entry.mode === 'manual' && entry.status === 'complete')) {
issues.push({ message: "Ce groupe n'autorise que les modèles existants.", kind: 'error', anchor: `component-group-${requirement.id}` })
}
if (normalizedEntries.some((entry) => entry.status !== 'complete')) {
if (normalizedEntries.some(entry => entry.status !== 'complete')) {
issues.push({ message: 'Compléter les sélections restantes.', kind: 'warning', anchor: `component-group-${requirement.id}` })
}
const status = issues.some((issue) => issue.kind === 'error')
const status = issues.some(issue => issue.kind === 'error')
? 'error'
: issues.length > 0
? 'warning'
@@ -826,7 +880,7 @@ const machinePreview = computed(() => {
issues,
completed,
total: normalizedEntries.length,
status,
status
}
})
@@ -839,13 +893,13 @@ const machinePreview = computed(() => {
key: `${requirement.id}-${index}`,
status: model ? 'complete' : 'pending',
title: model ? model.name : 'Sélectionner un modèle',
subtitle: model?.description || null,
subtitle: model?.description || null
}
})
const min = requirement.minCount ?? (requirement.required ? 1 : 0)
const max = requirement.maxCount ?? null
const completed = normalizedEntries.filter((entry) => entry.status === 'complete').length
const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
const issues = []
if (completed < min) {
@@ -856,11 +910,11 @@ const machinePreview = computed(() => {
issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `piece-group-${requirement.id}` })
}
if (normalizedEntries.some((entry) => entry.status !== 'complete')) {
if (normalizedEntries.some(entry => entry.status !== 'complete')) {
issues.push({ message: 'Compléter les sélections restantes.', kind: 'warning', anchor: `piece-group-${requirement.id}` })
}
const status = issues.some((issue) => issue.kind === 'error')
const status = issues.some(issue => issue.kind === 'error')
? 'error'
: issues.length > 0
? 'warning'
@@ -876,20 +930,20 @@ const machinePreview = computed(() => {
issues,
completed,
total: normalizedEntries.length,
status,
status
}
})
const aggregatedIssues = [
...baseIssues.map((issue) => ({ ...issue, scope: 'Informations générales' })),
...componentGroups.flatMap((group) => group.issues.map((issue) => ({ ...issue, scope: group.label }))),
...pieceGroups.flatMap((group) => group.issues.map((issue) => ({ ...issue, scope: group.label }))),
...baseIssues.map(issue => ({ ...issue, scope: 'Informations générales' })),
...componentGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
...pieceGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label })))
]
const statuses = [
baseStatus,
...componentGroups.map((group) => group.status),
...pieceGroups.map((group) => group.status),
...componentGroups.map(group => group.status),
...pieceGroups.map(group => group.status)
]
const overallStatus = statuses.includes('error')
@@ -902,7 +956,7 @@ const machinePreview = computed(() => {
base: {
fields: baseFields,
issues: baseIssues,
status: baseStatus,
status: baseStatus
},
componentGroups,
pieceGroups,
@@ -910,11 +964,11 @@ const machinePreview = computed(() => {
name: type.name,
category: type.category || null,
hasStructuredDefinition:
(type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0,
(type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
},
status: overallStatus,
ready: overallStatus === 'ready',
issues: aggregatedIssues,
issues: aggregatedIssues
}
})
@@ -922,7 +976,7 @@ const blockingPreviewIssues = computed(() => {
if (!machinePreview.value) {
return []
}
return machinePreview.value.issues.filter((issue) => issue.kind === 'error')
return machinePreview.value.issues.filter(issue => issue.kind === 'error')
})
const canCreateMachine = computed(() => {
@@ -943,9 +997,9 @@ const scrollToAnchor = (anchor) => {
return
}
target.scrollIntoView({ behavior: 'smooth', block: 'center' })
highlightClasses.forEach((cls) => target.classList.add(cls))
highlightClasses.forEach(cls => target.classList.add(cls))
window.setTimeout(() => {
highlightClasses.forEach((cls) => target.classList.remove(cls))
highlightClasses.forEach(cls => target.classList.remove(cls))
}, 1500)
}
@@ -968,11 +1022,11 @@ const clearRequirementSelections = () => {
const createComponentSelectionEntry = () => ({
mode: 'model',
componentModelId: '',
name: '',
name: ''
})
const createPieceSelectionEntry = () => ({
pieceModelId: '',
pieceModelId: ''
})
const addComponentSelectionEntry = (requirement) => {
@@ -993,7 +1047,7 @@ const removeComponentSelectionEntry = (requirementId, index) => {
const setComponentSelectionMode = (requirementId, index, mode) => {
const entries = getComponentRequirementEntries(requirementId)
componentRequirementSelections[requirementId] = entries.map((entry, i) => {
if (i !== index) return entry
if (i !== index) { return entry }
if (mode === 'model') {
return { ...entry, mode: 'model', componentModelId: entry.componentModelId || '', name: '' }
}
@@ -1055,7 +1109,7 @@ const validateRequirementSelections = (type) => {
errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" ne peut dépasser ${max} élément(s).`)
}
if (!requirement.allowNewModels && usableEntries.some((entry) => entry.mode === 'manual')) {
if (!requirement.allowNewModels && usableEntries.some(entry => entry.mode === 'manual')) {
errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" n'autorise que les modèles existants.`)
}
@@ -1063,14 +1117,14 @@ const validateRequirementSelections = (type) => {
if (entry.mode === 'model') {
componentSelectionsPayload.push({
requirementId: requirement.id,
componentModelId: entry.componentModelId,
componentModelId: entry.componentModelId
})
} else {
componentSelectionsPayload.push({
requirementId: requirement.id,
definition: {
name: entry.name.trim(),
},
name: entry.name.trim()
}
})
}
})
@@ -1078,7 +1132,7 @@ const validateRequirementSelections = (type) => {
for (const requirement of type.pieceRequirements || []) {
const entries = getPieceRequirementEntries(requirement.id)
const usableEntries = entries.filter((entry) => !!entry.pieceModelId)
const usableEntries = entries.filter(entry => !!entry.pieceModelId)
const min = requirement.minCount ?? (requirement.required ? 1 : 0)
const max = requirement.maxCount ?? null
@@ -1094,7 +1148,7 @@ const validateRequirementSelections = (type) => {
usableEntries.forEach((entry) => {
pieceSelectionsPayload.push({
requirementId: requirement.id,
pieceModelId: entry.pieceModelId,
pieceModelId: entry.pieceModelId
})
})
}
@@ -1106,7 +1160,7 @@ const validateRequirementSelections = (type) => {
return {
valid: true,
componentSelections: componentSelectionsPayload,
pieceSelections: pieceSelectionsPayload,
pieceSelections: pieceSelectionsPayload
}
}
@@ -1139,17 +1193,17 @@ const submitCreateComponentModel = async () => {
name: createComponentModelModal.name.trim(),
description: createComponentModelModal.description.trim() || undefined,
typeComposantId: createComponentModelModal.requirement.typeComposantId,
structure: {},
structure: {}
}
const result = await createComponentModel(payload)
if (result.success) {
await loadComponentModels(createComponentModelModal.requirement.typeComposantId)
const entries = getComponentRequirementEntries(createComponentModelModal.requirement.id)
const targetIndex = entries.findIndex((entry) => entry.mode === 'model' && !entry.componentModelId)
const targetIndex = entries.findIndex(entry => entry.mode === 'model' && !entry.componentModelId)
if (targetIndex !== -1) {
updateComponentSelectionEntry(createComponentModelModal.requirement.id, targetIndex, {
mode: 'model',
componentModelId: result.data.id,
componentModelId: result.data.id
})
} else {
addComponentSelectionEntry(createComponentModelModal.requirement)
@@ -1158,8 +1212,8 @@ const submitCreateComponentModel = async () => {
getComponentRequirementEntries(createComponentModelModal.requirement.id).length - 1,
{
mode: 'model',
componentModelId: result.data.id,
},
componentModelId: result.data.id
}
)
}
toast.showSuccess(`Modèle "${result.data.name}" créé`)
@@ -1201,16 +1255,16 @@ const submitCreatePieceModel = async () => {
name: createPieceModelModal.name.trim(),
description: createPieceModelModal.description.trim() || undefined,
typePieceId: createPieceModelModal.requirement.typePieceId,
structure: {},
structure: {}
}
const result = await createPieceModel(payload)
if (result.success) {
await loadPieceModels(createPieceModelModal.requirement.typePieceId)
const entries = getPieceRequirementEntries(createPieceModelModal.requirement.id)
const targetIndex = entries.findIndex((entry) => !entry.pieceModelId)
const targetIndex = entries.findIndex(entry => !entry.pieceModelId)
if (targetIndex !== -1) {
updatePieceSelectionEntry(createPieceModelModal.requirement.id, targetIndex, {
pieceModelId: result.data.id,
pieceModelId: result.data.id
})
} else {
addPieceSelectionEntry(createPieceModelModal.requirement)
@@ -1218,8 +1272,8 @@ const submitCreatePieceModel = async () => {
createPieceModelModal.requirement.id,
getPieceRequirementEntries(createPieceModelModal.requirement.id).length - 1,
{
pieceModelId: result.data.id,
},
pieceModelId: result.data.id
}
)
}
toast.showSuccess(`Modèle "${result.data.name}" créé`)
@@ -1262,8 +1316,8 @@ const initializeRequirementSelections = async (type) => {
})
await Promise.all([
...Array.from(componentTypeIds).map((id) => loadComponentModels(id)),
...Array.from(pieceTypeIds).map((id) => loadPieceModels(id)),
...Array.from(componentTypeIds).map(id => loadComponentModels(id)),
...Array.from(pieceTypeIds).map(id => loadPieceModels(id))
])
}
@@ -1287,7 +1341,7 @@ const finalizeMachineCreation = async () => {
name: newMachine.name,
siteId: newMachine.siteId,
reference: newMachine.reference,
typeMachineId: type.id,
typeMachineId: type.id
}
const hasRequirements = (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
@@ -1310,9 +1364,9 @@ const finalizeMachineCreation = async () => {
...(hasRequirements
? {
componentSelections,
pieceSelections,
pieceSelections
}
: {}),
: {})
}
const result = hasRequirements
@@ -1344,7 +1398,7 @@ watch(
return
}
const type = machineTypes.value.find((item) => item.id === typeId)
const type = machineTypes.value.find(item => item.id === typeId)
if (!type) {
return
}
@@ -1356,7 +1410,7 @@ watch(
onMounted(async () => {
await Promise.all([
loadSites(),
loadMachineTypes(),
loadMachineTypes()
])
})
</script>

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

@@ -1,7 +1,9 @@
<template>
<div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center">
<div class="space-y-2">
<h1 class="text-3xl font-semibold">Gestion des catalogues</h1>
<h1 class="text-3xl font-semibold">
Gestion des catalogues
</h1>
<p class="text-sm text-gray-500">
Administrez les modèles de composants et de pièces utilisés lors de la configuration des machines.
</p>

78
app/pages/pieces-catalog.vue
View File

@@ -2,12 +2,20 @@
<main class="container mx-auto px-6 py-8 space-y-8">
<header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-gray-800">Catalogue de pièce</h1>
<p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque groupe de pièces.</p>
<h1 class="text-3xl font-bold text-gray-800">
Catalogue de pièce
</h1>
<p class="text-sm text-gray-500">
Gérez les modèles disponibles pour chaque groupe de pièces.
</p>
</div>
<div class="tabs tabs-boxed">
<NuxtLink to="/component-catalog" class="tab">Composants</NuxtLink>
<NuxtLink to="/pieces-catalog" class="tab tab-active">Pièces</NuxtLink>
<NuxtLink to="/component-catalog" class="tab">
Composants
</NuxtLink>
<NuxtLink to="/pieces-catalog" class="tab tab-active">
Pièces
</NuxtLink>
</div>
</header>
@@ -32,7 +40,7 @@
type="search"
placeholder="Rechercher un modèle..."
class="input input-bordered input-sm"
/>
>
</label>
<span class="text-xs text-gray-500">{{ filteredModels.length }} modèle(s)</span>
</div>
@@ -43,7 +51,7 @@
</div>
<div v-if="loadingPieceModels" class="flex justify-center py-16">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="filteredModels.length === 0" class="py-16 text-center text-sm text-gray-500">
@@ -55,10 +63,16 @@
<thead>
<tr class="text-sm text-gray-500">
<th>Nom</th>
<th class="hidden md:table-cell">Description</th>
<th class="hidden md:table-cell">
Description
</th>
<th>Type</th>
<th class="hidden lg:table-cell">Modifié</th>
<th class="text-right">Actions</th>
<th class="hidden lg:table-cell">
Modifié
</th>
<th class="text-right">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -75,9 +89,13 @@
<span class="font-medium">{{ model.name }}</span>
</div>
</td>
<td class="hidden md:table-cell">{{ model.description || '—' }}</td>
<td class="hidden md:table-cell">
{{ model.description || '—' }}
</td>
<td>{{ model.typePiece?.name || 'Non défini' }}</td>
<td class="hidden lg:table-cell text-xs text-gray-500">{{ formatFrenchDate(model.updatedAt || model.createdAt) }}</td>
<td class="hidden lg:table-cell text-xs text-gray-500">
{{ formatFrenchDate(model.updatedAt || model.createdAt) }}
</td>
<td class="text-right space-x-2">
<button type="button" class="btn btn-sm btn-outline" @click="startEdit(model)">
Éditer
@@ -118,7 +136,7 @@
class="input input-bordered input-sm"
placeholder="Nom du modèle"
required
/>
>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Description</span></label>
@@ -127,7 +145,7 @@
class="textarea textarea-bordered textarea-sm"
rows="3"
placeholder="Notes optionnelles"
></textarea>
/>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Type de pièce</span></label>
@@ -136,14 +154,18 @@
class="select select-bordered select-sm"
required
>
<option value="" disabled>Sélectionner un type</option>
<option value="" disabled>
Sélectionner un type
</option>
<option v-for="type in pieceTypes" :key="type.id" :value="type.id">
{{ type.name }}
</option>
</select>
</div>
<div class="divider my-0">Structure</div>
<div class="divider my-0">
Structure
</div>
<PieceModelStructureEditor v-model="form.data.structure" />
<div class="rounded-lg border border-base-200 bg-base-200/60 p-3 text-xs text-gray-500">
@@ -181,7 +203,7 @@ const {
updatePieceModel,
deletePieceModel,
loadingPieceModels,
getPieceModelsForType,
getPieceModelsForType
} = usePieceModels()
const { showError, showSuccess } = useToast()
@@ -206,15 +228,15 @@ const form = reactive({
name: '',
description: '',
typePieceId: '',
structure: defaultStructure(),
},
structure: defaultStructure()
}
})
const ensureTypeSelected = () => {
if (form.data.typePieceId && pieceTypes.value.some((type) => type.id === form.data.typePieceId)) {
if (form.data.typePieceId && pieceTypes.value.some(type => type.id === form.data.typePieceId)) {
return
}
if (selectedType.value !== 'all' && pieceTypes.value.some((type) => type.id === selectedType.value)) {
if (selectedType.value !== 'all' && pieceTypes.value.some(type => type.id === selectedType.value)) {
form.data.typePieceId = selectedType.value
return
}
@@ -228,7 +250,7 @@ const startCreate = () => {
name: '',
description: '',
typePieceId: selectedType.value !== 'all' ? selectedType.value : '',
structure: defaultStructure(),
structure: defaultStructure()
}
ensureTypeSelected()
}
@@ -240,7 +262,7 @@ const startEdit = (model) => {
name: model.name,
description: model.description || '',
typePieceId: model.typePieceId || model.typePiece?.id || '',
structure: cloneStructure(model.structure || defaultStructure()),
structure: cloneStructure(model.structure || defaultStructure())
}
}
@@ -255,9 +277,9 @@ const filteredModels = computed(() => {
const term = searchQuery.value.toLowerCase()
return list.filter((model) => {
return (
model.name?.toLowerCase().includes(term)
|| model.description?.toLowerCase().includes(term)
|| model.typePiece?.name?.toLowerCase().includes(term)
model.name?.toLowerCase().includes(term) ||
model.description?.toLowerCase().includes(term) ||
model.typePiece?.name?.toLowerCase().includes(term)
)
})
})
@@ -284,7 +306,7 @@ const handleSubmit = async () => {
name: form.data.name.trim(),
description: form.data.description.trim() || undefined,
typePieceId: form.data.typePieceId,
structure,
structure
})
if (!result.success) {
showError(result.error || 'Impossible de créer le modèle')
@@ -296,7 +318,7 @@ const handleSubmit = async () => {
name: form.data.name.trim(),
description: form.data.description.trim() || undefined,
typePieceId: form.data.typePieceId,
structure,
structure
})
if (!result.success) {
showError(result.error || 'Impossible de mettre à jour le modèle')
@@ -314,7 +336,7 @@ const handleSubmit = async () => {
const confirmDelete = async (model) => {
const ok = confirm(`Supprimer le modèle "${model.name}" ?`)
if (!ok) return
if (!ok) { return }
const result = await deletePieceModel(model.id)
if (!result.success) {
showError(result.error || 'Impossible de supprimer ce modèle')

23
app/pages/profiles/index.vue
View File

@@ -3,26 +3,30 @@
<div class="w-full max-w-2xl">
<div class="card bg-base-100 shadow-2xl">
<div class="card-body">
<h1 class="text-2xl font-bold mb-2">Choisir un profil</h1>
<h1 class="text-2xl font-bold mb-2">
Choisir un profil
</h1>
<p class="text-sm text-base-content/70 mb-6">
Sélectionnez votre profil pour accéder à l'application. La création et la gestion se font via le menu utilisateur.
</p>
<section class="space-y-4">
<header class="flex items-center justify-between">
<h2 class="font-semibold">Profils disponibles</h2>
<h2 class="font-semibold">
Profils disponibles
</h2>
<button
type="button"
class="btn btn-ghost btn-xs"
@click="refreshProfiles"
:disabled="loadingProfiles"
@click="refreshProfiles"
>
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
<span v-else>Rafraîchir</span>
</button>
</header>
<div class="space-y-2 max-h-64 overflow-y-auto" v-if="profiles.length">
<div v-if="profiles.length" class="space-y-2 max-h-64 overflow-y-auto">
<button
v-for="profile in profiles"
:key="profile.id"
@@ -34,10 +38,12 @@
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
</button>
</div>
<p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
<p v-else class="text-sm text-base-content/60">
Aucun profil enregistré.
</p>
</section>
<footer class="mt-6 flex justify-between items-center" v-if="activeProfile">
<footer v-if="activeProfile" class="mt-6 flex justify-between items-center">
<div class="text-sm text-base-content/70">
Profil actuel :
<span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
@@ -55,8 +61,7 @@
<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProfiles } from '#imports'
import { useProfileSession } from '#imports'
import { useProfiles, useProfileSession } from '#imports'
import IconLucideChevronRight from '~icons/lucide/chevron-right'
const router = useRouter()

62
app/pages/profiles/manage.vue
View File

@@ -3,32 +3,44 @@
<div class="max-w-4xl mx-auto">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold">Gestion des profils</h1>
<p class="text-sm text-base-content/70">Sélectionnez, créez ou supprimez des profils.</p>
<h1 class="text-2xl font-bold">
Gestion des profils
</h1>
<p class="text-sm text-base-content/70">
Sélectionnez, créez ou supprimez des profils.
</p>
</div>
<NuxtLink to="/" class="btn btn-ghost btn-sm">Retour</NuxtLink>
<NuxtLink to="/" class="btn btn-ghost btn-sm">
Retour
</NuxtLink>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<section class="card bg-base-100 shadow-lg">
<div class="card-body space-y-4">
<header class="flex items-center justify-between">
<h2 class="card-title text-lg">Profils existants</h2>
<button type="button" class="btn btn-ghost btn-xs" @click="refresh" :disabled="loadingProfiles">
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
<h2 class="card-title text-lg">
Profils existants
</h2>
<button type="button" class="btn btn-ghost btn-xs" :disabled="loadingProfiles" @click="refresh">
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
<span v-else>Rafraîchir</span>
</button>
</header>
<div class="space-y-2 max-h-80 overflow-y-auto" v-if="profiles.length">
<div v-if="profiles.length" class="space-y-2 max-h-80 overflow-y-auto">
<div
v-for="profile in profiles"
:key="profile.id"
class="flex items-center justify-between rounded-lg border border-base-200 bg-base-100 px-3 py-2"
>
<div>
<p class="font-medium">{{ profile.firstName }} {{ profile.lastName }}</p>
<p class="text-xs text-base-content/60">ID : {{ profile.id }}</p>
<p class="font-medium">
{{ profile.firstName }} {{ profile.lastName }}
</p>
<p class="text-xs text-base-content/60">
ID : {{ profile.id }}
</p>
</div>
<div class="flex items-center gap-2">
<button
@@ -44,19 +56,23 @@
class="btn btn-error btn-sm"
@click="remove(profile.id)"
>
<span v-if="deleting === profile.id" class="loading loading-spinner loading-xs"></span>
<span v-if="deleting === profile.id" class="loading loading-spinner loading-xs" />
<span v-else>Supprimer</span>
</button>
</div>
</div>
</div>
<p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
<p v-else class="text-sm text-base-content/60">
Aucun profil enregistré.
</p>
</div>
</section>
<section class="card bg-base-100 shadow-lg">
<div class="card-body space-y-4">
<h2 class="card-title text-lg">Créer un profil</h2>
<h2 class="card-title text-lg">
Créer un profil
</h2>
<form class="space-y-3" @submit.prevent="create">
<div class="form-control">
<label class="label"><span class="label-text">Prénom</span></label>
@@ -66,7 +82,7 @@
class="input input-bordered"
placeholder="Prénom"
required
/>
>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Nom</span></label>
@@ -76,10 +92,10 @@
class="input input-bordered"
placeholder="Nom"
required
/>
>
</div>
<button type="submit" class="btn btn-primary w-full" :disabled="creating">
<span v-if="creating" class="loading loading-spinner loading-sm"></span>
<span v-if="creating" class="loading loading-spinner loading-sm" />
<span v-else>Créer et activer</span>
</button>
</form>
@@ -87,10 +103,14 @@
</section>
</div>
<div class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4" v-if="activeProfile">
<div v-if="activeProfile" class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4">
<div>
<p class="text-sm text-base-content/70">Profil actif :</p>
<p class="font-semibold text-base-content">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</p>
<p class="text-sm text-base-content/70">
Profil actif :
</p>
<p class="font-semibold text-base-content">
{{ activeProfile.firstName }} {{ activeProfile.lastName }}
</p>
</div>
<button type="button" class="btn btn-outline" @click="handleLogout">
Déconnexion
@@ -111,7 +131,7 @@ const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfi
const createForm = reactive({
firstName: '',
lastName: '',
lastName: ''
})
const creating = ref(false)
@@ -136,7 +156,7 @@ const create = async () => {
try {
const profile = await createProfile({
firstName: createForm.firstName,
lastName: createForm.lastName,
lastName: createForm.lastName
})
createForm.firstName = ''
createForm.lastName = ''
@@ -150,7 +170,7 @@ const create = async () => {
}
const remove = async (profileId) => {
if (!confirm('Supprimer ce profil ?')) return
if (!confirm('Supprimer ce profil ?')) { return }
deleting.value = profileId
try {
await deleteProfile(profileId)

18
app/pages/sites.vue
View File

@@ -8,23 +8,29 @@
<div class="my-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Sites</h2>
<button @click="openCreateSiteModal" class="btn btn-primary">
<h2 class="text-2xl font-bold">
Sites
</h2>
<button class="btn btn-primary" @click="openCreateSiteModal">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Ajouter un site
</button>
</div>
<div v-if="loading" class="flex justify-center items-center py-12">
<span class="loading loading-spinner loading-lg"></span>
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="sites.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucun site trouvé</h3>
<p class="text-gray-500 mb-4">Commencez par ajouter votre premier site.</p>
<button @click="openCreateSiteModal" class="btn btn-primary">
<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 class="btn btn-primary" @click="openCreateSiteModal">
Ajouter un site
</button>
</div>

21
app/pages/type/[id].vue
View File

@@ -1,10 +1,11 @@
<template>
<main class="container mx-auto px-6 py-8">
<!-- Loading State -->
<div v-if="loading" class="my-8 text-center">
<div class="loading loading-spinner loading-lg"></div>
<p class="mt-4 text-gray-600">Chargement du type...</p>
<div class="loading loading-spinner loading-lg" />
<p class="mt-4 text-gray-600">
Chargement du type...
</p>
</div>
<!-- Type Details -->
@@ -31,7 +32,9 @@
<!-- Familles de composants -->
<div v-if="componentRequirementCount > 0" class="mb-8 space-y-3">
<h3 class="text-lg font-semibold">Familles de composants</h3>
<h3 class="text-lg font-semibold">
Familles de composants
</h3>
<div class="space-y-3">
<div
v-for="requirement in type.componentRequirements"
@@ -61,7 +64,9 @@
<!-- Groupes de pièces -->
<div v-if="pieceRequirementCount > 0" class="mb-8 space-y-3">
<h3 class="text-lg font-semibold">Groupes de pièces</h3>
<h3 class="text-lg font-semibold">
Groupes de pièces
</h3>
<div class="space-y-3">
<div
v-for="requirement in type.pieceRequirements"
@@ -96,7 +101,9 @@
<div v-else class="my-8 text-center">
<div class="alert alert-error">
<div>
<h3 class="font-bold">Type non trouvé</h3>
<h3 class="font-bold">
Type non trouvé
</h3>
<p>Le type de machine demandé n'existe pas.</p>
</div>
</div>
@@ -155,4 +162,4 @@ onMounted(async () => {
console.log('Loading finished, loading.value:', loading.value)
}
})
</script>
</script>

38
app/pages/type/edit/[id].vue
View File

@@ -1,11 +1,11 @@
<template>
<main class="container mx-auto px-6 py-8">
<!-- Loading State -->
<div v-if="loading" class="my-8 text-center">
<div class="loading loading-spinner loading-lg"></div>
<p class="mt-4 text-gray-600">Chargement du type...</p>
<div class="loading loading-spinner loading-lg" />
<p class="mt-4 text-gray-600">
Chargement du type...
</p>
</div>
<!-- Edit Form -->
@@ -21,8 +21,8 @@
</NuxtLink>
</div>
<TypeEditForm
v-model="editedType"
<TypeEditForm
v-model="editedType"
:saving="saving"
@submit="saveChanges"
/>
@@ -34,7 +34,9 @@
<div v-else class="my-8 text-center">
<div class="alert alert-error">
<div>
<h3 class="font-bold">Type non trouvé</h3>
<h3 class="font-bold">
Type non trouvé
</h3>
<p>Le type de machine demandé n'existe pas.</p>
</div>
</div>
@@ -68,11 +70,11 @@ const editedType = ref({
maintenanceFrequency: '',
customFields: [],
componentRequirements: [],
pieceRequirements: [],
pieceRequirements: []
})
const parseOptions = (field = {}) => {
if (field.type !== 'select') return []
if (field.type !== 'select') { return [] }
if (field.optionsText && typeof field.optionsText === 'string') {
return field.optionsText
.split('\n')
@@ -114,7 +116,7 @@ const normalizeComponentRequirements = (requirements = []) =>
minCount: toIntegerOrNull(req.minCount, 1),
maxCount: toIntegerOrNull(req.maxCount, null),
required: req.required ?? true,
allowNewModels: req.allowNewModels ?? true,
allowNewModels: req.allowNewModels ?? true
}))
const normalizePieceRequirements = (requirements = []) =>
@@ -126,7 +128,7 @@ const normalizePieceRequirements = (requirements = []) =>
minCount: toIntegerOrNull(req.minCount, 0),
maxCount: toIntegerOrNull(req.maxCount, null),
required: req.required ?? false,
allowNewModels: req.allowNewModels ?? true,
allowNewModels: req.allowNewModels ?? true
}))
const saveChanges = async () => {
@@ -140,11 +142,11 @@ const saveChanges = async () => {
...currentEditedType,
customFields: normalizeCustomFields(currentEditedType.customFields),
componentRequirements: normalizeComponentRequirements(currentEditedType.componentRequirements),
pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements),
pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements)
}
const result = await updateMachineType(type.value.id, updatedType)
if (result.success) {
showSuccess('Type mis à jour avec succès !')
router.push('/machine-skeleton')
@@ -165,14 +167,14 @@ onMounted(async () => {
const typeId = route.params.id
console.log('=== EDIT TYPE PAGE LOADING ===')
console.log('Loading type with ID:', typeId)
const result = await getMachineTypeById(typeId)
console.log('API Result:', result)
if (result.success) {
type.value = result.data
console.log('Type loaded successfully:', type.value)
// Initialiser les données éditées
editedType.value = {
name: type.value.name || '',
@@ -181,7 +183,7 @@ onMounted(async () => {
maintenanceFrequency: type.value.maintenanceFrequency || '',
customFields: type.value.customFields || [],
componentRequirements: type.value.componentRequirements || [],
pieceRequirements: type.value.pieceRequirements || [],
pieceRequirements: type.value.pieceRequirements || []
}
} else {
console.error('Failed to load type:', result.error)
@@ -195,4 +197,4 @@ onMounted(async () => {
console.log('Loading finished, loading.value:', loading.value)
}
})
</script>
</script>