feat: refactor type management screens
This commit is contained in:
Matthieu
@@ -24,6 +24,36 @@
|
||||
</h2>
|
||||
|
||||
<form @submit.prevent="generateType" class="space-y-6">
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click="toggleAllSections"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
v-if="allSectionsExpanded"
|
||||
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>
|
||||
{{ allSectionsExpanded ? 'Tout plier' : 'Tout déplier' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Basic Information -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="form-control">
|
||||
@@ -81,11 +111,31 @@
|
||||
|
||||
<!-- Machine Pieces (Root Level) -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Pièces de la machine</span>
|
||||
<span class="label-text-alt">Pièces directement attachées à la machine (optionnel)</span>
|
||||
</label>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection('machinePieces')"
|
||||
title="Plier / déplier les pièces"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': sections.machinePieces }"
|
||||
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>
|
||||
<label class="label m-0 flex flex-col items-start">
|
||||
<span class="label-text">Pièces de la machine</span>
|
||||
<span class="label-text-alt">Pièces directement attachées à la machine (optionnel)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sections.machinePieces" class="space-y-4">
|
||||
<div v-for="(piece, index) in newType.machinePieces" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h5 class="text-sm font-medium">Pièce {{ index + 1 }}</h5>
|
||||
@@ -221,12 +271,32 @@
|
||||
|
||||
<!-- Hierarchical Components -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Structure hiérarchique</span>
|
||||
<span class="label-text-alt">Définissez les composants, sous-composants et leurs pièces (optionnel)</span>
|
||||
</label>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection('components')"
|
||||
title="Plier / déplier la structure"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': sections.components }"
|
||||
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>
|
||||
<label class="label m-0 flex flex-col items-start">
|
||||
<span class="label-text">Structure hiérarchique</span>
|
||||
<span class="label-text-alt">Définissez les composants, sous-composants et leurs pièces (optionnel)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-if="sections.components" class="space-y-4">
|
||||
<!-- Root Components -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-sm font-semibold text-gray-700">Composants principaux :</h4>
|
||||
@@ -236,6 +306,22 @@
|
||||
class="border border-gray-200 rounded-lg p-4 bg-gray-50"
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-1"
|
||||
@click="toggleComponentDetails(index)"
|
||||
title="Plier / déplier le composant"
|
||||
>
|
||||
<svg
|
||||
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>
|
||||
</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="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>
|
||||
@@ -257,6 +343,8 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isComponentExpanded(index)">
|
||||
|
||||
<!-- Champs personnalisés du composant -->
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
@@ -882,7 +970,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="addComponent"
|
||||
@@ -899,11 +988,31 @@
|
||||
|
||||
<!-- Custom Fields -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Champs personnalisés</span>
|
||||
<span class="label-text-alt">Définissez des champs personnalisés pour ce type de machine (optionnel)</span>
|
||||
</label>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm p-1"
|
||||
@click="toggleSection('customFields')"
|
||||
title="Plier / déplier les champs personnalisés"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-90': sections.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>
|
||||
</button>
|
||||
<label class="label m-0 flex flex-col items-start">
|
||||
<span class="label-text">Champs personnalisés</span>
|
||||
<span class="label-text-alt">Définissez des champs personnalisés pour ce type de machine (optionnel)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sections.customFields" class="space-y-4">
|
||||
<div v-for="(field, index) in newType.customFields" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h5 class="text-sm font-medium">Champ personnalisé {{ index + 1 }}</h5>
|
||||
@@ -1043,7 +1152,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
|
||||
@@ -1071,6 +1180,33 @@ const newType = reactive({
|
||||
customFields: [] // Changed to empty array to make it optional
|
||||
})
|
||||
|
||||
const sections = reactive({
|
||||
machinePieces: true,
|
||||
components: true,
|
||||
customFields: true
|
||||
})
|
||||
const expandedComponents = reactive([])
|
||||
|
||||
const allSectionsExpanded = computed(() => sections.machinePieces && sections.components && sections.customFields)
|
||||
|
||||
const toggleSection = (section) => {
|
||||
sections[section] = !sections[section]
|
||||
}
|
||||
|
||||
const toggleAllSections = () => {
|
||||
const next = !allSectionsExpanded.value
|
||||
sections.machinePieces = next
|
||||
sections.components = next
|
||||
sections.customFields = next
|
||||
expandedComponents.splice(0, expandedComponents.length, ...newType.components.map(() => next))
|
||||
}
|
||||
|
||||
const isComponentExpanded = (index) => expandedComponents[index] ?? true
|
||||
|
||||
const toggleComponentDetails = (index) => {
|
||||
expandedComponents[index] = !isComponentExpanded(index)
|
||||
}
|
||||
|
||||
// Methods for hierarchical components
|
||||
const addComponent = () => {
|
||||
newType.components.push({
|
||||
@@ -1086,10 +1222,12 @@ const addComponent = () => {
|
||||
pieces: [{ name: '', customFields: [] }],
|
||||
customFields: []
|
||||
})
|
||||
expandedComponents.push(true)
|
||||
}
|
||||
|
||||
const removeComponent = (index) => {
|
||||
newType.components.splice(index, 1)
|
||||
expandedComponents.splice(index, 1)
|
||||
}
|
||||
|
||||
const addSubComponent = (component) => {
|
||||
@@ -1339,6 +1477,7 @@ const resetForm = () => {
|
||||
newType.components = [] // Reset to empty array
|
||||
newType.machinePieces = [] // Reset to empty array
|
||||
newType.customFields = [] // Reset to empty array
|
||||
expandedComponents.splice(0, expandedComponents.length)
|
||||
}
|
||||
|
||||
const generateType = async () => {
|
||||
@@ -1413,4 +1552,4 @@ onMounted(async () => {
|
||||
await loadMachineTypes()
|
||||
recentTypes.value = machineTypes.value.slice(-3).reverse()
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user