feat: improve piece structure editor UX
This commit is contained in:
Matthieu
@@ -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 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 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>
|
||||
|
||||
Reference in New Issue
Block a user