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

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

@@ -50,19 +50,32 @@
<span class="label-text">Catégorie de produit</span>
</label>
<template v-if="isEditMode">
<input
:value="product?.typeProduct?.name || 'Catégorie inconnue'"
type="text"
class="input input-bordered input-sm md:input-md bg-base-200"
disabled
>
<div class="flex items-center gap-2">
<input
:value="product?.typeProduct?.name || 'Catégorie inconnue'"
type="text"
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">
La catégorie d'origine ne peut pas être modifiée depuis cette page.
</p>
</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 || '—' }}
</div>
</p>
</div>
</div>
@@ -81,9 +94,9 @@
placeholder="Nom affiché dans le catalogue"
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 }}
</div>
</p>
</div>
</div>
@@ -104,9 +117,9 @@
:disabled="!canEdit || saving"
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 }}
</div>
</p>
</div>
<div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
@@ -160,9 +173,9 @@
:disabled="!canEdit || saving"
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 }} €
</div>
</p>
</div>
</div>
@@ -200,9 +213,9 @@
<label class="label">
<span class="label-text text-sm">{{ field.name }}</span>
</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 }}
</div>
</p>
</div>
</div>
</template>
@@ -273,6 +286,14 @@
: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) -->
<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">