diff options
Diffstat (limited to 'components/form-data/form-data-table-columns.tsx')
| -rw-r--r-- | components/form-data/form-data-table-columns.tsx | 47 |
1 files changed, 35 insertions, 12 deletions
diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx index de479efb..b088276e 100644 --- a/components/form-data/form-data-table-columns.tsx +++ b/components/form-data/form-data-table-columns.tsx @@ -57,6 +57,7 @@ interface GetColumnsProps<TData> { // 체크박스 선택 관련 props selectedRows?: Record<string, boolean>; onRowSelectionChange?: (updater: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void; + editableFieldsMap?: Map<string, string[]>; // 새로 추가 } /** @@ -72,6 +73,7 @@ export function getColumns<TData extends object>({ tempCount, selectedRows = {}, onRowSelectionChange, + editableFieldsMap = new Map(), // 새로 추가 }: GetColumnsProps<TData>): ColumnDef<TData>[] { const columns: ColumnDef<TData>[] = []; @@ -139,42 +141,64 @@ export function getColumns<TData extends object>({ minWidth: 80, paddingFactor: 1.2, maxWidth: col.key === "TAG_NO" ? 120 : 150, - isReadOnly: col.shi === true, // shi 정보를 메타데이터에 저장 + isReadOnly: col.shi === true, }, - // (3) 실제 셀(cell) 렌더링: type에 따라 분기 가능 + cell: ({ row }) => { const cellValue = row.getValue(col.key); - // shi 속성이 true인 경우 적용할 스타일 - const isReadOnly = col.shi === true; - const readOnlyClass = isReadOnly ? "read-only-cell" : ""; + // 기본 읽기 전용 여부 (shi 속성 기반) + let isReadOnly = col.shi === true; - // 읽기 전용 셀의 스타일 (인라인 스타일과 클래스 동시 적용) + // 동적 읽기 전용 여부 계산 + if (!isReadOnly && col.key !== 'TAG_NO' && col.key !== 'TAG_DESC') { + const tagNo = row.getValue('TAG_NO') as string; + if (tagNo && editableFieldsMap.has(tagNo)) { + const editableFields = editableFieldsMap.get(tagNo) || []; + // 해당 TAG의 편집 가능 필드 목록에 없으면 읽기 전용 + isReadOnly = !editableFields.includes(col.key); + } else { + // TAG_NO가 없거나 editableFieldsMap에 없으면 읽기 전용 + isReadOnly = true; + } + } + + const readOnlyClass = isReadOnly ? "read-only-cell" : ""; const cellStyle = isReadOnly ? { backgroundColor: '#f5f5f5', color: '#666', cursor: 'not-allowed' } : {}; + // 툴팁 메시지 설정 + let tooltipMessage = ""; + if (isReadOnly) { + if (col.shi === true) { + tooltipMessage = "SHI 전용 필드입니다"; + } else if (col.key === 'TAG_NO' || col.key === 'TAG_DESC') { + tooltipMessage = "기본 필드는 수정할 수 없습니다"; + } else { + tooltipMessage = "이 TAG 클래스에서는 편집할 수 없는 필드입니다"; + } + } + // 데이터 타입별 처리 switch (col.type) { case "NUMBER": - // 예: number인 경우 콤마 등 표시 return ( <div className={readOnlyClass} style={cellStyle} - title={isReadOnly ? "읽기 전용 필드입니다" : ""} + title={tooltipMessage} > {cellValue ? Number(cellValue).toLocaleString() : ""} </div> ); case "LIST": - // 예: select인 경우 label만 표시 return ( <div className={readOnlyClass} style={cellStyle} - title={isReadOnly ? "읽기 전용 필드입니다" : ""} + title={tooltipMessage} > {String(cellValue ?? "")} </div> @@ -186,7 +210,7 @@ export function getColumns<TData extends object>({ <div className={readOnlyClass} style={cellStyle} - title={isReadOnly ? "읽기 전용 필드입니다" : ""} + title={tooltipMessage} > {String(cellValue ?? "")} </div> @@ -196,7 +220,6 @@ export function getColumns<TData extends object>({ })); columns.push(...baseColumns); - // (4) 액션 칼럼 - update 버튼 예시 const actionColumn: ColumnDef<TData> = { id: "update", |
