숫자컬럼 천단위 구분자 설정 추가
This commit is contained in:
parent
3ab32820e9
commit
127f4dc783
|
|
@ -1906,12 +1906,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
return "-";
|
||||
}
|
||||
|
||||
// 숫자 타입 포맷팅
|
||||
// 숫자 타입 포맷팅 (천단위 구분자 설정 확인)
|
||||
if (inputType === "number" || inputType === "decimal") {
|
||||
if (value !== null && value !== undefined && value !== "") {
|
||||
const numValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
if (!isNaN(numValue)) {
|
||||
return numValue.toLocaleString("ko-KR");
|
||||
// thousandSeparator가 false가 아닌 경우(기본값 true) 천단위 구분자 적용
|
||||
if (column.thousandSeparator !== false) {
|
||||
return numValue.toLocaleString("ko-KR");
|
||||
}
|
||||
return String(numValue);
|
||||
}
|
||||
}
|
||||
return String(value);
|
||||
|
|
@ -1922,7 +1926,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
if (value !== null && value !== undefined && value !== "") {
|
||||
const numValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
if (!isNaN(numValue)) {
|
||||
return numValue.toLocaleString("ko-KR");
|
||||
// thousandSeparator가 false가 아닌 경우(기본값 true) 천단위 구분자 적용
|
||||
if (column.thousandSeparator !== false) {
|
||||
return numValue.toLocaleString("ko-KR");
|
||||
}
|
||||
return String(numValue);
|
||||
}
|
||||
}
|
||||
return String(value);
|
||||
|
|
@ -1939,10 +1947,15 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
}
|
||||
}
|
||||
return "-";
|
||||
case "number":
|
||||
return typeof value === "number" ? value.toLocaleString() : value;
|
||||
case "currency":
|
||||
return typeof value === "number" ? `₩${value.toLocaleString()}` : value;
|
||||
if (typeof value === "number") {
|
||||
// thousandSeparator가 false가 아닌 경우(기본값 true) 천단위 구분자 적용
|
||||
if (column.thousandSeparator !== false) {
|
||||
return `₩${value.toLocaleString()}`;
|
||||
}
|
||||
return `₩${value}`;
|
||||
}
|
||||
return value;
|
||||
case "boolean":
|
||||
return value ? "예" : "아니오";
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -1074,86 +1074,111 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
|
|||
|
||||
{/* 간결한 리스트 형식 컬럼 설정 */}
|
||||
<div className="space-y-1">
|
||||
{config.columns?.map((column, index) => (
|
||||
<div
|
||||
key={column.columnName}
|
||||
className="hover:bg-muted/30 flex h-6 items-center justify-between rounded border px-2"
|
||||
>
|
||||
{/* 컬럼명 */}
|
||||
<span className="flex-1 truncate text-xs" style={{ fontSize: "12px" }}>
|
||||
{availableColumns.find((col) => col.columnName === column.columnName)?.label ||
|
||||
column.displayName ||
|
||||
column.columnName}
|
||||
</span>
|
||||
{config.columns?.map((column, index) => {
|
||||
// 해당 컬럼의 input_type 확인
|
||||
const columnInfo = availableColumns.find((col) => col.columnName === column.columnName);
|
||||
const isNumberType = columnInfo?.input_type === "number" || columnInfo?.input_type === "decimal";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={column.columnName}
|
||||
className="hover:bg-muted/30 flex items-center justify-between rounded border px-2 py-1"
|
||||
style={{ minHeight: "28px" }}
|
||||
>
|
||||
<div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
|
||||
{/* 컬럼명 */}
|
||||
<span className="truncate text-xs" style={{ fontSize: "12px" }}>
|
||||
{columnInfo?.label || column.displayName || column.columnName}
|
||||
</span>
|
||||
|
||||
{/* 숫자 타입인 경우 천단위 구분자 설정 */}
|
||||
{isNumberType && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Checkbox
|
||||
id={`thousand-sep-${column.columnName}`}
|
||||
checked={column.thousandSeparator !== false}
|
||||
onCheckedChange={(checked) => {
|
||||
updateColumn(column.columnName, { thousandSeparator: checked as boolean });
|
||||
}}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`thousand-sep-${column.columnName}`}
|
||||
className="text-[10px] text-muted-foreground cursor-pointer"
|
||||
>
|
||||
천단위 구분자
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 필터 체크박스 + 순서 변경 + 삭제 버튼 */}
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Checkbox
|
||||
checked={config.filter?.filters?.some((f) => f.columnName === column.columnName) || false}
|
||||
onCheckedChange={(checked) => {
|
||||
const currentFilters = config.filter?.filters || [];
|
||||
const columnLabel =
|
||||
availableColumns.find((col) => col.columnName === column.columnName)?.label ||
|
||||
column.displayName ||
|
||||
column.columnName;
|
||||
{/* 필터 체크박스 + 순서 변경 + 삭제 버튼 */}
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Checkbox
|
||||
checked={config.filter?.filters?.some((f) => f.columnName === column.columnName) || false}
|
||||
onCheckedChange={(checked) => {
|
||||
const currentFilters = config.filter?.filters || [];
|
||||
const columnLabel =
|
||||
columnInfo?.label || column.displayName || column.columnName;
|
||||
|
||||
if (checked) {
|
||||
// 필터 추가
|
||||
handleChange("filter", {
|
||||
...config.filter,
|
||||
enabled: true,
|
||||
filters: [
|
||||
...currentFilters,
|
||||
{
|
||||
columnName: column.columnName,
|
||||
label: columnLabel,
|
||||
type: "text",
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
// 필터 제거
|
||||
handleChange("filter", {
|
||||
...config.filter,
|
||||
filters: currentFilters.filter((f) => f.columnName !== column.columnName),
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
if (checked) {
|
||||
// 필터 추가
|
||||
handleChange("filter", {
|
||||
...config.filter,
|
||||
enabled: true,
|
||||
filters: [
|
||||
...currentFilters,
|
||||
{
|
||||
columnName: column.columnName,
|
||||
label: columnLabel,
|
||||
type: "text",
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
// 필터 제거
|
||||
handleChange("filter", {
|
||||
...config.filter,
|
||||
filters: currentFilters.filter((f) => f.columnName !== column.columnName),
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 순서 변경 + 삭제 버튼 */}
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => moveColumn(column.columnName, "up")}
|
||||
disabled={index === 0}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => moveColumn(column.columnName, "down")}
|
||||
disabled={index === (config.columns?.length || 0) - 1}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeColumn(column.columnName)}
|
||||
className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 순서 변경 + 삭제 버튼 */}
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => moveColumn(column.columnName, "up")}
|
||||
disabled={index === 0}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => moveColumn(column.columnName, "down")}
|
||||
disabled={index === (config.columns?.length || 0) - 1}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeColumn(column.columnName)}
|
||||
className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@ export interface ColumnConfig {
|
|||
isEntityJoin?: boolean; // Entity 조인된 컬럼인지 여부
|
||||
entityJoinInfo?: EntityJoinInfo; // Entity 조인 상세 정보
|
||||
|
||||
// 숫자 포맷팅 설정
|
||||
thousandSeparator?: boolean; // 천단위 구분자 사용 여부 (기본: true)
|
||||
|
||||
// 🎯 엔티티 컬럼 표시 설정 (화면별 동적 설정)
|
||||
entityDisplayConfig?: {
|
||||
displayColumns: string[]; // 표시할 컬럼들 (기본 테이블 + 조인 테이블)
|
||||
|
|
|
|||
Loading…
Reference in New Issue