diff options
Diffstat (limited to 'components/form-data/spreadJS-dialog.tsx')
| -rw-r--r-- | components/form-data/spreadJS-dialog.tsx | 725 |
1 files changed, 381 insertions, 344 deletions
diff --git a/components/form-data/spreadJS-dialog.tsx b/components/form-data/spreadJS-dialog.tsx index d001463e..91d5672c 100644 --- a/components/form-data/spreadJS-dialog.tsx +++ b/components/form-data/spreadJS-dialog.tsx @@ -107,9 +107,9 @@ interface LoadingProgressProps { const LoadingProgress: React.FC<LoadingProgressProps> = ({ phase, progress, total, isVisible }) => { const percentage = total > 0 ? Math.round((progress / total) * 100) : 0; - + if (!isVisible) return null; - + return ( <div className="absolute inset-0 bg-white/90 flex items-center justify-center z-50"> <div className="bg-white rounded-lg shadow-lg border p-6 min-w-[300px]"> @@ -117,11 +117,11 @@ const LoadingProgress: React.FC<LoadingProgressProps> = ({ phase, progress, tota <Loader className="h-5 w-5 animate-spin text-blue-600" /> <span className="font-medium text-gray-900">Loading Template</span> </div> - + <div className="space-y-2"> <div className="text-sm text-gray-600">{phase}</div> <div className="w-full bg-gray-200 rounded-full h-2"> - <div + <div className="bg-blue-600 h-2 rounded-full transition-all duration-300 ease-out" style={{ width: `${percentage}%` }} /> @@ -161,7 +161,7 @@ export function TemplateViewDialog({ const [validationErrors, setValidationErrors] = React.useState<ValidationError[]>([]); const [selectedTemplateId, setSelectedTemplateId] = React.useState<string>(""); const [availableTemplates, setAvailableTemplates] = React.useState<TemplateItem[]>([]); - + // ๐ ๋ก๋ฉ ์ํ ์ถ๊ฐ const [loadingProgress, setLoadingProgress] = React.useState<{ phase: string; @@ -244,102 +244,102 @@ export function TemplateViewDialog({ } return editableFieldsMap.get(selectedRow.TAG_NO) || []; } - + // SPREAD_LIST๋ GRD_LIST์ ๊ฒฝ์ฐ ์ ์ญ editableFields๋ ์ฌ์ฉํ์ง ์์ return []; }, [templateType, selectedRow?.TAG_NO, editableFieldsMap]); - -const isFieldEditable = React.useCallback((attId: string, rowData?: GenericData) => { - const columnConfig = columnsJSON.find(col => col.key === attId); - if (columnConfig?.shi === "OUT" || columnConfig?.shi === null) { - return false; - } - - if (attId === "TAG_NO" || attId === "TAG_DESC" || attId === "status") { - return false; - } - if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { - // ๊ฐ ํ์ TAG_NO๋ฅผ ๊ธฐ์ค์ผ๋ก ํธ์ง ๊ฐ๋ฅ ์ฌ๋ถ ํ๋จ - if (!rowData?.TAG_NO || !editableFieldsMap.has(rowData.TAG_NO)) { + const isFieldEditable = React.useCallback((attId: string, rowData?: GenericData) => { + const columnConfig = columnsJSON.find(col => col.key === attId); + if (columnConfig?.shi === "OUT" || columnConfig?.shi === null) { return false; } - - const rowEditableFields = editableFieldsMap.get(rowData.TAG_NO) || []; - if (!rowEditableFields.includes(attId)) { + + if (attId === "TAG_NO" || attId === "TAG_DESC" || attId === "status") { return false; } - - if (rowData && (rowData.shi === "OUT" || rowData.shi === null)) { - return false; + + if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { + // ๊ฐ ํ์ TAG_NO๋ฅผ ๊ธฐ์ค์ผ๋ก ํธ์ง ๊ฐ๋ฅ ์ฌ๋ถ ํ๋จ + if (!rowData?.TAG_NO || !editableFieldsMap.has(rowData.TAG_NO)) { + return false; + } + + const rowEditableFields = editableFieldsMap.get(rowData.TAG_NO) || []; + if (!rowEditableFields.includes(attId)) { + return false; + } + + if (rowData && (rowData.shi === "OUT" || rowData.shi === null)) { + return false; + } + return true; } + + // SPREAD_ITEM์ ๊ฒฝ์ฐ ๊ธฐ์กด ๋ก์ง ์ ์ง + if (templateType === 'SPREAD_ITEM') { + return editableFields.includes(attId); + } + return true; - } + }, [templateType, columnsJSON, editableFieldsMap]); // editableFields ์์กด์ฑ ์ ๊ฑฐ - // SPREAD_ITEM์ ๊ฒฝ์ฐ ๊ธฐ์กด ๋ก์ง ์ ์ง - if (templateType === 'SPREAD_ITEM') { - return editableFields.includes(attId); - } + const editableFieldsCount = React.useMemo(() => { + if (templateType === 'SPREAD_ITEM') { + // SPREAD_ITEM์ ๊ฒฝ์ฐ ๊ธฐ์กด ๋ก์ง ์ ์ง + return cellMappings.filter(m => m.isEditable).length; + } - return true; -}, [templateType, columnsJSON, editableFieldsMap]); // editableFields ์์กด์ฑ ์ ๊ฑฐ + if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { + // ๊ฐ ํ๋ณ๋ก ํธ์ง ๊ฐ๋ฅํ ํ๋ ์๋ฅผ ๊ณ์ฐ + let totalEditableCount = 0; -const editableFieldsCount = React.useMemo(() => { - if (templateType === 'SPREAD_ITEM') { - // SPREAD_ITEM์ ๊ฒฝ์ฐ ๊ธฐ์กด ๋ก์ง ์ ์ง - return cellMappings.filter(m => m.isEditable).length; - } - - if (templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') { - // ๊ฐ ํ๋ณ๋ก ํธ์ง ๊ฐ๋ฅํ ํ๋ ์๋ฅผ ๊ณ์ฐ - let totalEditableCount = 0; - - tableData.forEach((rowData, rowIndex) => { - cellMappings.forEach(mapping => { - if (mapping.dataRowIndex === rowIndex) { - if (isFieldEditable(mapping.attId, rowData)) { - totalEditableCount++; + tableData.forEach((rowData, rowIndex) => { + cellMappings.forEach(mapping => { + if (mapping.dataRowIndex === rowIndex) { + if (isFieldEditable(mapping.attId, rowData)) { + totalEditableCount++; + } } - } + }); }); - }); - - return totalEditableCount; - } - - return cellMappings.filter(m => m.isEditable).length; -}, [cellMappings, templateType, tableData, isFieldEditable]); + + return totalEditableCount; + } + + return cellMappings.filter(m => m.isEditable).length; + }, [cellMappings, templateType, tableData, isFieldEditable]); // ๐ ๋ฐฐ์น ์ฒ๋ฆฌ ํจ์๋ค const setBatchValues = React.useCallback(( - activeSheet: any, - valuesToSet: Array<{row: number, col: number, value: any}> + activeSheet: any, + valuesToSet: Array<{ row: number, col: number, value: any }> ) => { console.log(`๐ Setting ${valuesToSet.length} values in batch`); - - const columnGroups = new Map<number, Array<{row: number, value: any}>>(); - - valuesToSet.forEach(({row, col, value}) => { + + const columnGroups = new Map<number, Array<{ row: number, value: any }>>(); + + valuesToSet.forEach(({ row, col, value }) => { if (!columnGroups.has(col)) { columnGroups.set(col, []); } - columnGroups.get(col)!.push({row, value}); + columnGroups.get(col)!.push({ row, value }); }); - + columnGroups.forEach((values, col) => { values.sort((a, b) => a.row - b.row); - + let start = 0; while (start < values.length) { let end = start; while (end + 1 < values.length && values[end + 1].row === values[end].row + 1) { end++; } - + const rangeValues = values.slice(start, end + 1).map(v => v.value); const startRow = values[start].row; - + try { if (rangeValues.length === 1) { activeSheet.setValue(startRow, col, rangeValues[0]); @@ -356,7 +356,7 @@ const editableFieldsCount = React.useMemo(() => { } } } - + start = end + 1; } }); @@ -365,7 +365,7 @@ const editableFieldsCount = React.useMemo(() => { const createCellStyle = React.useCallback((activeSheet: any, row: number, col: number, isEditable: boolean) => { // ๊ธฐ์กด ์คํ์ผ ๊ฐ์ ธ์ค๊ธฐ (์์ผ๋ฉด ์๋ก ์์ฑ) const existingStyle = activeSheet.getStyle(row, col) || new GC.Spread.Sheets.Style(); - + // backColor๋ง ์์ if (isEditable) { existingStyle.backColor = "#bbf7d0"; @@ -374,25 +374,25 @@ const editableFieldsCount = React.useMemo(() => { // ์ฝ๊ธฐ ์ ์ฉ์ผ ๋๋ง ํ
์คํธ ์์ ๋ณ๊ฒฝ (์ ํ์ฌํญ) existingStyle.foreColor = "#4b5563"; } - + return existingStyle; }, []); const setBatchStyles = React.useCallback(( - activeSheet: any, - stylesToSet: Array<{row: number, col: number, isEditable: boolean}> + activeSheet: any, + stylesToSet: Array<{ row: number, col: number, isEditable: boolean }> ) => { console.log(`๐จ Setting ${stylesToSet.length} styles in batch`); - + // ๐ง ๊ฐ๋ณ ์
๋ณ๋ก ์คํ์ผ๊ณผ ์ ๊ธ ์ํ ์ค์ (ํธ์ง ๊ถํ ๋ณด์ฅ) - stylesToSet.forEach(({row, col, isEditable}) => { + stylesToSet.forEach(({ row, col, isEditable }) => { try { const cell = activeSheet.getCell(row, col); const style = createCellStyle(activeSheet, row, col, isEditable); - + activeSheet.setStyle(row, col, style); cell.locked(!isEditable); // ํธ์ง ๊ฐ๋ฅํ๋ฉด ์ ๊ธ ํด์ - + // ๐ ํธ์ง ๊ฐ๋ฅํ ์
์ ๊ธฐ๋ณธ ํ
์คํธ ์๋ํฐ ์ค์ if (isEditable) { const textCellType = new GC.Spread.Sheets.CellTypes.Text(); @@ -511,7 +511,7 @@ const editableFieldsCount = React.useMemo(() => { for (let i = 0; i < rowCount; i++) { try { const targetRow = cellPos.row + i; - + // ๐ง ๊ฐ ์
๋ง๋ค ์๋ก์ด ComboBox ์ธ์คํด์ค ์์ฑ const comboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox(); comboBoxCellType.items(safeOptions); @@ -525,7 +525,7 @@ const editableFieldsCount = React.useMemo(() => { // ComboBox์ Validator ์ ์ฉ activeSheet.setCellType(targetRow, cellPos.col, comboBoxCellType); activeSheet.setDataValidator(targetRow, cellPos.col, cellValidator); - + // ๐ ์ค์: ์
์ ๊ธ ํด์ ๋ฐ ํธ์ง ๊ฐ๋ฅ ์ค์ const cell = activeSheet.getCell(targetRow, cellPos.col); cell.locked(false); @@ -546,7 +546,7 @@ const editableFieldsCount = React.useMemo(() => { const getSafeActiveSheet = React.useCallback((spread: any, functionName: string = 'unknown') => { if (!spread) return null; - + try { let activeSheet = spread.getActiveSheet(); if (!activeSheet) { @@ -568,7 +568,7 @@ const editableFieldsCount = React.useMemo(() => { const ensureRowCapacity = React.useCallback((activeSheet: any, requiredRowCount: number) => { try { if (!activeSheet) return false; - + const currentRowCount = activeSheet.getRowCount(); if (requiredRowCount > currentRowCount) { const newRowCount = requiredRowCount + 10; @@ -584,7 +584,7 @@ const editableFieldsCount = React.useMemo(() => { const ensureColumnCapacity = React.useCallback((activeSheet: any, requiredColumnCount: number) => { try { if (!activeSheet) return false; - + const currentColumnCount = activeSheet.getColumnCount(); if (requiredColumnCount > currentColumnCount) { const newColumnCount = requiredColumnCount + 10; @@ -606,206 +606,206 @@ const editableFieldsCount = React.useMemo(() => { }, []); // ๐ ์ต์ ํ๋ GRD_LIST ์์ฑ - // ๐ ์ต์ ํ๋ GRD_LIST ์์ฑ (TAG_DESC ์ปฌ๋ผ ํ๊ณ ์ ํฌํจ) -const createGrdListTableOptimized = React.useCallback((activeSheet: any, template: TemplateItem) => { - console.log('๐ Creating optimized GRD_LIST table with TAG_DESC freeze'); - - const visibleColumns = columnsJSON - .filter(col => col.hidden !== true) - .sort((a, b) => (a.seq ?? 999999) - (b.seq ?? 999999)); - - if (visibleColumns.length === 0) return []; - - const startCol = 1; - const dataStartRow = 1; - const mappings: CellMapping[] = []; - - ensureColumnCapacity(activeSheet, startCol + visibleColumns.length); - ensureRowCapacity(activeSheet, dataStartRow + tableData.length); - - // ๐ง TAG_DESC ์ปฌ๋ผ ์์น ์ฐพ๊ธฐ (ํ๊ณ ์ ์ฉ) - const tagDescColumnIndex = visibleColumns.findIndex(col => col.key === 'TAG_DESC'); - let freezeColumnCount = 0; - - if (tagDescColumnIndex !== -1) { - // TAG_DESC ์ปฌ๋ผ๊น์ง ํฌํจํด์ ๊ณ ์ (startCol + tagDescColumnIndex + 1) - freezeColumnCount = startCol + tagDescColumnIndex + 1; - console.log(`๐ง TAG_DESC found at column index ${tagDescColumnIndex}, freezing ${freezeColumnCount} columns`); - } else { - // TAG_DESC๊ฐ ์์ผ๋ฉด TAG_NO๊น์ง๋ง ๊ณ ์ (์ผ๋ฐ์ ์ผ๋ก ์ฒซ ๋ฒ์งธ ์ปฌ๋ผ) - const tagNoColumnIndex = visibleColumns.findIndex(col => col.key === 'TAG_NO'); - if (tagNoColumnIndex !== -1) { - freezeColumnCount = startCol + tagNoColumnIndex + 1; - console.log(`๐ง TAG_NO found at column index ${tagNoColumnIndex}, freezing ${freezeColumnCount} columns`); + // ๐ ์ต์ ํ๋ GRD_LIST ์์ฑ (TAG_DESC ์ปฌ๋ผ ํ๊ณ ์ ํฌํจ) + const createGrdListTableOptimized = React.useCallback((activeSheet: any, template: TemplateItem) => { + console.log('๐ Creating optimized GRD_LIST table with TAG_DESC freeze'); + + const visibleColumns = columnsJSON + .filter(col => col.hidden !== true) + .sort((a, b) => (a.seq ?? 999999) - (b.seq ?? 999999)); + + if (visibleColumns.length === 0) return []; + + const startCol = 1; + const dataStartRow = 1; + const mappings: CellMapping[] = []; + + ensureColumnCapacity(activeSheet, startCol + visibleColumns.length); + ensureRowCapacity(activeSheet, dataStartRow + tableData.length); + + // ๐ง TAG_DESC ์ปฌ๋ผ ์์น ์ฐพ๊ธฐ (ํ๊ณ ์ ์ฉ) + const tagDescColumnIndex = visibleColumns.findIndex(col => col.key === 'TAG_DESC'); + let freezeColumnCount = 0; + + if (tagDescColumnIndex !== -1) { + // TAG_DESC ์ปฌ๋ผ๊น์ง ํฌํจํด์ ๊ณ ์ (startCol + tagDescColumnIndex + 1) + freezeColumnCount = startCol + tagDescColumnIndex + 1; + console.log(`๐ง TAG_DESC found at column index ${tagDescColumnIndex}, freezing ${freezeColumnCount} columns`); + } else { + // TAG_DESC๊ฐ ์์ผ๋ฉด TAG_NO๊น์ง๋ง ๊ณ ์ (์ผ๋ฐ์ ์ผ๋ก ์ฒซ ๋ฒ์งธ ์ปฌ๋ผ) + const tagNoColumnIndex = visibleColumns.findIndex(col => col.key === 'TAG_NO'); + if (tagNoColumnIndex !== -1) { + freezeColumnCount = startCol + tagNoColumnIndex + 1; + console.log(`๐ง TAG_NO found at column index ${tagNoColumnIndex}, freezing ${freezeColumnCount} columns`); + } } - } - // ํค๋ ์์ฑ - const headerStyle = new GC.Spread.Sheets.Style(); - headerStyle.backColor = "#3b82f6"; - headerStyle.foreColor = "#ffffff"; - headerStyle.font = "bold 12px Arial"; - headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; - - visibleColumns.forEach((column, colIndex) => { - const targetCol = startCol + colIndex; - const cell = activeSheet.getCell(0, targetCol); - cell.value(column.label); - cell.locked(true); - activeSheet.setStyle(0, targetCol, headerStyle); - }); + // ํค๋ ์์ฑ + const headerStyle = new GC.Spread.Sheets.Style(); + headerStyle.backColor = "#3b82f6"; + headerStyle.foreColor = "#ffffff"; + headerStyle.font = "bold 12px Arial"; + headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; - // ๐ ๋ฐ์ดํฐ ๋ฐฐ์น ์ฒ๋ฆฌ ์ค๋น - const allValues: Array<{row: number, col: number, value: any}> = []; - const allStyles: Array<{row: number, col: number, isEditable: boolean}> = []; - - // ๐ง ํธ์ง ๊ฐ๋ฅํ ์
์ ๋ณด ์์ง (๋๋กญ๋ค์ด์ฉ) - const dropdownConfigs: Array<{ - startRow: number; - col: number; - rowCount: number; - options: string[]; - editableRows: number[]; // ํธ์ง ๊ฐ๋ฅํ ํ๋ง ์ถ์ - }> = []; - - visibleColumns.forEach((column, colIndex) => { - const targetCol = startCol + colIndex; - - // ๋๋กญ๋ค์ด ์ค์ ์ ์ํ ํธ์ง ๊ฐ๋ฅํ ํ ์ฐพ๊ธฐ - if (column.type === "LIST" && column.options) { - const editableRows: number[] = []; - tableData.forEach((rowData, rowIndex) => { - if (isFieldEditable(column.key, rowData)) { // rowData ์ ๋ฌ - editableRows.push(dataStartRow + rowIndex); + visibleColumns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + const cell = activeSheet.getCell(0, targetCol); + cell.value(column.label); + cell.locked(true); + activeSheet.setStyle(0, targetCol, headerStyle); + }); + + // ๐ ๋ฐ์ดํฐ ๋ฐฐ์น ์ฒ๋ฆฌ ์ค๋น + const allValues: Array<{ row: number, col: number, value: any }> = []; + const allStyles: Array<{ row: number, col: number, isEditable: boolean }> = []; + + // ๐ง ํธ์ง ๊ฐ๋ฅํ ์
์ ๋ณด ์์ง (๋๋กญ๋ค์ด์ฉ) + const dropdownConfigs: Array<{ + startRow: number; + col: number; + rowCount: number; + options: string[]; + editableRows: number[]; // ํธ์ง ๊ฐ๋ฅํ ํ๋ง ์ถ์ + }> = []; + + visibleColumns.forEach((column, colIndex) => { + const targetCol = startCol + colIndex; + + // ๋๋กญ๋ค์ด ์ค์ ์ ์ํ ํธ์ง ๊ฐ๋ฅํ ํ ์ฐพ๊ธฐ + if (column.type === "LIST" && column.options) { + const editableRows: number[] = []; + tableData.forEach((rowData, rowIndex) => { + if (isFieldEditable(column.key, rowData)) { // rowData ์ ๋ฌ + editableRows.push(dataStartRow + rowIndex); + } + }); + + if (editableRows.length > 0) { + dropdownConfigs.push({ + startRow: dataStartRow, + col: targetCol, + rowCount: tableData.length, + options: column.options, + editableRows: editableRows + }); } - }); - - if (editableRows.length > 0) { - dropdownConfigs.push({ - startRow: dataStartRow, + } + + tableData.forEach((rowData, rowIndex) => { + const targetRow = dataStartRow + rowIndex; + const cellEditable = isFieldEditable(column.key, rowData); // rowData ์ ๋ฌ + const value = rowData[column.key]; + + mappings.push({ + attId: column.key, + cellAddress: getCellAddress(targetRow, targetCol), + isEditable: cellEditable, + dataRowIndex: rowIndex + }); + + allValues.push({ + row: targetRow, col: targetCol, - rowCount: tableData.length, - options: column.options, - editableRows: editableRows + value: value ?? null + }); + + allStyles.push({ + row: targetRow, + col: targetCol, + isEditable: cellEditable }); - } - } - - tableData.forEach((rowData, rowIndex) => { - const targetRow = dataStartRow + rowIndex; - const cellEditable = isFieldEditable(column.key, rowData); // rowData ์ ๋ฌ - const value = rowData[column.key]; - - mappings.push({ - attId: column.key, - cellAddress: getCellAddress(targetRow, targetCol), - isEditable: cellEditable, - dataRowIndex: rowIndex - }); - - allValues.push({ - row: targetRow, - col: targetCol, - value: value ?? null - }); - - allStyles.push({ - row: targetRow, - col: targetCol, - isEditable: cellEditable }); }); - }); - // ๐ ๋ฐฐ์น๋ก ๊ฐ๊ณผ ์คํ์ผ ์ค์ - setBatchValues(activeSheet, allValues); - setBatchStyles(activeSheet, allStyles); + // ๐ ๋ฐฐ์น๋ก ๊ฐ๊ณผ ์คํ์ผ ์ค์ + setBatchValues(activeSheet, allValues); + setBatchStyles(activeSheet, allStyles); - // ๐ฏ ๊ฐ์ ๋ ๋๋กญ๋ค์ด ์ค์ (ํธ์ง ๊ฐ๋ฅํ ์
์๋ง) - dropdownConfigs.forEach(({ col, options, editableRows }) => { - try { - console.log(`๐ฏ Setting dropdown for column ${col}, editable rows: ${editableRows.length}`); - - const safeOptions = options - .filter(opt => opt !== null && opt !== undefined && opt !== '') - .map(opt => String(opt).trim()) - .filter(opt => opt.length > 0) - .slice(0, 20); + // ๐ฏ ๊ฐ์ ๋ ๋๋กญ๋ค์ด ์ค์ (ํธ์ง ๊ฐ๋ฅํ ์
์๋ง) + dropdownConfigs.forEach(({ col, options, editableRows }) => { + try { + console.log(`๐ฏ Setting dropdown for column ${col}, editable rows: ${editableRows.length}`); - if (safeOptions.length === 0) return; + const safeOptions = options + .filter(opt => opt !== null && opt !== undefined && opt !== '') + .map(opt => String(opt).trim()) + .filter(opt => opt.length > 0) + .slice(0, 20); - // ํธ์ง ๊ฐ๋ฅํ ํ์๋ง ๋๋กญ๋ค์ด ์ ์ฉ - editableRows.forEach(targetRow => { - try { - const comboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox(); - comboBoxCellType.items(safeOptions); - comboBoxCellType.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); + if (safeOptions.length === 0) return; - const cellValidator = GC.Spread.Sheets.DataValidation.createListValidator(safeOptions.join(',')); - cellValidator.showInputMessage(false); - cellValidator.showErrorMessage(false); + // ํธ์ง ๊ฐ๋ฅํ ํ์๋ง ๋๋กญ๋ค์ด ์ ์ฉ + editableRows.forEach(targetRow => { + try { + const comboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox(); + comboBoxCellType.items(safeOptions); + comboBoxCellType.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); - activeSheet.setCellType(targetRow, col, comboBoxCellType); - activeSheet.setDataValidator(targetRow, col, cellValidator); - - // ๐ ํธ์ง ๊ถํ ๋ช
์์ ์ค์ - const cell = activeSheet.getCell(targetRow, col); - cell.locked(false); + const cellValidator = GC.Spread.Sheets.DataValidation.createListValidator(safeOptions.join(',')); + cellValidator.showInputMessage(false); + cellValidator.showErrorMessage(false); - console.log(`โ
Dropdown applied to editable cell [${targetRow}, ${col}]`); - } catch (cellError) { - console.warn(`โ ๏ธ Failed to apply dropdown to [${targetRow}, ${col}]:`, cellError); - } - }); - } catch (error) { - console.error(`โ Dropdown config failed for column ${col}:`, error); - } - }); + activeSheet.setCellType(targetRow, col, comboBoxCellType); + activeSheet.setDataValidator(targetRow, col, cellValidator); - // ๐ง ํ๊ณ ์ ์ค์ - if (freezeColumnCount > 0) { - try { - activeSheet.frozenColumnCount(freezeColumnCount); - activeSheet.frozenRowCount(1); // ํค๋ ํ๋ ๊ณ ์ - - console.log(`๐ง Freeze applied: ${freezeColumnCount} columns, 1 row (header)`); - - // ๐จ ๊ณ ์ ๋ ์ปฌ๋ผ์ ํน๋ณํ ์คํ์ผ ์ถ๊ฐ (์ ํ์ฌํญ) - for (let col = 0; col < freezeColumnCount; col++) { - for (let row = 0; row <= tableData.length; row++) { - try { - const currentStyle = activeSheet.getStyle(row, col) || new GC.Spread.Sheets.Style(); - - if (row === 0) { - // ํค๋๋ ๊ธฐ์กด ์คํ์ผ ์ ์ง - continue; - } else { - // ๋ฐ์ดํฐ ์
์ ๊ณ ์ ๊ตฌ๋ถ์ ์ถ๊ฐ - if (col === freezeColumnCount - 1) { - currentStyle.borderRight = new GC.Spread.Sheets.LineBorder("#2563eb", GC.Spread.Sheets.LineStyle.medium); - activeSheet.setStyle(row, col, currentStyle); + // ๐ ํธ์ง ๊ถํ ๋ช
์์ ์ค์ + const cell = activeSheet.getCell(targetRow, col); + cell.locked(false); + + console.log(`โ
Dropdown applied to editable cell [${targetRow}, ${col}]`); + } catch (cellError) { + console.warn(`โ ๏ธ Failed to apply dropdown to [${targetRow}, ${col}]:`, cellError); + } + }); + } catch (error) { + console.error(`โ Dropdown config failed for column ${col}:`, error); + } + }); + + // ๐ง ํ๊ณ ์ ์ค์ + if (freezeColumnCount > 0) { + try { + activeSheet.frozenColumnCount(freezeColumnCount); + activeSheet.frozenRowCount(1); // ํค๋ ํ๋ ๊ณ ์ + + console.log(`๐ง Freeze applied: ${freezeColumnCount} columns, 1 row (header)`); + + // ๐จ ๊ณ ์ ๋ ์ปฌ๋ผ์ ํน๋ณํ ์คํ์ผ ์ถ๊ฐ (์ ํ์ฌํญ) + for (let col = 0; col < freezeColumnCount; col++) { + for (let row = 0; row <= tableData.length; row++) { + try { + const currentStyle = activeSheet.getStyle(row, col) || new GC.Spread.Sheets.Style(); + + if (row === 0) { + // ํค๋๋ ๊ธฐ์กด ์คํ์ผ ์ ์ง + continue; + } else { + // ๋ฐ์ดํฐ ์
์ ๊ณ ์ ๊ตฌ๋ถ์ ์ถ๊ฐ + if (col === freezeColumnCount - 1) { + currentStyle.borderRight = new GC.Spread.Sheets.LineBorder("#2563eb", GC.Spread.Sheets.LineStyle.medium); + activeSheet.setStyle(row, col, currentStyle); + } } + } catch (styleError) { + console.warn(`โ ๏ธ Failed to apply freeze border style to [${row}, ${col}]:`, styleError); } - } catch (styleError) { - console.warn(`โ ๏ธ Failed to apply freeze border style to [${row}, ${col}]:`, styleError); } } + } catch (freezeError) { + console.error('โ Failed to apply freeze:', freezeError); } - } catch (freezeError) { - console.error('โ Failed to apply freeze:', freezeError); } - } - setOptimalColumnWidths(activeSheet, visibleColumns, startCol, tableData); - - console.log(`โ
Optimized GRD_LIST created with freeze:`); - console.log(` - Total mappings: ${mappings.length}`); - console.log(` - Editable cells: ${mappings.filter(m => m.isEditable).length}`); - console.log(` - Dropdown configs: ${dropdownConfigs.length}`); - console.log(` - Frozen columns: ${freezeColumnCount}`); - - return mappings; -}, [tableData, columnsJSON, isFieldEditable, setBatchValues, setBatchStyles, ensureColumnCapacity, ensureRowCapacity, getCellAddress, setOptimalColumnWidths]); + setOptimalColumnWidths(activeSheet, visibleColumns, startCol, tableData); + + console.log(`โ
Optimized GRD_LIST created with freeze:`); + console.log(` - Total mappings: ${mappings.length}`); + console.log(` - Editable cells: ${mappings.filter(m => m.isEditable).length}`); + console.log(` - Dropdown configs: ${dropdownConfigs.length}`); + console.log(` - Frozen columns: ${freezeColumnCount}`); + + return mappings; + }, [tableData, columnsJSON, isFieldEditable, setBatchValues, setBatchStyles, ensureColumnCapacity, ensureRowCapacity, getCellAddress, setOptimalColumnWidths]); const setupSheetProtectionAndEvents = React.useCallback((activeSheet: any, mappings: CellMapping[]) => { console.log(`๐ก๏ธ Setting up protection and events for ${mappings.length} mappings`); @@ -817,22 +817,22 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat mappings.forEach((mapping) => { const cellPos = parseCellAddress(mapping.cellAddress); if (!cellPos) return; - + try { const cell = activeSheet.getCell(cellPos.row, cellPos.col); const columnConfig = columnsJSON.find(col => col.key === mapping.attId); - + if (mapping.isEditable) { // ๐ ํธ์ง ๊ฐ๋ฅํ ์
์ค์ ๊ฐํ cell.locked(false); - + if (columnConfig?.type === "LIST" && columnConfig.options) { // LIST ํ์
: ์ ComboBox ์ธ์คํด์ค ์์ฑ const comboBox = new GC.Spread.Sheets.CellTypes.ComboBox(); comboBox.items(columnConfig.options); comboBox.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); activeSheet.setCellType(cellPos.row, cellPos.col, comboBox); - + // DataValidation๋ ์ถ๊ฐ const validator = GC.Spread.Sheets.DataValidation.createListValidator(columnConfig.options.join(',')); activeSheet.setDataValidator(cellPos.row, cellPos.col, validator); @@ -840,7 +840,7 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat // NUMBER ํ์
: ์ซ์ ์
๋ ฅ ํ์ฉ const textCellType = new GC.Spread.Sheets.CellTypes.Text(); activeSheet.setCellType(cellPos.row, cellPos.col, textCellType); - + // ์ซ์ validation ์ถ๊ฐ (์๋ฌ ๋ฉ์์ง ์์ด) const numberValidator = GC.Spread.Sheets.DataValidation.createNumberValidator( GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, @@ -854,11 +854,11 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat const textCellType = new GC.Spread.Sheets.CellTypes.Text(); activeSheet.setCellType(cellPos.row, cellPos.col, textCellType); } - + // ํธ์ง ๊ฐ๋ฅ ์คํ์ผ ์ฌ์ ์ฉ const editableStyle = createCellStyle(activeSheet, cellPos.row, cellPos.col, true); activeSheet.setStyle(cellPos.row, cellPos.col, editableStyle); - + console.log(`๐ Cell [${cellPos.row}, ${cellPos.col}] ${mapping.attId} set as EDITABLE`); } else { // ์ฝ๊ธฐ ์ ์ฉ ์
@@ -930,7 +930,7 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat const dataRowIndex = exactMapping.dataRowIndex; if (dataRowIndex >= 0 && dataRowIndex < tableData.length) { const rowData = tableData[dataRowIndex]; - if (rowData?.shi === "OUT" || rowData?.shi === null ) { + if (rowData?.shi === "OUT" || rowData?.shi === null) { console.log(`๐ซ Row ${dataRowIndex} is in SHI mode`); toast.warning(`Row ${dataRowIndex + 1}: ${exactMapping.attId} field is read-only (SHI mode)`); info.cancel = true; @@ -998,7 +998,7 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat console.log('๐ Starting optimized spread initialization...'); setIsInitializing(true); updateProgress('Initializing...', 0, 100); - + setCurrentSpread(spread); setHasChanges(false); setValidationErrors([]); @@ -1007,7 +1007,7 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat spread.suspendPaint(); spread.suspendEvent(); spread.suspendCalcService(); - + updateProgress('Setting up workspace...', 10, 100); try { @@ -1021,19 +1021,19 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat if (templateType === 'GRD_LIST') { updateProgress('Creating dynamic table...', 20, 100); - + spread.clearSheets(); spread.addSheet(0); const sheet = spread.getSheet(0); sheet.name('Data'); spread.setActiveSheet('Data'); - + updateProgress('Processing table data...', 50, 100); mappings = createGrdListTableOptimized(sheet, workingTemplate); - + } else { updateProgress('Loading template structure...', 20, 100); - + let contentJson = workingTemplate.SPR_LST_SETUP?.CONTENT || workingTemplate.SPR_ITM_LST_SETUP?.CONTENT; let dataSheets = workingTemplate.SPR_LST_SETUP?.DATA_SHEETS || workingTemplate.SPR_ITM_LST_SETUP?.DATA_SHEETS; @@ -1042,10 +1042,10 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat } const jsonData = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson; - + updateProgress('Loading template layout...', 40, 100); spread.fromJSON(jsonData); - + activeSheet = getSafeActiveSheet(spread, 'after-fromJSON'); if (!activeSheet) { throw new Error('ActiveSheet became null after loading template'); @@ -1058,15 +1058,24 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat const activeSheetName = workingTemplate.SPR_LST_SETUP?.ACT_SHEET; - const matchingDataSheets = dataSheets.filter(ds => - ds.SHEET_NAME === activeSheetName - ); - if (activeSheetName && spread.getSheetFromName(activeSheetName)) { - spread.setActiveSheet(activeSheetName); - } + // ๐ง ๊ฐ DATA_SHEET๋ณ๋ก ์ฒ๋ฆฌ + dataSheets.forEach(dataSheet => { + const sheetName = dataSheet.SHEET_NAME; + + // ํด๋น ์ํธ๊ฐ ์กด์ฌํ๋์ง ํ์ธ + const targetSheet = spread.getSheetFromName(sheetName); + if (!targetSheet) { + console.warn(`โ ๏ธ Sheet '${sheetName}' not found in template`); + return; + } + + console.log(`๐ Processing sheet: ${sheetName}`); + + // ํด๋น ์ํธ๋ก ์ ํ + spread.setActiveSheet(sheetName); + const currentSheet = spread.getActiveSheet(); - matchingDataSheets.forEach(dataSheet => { if (dataSheet.MAP_CELL_ATT && dataSheet.MAP_CELL_ATT.length > 0) { dataSheet.MAP_CELL_ATT.forEach((mapping: any) => { const { ATT_ID, IN } = mapping; @@ -1076,11 +1085,11 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat if (!cellPos) return; const requiredRows = cellPos.row + tableData.length; - if (!ensureRowCapacity(activeSheet, requiredRows)) return; + if (!ensureRowCapacity(currentSheet, requiredRows)) return; // ๐ ๋ฐฐ์น ๋ฐ์ดํฐ ์ค๋น - const valuesToSet: Array<{row: number, col: number, value: any}> = []; - const stylesToSet: Array<{row: number, col: number, isEditable: boolean}> = []; + const valuesToSet: Array<{ row: number, col: number, value: any }> = []; + const stylesToSet: Array<{ row: number, col: number, isEditable: boolean }> = []; tableData.forEach((rowData, index) => { const targetRow = cellPos.row + index; @@ -1108,67 +1117,95 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat }); // ๐ ๋ฐฐ์น ์ฒ๋ฆฌ - setBatchValues(activeSheet, valuesToSet); - setBatchStyles(activeSheet, stylesToSet); + setBatchValues(currentSheet, valuesToSet); + setBatchStyles(currentSheet, stylesToSet); // ๋๋กญ๋ค์ด ์ค์ const columnConfig = columnsJSON.find(col => col.key === ATT_ID); if (columnConfig?.type === "LIST" && columnConfig.options) { const hasEditableRows = tableData.some((rowData) => isFieldEditable(ATT_ID, rowData)); if (hasEditableRows) { - setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, tableData.length); + setupOptimizedListValidation(currentSheet, cellPos, columnConfig.options, tableData.length); } } }); } }); - + + // ๐ง ๋ง์ง๋ง์ activeSheetName์ผ๋ก ๋ค์ ์ ํ + if (activeSheetName && spread.getSheetFromName(activeSheetName)) { + spread.setActiveSheet(activeSheetName); + activeSheet = spread.getActiveSheet(); + } + } else if (templateType === 'SPREAD_ITEM' && selectedRow) { updateProgress('Setting up form fields...', 60, 100); - const activeSheetName = workingTemplate.SPR_ITM_LST_SETUP?.ACT_SHEET; + const activeSheetName = workingTemplate.SPR_ITM_LST_SETUP?.ACT_SHEET; - const matchingDataSheets = dataSheets.filter(ds => - ds.SHEET_NAME === activeSheetName - ); - - if (activeSheetName && spread.getSheetFromName(activeSheetName)) { - spread.setActiveSheet(activeSheetName); + if (activeSheetName && spread.getSheetFromName(activeSheetName)) { + spread.setActiveSheet(activeSheetName); + } + + dataSheets.forEach(dataSheet => { + + const sheetName = dataSheet.SHEET_NAME; + // ํด๋น ์ํธ๊ฐ ์กด์ฌํ๋์ง ํ์ธ + const targetSheet = spread.getSheetFromName(sheetName); + if (!targetSheet) { + console.warn(`โ ๏ธ Sheet '${sheetName}' not found in template`); + return; } - matchingDataSheets.forEach(dataSheet => { + console.log(`๐ Processing sheet: ${sheetName}`); + + // ํด๋น ์ํธ๋ก ์ ํ + spread.setActiveSheet(sheetName); + const currentSheet = spread.getActiveSheet(); + + dataSheet.MAP_CELL_ATT?.forEach((mapping: any) => { const { ATT_ID, IN } = mapping; const cellPos = parseCellAddress(IN); + + if (cellPos) { const isEditable = isFieldEditable(ATT_ID); const value = selectedRow[ATT_ID]; - + mappings.push({ attId: ATT_ID, cellAddress: IN, isEditable: isEditable, dataRowIndex: 0 }); - - const cell = activeSheet.getCell(cellPos.row, cellPos.col); + + const cell = currentSheet.getCell(cellPos.row, cellPos.col); cell.value(value ?? null); - - const style = createCellStyle(activeSheet, cellPos.row, cellPos.col, isEditable); - activeSheet.setStyle(cellPos.row, cellPos.col, style); - + + const style = createCellStyle(currentSheet, cellPos.row, cellPos.col, isEditable); + currentSheet.setStyle(cellPos.row, cellPos.col, style); + const columnConfig = columnsJSON.find(col => col.key === ATT_ID); if (columnConfig?.type === "LIST" && columnConfig.options && isEditable) { - setupOptimizedListValidation(activeSheet, cellPos, columnConfig.options, 1); + setupOptimizedListValidation(currentSheet, cellPos, columnConfig.options, 1); } } }); + + // ๐ง ๋ง์ง๋ง์ activeSheetName์ผ๋ก ๋ค์ ์ ํ + if (activeSheetName && spread.getSheetFromName(activeSheetName)) { + spread.setActiveSheet(activeSheetName); + activeSheet = spread.getActiveSheet(); + } + + }); } } updateProgress('Configuring interactions...', 90, 100); setCellMappings(mappings); - + const finalActiveSheet = getSafeActiveSheet(spread, 'setupEvents'); if (finalActiveSheet) { setupSheetProtectionAndEvents(finalActiveSheet, mappings); @@ -1201,20 +1238,20 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat toast.info("No changes to save"); return; } - + const errors = validateAllData(); if (errors.length > 0) { toast.error(`Cannot save: ${errors.length} validation errors found. Please fix them first.`); return; } - + try { setIsPending(true); const activeSheet = currentSpread.getActiveSheet(); - + if (templateType === 'SPREAD_ITEM' && selectedRow) { const dataToSave = { ...selectedRow }; - + cellMappings.forEach(mapping => { if (mapping.isEditable) { const cellPos = parseCellAddress(mapping.cellAddress); @@ -1224,59 +1261,59 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat } } }); - + dataToSave.TAG_NO = selectedRow.TAG_NO; - + const { success, message } = await updateFormDataInDB( formCode, contractItemId, dataToSave ); - + if (!success) { toast.error(message); return; } - + toast.success("Changes saved successfully!"); onUpdateSuccess?.(dataToSave); - + } else if ((templateType === 'SPREAD_LIST' || templateType === 'GRD_LIST') && tableData.length > 0) { console.log('๐ Starting batch save process...'); - + const updatedRows: GenericData[] = []; let saveCount = 0; let checkedCount = 0; - + for (let i = 0; i < tableData.length; i++) { const originalRow = tableData[i]; const dataToSave = { ...originalRow }; let hasRowChanges = false; - + console.log(`๐ Processing row ${i} (TAG_NO: ${originalRow.TAG_NO})`); - + cellMappings.forEach(mapping => { if (mapping.dataRowIndex === i && mapping.isEditable) { checkedCount++; - + // ๐ง isFieldEditable๊ณผ ๋์ผํ ๋ก์ง ์ฌ์ฉ const rowData = tableData[i]; const fieldEditable = isFieldEditable(mapping.attId, rowData); - + console.log(` ๐ Field ${mapping.attId}: fieldEditable=${fieldEditable}, mapping.isEditable=${mapping.isEditable}`); - + if (fieldEditable) { const cellPos = parseCellAddress(mapping.cellAddress); if (cellPos) { const cellValue = activeSheet.getValue(cellPos.row, cellPos.col); const originalValue = originalRow[mapping.attId]; - + // ๐ง ๊ฐ์ ๋ ๊ฐ ๋น๊ต (ํ์
๋ณํ ๋ฐ null/undefined ์ฒ๋ฆฌ) const normalizedCellValue = cellValue === null || cellValue === undefined ? "" : String(cellValue).trim(); const normalizedOriginalValue = originalValue === null || originalValue === undefined ? "" : String(originalValue).trim(); - + console.log(` ๐ ${mapping.attId}: "${normalizedOriginalValue}" -> "${normalizedCellValue}"`); - + if (normalizedCellValue !== normalizedOriginalValue) { dataToSave[mapping.attId] = cellValue; hasRowChanges = true; @@ -1286,18 +1323,18 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat } } }); - + if (hasRowChanges) { console.log(`๐พ Saving row ${i} with changes`); dataToSave.TAG_NO = originalRow.TAG_NO; - + try { const { success, message } = await updateFormDataInDB( formCode, contractItemId, dataToSave ); - + if (success) { updatedRows.push(dataToSave); saveCount++; @@ -1317,9 +1354,9 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat console.log(`โน๏ธ No changes in row ${i}`); } } - + console.log(`๐ Save summary: ${saveCount} saved, ${checkedCount} fields checked`); - + if (saveCount > 0) { toast.success(`${saveCount} rows saved successfully!`); onUpdateSuccess?.(updatedRows); @@ -1328,10 +1365,10 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat toast.warning("No actual changes were found to save. Please check if the values were properly edited."); } } - + setHasChanges(false); setValidationErrors([]); - + } catch (error) { console.error("Error saving changes:", error); toast.error("An unexpected error occurred while saving"); @@ -1339,16 +1376,16 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat setIsPending(false); } }, [ - currentSpread, - hasChanges, - templateType, - selectedRow, - tableData, - formCode, - contractItemId, - onUpdateSuccess, - cellMappings, - columnsJSON, + currentSpread, + hasChanges, + templateType, + selectedRow, + tableData, + formCode, + contractItemId, + onUpdateSuccess, + cellMappings, + columnsJSON, validateAllData, isFieldEditable // ๐ง ์์กด์ฑ ์ถ๊ฐ ]); @@ -1357,11 +1394,11 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat const isDataValid = templateType === 'SPREAD_ITEM' ? !!selectedRow : tableData.length > 0; const dataCount = templateType === 'SPREAD_ITEM' ? 1 : tableData.length; - + return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent - className="w-[90vw] max-w-[1400px] h-[85vh] flex flex-col fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-50" + className="w-[95vw] max-w-[95vw] h-[90vh] flex flex-col fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-50" > <DialogHeader className="flex-shrink-0"> <DialogTitle>SEDP Template - {formCode}</DialogTitle> @@ -1439,13 +1476,13 @@ const createGrdListTableOptimized = React.useCallback((activeSheet: any, templat <div className="flex-1 overflow-hidden relative"> {/* ๐ ๋ก๋ฉ ํ๋ก๊ทธ๋ ์ค ์ค๋ฒ๋ ์ด */} - <LoadingProgress + <LoadingProgress phase={loadingProgress?.phase || ''} progress={loadingProgress?.progress || 0} total={loadingProgress?.total || 100} isVisible={isInitializing && !!loadingProgress} /> - + {selectedTemplate && isClient && isDataValid ? ( <SpreadSheets key={`${templateType}-${selectedTemplate.TMPL_ID}-${selectedTemplateId}`} |