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

feat(ui) : replace div-inputs with plain text in entity detail pages read mode

Browse Source
This commit is contained in:
THOLOT DECHENE Matthieu
2026-04-04 16:42:23 +02:00
parent a610284325
commit 1963ce261d
3 changed files with 97 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/app/pages/component/[id]/index.vue
View File

@@ -81,9 +81,9 @@
La catégorie d'origine ne peut pas être modifiée depuis cette page. La catégorie d'origine ne peut pas être modifiée depuis cette page.
</p> </p>
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ selectedType?.name || '—' }} {{ selectedType?.name || '—' }}
</div> </p>
</div> </div>
</div> </div>
@@ -102,9 +102,9 @@
placeholder="Nom affiché dans le catalogue" placeholder="Nom affiché dans le catalogue"
required required
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ component.name }} {{ component.name }}
</div> </p>
</div> </div>
</div> </div>
@@ -143,9 +143,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Référence interne ou fournisseur" placeholder="Référence interne ou fournisseur"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ component.reference }} {{ component.reference }}
</div> </p>
</div> </div>
<div v-if="isEditMode || constructeurLinks.length" class="form-control"> <div v-if="isEditMode || constructeurLinks.length" class="form-control">
@@ -190,9 +190,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Valeur indicatrice" placeholder="Valeur indicatrice"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ component.prix }} € {{ component.prix }} €
</div> </p>
</div> </div>
</div> </div>
@@ -255,7 +255,7 @@
</div> </div>
</div> </div>
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md flex items-center gap-2" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'"> <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template> <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else> <template v-else>
{{ slot.selectedPieceName }} {{ slot.selectedPieceName }}
@@ -285,7 +285,7 @@
@update:model-value="(value) => setProductSlotSelection(slot.slotId, value)" @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
/> />
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'"> <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template> <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else>{{ slot.selectedProductName }}</template> <template v-else>{{ slot.selectedProductName }}</template>
</div> </div>
@@ -312,7 +312,7 @@
@update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)" @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
/> />
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'"> <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template> <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else>{{ slot.selectedComponentName }}</template> <template v-else>{{ slot.selectedComponentName }}</template>
</div> </div>
@@ -342,9 +342,9 @@
<label class="label"> <label class="label">
<span class="label-text text-sm">{{ field.name }}</span> <span class="label-text text-sm">{{ field.name }}</span>
</label> </label>
<div class="input input-bordered input-sm bg-base-200 flex items-center"> <p class="text-sm font-medium text-base-content py-1">
{{ field.value }} {{ field.value }}
</div> </p>
</div> </div>
</div> </div>
</template> </template>
@@ -415,6 +415,14 @@
:field-labels="historyFieldLabels" :field-labels="historyFieldLabels"
/> />
<EntityVersionList
entity-type="composant"
:entity-id="String(route.params.id)"
:field-labels="historyFieldLabels"
:refresh-key="versionRefreshKey"
@restored="fetchComponent()"
/>
<!-- Save buttons (edit mode only) --> <!-- Save buttons (edit mode only) -->
<div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end"> <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
<button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false"> <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">

65
frontend/app/pages/piece/[id].vue
View File

@@ -50,27 +50,40 @@
<span class="label-text">Catégorie de pièce</span> <span class="label-text">Catégorie de pièce</span>
</label> </label>
<template v-if="isEditMode"> <template v-if="isEditMode">
<select <div class="flex items-center gap-2">
v-model="selectedTypeId" <select
class="select select-bordered select-sm md:select-md" v-model="selectedTypeId"
disabled class="select select-bordered select-sm md:select-md flex-1"
> disabled
<option value="">Sélectionner une catégorie</option>
<option
v-for="type in pieceTypeList"
:key="type.id"
:value="type.id"
> >
{{ type.name }} <option value="">Sélectionner une catégorie</option>
</option> <option
</select> v-for="type in pieceTypeList"
:key="type.id"
:value="type.id"
>
{{ type.name }}
</option>
</select>
<NuxtLink
v-if="selectedTypeId"
:to="`/piece-category/${selectedTypeId}/edit`"
class="btn btn-ghost btn-sm"
title="Voir la catégorie"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</NuxtLink>
</div>
<p class="text-xs text-base-content/60 mt-1"> <p class="text-xs text-base-content/60 mt-1">
La catégorie d'origine ne peut pas être modifiée depuis cette page. La catégorie d'origine ne peut pas être modifiée depuis cette page.
</p> </p>
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ selectedType?.name || '—' }} {{ selectedType?.name || '—' }}
</div> </p>
</div> </div>
</div> </div>
@@ -89,9 +102,9 @@
placeholder="Nom affiché dans le catalogue" placeholder="Nom affiché dans le catalogue"
required required
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ piece.name }} {{ piece.name }}
</div> </p>
</div> </div>
</div> </div>
@@ -118,10 +131,10 @@
<label class="label"> <label class="label">
<span class="label-text">Référence auto</span> <span class="label-text">Référence auto</span>
</label> </label>
<div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2"> <p class="text-sm font-medium text-base-content py-1 flex items-center gap-2">
<span class="font-mono font-semibold">{{ piece.referenceAuto }}</span> <span class="font-mono font-semibold">{{ piece.referenceAuto }}</span>
<span class="badge badge-sm badge-ghost">auto</span> <span class="badge badge-sm badge-ghost">auto</span>
</div> </p>
</div> </div>
<!-- Référence + Fournisseurs (if value or edit mode) --> <!-- Référence + Fournisseurs (if value or edit mode) -->
@@ -141,9 +154,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Référence interne ou fournisseur" placeholder="Référence interne ou fournisseur"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ piece.reference }} {{ piece.reference }}
</div> </p>
</div> </div>
<div v-if="isEditMode || constructeurLinks.length" class="form-control"> <div v-if="isEditMode || constructeurLinks.length" class="form-control">
@@ -188,9 +201,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Valeur indicatrice" placeholder="Valeur indicatrice"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ piece.prix }} € {{ piece.prix }} €
</div> </p>
</div> </div>
</div> </div>
@@ -246,7 +259,7 @@
<label class="label"> <label class="label">
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelectionLabels[index] }">{{ entry.label }}</span> <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelectionLabels[index] }">{{ entry.label }}</span>
</label> </label>
<div class="input input-bordered input-sm md:input-md flex items-center" :class="productSelectionLabels[index] ? 'bg-base-200' : 'border-error bg-error/10 text-error font-semibold'"> <div class="text-sm font-medium py-1 px-2 rounded" :class="productSelectionLabels[index] ? 'text-base-content' : 'border border-error bg-error/10 text-error font-semibold'">
<template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template> <template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template>
<template v-else>{{ productSelectionLabels[index] }}</template> <template v-else>{{ productSelectionLabels[index] }}</template>
</div> </div>
@@ -284,9 +297,9 @@
<label class="label"> <label class="label">
<span class="label-text text-sm">{{ field.name }}</span> <span class="label-text text-sm">{{ field.name }}</span>
</label> </label>
<div class="input input-bordered input-sm bg-base-200 flex items-center"> <p class="text-sm font-medium text-base-content py-1">
{{ field.value }} {{ field.value }}
</div> </p>
</div> </div>
</div> </div>
</template> </template>

53
frontend/app/pages/product/[id]/index.vue
View File

@@ -50,19 +50,32 @@
<span class="label-text">Catégorie de produit</span> <span class="label-text">Catégorie de produit</span>
</label> </label>
<template v-if="isEditMode"> <template v-if="isEditMode">
<input <div class="flex items-center gap-2">
:value="product?.typeProduct?.name || 'Catégorie inconnue'" <input
type="text" :value="product?.typeProduct?.name || 'Catégorie inconnue'"
class="input input-bordered input-sm md:input-md bg-base-200" type="text"
disabled class="input input-bordered input-sm md:input-md bg-base-200 flex-1"
> disabled
>
<NuxtLink
v-if="product?.typeProduct?.id"
:to="`/product-category/${product.typeProduct.id}/edit`"
class="btn btn-ghost btn-sm"
title="Voir la catégorie"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</NuxtLink>
</div>
<p class="text-xs text-base-content/60 mt-1"> <p class="text-xs text-base-content/60 mt-1">
La catégorie d'origine ne peut pas être modifiée depuis cette page. La catégorie d'origine ne peut pas être modifiée depuis cette page.
</p> </p>
</template> </template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ product?.typeProduct?.name || '—' }} {{ product?.typeProduct?.name || '—' }}
</div> </p>
</div> </div>
</div> </div>
@@ -81,9 +94,9 @@
placeholder="Nom affiché dans le catalogue" placeholder="Nom affiché dans le catalogue"
required required
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ product.name }} {{ product.name }}
</div> </p>
</div> </div>
</div> </div>
@@ -104,9 +117,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Référence interne ou fournisseur" placeholder="Référence interne ou fournisseur"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ product.reference }} {{ product.reference }}
</div> </p>
</div> </div>
<div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control"> <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
@@ -160,9 +173,9 @@
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
placeholder="Valeur indicatrice" placeholder="Valeur indicatrice"
> >
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center"> <p v-else class="text-sm font-medium text-base-content py-1">
{{ product.supplierPrice }} € {{ product.supplierPrice }} €
</div> </p>
</div> </div>
</div> </div>
@@ -200,9 +213,9 @@
<label class="label"> <label class="label">
<span class="label-text text-sm">{{ field.name }}</span> <span class="label-text text-sm">{{ field.name }}</span>
</label> </label>
<div class="input input-bordered input-sm bg-base-200 flex items-center"> <p class="text-sm font-medium text-base-content py-1">
{{ field.value }} {{ field.value }}
</div> </p>
</div> </div>
</div> </div>
</template> </template>
@@ -273,6 +286,14 @@
:field-labels="historyFieldLabels" :field-labels="historyFieldLabels"
/> />
<EntityVersionList
entity-type="product"
:entity-id="String(route.params.id)"
:field-labels="historyFieldLabels"
:refresh-key="versionRefreshKey"
@restored="loadProduct()"
/>
<!-- Save buttons (edit mode only) --> <!-- Save buttons (edit mode only) -->
<div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end"> <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
<button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false"> <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">