Files
sam-react-prod/src/components/items/ItemMasterDataManagement/hooks/useTemplateManagement.ts

470 lines
19 KiB
TypeScript
Raw Normal View History

'use client';
import { useState } from 'react';
import { toast } from 'sonner';
import { useItemMaster } from '@/contexts/ItemMasterContext';
import type { ItemPage, SectionTemplate, TemplateField, BOMItem, ItemMasterField } from '@/contexts/ItemMasterContext';
export interface UseTemplateManagementReturn {
// 섹션 템플릿 다이얼로그 상태
isSectionTemplateDialogOpen: boolean;
setIsSectionTemplateDialogOpen: (open: boolean) => void;
editingSectionTemplateId: number | null;
setEditingSectionTemplateId: (id: number | null) => void;
// 섹션 템플릿 폼 상태
newSectionTemplateTitle: string;
setNewSectionTemplateTitle: (title: string) => void;
newSectionTemplateDescription: string;
setNewSectionTemplateDescription: (desc: string) => void;
newSectionTemplateCategory: string[];
setNewSectionTemplateCategory: React.Dispatch<React.SetStateAction<string[]>>;
newSectionTemplateType: 'fields' | 'bom';
setNewSectionTemplateType: (type: 'fields' | 'bom') => void;
// 템플릿 불러오기 다이얼로그
isLoadTemplateDialogOpen: boolean;
setIsLoadTemplateDialogOpen: (open: boolean) => void;
selectedTemplateId: string | null;
setSelectedTemplateId: (id: string | null) => void;
// 템플릿 필드 다이얼로그 상태
isTemplateFieldDialogOpen: boolean;
setIsTemplateFieldDialogOpen: (open: boolean) => void;
currentTemplateId: number | null;
setCurrentTemplateId: (id: number | null) => void;
editingTemplateFieldId: number | null;
setEditingTemplateFieldId: (id: number | null) => void;
// 템플릿 필드 폼 상태
templateFieldName: string;
setTemplateFieldName: (name: string) => void;
templateFieldKey: string;
setTemplateFieldKey: (key: string) => void;
templateFieldInputType: 'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea';
setTemplateFieldInputType: (type: 'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea') => void;
templateFieldRequired: boolean;
setTemplateFieldRequired: (required: boolean) => void;
templateFieldOptions: string;
setTemplateFieldOptions: (options: string) => void;
templateFieldDescription: string;
setTemplateFieldDescription: (desc: string) => void;
templateFieldMultiColumn: boolean;
setTemplateFieldMultiColumn: (multi: boolean) => void;
templateFieldColumnCount: number;
setTemplateFieldColumnCount: (count: number) => void;
templateFieldColumnNames: string[];
setTemplateFieldColumnNames: React.Dispatch<React.SetStateAction<string[]>>;
// 템플릿 필드 마스터 항목 관련
templateFieldInputMode: 'custom' | 'master';
setTemplateFieldInputMode: (mode: 'custom' | 'master') => void;
templateFieldShowMasterFieldList: boolean;
setTemplateFieldShowMasterFieldList: (show: boolean) => void;
templateFieldSelectedMasterFieldId: string;
setTemplateFieldSelectedMasterFieldId: (id: string) => void;
// 핸들러
handleAddSectionTemplate: () => void;
handleEditSectionTemplate: (template: SectionTemplate) => void;
handleUpdateSectionTemplate: () => void;
handleDeleteSectionTemplate: (id: number) => void;
handleLoadTemplate: (selectedPage: ItemPage | undefined) => void;
handleAddTemplateField: () => void;
handleEditTemplateField: (templateId: number, field: TemplateField) => void;
handleDeleteTemplateField: (templateId: number, fieldId: string) => void;
handleAddBOMItemToTemplate: (templateId: number, item: Omit<BOMItem, 'id' | 'created_at' | 'updated_at' | 'tenant_id' | 'section_id'>) => void;
handleUpdateBOMItemInTemplate: (templateId: number, itemId: number, item: Partial<BOMItem>) => void;
handleDeleteBOMItemFromTemplate: (templateId: number, itemId: number) => void;
resetSectionTemplateForm: () => void;
resetTemplateFieldForm: () => void;
}
export function useTemplateManagement(): UseTemplateManagementReturn {
const {
sectionTemplates,
addSectionTemplate,
updateSectionTemplate,
deleteSectionTemplate,
addSectionToPage,
addItemMasterField,
itemMasterFields,
tenantId
} = useItemMaster();
// 섹션 템플릿 다이얼로그 상태
const [isSectionTemplateDialogOpen, setIsSectionTemplateDialogOpen] = useState(false);
const [editingSectionTemplateId, setEditingSectionTemplateId] = useState<number | null>(null);
// 섹션 템플릿 폼 상태
const [newSectionTemplateTitle, setNewSectionTemplateTitle] = useState('');
const [newSectionTemplateDescription, setNewSectionTemplateDescription] = useState('');
const [newSectionTemplateCategory, setNewSectionTemplateCategory] = useState<string[]>([]);
const [newSectionTemplateType, setNewSectionTemplateType] = useState<'fields' | 'bom'>('fields');
// 템플릿 불러오기 다이얼로그
const [isLoadTemplateDialogOpen, setIsLoadTemplateDialogOpen] = useState(false);
const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
// 템플릿 필드 다이얼로그 상태
const [isTemplateFieldDialogOpen, setIsTemplateFieldDialogOpen] = useState(false);
const [currentTemplateId, setCurrentTemplateId] = useState<number | null>(null);
const [editingTemplateFieldId, setEditingTemplateFieldId] = useState<number | null>(null);
// 템플릿 필드 폼 상태
const [templateFieldName, setTemplateFieldName] = useState('');
const [templateFieldKey, setTemplateFieldKey] = useState('');
const [templateFieldInputType, setTemplateFieldInputType] = useState<'textbox' | 'dropdown' | 'checkbox' | 'number' | 'date' | 'textarea'>('textbox');
const [templateFieldRequired, setTemplateFieldRequired] = useState(false);
const [templateFieldOptions, setTemplateFieldOptions] = useState('');
const [templateFieldDescription, setTemplateFieldDescription] = useState('');
const [templateFieldMultiColumn, setTemplateFieldMultiColumn] = useState(false);
const [templateFieldColumnCount, setTemplateFieldColumnCount] = useState(2);
const [templateFieldColumnNames, setTemplateFieldColumnNames] = useState<string[]>(['컬럼1', '컬럼2']);
// 템플릿 필드 마스터 항목 관련
const [templateFieldInputMode, setTemplateFieldInputMode] = useState<'custom' | 'master'>('custom');
const [templateFieldShowMasterFieldList, setTemplateFieldShowMasterFieldList] = useState(false);
const [templateFieldSelectedMasterFieldId, setTemplateFieldSelectedMasterFieldId] = useState('');
// 섹션 템플릿 추가
const handleAddSectionTemplate = () => {
if (!newSectionTemplateTitle.trim()) {
toast.error('섹션 제목을 입력해주세요');
return;
}
const newTemplateData = {
tenant_id: tenantId ?? 0,
template_name: newSectionTemplateTitle,
section_type: (newSectionTemplateType === 'bom' ? 'BOM' : 'BASIC') as 'BASIC' | 'BOM' | 'CUSTOM',
description: newSectionTemplateDescription || null,
default_fields: null,
category: newSectionTemplateCategory,
created_by: null,
updated_by: null,
};
console.log('Adding section template:', newTemplateData);
addSectionTemplate(newTemplateData);
resetSectionTemplateForm();
toast.success('섹션 템플릿이 추가되었습니다!');
};
// 섹션 템플릿 수정 시작
const handleEditSectionTemplate = (template: SectionTemplate) => {
setEditingSectionTemplateId(template.id);
setNewSectionTemplateTitle(template.template_name);
setNewSectionTemplateDescription(template.description || '');
setNewSectionTemplateCategory(template.category || []);
setNewSectionTemplateType(template.section_type === 'BOM' ? 'bom' : 'fields');
setIsSectionTemplateDialogOpen(true);
};
// 섹션 템플릿 업데이트
const handleUpdateSectionTemplate = () => {
if (!editingSectionTemplateId || !newSectionTemplateTitle.trim()) {
toast.error('섹션 제목을 입력해주세요');
return;
}
const updateData = {
template_name: newSectionTemplateTitle,
description: newSectionTemplateDescription || undefined,
category: newSectionTemplateCategory.length > 0 ? newSectionTemplateCategory : undefined,
section_type: (newSectionTemplateType === 'bom' ? 'BOM' : 'BASIC') as 'BASIC' | 'BOM' | 'CUSTOM'
};
console.log('Updating section template:', { id: editingSectionTemplateId, updateData });
updateSectionTemplate(editingSectionTemplateId, updateData);
resetSectionTemplateForm();
toast.success('섹션이 수정되었습니다 (저장 필요)');
};
// 섹션 템플릿 삭제
const handleDeleteSectionTemplate = (id: number) => {
if (confirm('이 섹션을 삭제하시겠습니까?')) {
deleteSectionTemplate(id);
toast.success('섹션이 삭제되었습니다');
}
};
// 템플릿 불러오기
const handleLoadTemplate = (selectedPage: ItemPage | undefined) => {
if (!selectedTemplateId || !selectedPage) {
toast.error('템플릿을 선택해주세요');
return;
}
const template = sectionTemplates.find(t => t.id === Number(selectedTemplateId));
if (!template) {
toast.error('템플릿을 찾을 수 없습니다');
return;
}
const newSection = {
page_id: selectedPage.id,
section_name: template.template_name,
section_type: template.section_type === 'BOM' ? 'BOM' as const : 'BASIC' as const,
description: template.description || undefined,
order_no: selectedPage.sections.length + 1,
is_collapsible: true,
is_default_open: true,
fields: [],
bomItems: template.section_type === 'BOM' ? [] : undefined
};
console.log('Loading template to section:', template.template_name, 'newSection:', newSection);
addSectionToPage(selectedPage.id, newSection);
setSelectedTemplateId(null);
setIsLoadTemplateDialogOpen(false);
toast.success('섹션이 불러와졌습니다');
};
// 템플릿 필드 추가
const handleAddTemplateField = () => {
if (!currentTemplateId || !templateFieldName.trim() || !templateFieldKey.trim()) {
toast.error('모든 필수 항목을 입력해주세요');
return;
}
const template = sectionTemplates.find(t => t.id === currentTemplateId);
if (!template) return;
// 마스터 필드에 없으면 자동 추가
const existingMasterField = itemMasterFields.find(f => f.id.toString() === templateFieldKey);
if (!existingMasterField && !editingTemplateFieldId) {
const newMasterFieldData: Omit<ItemMasterField, 'id' | 'tenant_id' | 'created_by' | 'updated_by' | 'created_at' | 'updated_at'> = {
field_name: templateFieldName,
field_type: templateFieldInputType,
category: '공통',
description: templateFieldDescription || null,
is_common: false,
default_value: null,
options: templateFieldInputType === 'dropdown' && templateFieldOptions.trim()
? templateFieldOptions.split(',').map(o => ({ label: o.trim(), value: o.trim() }))
: null,
validation_rules: null,
properties: {
inputType: templateFieldInputType,
required: templateFieldRequired,
multiColumn: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') ? templateFieldMultiColumn : undefined,
columnCount: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnCount : undefined,
columnNames: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnNames : undefined
},
};
addItemMasterField(newMasterFieldData as any);
toast.success('항목 탭에 자동으로 추가되었습니다');
}
// TemplateField 형식으로 생성
const newField: TemplateField = {
id: String(editingTemplateFieldId || Date.now()),
name: templateFieldName,
fieldKey: templateFieldKey,
property: {
inputType: templateFieldInputType,
required: templateFieldRequired,
options: templateFieldInputType === 'dropdown' && templateFieldOptions.trim()
? templateFieldOptions.split(',').map(o => o.trim())
: undefined,
multiColumn: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') ? templateFieldMultiColumn : undefined,
columnCount: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnCount : undefined,
columnNames: (templateFieldInputType === 'textbox' || templateFieldInputType === 'textarea') && templateFieldMultiColumn ? templateFieldColumnNames : undefined
},
description: templateFieldDescription || undefined
};
let updatedFields;
const currentFields = template.default_fields
? (typeof template.default_fields === 'string' ? JSON.parse(template.default_fields) : template.default_fields)
: [];
if (editingTemplateFieldId) {
updatedFields = Array.isArray(currentFields)
? currentFields.map((f: any) => String(f.id) === String(editingTemplateFieldId) ? newField : f)
: [];
toast.success('항목이 수정되었습니다');
} else {
updatedFields = Array.isArray(currentFields) ? [...currentFields, newField] : [newField];
toast.success('항목이 추가되었습니다');
}
updateSectionTemplate(currentTemplateId, { default_fields: updatedFields });
resetTemplateFieldForm();
};
// 템플릿 필드 수정 시작
const handleEditTemplateField = (templateId: number, field: TemplateField) => {
setCurrentTemplateId(templateId);
setEditingTemplateFieldId(Number(field.id));
setTemplateFieldName(field.name);
setTemplateFieldKey(field.fieldKey);
setTemplateFieldInputType(field.property.inputType);
setTemplateFieldRequired(field.property.required);
setTemplateFieldOptions(field.property.options?.join(', ') || '');
setTemplateFieldDescription(field.description || '');
setTemplateFieldMultiColumn(field.property.multiColumn || false);
setTemplateFieldColumnCount(field.property.columnCount || 2);
setTemplateFieldColumnNames(field.property.columnNames || ['컬럼1', '컬럼2']);
setIsTemplateFieldDialogOpen(true);
};
// 템플릿 필드 삭제
const handleDeleteTemplateField = (templateId: number, fieldId: string) => {
if (!confirm('이 항목을 삭제하시겠습니까?')) return;
const template = sectionTemplates.find(t => t.id === templateId);
if (!template) return;
const currentFields = template.default_fields
? (typeof template.default_fields === 'string' ? JSON.parse(template.default_fields) : template.default_fields)
: [];
const updatedFields = Array.isArray(currentFields)
? currentFields.filter((f: any) => String(f.id) !== String(fieldId))
: [];
updateSectionTemplate(templateId, { default_fields: updatedFields });
toast.success('항목이 삭제되었습니다');
};
// BOM 항목 추가
const handleAddBOMItemToTemplate = (templateId: number, item: Omit<BOMItem, 'id' | 'created_at' | 'updated_at' | 'tenant_id' | 'section_id'>) => {
const newItem: BOMItem = {
...item,
id: Date.now(),
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
tenant_id: tenantId ?? 0,
section_id: 0
};
const template = sectionTemplates.find(t => t.id === templateId);
if (!template) return;
const updatedBomItems = [...(template.bomItems || []), newItem];
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
};
// BOM 항목 수정
const handleUpdateBOMItemInTemplate = (templateId: number, itemId: number, item: Partial<BOMItem>) => {
const template = sectionTemplates.find(t => t.id === templateId);
if (!template || !template.bomItems) return;
const updatedBomItems = template.bomItems.map(bom =>
bom.id === itemId ? { ...bom, ...item } : bom
);
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
};
// BOM 항목 삭제
const handleDeleteBOMItemFromTemplate = (templateId: number, itemId: number) => {
const template = sectionTemplates.find(t => t.id === templateId);
if (!template || !template.bomItems) return;
const updatedBomItems = template.bomItems.filter(bom => bom.id !== itemId);
updateSectionTemplate(templateId, { bomItems: updatedBomItems });
};
// 섹션 템플릿 폼 초기화
const resetSectionTemplateForm = () => {
setEditingSectionTemplateId(null);
setNewSectionTemplateTitle('');
setNewSectionTemplateDescription('');
setNewSectionTemplateCategory([]);
setNewSectionTemplateType('fields');
setIsSectionTemplateDialogOpen(false);
};
// 템플릿 필드 폼 초기화
const resetTemplateFieldForm = () => {
setTemplateFieldName('');
setTemplateFieldKey('');
setTemplateFieldInputType('textbox');
setTemplateFieldRequired(false);
setTemplateFieldOptions('');
setTemplateFieldDescription('');
setTemplateFieldMultiColumn(false);
setTemplateFieldColumnCount(2);
setTemplateFieldColumnNames(['컬럼1', '컬럼2']);
setEditingTemplateFieldId(null);
setTemplateFieldInputMode('custom');
setTemplateFieldShowMasterFieldList(false);
setTemplateFieldSelectedMasterFieldId('');
setIsTemplateFieldDialogOpen(false);
};
return {
// 섹션 템플릿 다이얼로그 상태
isSectionTemplateDialogOpen,
setIsSectionTemplateDialogOpen,
editingSectionTemplateId,
setEditingSectionTemplateId,
// 섹션 템플릿 폼 상태
newSectionTemplateTitle,
setNewSectionTemplateTitle,
newSectionTemplateDescription,
setNewSectionTemplateDescription,
newSectionTemplateCategory,
setNewSectionTemplateCategory,
newSectionTemplateType,
setNewSectionTemplateType,
// 템플릿 불러오기 다이얼로그
isLoadTemplateDialogOpen,
setIsLoadTemplateDialogOpen,
selectedTemplateId,
setSelectedTemplateId,
// 템플릿 필드 다이얼로그 상태
isTemplateFieldDialogOpen,
setIsTemplateFieldDialogOpen,
currentTemplateId,
setCurrentTemplateId,
editingTemplateFieldId,
setEditingTemplateFieldId,
// 템플릿 필드 폼 상태
templateFieldName,
setTemplateFieldName,
templateFieldKey,
setTemplateFieldKey,
templateFieldInputType,
setTemplateFieldInputType,
templateFieldRequired,
setTemplateFieldRequired,
templateFieldOptions,
setTemplateFieldOptions,
templateFieldDescription,
setTemplateFieldDescription,
templateFieldMultiColumn,
setTemplateFieldMultiColumn,
templateFieldColumnCount,
setTemplateFieldColumnCount,
templateFieldColumnNames,
setTemplateFieldColumnNames,
// 템플릿 필드 마스터 항목 관련
templateFieldInputMode,
setTemplateFieldInputMode,
templateFieldShowMasterFieldList,
setTemplateFieldShowMasterFieldList,
templateFieldSelectedMasterFieldId,
setTemplateFieldSelectedMasterFieldId,
// 핸들러
handleAddSectionTemplate,
handleEditSectionTemplate,
handleUpdateSectionTemplate,
handleDeleteSectionTemplate,
handleLoadTemplate,
handleAddTemplateField,
handleEditTemplateField,
handleDeleteTemplateField,
handleAddBOMItemToTemplate,
handleUpdateBOMItemInTemplate,
handleDeleteBOMItemFromTemplate,
resetSectionTemplateForm,
resetTemplateFieldForm,
};
}