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

fix(ui) : move add buttons below last element in structure editors

Browse Source 
Place "Ajouter" buttons after the items list instead of in the section
header, so they always appear below the last added element.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-06 11:28:07 +01:00
parent e732585e63
commit 592beb0fa7
5 changed files with 109 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/PieceModelStructureEditor.vue
View File

@@ -1,19 +1,13 @@
<template> <template>
<div class="space-y-6"> <div class="space-y-6">
<section class="space-y-3"> <section class="space-y-3">
<header class="flex items-center justify-between"> <header>
<div>
<h3 class="text-sm font-semibold"> <h3 class="text-sm font-semibold">
Produits inclus par défaut Produits inclus par défaut
</h3> </h3>
<p class="text-xs text-base-content/70"> <p class="text-xs text-base-content/70">
Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie. Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
</p> </p>
</div>
<button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter
</button>
</header> </header>
<p v-if="!products.length" class="text-xs text-gray-500"> <p v-if="!products.length" class="text-xs text-gray-500">
@@ -71,18 +65,16 @@
</div> </div>
</li> </li>
</ul> </ul>
</section> <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
<section class="space-y-3">
<header class="flex items-center justify-between">
<h3 class="text-sm font-semibold">
Champs personnalisés
</h3>
<button type="button" class="btn btn-outline btn-xs" @click="addField">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" /> <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter Ajouter
</button> </button>
</header> </section>
<section class="space-y-3">
<h3 class="text-sm font-semibold">
Champs personnalisés
</h3>
<p v-if="!fields.length" class="text-xs text-gray-500"> <p v-if="!fields.length" class="text-xs text-gray-500">
Aucun champ personnalisé n'a encore été défini. Aucun champ personnalisé n'a encore été défini.
@@ -172,6 +164,10 @@
</div> </div>
</li> </li>
</ul> </ul>
<button type="button" class="btn btn-outline btn-xs" @click="addField">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter
</button>
</section> </section>
</div> </div>
</template> </template>

64
app/components/StructureNodeEditor.vue
View File

@@ -70,15 +70,9 @@
<div class="px-4 py-4 space-y-5"> <div class="px-4 py-4 space-y-5">
<section v-if="isRoot" class="space-y-3"> <section v-if="isRoot" class="space-y-3">
<div class="flex items-center justify-between gap-2">
<h4 :class="headingClass"> <h4 :class="headingClass">
{{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }} {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
</h4> </h4>
<button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter
</button>
</div>
<p v-if="!(node.customFields?.length)" class="text-xs text-gray-500"> <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
Aucun champ n'a encore été défini. Aucun champ n'a encore été défini.
</p> </p>
@@ -155,18 +149,16 @@
</div> </div>
</div> </div>
</div> </div>
</section> <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
<section v-if="isRoot" class="space-y-3">
<div class="flex items-center justify-between gap-2">
<h4 :class="headingClass">
{{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
</h4>
<button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" /> <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter Ajouter
</button> </button>
</div> </section>
<section v-if="isRoot" class="space-y-3">
<h4 :class="headingClass">
{{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
</h4>
<p v-if="!(node.products?.length)" class="text-xs text-gray-500"> <p v-if="!(node.products?.length)" class="text-xs text-gray-500">
Aucun produit défini. Aucun produit défini.
</p> </p>
@@ -228,18 +220,16 @@
</div> </div>
</div> </div>
</div> </div>
</section> <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
<section v-if="isRoot" class="space-y-3">
<div class="flex items-center justify-between gap-2">
<h4 :class="headingClass">
{{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
</h4>
<button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" /> <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter Ajouter
</button> </button>
</div> </section>
<section v-if="isRoot" class="space-y-3">
<h4 :class="headingClass">
{{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
</h4>
<p v-if="!(node.pieces?.length)" class="text-xs text-gray-500"> <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
Aucune pièce définie. Aucune pièce définie.
</p> </p>
@@ -302,21 +292,14 @@
</div> </div>
</div> </div>
</div> </div>
</section> <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
<section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
<div class="flex items-center justify-between gap-2">
<h4 :class="headingClass">Sous-composants</h4>
<button
v-if="canManageSubcomponents && !restrictedMode"
type="button"
class="btn btn-outline btn-xs"
@click="addSubComponent"
>
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" /> <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter Ajouter
</button> </button>
</div> </section>
<section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
<h4 :class="headingClass">Sous-composants</h4>
<p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500"> <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle. Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
</p> </p>
@@ -357,6 +340,15 @@
/> />
</div> </div>
</div> </div>
<button
v-if="canManageSubcomponents && !restrictedMode"
type="button"
class="btn btn-outline btn-xs"
@click="addSubComponent"
>
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
Ajouter
</button>
</section> </section>
</div> </div>
</div> </div>

19
app/components/machine/MachineComponentsCard.vue
View File

@@ -3,15 +3,6 @@
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="card-title">Composants</h2> <h2 class="card-title">Composants</h2>
<div class="flex items-center gap-2">
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-component')"
>
Ajouter un composant
</button>
<button <button
type="button" type="button"
class="btn btn-ghost btn-sm gap-2" class="btn btn-ghost btn-sm gap-2"
@@ -28,7 +19,6 @@
</span> </span>
</button> </button>
</div> </div>
</div>
<div v-if="components.length === 0" class="text-sm text-gray-500 py-4"> <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
Aucun composant associé à cette machine. Aucun composant associé à cette machine.
@@ -54,6 +44,15 @@
/> />
</div> </div>
</div> </div>
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-component')"
>
Ajouter un composant
</button>
</div> </div>
</div> </div>
</template> </template>

19
app/components/machine/MachinePiecesCard.vue
View File

@@ -3,15 +3,6 @@
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="card-title">Pièces de la machine</h2> <h2 class="card-title">Pièces de la machine</h2>
<div class="flex items-center gap-2">
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-piece')"
>
Ajouter une pièce
</button>
<button <button
type="button" type="button"
class="btn btn-ghost btn-sm gap-2" class="btn btn-ghost btn-sm gap-2"
@@ -28,7 +19,6 @@
</span> </span>
</button> </button>
</div> </div>
</div>
<div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4"> <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
Aucune pièce associée à cette machine. Aucune pièce associée à cette machine.
@@ -54,6 +44,15 @@
/> />
</div> </div>
</div> </div>
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-piece')"
>
Ajouter une pièce
</button>
</div> </div>
</div> </div>
</template> </template>

19
app/components/machine/MachineProductsCard.vue
View File

@@ -15,20 +15,10 @@
Produits sélectionnés directement pour cette machine. Produits sélectionnés directement pour cette machine.
</p> </p>
</div> </div>
<div class="flex items-center gap-2">
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-product')"
>
Ajouter un produit
</button>
<span class="badge badge-outline" v-if="products.length"> <span class="badge badge-outline" v-if="products.length">
{{ products.length }} produit{{ products.length > 1 ? 's' : '' }} {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
</span> </span>
</div> </div>
</div>
<div v-if="products.length" class="space-y-3"> <div v-if="products.length" class="space-y-3">
<div <div
@@ -117,6 +107,15 @@
<p v-else class="text-xs text-gray-500"> <p v-else class="text-xs text-gray-500">
Aucun produit n'a été associé directement à cette machine. Aucun produit n'a été associé directement à cette machine.
</p> </p>
<button
v-if="isEditMode"
type="button"
class="btn btn-sm md:btn-md btn-primary"
@click="$emit('add-product')"
>
Ajouter un produit
</button>
</div> </div>
</div> </div>
</template> </template>