338 lines
11 KiB
TypeScript
338 lines
11 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* UnifiedList 설정 패널
|
|
* 통합 목록 컴포넌트의 세부 설정을 관리합니다.
|
|
*/
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Plus, Trash2 } from "lucide-react";
|
|
import { tableTypeApi } from "@/lib/api/screen";
|
|
|
|
interface UnifiedListConfigPanelProps {
|
|
config: Record<string, any>;
|
|
onChange: (config: Record<string, any>) => void;
|
|
}
|
|
|
|
interface TableOption {
|
|
tableName: string;
|
|
displayName: string;
|
|
}
|
|
|
|
interface ColumnOption {
|
|
columnName: string;
|
|
displayName: string;
|
|
}
|
|
|
|
export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
// 테이블 목록
|
|
const [tables, setTables] = useState<TableOption[]>([]);
|
|
const [loadingTables, setLoadingTables] = useState(false);
|
|
|
|
// 컬럼 목록
|
|
const [columns, setColumns] = useState<ColumnOption[]>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
|
|
// 설정 업데이트 핸들러
|
|
const updateConfig = (field: string, value: any) => {
|
|
onChange({ ...config, [field]: value });
|
|
};
|
|
|
|
// 테이블 목록 로드
|
|
useEffect(() => {
|
|
const loadTables = async () => {
|
|
setLoadingTables(true);
|
|
try {
|
|
const data = await tableTypeApi.getTables();
|
|
setTables(data.map(t => ({
|
|
tableName: t.tableName,
|
|
displayName: t.displayName || t.tableName
|
|
})));
|
|
} catch (error) {
|
|
console.error("테이블 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoadingTables(false);
|
|
}
|
|
};
|
|
loadTables();
|
|
}, []);
|
|
|
|
// 테이블 선택 시 컬럼 목록 로드
|
|
useEffect(() => {
|
|
const loadColumns = async () => {
|
|
if (!config.tableName) {
|
|
setColumns([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingColumns(true);
|
|
try {
|
|
const data = await tableTypeApi.getColumns(config.tableName);
|
|
setColumns(data.map((c: any) => ({
|
|
columnName: c.columnName || c.column_name,
|
|
displayName: c.displayName || c.columnName || c.column_name
|
|
})));
|
|
} catch (error) {
|
|
console.error("컬럼 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
loadColumns();
|
|
}, [config.tableName]);
|
|
|
|
// 컬럼 관리
|
|
const configColumns = config.columns || [];
|
|
|
|
const addColumn = () => {
|
|
const newColumns = [...configColumns, { key: "", title: "", width: "" }];
|
|
updateConfig("columns", newColumns);
|
|
};
|
|
|
|
const updateColumn = (index: number, field: string, value: string) => {
|
|
const newColumns = [...configColumns];
|
|
newColumns[index] = { ...newColumns[index], [field]: value };
|
|
updateConfig("columns", newColumns);
|
|
};
|
|
|
|
const removeColumn = (index: number) => {
|
|
const newColumns = configColumns.filter((_: any, i: number) => i !== index);
|
|
updateConfig("columns", newColumns);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 뷰 모드 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">표시 방식</Label>
|
|
<Select
|
|
value={config.viewMode || "table"}
|
|
onValueChange={(value) => updateConfig("viewMode", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="방식 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="table">테이블</SelectItem>
|
|
<SelectItem value="card">카드</SelectItem>
|
|
<SelectItem value="kanban">칸반</SelectItem>
|
|
<SelectItem value="list">리스트</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 데이터 소스 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">데이터 소스</Label>
|
|
<Select
|
|
value={config.source || "static"}
|
|
onValueChange={(value) => updateConfig("source", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="소스 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="static">정적 데이터</SelectItem>
|
|
<SelectItem value="db">데이터베이스</SelectItem>
|
|
<SelectItem value="api">API</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* DB 설정 */}
|
|
{config.source === "db" && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">테이블</Label>
|
|
<Select
|
|
value={config.tableName || ""}
|
|
onValueChange={(value) => {
|
|
updateConfig("tableName", value);
|
|
updateConfig("columns", []); // 테이블 변경 시 컬럼 초기화
|
|
}}
|
|
disabled={loadingTables}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{tables.map((table) => (
|
|
<SelectItem key={table.tableName} value={table.tableName}>
|
|
{table.displayName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* API 설정 */}
|
|
{config.source === "api" && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">API 엔드포인트</Label>
|
|
<Input
|
|
value={config.apiEndpoint || ""}
|
|
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
|
|
placeholder="/api/list"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* 컬럼 설정 */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">컬럼 설정</Label>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={addColumn}
|
|
className="h-6 px-2 text-xs"
|
|
>
|
|
<Plus className="h-3 w-3 mr-1" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2 max-h-40 overflow-y-auto">
|
|
{configColumns.map((column: any, index: number) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
{/* 컬럼 키 - 드롭다운 */}
|
|
<Select
|
|
value={column.key || ""}
|
|
onValueChange={(value) => {
|
|
const selectedCol = columns.find(c => c.columnName === value);
|
|
updateColumn(index, "key", value);
|
|
// 제목을 자동으로 설정
|
|
if (selectedCol && !column.title) {
|
|
updateColumn(index, "title", selectedCol.displayName);
|
|
}
|
|
}}
|
|
disabled={loadingColumns || !config.tableName}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs flex-1">
|
|
<SelectValue placeholder="컬럼" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{columns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.displayName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={column.title || ""}
|
|
onChange={(e) => updateColumn(index, "title", e.target.value)}
|
|
placeholder="제목"
|
|
className="h-7 text-xs flex-1"
|
|
/>
|
|
<Input
|
|
value={column.width || ""}
|
|
onChange={(e) => updateColumn(index, "width", e.target.value)}
|
|
placeholder="너비"
|
|
className="h-7 text-xs w-16"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeColumn(index)}
|
|
className="h-7 w-7 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{configColumns.length === 0 && (
|
|
<p className="text-xs text-muted-foreground text-center py-2">
|
|
컬럼을 추가해주세요
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 기능 옵션 */}
|
|
<div className="space-y-3">
|
|
<Label className="text-xs font-medium">기능 옵션</Label>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="sortable"
|
|
checked={config.sortable !== false}
|
|
onCheckedChange={(checked) => updateConfig("sortable", checked)}
|
|
/>
|
|
<label htmlFor="sortable" className="text-xs">정렬 기능</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="pagination"
|
|
checked={config.pagination !== false}
|
|
onCheckedChange={(checked) => updateConfig("pagination", checked)}
|
|
/>
|
|
<label htmlFor="pagination" className="text-xs">페이지네이션</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="searchable"
|
|
checked={config.searchable || false}
|
|
onCheckedChange={(checked) => updateConfig("searchable", checked)}
|
|
/>
|
|
<label htmlFor="searchable" className="text-xs">검색 기능</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="editable"
|
|
checked={config.editable || false}
|
|
onCheckedChange={(checked) => updateConfig("editable", checked)}
|
|
/>
|
|
<label htmlFor="editable" className="text-xs">인라인 편집</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 페이지 크기 */}
|
|
{config.pagination !== false && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">페이지당 행 수</Label>
|
|
<Select
|
|
value={String(config.pageSize || 10)}
|
|
onValueChange={(value) => updateConfig("pageSize", Number(value))}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="5">5개</SelectItem>
|
|
<SelectItem value="10">10개</SelectItem>
|
|
<SelectItem value="20">20개</SelectItem>
|
|
<SelectItem value="50">50개</SelectItem>
|
|
<SelectItem value="100">100개</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
UnifiedListConfigPanel.displayName = "UnifiedListConfigPanel";
|
|
|
|
export default UnifiedListConfigPanel;
|