540 lines
18 KiB
TypeScript
540 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { entityJoinApi } from "@/lib/api/entityJoin";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Trash2 } from "lucide-react";
|
|
|
|
interface CardDisplayConfigPanelProps {
|
|
config: any;
|
|
onChange: (config: any) => void;
|
|
screenTableName?: string;
|
|
tableColumns?: any[];
|
|
}
|
|
|
|
interface EntityJoinColumn {
|
|
tableName: string;
|
|
columnName: string;
|
|
columnLabel: string;
|
|
dataType: string;
|
|
joinAlias: string;
|
|
suggestedLabel: string;
|
|
}
|
|
|
|
interface JoinTable {
|
|
tableName: string;
|
|
currentDisplayColumn: string;
|
|
joinConfig?: {
|
|
sourceColumn: string;
|
|
};
|
|
availableColumns: Array<{
|
|
columnName: string;
|
|
columnLabel: string;
|
|
dataType: string;
|
|
description?: string;
|
|
}>;
|
|
}
|
|
|
|
/**
|
|
* CardDisplay 설정 패널
|
|
* 카드 레이아웃과 동일한 설정 UI 제공 + 엔티티 조인 컬럼 지원
|
|
*/
|
|
export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
screenTableName,
|
|
tableColumns = [],
|
|
}) => {
|
|
// 엔티티 조인 컬럼 상태
|
|
const [entityJoinColumns, setEntityJoinColumns] = useState<{
|
|
availableColumns: EntityJoinColumn[];
|
|
joinTables: JoinTable[];
|
|
}>({ availableColumns: [], joinTables: [] });
|
|
const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);
|
|
|
|
// 엔티티 조인 컬럼 정보 가져오기
|
|
useEffect(() => {
|
|
const fetchEntityJoinColumns = async () => {
|
|
const tableName = config.tableName || screenTableName;
|
|
if (!tableName) {
|
|
setEntityJoinColumns({ availableColumns: [], joinTables: [] });
|
|
return;
|
|
}
|
|
|
|
setLoadingEntityJoins(true);
|
|
try {
|
|
const result = await entityJoinApi.getEntityJoinColumns(tableName);
|
|
setEntityJoinColumns({
|
|
availableColumns: result.availableColumns || [],
|
|
joinTables: result.joinTables || [],
|
|
});
|
|
} catch (error) {
|
|
console.error("Entity 조인 컬럼 조회 오류:", error);
|
|
setEntityJoinColumns({ availableColumns: [], joinTables: [] });
|
|
} finally {
|
|
setLoadingEntityJoins(false);
|
|
}
|
|
};
|
|
|
|
fetchEntityJoinColumns();
|
|
}, [config.tableName, screenTableName]);
|
|
|
|
const handleChange = (key: string, value: any) => {
|
|
onChange({ ...config, [key]: value });
|
|
};
|
|
|
|
const handleNestedChange = (path: string, value: any) => {
|
|
const keys = path.split(".");
|
|
let newConfig = { ...config };
|
|
let current = newConfig;
|
|
|
|
for (let i = 0; i < keys.length - 1; i++) {
|
|
if (!current[keys[i]]) {
|
|
current[keys[i]] = {};
|
|
}
|
|
current = current[keys[i]];
|
|
}
|
|
|
|
current[keys[keys.length - 1]] = value;
|
|
onChange(newConfig);
|
|
};
|
|
|
|
// 컬럼 선택 시 조인 컬럼이면 joinColumns 설정도 함께 업데이트
|
|
const handleColumnSelect = (path: string, columnName: string) => {
|
|
const joinColumn = entityJoinColumns.availableColumns.find(
|
|
(col) => col.joinAlias === columnName
|
|
);
|
|
|
|
if (joinColumn) {
|
|
const joinColumnsConfig = config.joinColumns || [];
|
|
const existingJoinColumn = joinColumnsConfig.find(
|
|
(jc: any) => jc.columnName === columnName
|
|
);
|
|
|
|
if (!existingJoinColumn) {
|
|
const joinTableInfo = entityJoinColumns.joinTables?.find(
|
|
(jt) => jt.tableName === joinColumn.tableName
|
|
);
|
|
|
|
const newJoinColumnConfig = {
|
|
columnName: joinColumn.joinAlias,
|
|
label: joinColumn.suggestedLabel || joinColumn.columnLabel,
|
|
sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
|
|
referenceTable: joinColumn.tableName,
|
|
referenceColumn: joinColumn.columnName,
|
|
isJoinColumn: true,
|
|
};
|
|
|
|
onChange({
|
|
...config,
|
|
columnMapping: {
|
|
...config.columnMapping,
|
|
[path.split(".")[1]]: columnName,
|
|
},
|
|
joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
handleNestedChange(path, columnName);
|
|
};
|
|
|
|
// 표시 컬럼 추가
|
|
const addDisplayColumn = () => {
|
|
const currentColumns = config.columnMapping?.displayColumns || [];
|
|
const newColumns = [...currentColumns, ""];
|
|
handleNestedChange("columnMapping.displayColumns", newColumns);
|
|
};
|
|
|
|
// 표시 컬럼 삭제
|
|
const removeDisplayColumn = (index: number) => {
|
|
const currentColumns = [...(config.columnMapping?.displayColumns || [])];
|
|
currentColumns.splice(index, 1);
|
|
handleNestedChange("columnMapping.displayColumns", currentColumns);
|
|
};
|
|
|
|
// 표시 컬럼 값 변경
|
|
const updateDisplayColumn = (index: number, value: string) => {
|
|
const currentColumns = [...(config.columnMapping?.displayColumns || [])];
|
|
currentColumns[index] = value;
|
|
|
|
const joinColumn = entityJoinColumns.availableColumns.find(
|
|
(col) => col.joinAlias === value
|
|
);
|
|
|
|
if (joinColumn) {
|
|
const joinColumnsConfig = config.joinColumns || [];
|
|
const existingJoinColumn = joinColumnsConfig.find(
|
|
(jc: any) => jc.columnName === value
|
|
);
|
|
|
|
if (!existingJoinColumn) {
|
|
const joinTableInfo = entityJoinColumns.joinTables?.find(
|
|
(jt) => jt.tableName === joinColumn.tableName
|
|
);
|
|
|
|
const newJoinColumnConfig = {
|
|
columnName: joinColumn.joinAlias,
|
|
label: joinColumn.suggestedLabel || joinColumn.columnLabel,
|
|
sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
|
|
referenceTable: joinColumn.tableName,
|
|
referenceColumn: joinColumn.columnName,
|
|
isJoinColumn: true,
|
|
};
|
|
|
|
onChange({
|
|
...config,
|
|
columnMapping: {
|
|
...config.columnMapping,
|
|
displayColumns: currentColumns,
|
|
},
|
|
joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
handleNestedChange("columnMapping.displayColumns", currentColumns);
|
|
};
|
|
|
|
// 테이블별로 조인 컬럼 그룹화
|
|
const joinColumnsByTable: Record<string, EntityJoinColumn[]> = {};
|
|
entityJoinColumns.availableColumns.forEach((col) => {
|
|
if (!joinColumnsByTable[col.tableName]) {
|
|
joinColumnsByTable[col.tableName] = [];
|
|
}
|
|
joinColumnsByTable[col.tableName].push(col);
|
|
});
|
|
|
|
// 컬럼 선택 셀렉트 박스 렌더링 (Shadcn UI)
|
|
const renderColumnSelect = (
|
|
value: string,
|
|
onChangeHandler: (value: string) => void,
|
|
placeholder: string = "컬럼을 선택하세요"
|
|
) => {
|
|
return (
|
|
<Select
|
|
value={value || "__none__"}
|
|
onValueChange={(val) => onChangeHandler(val === "__none__" ? "" : val)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder={placeholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{/* 선택 안함 옵션 */}
|
|
<SelectItem value="__none__" className="text-xs text-muted-foreground">
|
|
선택 안함
|
|
</SelectItem>
|
|
|
|
{/* 기본 테이블 컬럼 */}
|
|
{tableColumns.length > 0 && (
|
|
<SelectGroup>
|
|
<SelectLabel className="text-xs font-semibold text-muted-foreground">
|
|
기본 컬럼
|
|
</SelectLabel>
|
|
{tableColumns.map((column) => (
|
|
<SelectItem
|
|
key={column.columnName}
|
|
value={column.columnName}
|
|
className="text-xs"
|
|
>
|
|
{column.columnLabel || column.columnName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
)}
|
|
|
|
{/* 조인 테이블별 컬럼 */}
|
|
{Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
|
|
<SelectGroup key={tableName}>
|
|
<SelectLabel className="text-xs font-semibold text-blue-600">
|
|
{tableName} (조인)
|
|
</SelectLabel>
|
|
{columns.map((col) => (
|
|
<SelectItem
|
|
key={col.joinAlias}
|
|
value={col.joinAlias}
|
|
className="text-xs"
|
|
>
|
|
{col.suggestedLabel || col.columnLabel}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">카드 디스플레이 설정</div>
|
|
|
|
{/* 테이블이 선택된 경우 컬럼 매핑 설정 */}
|
|
{tableColumns && tableColumns.length > 0 && (
|
|
<div className="space-y-3">
|
|
<h5 className="text-xs font-medium text-muted-foreground">컬럼 매핑</h5>
|
|
|
|
{loadingEntityJoins && (
|
|
<div className="text-xs text-muted-foreground">조인 컬럼 로딩 중...</div>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">타이틀 컬럼</Label>
|
|
{renderColumnSelect(
|
|
config.columnMapping?.titleColumn || "",
|
|
(value) => handleColumnSelect("columnMapping.titleColumn", value)
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">서브타이틀 컬럼</Label>
|
|
{renderColumnSelect(
|
|
config.columnMapping?.subtitleColumn || "",
|
|
(value) => handleColumnSelect("columnMapping.subtitleColumn", value)
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">설명 컬럼</Label>
|
|
{renderColumnSelect(
|
|
config.columnMapping?.descriptionColumn || "",
|
|
(value) => handleColumnSelect("columnMapping.descriptionColumn", value)
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">이미지 컬럼</Label>
|
|
{renderColumnSelect(
|
|
config.columnMapping?.imageColumn || "",
|
|
(value) => handleColumnSelect("columnMapping.imageColumn", value)
|
|
)}
|
|
</div>
|
|
|
|
{/* 동적 표시 컬럼 추가 */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">표시 컬럼들</Label>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={addDisplayColumn}
|
|
className="h-6 px-2 text-xs"
|
|
>
|
|
+ 컬럼 추가
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{(config.columnMapping?.displayColumns || []).map((column: string, index: number) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<div className="flex-1">
|
|
{renderColumnSelect(
|
|
column,
|
|
(value) => updateDisplayColumn(index, value)
|
|
)}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeDisplayColumn(index)}
|
|
className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
{(!config.columnMapping?.displayColumns || config.columnMapping.displayColumns.length === 0) && (
|
|
<div className="rounded-md border border-dashed border-muted-foreground/30 py-3 text-center text-xs text-muted-foreground">
|
|
"컬럼 추가" 버튼을 클릭하여 표시할 컬럼을 추가하세요
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 카드 스타일 설정 */}
|
|
<div className="space-y-3">
|
|
<h5 className="text-xs font-medium text-muted-foreground">카드 스타일</h5>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">한 행당 카드 수</Label>
|
|
<Input
|
|
type="number"
|
|
min="1"
|
|
max="6"
|
|
value={config.cardsPerRow || 3}
|
|
onChange={(e) => handleChange("cardsPerRow", parseInt(e.target.value))}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">카드 간격 (px)</Label>
|
|
<Input
|
|
type="number"
|
|
min="0"
|
|
max="50"
|
|
value={config.cardSpacing || 16}
|
|
onChange={(e) => handleChange("cardSpacing", parseInt(e.target.value))}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showTitle"
|
|
checked={config.cardStyle?.showTitle ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showTitle", checked)}
|
|
/>
|
|
<Label htmlFor="showTitle" className="text-xs font-normal">
|
|
타이틀 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showSubtitle"
|
|
checked={config.cardStyle?.showSubtitle ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showSubtitle", checked)}
|
|
/>
|
|
<Label htmlFor="showSubtitle" className="text-xs font-normal">
|
|
서브타이틀 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showDescription"
|
|
checked={config.cardStyle?.showDescription ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showDescription", checked)}
|
|
/>
|
|
<Label htmlFor="showDescription" className="text-xs font-normal">
|
|
설명 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showImage"
|
|
checked={config.cardStyle?.showImage ?? false}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showImage", checked)}
|
|
/>
|
|
<Label htmlFor="showImage" className="text-xs font-normal">
|
|
이미지 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showActions"
|
|
checked={config.cardStyle?.showActions ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showActions", checked)}
|
|
/>
|
|
<Label htmlFor="showActions" className="text-xs font-normal">
|
|
액션 버튼 표시
|
|
</Label>
|
|
</div>
|
|
|
|
{/* 개별 버튼 설정 */}
|
|
{(config.cardStyle?.showActions ?? true) && (
|
|
<div className="ml-5 space-y-2 border-l-2 border-muted pl-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showViewButton"
|
|
checked={config.cardStyle?.showViewButton ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showViewButton", checked)}
|
|
/>
|
|
<Label htmlFor="showViewButton" className="text-xs font-normal">
|
|
상세보기 버튼
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showEditButton"
|
|
checked={config.cardStyle?.showEditButton ?? true}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showEditButton", checked)}
|
|
/>
|
|
<Label htmlFor="showEditButton" className="text-xs font-normal">
|
|
편집 버튼
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showDeleteButton"
|
|
checked={config.cardStyle?.showDeleteButton ?? false}
|
|
onCheckedChange={(checked) => handleNestedChange("cardStyle.showDeleteButton", checked)}
|
|
/>
|
|
<Label htmlFor="showDeleteButton" className="text-xs font-normal">
|
|
삭제 버튼
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">설명 최대 길이</Label>
|
|
<Input
|
|
type="number"
|
|
min="10"
|
|
max="500"
|
|
value={config.cardStyle?.maxDescriptionLength || 100}
|
|
onChange={(e) => handleNestedChange("cardStyle.maxDescriptionLength", parseInt(e.target.value))}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 공통 설정 */}
|
|
<div className="space-y-3">
|
|
<h5 className="text-xs font-medium text-muted-foreground">공통 설정</h5>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="disabled"
|
|
checked={config.disabled || false}
|
|
onCheckedChange={(checked) => handleChange("disabled", checked)}
|
|
/>
|
|
<Label htmlFor="disabled" className="text-xs font-normal">
|
|
비활성화
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="readonly"
|
|
checked={config.readonly || false}
|
|
onCheckedChange={(checked) => handleChange("readonly", checked)}
|
|
/>
|
|
<Label htmlFor="readonly" className="text-xs font-normal">
|
|
읽기 전용
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|