feat(machine) : add custom field definition editor on machine detail page
Adds UI to create, edit, reorder and delete custom field definitions directly from the machine detail page in edit mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
124
app/components/machine/MachineCustomFieldDefEditor.vue
Normal file
124
app/components/machine/MachineCustomFieldDefEditor.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<section class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold">
|
||||
Définitions des champs personnalisés
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="saving"
|
||||
@click="$emit('save')"
|
||||
>
|
||||
<span v-if="saving" class="loading loading-spinner loading-xs" />
|
||||
Enregistrer les champs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="!fields.length" class="text-xs text-gray-500">
|
||||
Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
|
||||
</p>
|
||||
|
||||
<ul v-else class="space-y-2" role="list">
|
||||
<li
|
||||
v-for="(field, index) in fields"
|
||||
:key="field.uid"
|
||||
class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
|
||||
:class="reorderClass(index)"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart(index, $event)"
|
||||
@dragenter="onDragEnter(index)"
|
||||
@dragover.prevent="onDragEnter(index)"
|
||||
@drop.prevent="onDrop(index)"
|
||||
@dragend="onDragEnd"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
|
||||
title="Réordonner"
|
||||
draggable="false"
|
||||
>
|
||||
<IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<input
|
||||
v-model="field.name"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
placeholder="Nom du champ"
|
||||
>
|
||||
<select v-model="field.type" class="select select-bordered select-sm">
|
||||
<option value="text">
|
||||
Texte
|
||||
</option>
|
||||
<option value="number">
|
||||
Nombre
|
||||
</option>
|
||||
<option value="select">
|
||||
Liste
|
||||
</option>
|
||||
<option value="boolean">
|
||||
Oui/Non
|
||||
</option>
|
||||
<option value="date">
|
||||
Date
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
|
||||
Obligatoire
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
v-if="field.type === 'select'"
|
||||
v-model="field.optionsText"
|
||||
class="textarea textarea-bordered textarea-sm h-20"
|
||||
placeholder="Option 1 Option 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-error btn-xs btn-square"
|
||||
@click="$emit('remove-field', index)"
|
||||
>
|
||||
<IconLucideTrash class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
|
||||
<IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
|
||||
Ajouter un champ
|
||||
</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
|
||||
import IconLucideGripVertical from '~icons/lucide/grip-vertical'
|
||||
import IconLucidePlus from '~icons/lucide/plus'
|
||||
import IconLucideTrash from '~icons/lucide/trash'
|
||||
|
||||
defineProps<{
|
||||
fields: MachineCustomFieldEditorField[]
|
||||
saving: boolean
|
||||
reorderClass: (index: number) => string
|
||||
onDragStart: (index: number, event: DragEvent) => void
|
||||
onDragEnter: (index: number) => void
|
||||
onDrop: (index: number) => void
|
||||
onDragEnd: () => void
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
save: []
|
||||
'add-field': []
|
||||
'remove-field': [index: number]
|
||||
}>()
|
||||
</script>
|
||||
@@ -151,18 +151,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
|
||||
<MachineCustomFieldDefEditor
|
||||
:fields="fieldDefs.fields.value"
|
||||
:saving="fieldDefs.saving.value"
|
||||
:reorder-class="fieldDefs.reorderClass"
|
||||
:on-drag-start="fieldDefs.onDragStart"
|
||||
:on-drag-enter="fieldDefs.onDragEnter"
|
||||
:on-drop="fieldDefs.onDrop"
|
||||
:on-drag-end="fieldDefs.onDragEnd"
|
||||
@save="fieldDefs.saveDefinitions()"
|
||||
@add-field="fieldDefs.addField()"
|
||||
@remove-field="fieldDefs.removeField($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
||||
import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
|
||||
import {
|
||||
formatConstructeurContact as formatConstructeurContactSummary,
|
||||
} from '~/shared/constructeurUtils'
|
||||
import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
|
||||
import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
isEditMode: boolean
|
||||
machineName: string
|
||||
machineReference: string
|
||||
@@ -171,14 +189,27 @@ defineProps<{
|
||||
hasMachineConstructeur: boolean
|
||||
visibleCustomFields: any[]
|
||||
getMachineFieldId: (fieldName: string) => string
|
||||
machineId: string
|
||||
machineCustomFieldDefs: any[]
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
const emit = defineEmits<{
|
||||
'update:machine-name': [value: string]
|
||||
'update:machine-reference': [value: string]
|
||||
'update:constructeur-ids': [ids: unknown]
|
||||
'blur-field': []
|
||||
'set-custom-field-value': [field: any, value: unknown]
|
||||
'update-custom-field': [field: any]
|
||||
'custom-fields-saved': []
|
||||
}>()
|
||||
|
||||
const fieldDefs = useMachineCustomFieldDefs({
|
||||
machineId: props.machineId,
|
||||
initialDefs: props.machineCustomFieldDefs,
|
||||
onSaved: () => emit('custom-fields-saved'),
|
||||
})
|
||||
|
||||
watch(() => props.machineCustomFieldDefs, (newDefs) => {
|
||||
fieldDefs.reinit(newDefs)
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
327
app/composables/useMachineCustomFieldDefs.ts
Normal file
327
app/composables/useMachineCustomFieldDefs.ts
Normal file
@@ -0,0 +1,327 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useApi } from '~/composables/useApi'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
|
||||
// --- Types ---
|
||||
|
||||
export type MachineFieldType = 'text' | 'number' | 'select' | 'boolean' | 'date'
|
||||
|
||||
export interface MachineCustomFieldEditorField {
|
||||
uid: string
|
||||
serverId?: string
|
||||
name: string
|
||||
type: MachineFieldType
|
||||
required: boolean
|
||||
optionsText: string
|
||||
orderIndex: number
|
||||
}
|
||||
|
||||
interface InitialDef {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
required: boolean
|
||||
options?: string[]
|
||||
orderIndex: number
|
||||
defaultValue?: unknown
|
||||
}
|
||||
|
||||
interface Deps {
|
||||
machineId: string
|
||||
initialDefs: InitialDef[]
|
||||
onSaved: () => void | Promise<void>
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
let uidCounter = 0
|
||||
const createUid = (): string => {
|
||||
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
||||
return crypto.randomUUID()
|
||||
}
|
||||
uidCounter += 1
|
||||
return `mcf-${Date.now().toString(36)}-${uidCounter}`
|
||||
}
|
||||
|
||||
const normalizeLineEndings = (value: string): string =>
|
||||
value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
|
||||
|
||||
const toEditorField = (def: InitialDef, index: number): MachineCustomFieldEditorField => ({
|
||||
uid: createUid(),
|
||||
serverId: def.id,
|
||||
name: def.name || '',
|
||||
type: (def.type || 'text') as MachineFieldType,
|
||||
required: Boolean(def.required),
|
||||
optionsText: normalizeLineEndings(
|
||||
Array.isArray(def.options) ? def.options.join('\n') : '',
|
||||
),
|
||||
orderIndex: typeof def.orderIndex === 'number' ? def.orderIndex : index,
|
||||
})
|
||||
|
||||
const hydrateFields = (defs: InitialDef[]): MachineCustomFieldEditorField[] =>
|
||||
defs
|
||||
.map((def, index) => toEditorField(def, index))
|
||||
.sort((a, b) => a.orderIndex - b.orderIndex)
|
||||
.map((field, index) => ({ ...field, orderIndex: index }))
|
||||
|
||||
const buildSnapshot = (defs: InitialDef[]): Map<string, InitialDef> => {
|
||||
const map = new Map<string, InitialDef>()
|
||||
for (const def of defs) {
|
||||
map.set(def.id, def)
|
||||
}
|
||||
return map
|
||||
}
|
||||
|
||||
const applyOrderIndex = (
|
||||
list: MachineCustomFieldEditorField[],
|
||||
): MachineCustomFieldEditorField[] =>
|
||||
list.map((field, index) => ({ ...field, orderIndex: index }))
|
||||
|
||||
const parseOptions = (optionsText: string): string[] =>
|
||||
normalizeLineEndings(optionsText)
|
||||
.split('\n')
|
||||
.map(o => o.trim())
|
||||
.filter(o => o.length > 0)
|
||||
|
||||
// --- Composable ---
|
||||
|
||||
export function useMachineCustomFieldDefs(deps: Deps) {
|
||||
const { apiCall } = useApi()
|
||||
const { showSuccess, showError } = useToast()
|
||||
|
||||
// --- State ---
|
||||
|
||||
const fields = ref<MachineCustomFieldEditorField[]>(hydrateFields(deps.initialDefs))
|
||||
const initialSnapshot = ref<Map<string, InitialDef>>(buildSnapshot(deps.initialDefs))
|
||||
const saving = ref(false)
|
||||
|
||||
// --- CRUD ---
|
||||
|
||||
const addField = () => {
|
||||
const next = fields.value.slice()
|
||||
next.push({
|
||||
uid: createUid(),
|
||||
name: '',
|
||||
type: 'text',
|
||||
required: false,
|
||||
optionsText: '',
|
||||
orderIndex: next.length,
|
||||
})
|
||||
fields.value = applyOrderIndex(next)
|
||||
}
|
||||
|
||||
const removeField = (index: number) => {
|
||||
const next = fields.value.filter((_, i) => i !== index)
|
||||
fields.value = applyOrderIndex(next)
|
||||
}
|
||||
|
||||
// --- Drag & drop ---
|
||||
|
||||
const dragState = reactive({
|
||||
draggingIndex: null as number | null,
|
||||
dropTargetIndex: null as number | null,
|
||||
})
|
||||
|
||||
const resetDragState = () => {
|
||||
dragState.draggingIndex = null
|
||||
dragState.dropTargetIndex = null
|
||||
}
|
||||
|
||||
const onDragStart = (index: number, event: DragEvent) => {
|
||||
dragState.draggingIndex = index
|
||||
dragState.dropTargetIndex = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onDragEnter = (index: number) => {
|
||||
if (dragState.draggingIndex === null) return
|
||||
dragState.dropTargetIndex = index
|
||||
}
|
||||
|
||||
const onDrop = (index: number) => {
|
||||
const from = dragState.draggingIndex
|
||||
if (from === null) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
if (from === index) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
const list = fields.value.slice()
|
||||
if (from < 0 || index < 0 || from >= list.length || index >= list.length) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
|
||||
const [moved] = list.splice(from, 1)
|
||||
if (!moved) {
|
||||
resetDragState()
|
||||
return
|
||||
}
|
||||
list.splice(index, 0, moved)
|
||||
fields.value = applyOrderIndex(list)
|
||||
resetDragState()
|
||||
}
|
||||
|
||||
const onDragEnd = () => {
|
||||
resetDragState()
|
||||
}
|
||||
|
||||
const reorderClass = (index: number): string => {
|
||||
if (dragState.draggingIndex === index) {
|
||||
return 'border-dashed border-primary bg-primary/5'
|
||||
}
|
||||
if (
|
||||
dragState.draggingIndex !== null
|
||||
&& dragState.dropTargetIndex === index
|
||||
&& dragState.draggingIndex !== index
|
||||
) {
|
||||
return 'border-primary border-dashed bg-primary/10'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// --- Save ---
|
||||
|
||||
const saveDefinitions = async () => {
|
||||
if (saving.value) return
|
||||
|
||||
// Validate: remove empty-name fields before saving
|
||||
const emptyNameFields = fields.value.filter(f => !f.name.trim() && !f.serverId)
|
||||
if (emptyNameFields.length > 0) {
|
||||
fields.value = applyOrderIndex(fields.value.filter(f => f.name.trim() || f.serverId))
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
const snapshot = initialSnapshot.value
|
||||
const currentServerIds = new Set(
|
||||
fields.value.filter(f => f.serverId).map(f => f.serverId!),
|
||||
)
|
||||
|
||||
// DELETE removed fields
|
||||
const deletedIds = [...snapshot.keys()].filter(id => !currentServerIds.has(id))
|
||||
for (const id of deletedIds) {
|
||||
const result = await apiCall(`/custom_fields/${id}`, { method: 'DELETE' })
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la suppression d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let hasNewFields = false
|
||||
|
||||
for (const field of fields.value) {
|
||||
const name = field.name.trim()
|
||||
if (!name) continue
|
||||
|
||||
const options = field.type === 'select' ? parseOptions(field.optionsText) : []
|
||||
|
||||
if (!field.serverId) {
|
||||
// POST new field
|
||||
hasNewFields = true
|
||||
const body: Record<string, unknown> = {
|
||||
name,
|
||||
type: field.type,
|
||||
required: field.required,
|
||||
options,
|
||||
orderIndex: field.orderIndex,
|
||||
machine: `/api/machines/${deps.machineId}`,
|
||||
}
|
||||
|
||||
const result = await apiCall('/custom_fields', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/ld+json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la création d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// PATCH modified field
|
||||
const original = snapshot.get(field.serverId)
|
||||
const originalOptions = Array.isArray(original?.options)
|
||||
? original.options.join('\n')
|
||||
: ''
|
||||
const currentOptions = field.type === 'select' ? field.optionsText : ''
|
||||
|
||||
const changed
|
||||
= original?.name !== name
|
||||
|| original?.type !== field.type
|
||||
|| original?.required !== field.required
|
||||
|| normalizeLineEndings(originalOptions) !== normalizeLineEndings(currentOptions)
|
||||
|| original?.orderIndex !== field.orderIndex
|
||||
|
||||
if (changed) {
|
||||
const body: Record<string, unknown> = {
|
||||
name,
|
||||
type: field.type,
|
||||
required: field.required,
|
||||
options,
|
||||
orderIndex: field.orderIndex,
|
||||
}
|
||||
|
||||
const result = await apiCall(`/custom_fields/${field.serverId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/merge-patch+json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!result.success) {
|
||||
showError('Erreur lors de la mise à jour d\'un champ personnalisé')
|
||||
await deps.onSaved()
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize missing custom field values if new fields were created
|
||||
if (hasNewFields) {
|
||||
await apiCall(`/machines/${deps.machineId}/add-custom-fields`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/ld+json' },
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
}
|
||||
|
||||
showSuccess('Champs personnalisés sauvegardés avec succès')
|
||||
await deps.onSaved()
|
||||
} catch {
|
||||
showError('Erreur inattendue lors de la sauvegarde des champs personnalisés')
|
||||
await deps.onSaved()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Reinit ---
|
||||
|
||||
const reinit = (newDefs: InitialDef[]) => {
|
||||
fields.value = hydrateFields(newDefs)
|
||||
initialSnapshot.value = buildSnapshot(newDefs)
|
||||
}
|
||||
|
||||
return {
|
||||
fields,
|
||||
saving,
|
||||
dragState,
|
||||
addField,
|
||||
removeField,
|
||||
onDragStart,
|
||||
onDragEnter,
|
||||
onDrop,
|
||||
onDragEnd,
|
||||
reorderClass,
|
||||
saveDefinitions,
|
||||
reinit,
|
||||
}
|
||||
}
|
||||
@@ -57,12 +57,15 @@
|
||||
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
||||
:visible-custom-fields="d.visibleMachineCustomFields.value"
|
||||
:get-machine-field-id="d.getMachineFieldId"
|
||||
:machine-id="machineId"
|
||||
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
||||
@update:machine-name="d.machineName.value = $event"
|
||||
@update:machine-reference="d.machineReference.value = $event"
|
||||
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
||||
@blur-field="d.updateMachineInfo"
|
||||
@set-custom-field-value="d.setMachineCustomFieldValue"
|
||||
@update-custom-field="d.updateMachineCustomField"
|
||||
@custom-fields-saved="d.loadMachineData()"
|
||||
/>
|
||||
|
||||
<!-- Documents -->
|
||||
|
||||
Reference in New Issue
Block a user