테이블 설정패널 간소화
This commit is contained in:
parent
722eebb00b
commit
b4a1fe6889
|
|
@ -41,6 +41,7 @@ export const UnifiedList = forwardRef<HTMLDivElement, UnifiedListProps>((props,
|
||||||
align: "left" as const,
|
align: "left" as const,
|
||||||
order: index,
|
order: index,
|
||||||
isEntityJoin: col.isJoinColumn || false,
|
isEntityJoin: col.isJoinColumn || false,
|
||||||
|
thousandSeparator: col.thousandSeparator !== false, // 천단위 구분자 (기본: true)
|
||||||
})),
|
})),
|
||||||
[config.columns],
|
[config.columns],
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -138,8 +138,14 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
|
||||||
}, [tableName]);
|
}, [tableName]);
|
||||||
|
|
||||||
// 컬럼 설정
|
// 컬럼 설정
|
||||||
const configColumns: Array<{ key: string; title: string; width?: string; isJoinColumn?: boolean }> =
|
const configColumns: Array<{
|
||||||
config.columns || [];
|
key: string;
|
||||||
|
title: string;
|
||||||
|
width?: string;
|
||||||
|
isJoinColumn?: boolean;
|
||||||
|
inputType?: string;
|
||||||
|
thousandSeparator?: boolean;
|
||||||
|
}> = config.columns || [];
|
||||||
|
|
||||||
// 컬럼이 추가되었는지 확인
|
// 컬럼이 추가되었는지 확인
|
||||||
const isColumnAdded = (columnName: string) => {
|
const isColumnAdded = (columnName: string) => {
|
||||||
|
|
@ -154,16 +160,35 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
|
||||||
updateConfig("columns", newColumns);
|
updateConfig("columns", newColumns);
|
||||||
} else {
|
} else {
|
||||||
// 추가
|
// 추가
|
||||||
|
const isNumberType = ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(
|
||||||
|
column.inputType || "",
|
||||||
|
);
|
||||||
const newColumn = {
|
const newColumn = {
|
||||||
key: column.columnName,
|
key: column.columnName,
|
||||||
title: column.displayName,
|
title: column.displayName,
|
||||||
width: "",
|
width: "",
|
||||||
isJoinColumn: column.isJoinColumn || false,
|
isJoinColumn: column.isJoinColumn || false,
|
||||||
|
inputType: column.inputType,
|
||||||
|
thousandSeparator: isNumberType ? true : undefined, // 숫자 타입은 기본적으로 천단위 구분자 사용
|
||||||
};
|
};
|
||||||
updateConfig("columns", [...configColumns, newColumn]);
|
updateConfig("columns", [...configColumns, newColumn]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 컬럼 천단위 구분자 토글
|
||||||
|
const toggleThousandSeparator = (columnKey: string, checked: boolean) => {
|
||||||
|
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, thousandSeparator: checked } : col));
|
||||||
|
updateConfig("columns", newColumns);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 숫자 타입 컬럼인지 확인
|
||||||
|
const isNumberColumn = (columnKey: string) => {
|
||||||
|
const colInfo = columns.find((c) => c.columnName === columnKey);
|
||||||
|
const configCol = configColumns.find((c) => c.key === columnKey);
|
||||||
|
const inputType = configCol?.inputType || colInfo?.inputType || "";
|
||||||
|
return ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(inputType);
|
||||||
|
};
|
||||||
|
|
||||||
// 컬럼 제목 수정
|
// 컬럼 제목 수정
|
||||||
const updateColumnTitle = (columnKey: string, title: string) => {
|
const updateColumnTitle = (columnKey: string, title: string) => {
|
||||||
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col));
|
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col));
|
||||||
|
|
@ -387,29 +412,46 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
|
||||||
<div className="max-h-40 space-y-1 overflow-y-auto">
|
<div className="max-h-40 space-y-1 overflow-y-auto">
|
||||||
{configColumns.map((column, index) => {
|
{configColumns.map((column, index) => {
|
||||||
const colInfo = columns.find((c) => c.columnName === column.key);
|
const colInfo = columns.find((c) => c.columnName === column.key);
|
||||||
|
const showThousandSeparator = isNumberColumn(column.key);
|
||||||
return (
|
return (
|
||||||
<div key={column.key} className="bg-muted/30 flex items-center gap-2 rounded-md border p-2">
|
<div key={column.key} className="bg-muted/30 space-y-1.5 rounded-md border p-2">
|
||||||
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
|
<div className="flex items-center gap-2">
|
||||||
{column.isJoinColumn ? (
|
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
|
||||||
<Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
|
{column.isJoinColumn ? (
|
||||||
) : (
|
<Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
|
||||||
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
|
) : (
|
||||||
|
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
<Input
|
||||||
|
value={column.title}
|
||||||
|
onChange={(e) => updateColumnTitle(column.key, e.target.value)}
|
||||||
|
placeholder="제목"
|
||||||
|
className="h-6 flex-1 text-xs"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
|
||||||
|
className="text-destructive h-6 w-6 p-0"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/* 숫자 컬럼인 경우 천단위 구분자 옵션 표시 */}
|
||||||
|
{showThousandSeparator && (
|
||||||
|
<div className="ml-5 flex items-center gap-2">
|
||||||
|
<Checkbox
|
||||||
|
id={`thousand-${column.key}`}
|
||||||
|
checked={column.thousandSeparator !== false}
|
||||||
|
onCheckedChange={(checked) => toggleThousandSeparator(column.key, !!checked)}
|
||||||
|
className="h-3 w-3"
|
||||||
|
/>
|
||||||
|
<label htmlFor={`thousand-${column.key}`} className="text-muted-foreground text-[10px]">
|
||||||
|
천단위 구분자
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<Input
|
|
||||||
value={column.title}
|
|
||||||
onChange={(e) => updateColumnTitle(column.key, e.target.value)}
|
|
||||||
placeholder="제목"
|
|
||||||
className="h-6 flex-1 text-xs"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
|
|
||||||
className="text-destructive h-6 w-6 p-0"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue