refactor(frontend) : extract shared components and reduce file sizes
- Extract CustomFieldInputGrid.vue from 6 duplicated template blocks (~70 lines each) - Extract EntityHistorySection.vue from 3 identical history sections in edit pages - Extract useDragReorder composable from 4 identical drag-and-drop implementations in StructureNodeEditor (~330 lines → ~30) - Extract catalogDisplayUtils.ts (resolvePrimaryDocument, resolveSupplierNames, buildSuppliersDisplay) - Remove redundant computed wrappers (historyEntries, loadingTypes, selectedFiles) - Remove unused imports (fieldKey, historyActionLabel, formatHistoryDate, *HistoryEntry types) - Move Intl.DateTimeFormat to module-level in date.ts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -725,11 +725,6 @@ const handleProductTypeSelect = (product: ComponentModelProduct & Record<string,
|
||||
product.familyCode = option.code ?? product.familyCode ?? ''
|
||||
}
|
||||
|
||||
const customFieldDragState = ref({
|
||||
draggingIndex: null as number | null,
|
||||
dropTargetIndex: null as number | null,
|
||||
})
|
||||
|
||||
const reindexCustomFields = () => {
|
||||
if (!Array.isArray(props.node.customFields)) {
|
||||
return
|
||||
@@ -742,59 +737,15 @@ const reindexCustomFields = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const resetCustomFieldDragState = () => {
|
||||
customFieldDragState.value.draggingIndex = null
|
||||
customFieldDragState.value.dropTargetIndex = null
|
||||
}
|
||||
|
||||
const onCustomFieldDragStart = (index: number, event: DragEvent) => {
|
||||
customFieldDragState.value.draggingIndex = index
|
||||
customFieldDragState.value.dropTargetIndex = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onCustomFieldDragEnter = (index: number) => {
|
||||
if (customFieldDragState.value.draggingIndex === null) {
|
||||
return
|
||||
}
|
||||
customFieldDragState.value.dropTargetIndex = index
|
||||
}
|
||||
|
||||
const onCustomFieldDrop = (index: number) => {
|
||||
if (!Array.isArray(props.node.customFields)) {
|
||||
resetCustomFieldDragState()
|
||||
return
|
||||
}
|
||||
const from = customFieldDragState.value.draggingIndex
|
||||
const to = index
|
||||
if (from === null || to === null) {
|
||||
resetCustomFieldDragState()
|
||||
return
|
||||
}
|
||||
moveItemInPlace(props.node.customFields, from, to)
|
||||
reindexCustomFields()
|
||||
resetCustomFieldDragState()
|
||||
}
|
||||
|
||||
const onCustomFieldDragEnd = () => {
|
||||
resetCustomFieldDragState()
|
||||
}
|
||||
|
||||
const customFieldReorderClass = (index: number) => {
|
||||
if (customFieldDragState.value.draggingIndex === index) {
|
||||
return 'border-dashed border-primary'
|
||||
}
|
||||
if (
|
||||
customFieldDragState.value.draggingIndex !== null &&
|
||||
customFieldDragState.value.dropTargetIndex === index &&
|
||||
customFieldDragState.value.draggingIndex !== index
|
||||
) {
|
||||
return 'border-primary border-dashed bg-primary/5'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const customFieldDrag = useDragReorder(
|
||||
() => props.node.customFields,
|
||||
{ onReorder: reindexCustomFields },
|
||||
)
|
||||
const onCustomFieldDragStart = customFieldDrag.onDragStart
|
||||
const onCustomFieldDragEnter = customFieldDrag.onDragEnter
|
||||
const onCustomFieldDrop = customFieldDrag.onDrop
|
||||
const onCustomFieldDragEnd = customFieldDrag.onDragEnd
|
||||
const customFieldReorderClass = customFieldDrag.reorderClass
|
||||
|
||||
const addCustomField = () => {
|
||||
ensureArray('customFields')
|
||||
@@ -867,197 +818,32 @@ const removeSubComponent = (index: number) => {
|
||||
props.node.subcomponents.splice(index, 1)
|
||||
}
|
||||
|
||||
const draggingPieceIndex = ref<number | null>(null)
|
||||
const pieceDropTargetIndex = ref<number | null>(null)
|
||||
const draggingProductIndex = ref<number | null>(null)
|
||||
const productDropTargetIndex = ref<number | null>(null)
|
||||
const draggingSubcomponentIndex = ref<number | null>(null)
|
||||
const subcomponentDropTargetIndex = ref<number | null>(null)
|
||||
const pieceDrag = useDragReorder(() => props.node.pieces)
|
||||
const onPieceDragStart = pieceDrag.onDragStart
|
||||
const onPieceDragEnter = pieceDrag.onDragEnter
|
||||
const onPieceDragOver = pieceDrag.onDragOver
|
||||
const onPieceDrop = pieceDrag.onDrop
|
||||
const onPieceDragEnd = pieceDrag.onDragEnd
|
||||
const pieceReorderClass = pieceDrag.reorderClass
|
||||
|
||||
const moveItemInPlace = <T,>(list: T[], from: number, to: number) => {
|
||||
if (from === to) {
|
||||
return
|
||||
}
|
||||
if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
|
||||
return
|
||||
}
|
||||
const updated = list.slice()
|
||||
const [item] = updated.splice(from, 1)
|
||||
if (item === undefined) return
|
||||
updated.splice(to, 0, item)
|
||||
list.splice(0, list.length, ...updated)
|
||||
}
|
||||
const productDrag = useDragReorder(() => props.node.products)
|
||||
const onProductDragStart = productDrag.onDragStart
|
||||
const onProductDragEnter = productDrag.onDragEnter
|
||||
const onProductDragOver = productDrag.onDragOver
|
||||
const onProductDrop = productDrag.onDrop
|
||||
const onProductDragEnd = productDrag.onDragEnd
|
||||
const productReorderClass = productDrag.reorderClass
|
||||
|
||||
const resetPieceDragState = () => {
|
||||
draggingPieceIndex.value = null
|
||||
pieceDropTargetIndex.value = null
|
||||
}
|
||||
|
||||
const resetProductDragState = () => {
|
||||
draggingProductIndex.value = null
|
||||
productDropTargetIndex.value = null
|
||||
}
|
||||
|
||||
const onPieceDragStart = (index: number, event: DragEvent) => {
|
||||
draggingPieceIndex.value = index
|
||||
pieceDropTargetIndex.value = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onPieceDragEnter = (index: number) => {
|
||||
if (draggingPieceIndex.value === null) {
|
||||
return
|
||||
}
|
||||
pieceDropTargetIndex.value = index
|
||||
}
|
||||
|
||||
const onPieceDragOver = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const onPieceDrop = (index: number) => {
|
||||
if (!Array.isArray(props.node.pieces)) {
|
||||
resetPieceDragState()
|
||||
return
|
||||
}
|
||||
const from = draggingPieceIndex.value
|
||||
const to = index
|
||||
if (from === null || to === null) {
|
||||
resetPieceDragState()
|
||||
return
|
||||
}
|
||||
moveItemInPlace(props.node.pieces, from, to)
|
||||
resetPieceDragState()
|
||||
}
|
||||
|
||||
const onPieceDragEnd = () => {
|
||||
resetPieceDragState()
|
||||
}
|
||||
|
||||
const pieceReorderClass = (index: number) => {
|
||||
if (draggingPieceIndex.value === index) {
|
||||
return 'border-dashed border-primary'
|
||||
}
|
||||
if (
|
||||
draggingPieceIndex.value !== null &&
|
||||
pieceDropTargetIndex.value === index &&
|
||||
draggingPieceIndex.value !== index
|
||||
) {
|
||||
return 'border-primary border-dashed bg-primary/5'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const onProductDragStart = (index: number, event: DragEvent) => {
|
||||
draggingProductIndex.value = index
|
||||
productDropTargetIndex.value = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onProductDragEnter = (index: number) => {
|
||||
if (draggingProductIndex.value === null) {
|
||||
return
|
||||
}
|
||||
productDropTargetIndex.value = index
|
||||
}
|
||||
|
||||
const onProductDragOver = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const onProductDrop = (index: number) => {
|
||||
if (!Array.isArray(props.node.products)) {
|
||||
resetProductDragState()
|
||||
return
|
||||
}
|
||||
const from = draggingProductIndex.value
|
||||
const to = index
|
||||
if (from === null || to === null) {
|
||||
resetProductDragState()
|
||||
return
|
||||
}
|
||||
moveItemInPlace(props.node.products, from, to)
|
||||
resetProductDragState()
|
||||
}
|
||||
|
||||
const onProductDragEnd = () => {
|
||||
resetProductDragState()
|
||||
}
|
||||
|
||||
const productReorderClass = (index: number) => {
|
||||
if (draggingProductIndex.value === index) {
|
||||
return 'border-dashed border-primary'
|
||||
}
|
||||
if (
|
||||
draggingProductIndex.value !== null &&
|
||||
productDropTargetIndex.value === index &&
|
||||
draggingProductIndex.value !== index
|
||||
) {
|
||||
return 'border-primary border-dashed bg-primary/5'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const resetSubcomponentDragState = () => {
|
||||
draggingSubcomponentIndex.value = null
|
||||
subcomponentDropTargetIndex.value = null
|
||||
}
|
||||
|
||||
const onSubcomponentDragStart = (index: number, event: DragEvent) => {
|
||||
draggingSubcomponentIndex.value = index
|
||||
subcomponentDropTargetIndex.value = index
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
}
|
||||
|
||||
const onSubcomponentDragEnter = (index: number) => {
|
||||
if (draggingSubcomponentIndex.value === null) {
|
||||
return
|
||||
}
|
||||
subcomponentDropTargetIndex.value = index
|
||||
}
|
||||
|
||||
const onSubcomponentDragOver = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const onSubcomponentDrop = (index: number) => {
|
||||
if (!Array.isArray(props.node.subcomponents)) {
|
||||
resetSubcomponentDragState()
|
||||
return
|
||||
}
|
||||
const from = draggingSubcomponentIndex.value
|
||||
const to = index
|
||||
if (from === null || to === null) {
|
||||
resetSubcomponentDragState()
|
||||
return
|
||||
}
|
||||
moveItemInPlace(props.node.subcomponents, from, to)
|
||||
resetSubcomponentDragState()
|
||||
}
|
||||
|
||||
const onSubcomponentDragEnd = () => {
|
||||
resetSubcomponentDragState()
|
||||
}
|
||||
|
||||
const subcomponentReorderClass = (index: number) => {
|
||||
if (draggingSubcomponentIndex.value === index) {
|
||||
return 'ring-2 ring-primary'
|
||||
}
|
||||
if (
|
||||
draggingSubcomponentIndex.value !== null &&
|
||||
subcomponentDropTargetIndex.value === index &&
|
||||
draggingSubcomponentIndex.value !== index
|
||||
) {
|
||||
return 'ring-2 ring-primary/70'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const subcomponentDrag = useDragReorder(
|
||||
() => props.node.subcomponents,
|
||||
{ draggingClass: 'ring-2 ring-primary', dropTargetClass: 'ring-2 ring-primary/70' },
|
||||
)
|
||||
const onSubcomponentDragStart = subcomponentDrag.onDragStart
|
||||
const onSubcomponentDragEnter = subcomponentDrag.onDragEnter
|
||||
const onSubcomponentDragOver = subcomponentDrag.onDragOver
|
||||
const onSubcomponentDrop = subcomponentDrag.onDrop
|
||||
const onSubcomponentDragEnd = subcomponentDrag.onDragEnd
|
||||
const subcomponentReorderClass = subcomponentDrag.reorderClass
|
||||
|
||||
watch(
|
||||
canManageSubcomponents,
|
||||
|
||||
Reference in New Issue
Block a user