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

fix(ui) : replace checkbox with toggle switch for boolean custom fields

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-02 09:51:29 +01:00
parent e84b5cf674
commit e459da7c20
8 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/CustomFieldsDisplay.vue
View File

@@ -55,16 +55,16 @@
</select> </select>
<!-- Champ de type BOOLEAN --> <!-- Champ de type BOOLEAN -->
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="fieldValues[field.id]" v-model="fieldValues[field.id]"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm"
:checked="fieldValues[field.id] === 'true'" :checked="fieldValues[field.id] === 'true'"
@change="updateCustomFieldValue(field.id)" @change="updateCustomFieldValue(field.id)"
> >
<span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<!-- Champ de type DATE --> <!-- Champ de type DATE -->
<input <input

11
app/components/machine/MachineInfoCard.vue
View File

@@ -120,17 +120,16 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
:value="field.value ?? ''"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm"
:checked="String(field.value).toLowerCase() === 'true'" :checked="String(field.value).toLowerCase() === 'true'"
@change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')" @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
@blur="$emit('update-custom-field', field)" @blur="$emit('update-custom-field', field)"
/> >
<span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
:value="field.value ?? ''" :value="field.value ?? ''"

8
app/pages/component/[id]/edit.vue
View File

@@ -304,17 +304,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"

8
app/pages/component/create.vue
View File

@@ -271,17 +271,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || submitting" :disabled="!canEdit || submitting"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"

8
app/pages/pieces/[id]/edit.vue
View File

@@ -251,17 +251,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"

8
app/pages/pieces/create.vue
View File

@@ -223,17 +223,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || submitting" :disabled="!canEdit || submitting"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"

8
app/pages/product/[id]/edit.vue
View File

@@ -175,17 +175,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || saving" :disabled="!canEdit || saving"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"

8
app/pages/product/create.vue
View File

@@ -162,17 +162,17 @@
{{ option }} {{ option }}
</option> </option>
</select> </select>
<div v-else-if="field.type === 'boolean'" class="flex items-center gap-2"> <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
<input <input
v-model="field.value" v-model="field.value"
type="checkbox" type="checkbox"
class="checkbox checkbox-sm" class="toggle toggle-primary toggle-sm md:toggle-md"
true-value="true" true-value="true"
false-value="false" false-value="false"
:disabled="!canEdit || submitting" :disabled="!canEdit || submitting"
> >
<span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span> <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
</div> </label>
<input <input
v-else-if="field.type === 'date'" v-else-if="field.type === 'date'"
v-model="field.value" v-model="field.value"