From 76cd3fac98384bafb41d127c0c0186255174404e Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 30 Oct 2025 11:34:19 +0100
Subject: [PATCH] feat: improve piece structure editor UX

---
 app/components/PieceModelStructureEditor.vue | 434 ++++++++++++-------
 1 file changed, 285 insertions(+), 149 deletions(-)

diff --git a/app/components/PieceModelStructureEditor.vue b/app/components/PieceModelStructureEditor.vue
index 47245ae..fd65a83 100644
--- a/app/components/PieceModelStructureEditor.vue
+++ b/app/components/PieceModelStructureEditor.vue
@@ -1,185 +1,240 @@
 <template>
   <div class="space-y-4">
-    <section class="space-y-3">
-      <div 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" />
-          Ajouter
-        </button>
-      </div>
+    <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" />
+        Ajouter
+      </button>
+    </header>
 
-      <p v-if="!localFields.length" class="text-xs text-gray-500">
-        Aucun champ personnalisé n'a encore été défini.
-      </p>
+    <p v-if="!fields.length" class="text-xs text-gray-500">
+      Aucun champ personnalisé n'a encore été défini.
+    </p>
 
-      <div v-else class="space-y-2">
-        <div
-          v-for="(field, index) in localFields"
-          :key="`custom-field-${index}`"
-          class="border border-base-200 rounded-md p-3 space-y-2"
-        >
-          <div class="flex items-start justify-between gap-2">
-            <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-xs"
-                  placeholder="Nom du champ"
-                >
-                <select v-model="field.type" class="select select-bordered select-xs">
-                  <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>
+    <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 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-xs h-20"
-                placeholder="Option 1&#10;Option 2"
-              />
+          <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-xs"
+                placeholder="Nom du champ"
+              >
+              <select v-model="field.type" class="select select-bordered select-xs">
+                <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>
-            <button
-              type="button"
-              class="btn btn-error btn-xs btn-square"
-              @click="removeField(index)"
-            >
-              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-            </button>
+
+            <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-xs h-20"
+              placeholder="Option 1&#10;Option 2"
+            />
           </div>
+
+          <button
+            type="button"
+            class="btn btn-error btn-xs btn-square"
+            @click="removeField(index)"
+          >
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
         </div>
-      </div>
-    </section>
+      </li>
+    </ul>
   </div>
 </template>
 
-<script setup>
-import { computed, reactive, watch } from 'vue'
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
+import type {
+  PieceModelCustomField,
+  PieceModelCustomFieldType,
+  PieceModelStructure,
+  PieceModelStructureEditorField,
+} from '~/shared/types/inventory'
+import { normalizePieceStructureForSave } from '~/shared/modelUtils'
 
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({ customFields: [] })
-  }
-})
+defineOptions({ name: 'PieceModelStructureEditor' })
 
-const emit = defineEmits(['update:modelValue'])
+type EditorField = PieceModelStructureEditorField & { uid: string }
 
-const ensureArray = value => (Array.isArray(value) ? value : [])
+const props = defineProps<{
+  modelValue?: PieceModelStructure | null
+}>()
 
-const clone = (input, fallback = {}) => {
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: PieceModelStructure): void
+}>()
+
+const ensureArray = <T>(value: T[] | null | undefined): T[] => (Array.isArray(value) ? value : [])
+
+const normalizeLineEndings = (value: string): string =>
+  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const safeClone = <T>(value: T, fallback: T): T => {
   try {
-    return JSON.parse(JSON.stringify(input ?? fallback))
-  } catch (error) {
-    return JSON.parse(JSON.stringify(fallback))
+    return JSON.parse(JSON.stringify(value ?? fallback)) as T
+  } catch {
+    return JSON.parse(JSON.stringify(fallback)) as T
   }
 }
 
-const extractRest = (structure = {}) => {
+const extractRest = (structure?: PieceModelStructure | null): Record<string, unknown> => {
   if (!structure || typeof structure !== 'object') {
     return {}
   }
-  return Object.fromEntries(
-    Object.entries(structure).filter(([key]) => key !== 'customFields')
-  )
+  const entries = Object.entries(structure).filter(([key]) => key !== 'customFields')
+  return safeClone(Object.fromEntries(entries), {})
 }
 
-const toEditorField = (input = {}, index = 0) => ({
-  name: typeof input.name === 'string' ? input.name : '',
-  type: typeof input.type === 'string' && input.type ? input.type : 'text',
-  required: Boolean(input.required),
-  optionsText: Array.isArray(input.options)
-    ? input.options.join('\n')
-    : typeof input.optionsText === 'string'
-      ? input.optionsText
-      : '',
-  orderIndex: typeof input.orderIndex === 'number' ? input.orderIndex : index,
-})
+let uidCounter = 0
+const createUid = (): string => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  uidCounter += 1
+  return `piece-field-${Date.now().toString(36)}-${uidCounter}`
+}
 
-const hydrateFields = (structure = {}) =>
-  ensureArray(structure.customFields)
+const toEditorField = (
+  input: Partial<PieceModelStructureEditorField> | null | undefined,
+  index: number,
+): EditorField => {
+  const baseType = typeof input?.type === 'string' && input.type ? input.type : 'text'
+  const optionsText = normalizeLineEndings(
+    typeof input?.optionsText === 'string'
+      ? input.optionsText
+      : Array.isArray(input?.options)
+        ? input.options.join('\n')
+        : '',
+  )
+
+  return {
+    uid: createUid(),
+    name: typeof input?.name === 'string' ? input.name : '',
+    type: baseType as PieceModelCustomFieldType,
+    required: Boolean(input?.required),
+    optionsText,
+    orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
+  }
+}
+
+const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] => {
+  const source = ensureArray(structure?.customFields)
+  return source
     .map((field, index) => toEditorField(field, index))
     .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+    .map((field, index) => ({ ...field, orderIndex: index }))
+}
 
-const localState = reactive({
-  fields: hydrateFields(props.modelValue)
-})
+const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
+const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
 
-const extraState = reactive({
-  rest: clone(extractRest(props.modelValue))
-})
+const applyOrderIndex = (list: EditorField[]): EditorField[] =>
+  list.map((field, index) => ({
+    ...field,
+    orderIndex: index,
+  }))
 
-const localFields = computed({
-  get: () => localState.fields,
-  set: (value) => {
-    localState.fields = ensureArray(value).map(toEditorField)
-  }
-})
-
-const normalizeFields = (fields) => {
-  return ensureArray(fields)
-    .map((field, index) => {
-      const name = typeof field.name === 'string' ? field.name.trim() : ''
+const buildPayload = (
+  fieldsSource: EditorField[],
+  restSource: Record<string, unknown>,
+): PieceModelStructure => {
+  const normalizedFields = fieldsSource
+    .map<PieceModelCustomField | null>((field, index) => {
+      const name = field.name.trim()
       if (!name) {
         return null
       }
 
-      const type = field.type || 'text'
+      const type = (field.type || 'text') as PieceModelCustomFieldType
       const required = Boolean(field.required)
-      let options
-      if (type === 'select') {
-        const raw = typeof field.optionsText === 'string' ? field.optionsText : ''
-        const parsed = raw
-          .split(/\r?\n/)
-          .map(option => option.trim())
-          .filter(option => option.length > 0)
-        options = parsed.length > 0 ? parsed : undefined
+      const payload: PieceModelCustomField = {
+        name,
+        type,
+        required,
+        orderIndex: index,
       }
 
-      const normalized = { name, type, required, orderIndex: index }
-      if (options) {
-        normalized.options = options
+      if (type === 'select') {
+        const options = normalizeLineEndings(field.optionsText)
+          .split('\n')
+          .map((option) => option.trim())
+          .filter((option) => option.length > 0)
+        if (options.length > 0) {
+          payload.options = options
+        }
       }
-      return normalized
+
+      return payload
     })
-    .filter(Boolean)
+    .filter((field): field is PieceModelCustomField => Boolean(field))
+
+  const draft: PieceModelStructure = {
+    ...safeClone(restSource, {}),
+    customFields: normalizedFields,
+  }
+
+  return normalizePieceStructureForSave(draft)
 }
 
-let lastEmitted = JSON.stringify({
-  ...clone(extraState.rest, {}),
-  customFields: normalizeFields(props.modelValue?.customFields)
-})
+const serializeStructure = (structure?: PieceModelStructure | null): string => {
+  return JSON.stringify(normalizePieceStructureForSave(structure ?? { customFields: [] }))
+}
+
+let lastEmitted = serializeStructure(props.modelValue)
 
 const emitUpdate = () => {
-  const customFields = normalizeFields(localFields.value)
-  const payload = {
-    ...clone(extraState.rest, {}),
-    customFields
-  }
+  const payload = buildPayload(fields.value, restState.value)
   const serialized = JSON.stringify(payload)
   if (serialized !== lastEmitted) {
     lastEmitted = serialized
@@ -187,27 +242,108 @@ const emitUpdate = () => {
   }
 }
 
+watch(fields, emitUpdate, { deep: true })
+
 watch(
   () => props.modelValue,
   (value) => {
-    localFields.value = hydrateFields(value)
-    extraState.rest = clone(extractRest(value), {})
-    lastEmitted = JSON.stringify({
-      ...clone(extraState.rest, {}),
-      customFields: normalizeFields(value?.customFields)
-    })
+    const incomingSerialized = serializeStructure(value)
+    if (incomingSerialized === lastEmitted) {
+      return
+    }
+    restState.value = extractRest(value)
+    fields.value = hydrateFields(value)
+    lastEmitted = incomingSerialized
   },
-  { deep: true }
+  { deep: true },
 )
 
-watch(localFields, emitUpdate, { deep: true })
+const dragState = reactive({
+  draggingIndex: null as number | null,
+  dropTargetIndex: null as number | null,
+})
+
+const resetDragState = () => {
+  dragState.draggingIndex = null
+  dragState.dropTargetIndex = null
+}
+
+const reorderFields = (from: number, to: number) => {
+  if (from === to) {
+    resetDragState()
+    return
+  }
+
+  const list = fields.value.slice()
+  if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
+    resetDragState()
+    return
+  }
+
+  const [moved] = list.splice(from, 1)
+  list.splice(to, 0, moved)
+  fields.value = applyOrderIndex(list)
+  resetDragState()
+}
+
+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) => {
+  if (dragState.draggingIndex === null) {
+    resetDragState()
+    return
+  }
+  reorderFields(dragState.draggingIndex, index)
+}
+
+const onDragEnd = () => {
+  resetDragState()
+}
+
+const reorderClass = (index: number) => {
+  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 ''
+}
+
+const createEmptyField = (orderIndex: number): EditorField => ({
+  uid: createUid(),
+  name: '',
+  type: 'text',
+  required: false,
+  optionsText: '',
+  orderIndex,
+})
 
 const addField = () => {
-  const index = localFields.value.length
-  localFields.value = [...localFields.value, toEditorField({}, index)]
+  const next = fields.value.slice()
+  next.push(createEmptyField(next.length))
+  fields.value = applyOrderIndex(next)
 }
 
-const removeField = (index) => {
-  localFields.value = localFields.value.filter((_, i) => i !== index)
+const removeField = (index: number) => {
+  const next = fields.value.filter((_, i) => i !== index)
+  fields.value = applyOrderIndex(next)
 }
 </script>