feat: improve machine component hierarchy handling

This commit is contained in:
Matthieu
2025-10-13 09:01:19 +02:00
parent 95c2a82689
commit 06ae0ca7aa
9 changed files with 1184 additions and 408 deletions

View File

@@ -4,14 +4,9 @@
<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="/machine-skeleton/new" class="btn btn-primary">
<IconLucidePlus
class="w-5 h-5 mr-2"
aria-hidden="true"
/>
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Créer un type
</NuxtLink>
</div>
@@ -51,23 +46,29 @@
<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" />
<span>{{ type.componentRequirements?.length || 0 }} famille(s) de composants</span>
<span
>{{ type.componentRequirements?.length || 0 }} famille(s) de
composants</span
>
</div>
<div class="flex items-center gap-2">
<IconLucideLayoutGrid class="w-4 h-4" aria-hidden="true" />
<span>{{ type.pieceRequirements?.length || 0 }} groupe(s) de pièces</span>
<span
>{{ type.pieceRequirements?.length || 0 }} groupe(s) de
pièces</span
>
</div>
</div>
<div class="card-actions justify-end mt-4">
<button class="btn btn-sm btn-error" @click.stop="confirmDeleteType(type)">
<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>
</div>
</div>
</div>
@@ -92,52 +93,59 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
import { useToast } from '~/composables/useToast'
import IconLucidePlus from '~icons/lucide/plus'
import IconLucidePackage from '~icons/lucide/package'
import IconLucideLayoutGrid from '~icons/lucide/layout-grid'
import { ref, computed, onMounted } from "vue";
import { useMachineTypesApi } from "~/composables/useMachineTypesApi";
import { useToast } from "~/composables/useToast";
import IconLucidePlus from "~icons/lucide/plus";
import IconLucidePackage from "~icons/lucide/package";
import IconLucideLayoutGrid from "~icons/lucide/layout-grid";
const { machineTypes, loading, loadMachineTypes, deleteMachineType } = useMachineTypesApi()
const { machineTypes, loading, loadMachineTypes, deleteMachineType } =
useMachineTypesApi();
const categories = ref([
'Toutes',
'Production',
'Transformation',
'Manutention',
'Traitement',
'Contrôle'
])
"Toutes",
"Production",
"Transformation",
"Manutention",
"Traitement",
"Contrôle",
]);
const selectedCategory = ref('Toutes')
const selectedCategory = ref("Toutes");
const filteredTypes = computed(() => {
if (selectedCategory.value === 'Toutes') {
return machineTypes.value
if (selectedCategory.value === "Toutes") {
return machineTypes.value;
}
return machineTypes.value.filter(type => type.category === selectedCategory.value)
})
return machineTypes.value.filter(
(type) => type.category === selectedCategory.value
);
});
const confirmDeleteType = async (type) => {
const { showError, showSuccess } = useToast()
const { showError, showSuccess } = useToast();
if (confirm(`Êtes-vous sûr de vouloir supprimer le type "${type.name}" ? Cette action est irréversible.`)) {
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)
const result = await deleteMachineType(type.id);
if (result.success) {
showSuccess(`Type "${type.name}" supprimé avec succès`)
showSuccess(`Type "${type.name}" supprimé 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}`);
}
}
}
};
// Load machine types on mount
onMounted(async () => {
await loadMachineTypes()
})
await loadMachineTypes();
});
</script>