528 lines
20 KiB
TypeScript
528 lines
20 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* V2Select 설정 패널
|
|
* 통합 선택 컴포넌트의 세부 설정을 관리합니다.
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
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 { Plus, Trash2, Loader2 } from "lucide-react";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
interface ColumnOption {
|
|
columnName: string;
|
|
columnLabel: string;
|
|
}
|
|
|
|
interface CategoryValueOption {
|
|
valueCode: string;
|
|
valueLabel: string;
|
|
}
|
|
|
|
interface V2SelectConfigPanelProps {
|
|
config: Record<string, any>;
|
|
onChange: (config: Record<string, any>) => void;
|
|
/** 컬럼의 inputType (entity/category 타입 확인용) */
|
|
inputType?: string;
|
|
/** 현재 테이블명 (카테고리 값 조회용) */
|
|
tableName?: string;
|
|
/** 현재 컬럼명 (카테고리 값 조회용) */
|
|
columnName?: string;
|
|
}
|
|
|
|
export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
inputType,
|
|
tableName,
|
|
columnName,
|
|
}) => {
|
|
const isEntityType = inputType === "entity";
|
|
const isCategoryType = inputType === "category";
|
|
|
|
const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
|
|
// 카테고리 값 목록
|
|
const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
|
|
const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
|
|
|
|
const updateConfig = (field: string, value: any) => {
|
|
onChange({ ...config, [field]: value });
|
|
};
|
|
|
|
// 카테고리 타입이면 source를 자동으로 category로 설정
|
|
useEffect(() => {
|
|
if (isCategoryType && config.source !== "category") {
|
|
onChange({ ...config, source: "category" });
|
|
}
|
|
}, [isCategoryType]);
|
|
|
|
// 카테고리 값 로드
|
|
const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
|
|
if (!catTable || !catColumn) {
|
|
setCategoryValues([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingCategoryValues(true);
|
|
try {
|
|
const response = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
|
|
const data = response.data;
|
|
if (data.success && data.data) {
|
|
const flattenTree = (items: any[], depth: number = 0): CategoryValueOption[] => {
|
|
const result: CategoryValueOption[] = [];
|
|
for (const item of items) {
|
|
result.push({
|
|
valueCode: item.valueCode,
|
|
valueLabel: depth > 0 ? `${" ".repeat(depth)}${item.valueLabel}` : item.valueLabel,
|
|
});
|
|
if (item.children && item.children.length > 0) {
|
|
result.push(...flattenTree(item.children, depth + 1));
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
setCategoryValues(flattenTree(data.data));
|
|
}
|
|
} catch (error) {
|
|
console.error("카테고리 값 조회 실패:", error);
|
|
setCategoryValues([]);
|
|
} finally {
|
|
setLoadingCategoryValues(false);
|
|
}
|
|
}, []);
|
|
|
|
// 카테고리 소스일 때 값 로드
|
|
useEffect(() => {
|
|
if (config.source === "category") {
|
|
const catTable = config.categoryTable || tableName;
|
|
const catColumn = config.categoryColumn || columnName;
|
|
if (catTable && catColumn) {
|
|
loadCategoryValues(catTable, catColumn);
|
|
}
|
|
}
|
|
}, [config.source, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
|
|
|
|
// 엔티티 테이블 변경 시 컬럼 목록 조회
|
|
const loadEntityColumns = useCallback(async (tblName: string) => {
|
|
if (!tblName) {
|
|
setEntityColumns([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingColumns(true);
|
|
try {
|
|
const response = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
|
|
const data = response.data.data || response.data;
|
|
const columns = data.columns || data || [];
|
|
|
|
const columnOptions: ColumnOption[] = columns.map((col: any) => {
|
|
const name = col.columnName || col.column_name || col.name;
|
|
const label = col.displayName || col.display_name || col.columnLabel || col.column_label || name;
|
|
|
|
return {
|
|
columnName: name,
|
|
columnLabel: label,
|
|
};
|
|
});
|
|
|
|
setEntityColumns(columnOptions);
|
|
} catch (error) {
|
|
console.error("컬럼 목록 조회 실패:", error);
|
|
setEntityColumns([]);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (config.source === "entity" && config.entityTable) {
|
|
loadEntityColumns(config.entityTable);
|
|
}
|
|
}, [config.source, config.entityTable, loadEntityColumns]);
|
|
|
|
// 정적 옵션 관리
|
|
const options = config.options || [];
|
|
|
|
const addOption = () => {
|
|
const newOptions = [...options, { value: "", label: "" }];
|
|
updateConfig("options", newOptions);
|
|
};
|
|
|
|
const updateOptionValue = (index: number, value: string) => {
|
|
const newOptions = [...options];
|
|
newOptions[index] = { ...newOptions[index], value, label: value };
|
|
updateConfig("options", newOptions);
|
|
};
|
|
|
|
const removeOption = (index: number) => {
|
|
const newOptions = options.filter((_: any, i: number) => i !== index);
|
|
updateConfig("options", newOptions);
|
|
};
|
|
|
|
// 현재 source 결정 (카테고리 타입이면 강제 category)
|
|
const effectiveSource = isCategoryType ? "category" : config.source || "static";
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 선택 모드 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">선택 모드</Label>
|
|
<Select value={config.mode || "dropdown"} onValueChange={(value) => updateConfig("mode", value)}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="모드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="dropdown">드롭다운</SelectItem>
|
|
<SelectItem value="combobox">콤보박스 (검색)</SelectItem>
|
|
<SelectItem value="radio">라디오 버튼</SelectItem>
|
|
<SelectItem value="check">체크박스</SelectItem>
|
|
<SelectItem value="tag">태그 선택</SelectItem>
|
|
<SelectItem value="tagbox">태그박스 (태그+드롭다운)</SelectItem>
|
|
<SelectItem value="toggle">토글 스위치</SelectItem>
|
|
<SelectItem value="swap">스왑 선택</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 데이터 소스 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">데이터 소스</Label>
|
|
{isCategoryType ? (
|
|
<div className="bg-muted flex h-8 items-center rounded-md px-3">
|
|
<span className="text-xs font-medium text-emerald-600">카테고리 (자동 설정)</span>
|
|
</div>
|
|
) : (
|
|
<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="code">공통 코드</SelectItem>
|
|
<SelectItem value="category">카테고리</SelectItem>
|
|
{isEntityType && <SelectItem value="entity">엔티티</SelectItem>}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
|
|
{/* 카테고리 설정 */}
|
|
{effectiveSource === "category" && (
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">카테고리 정보</Label>
|
|
<div className="bg-muted rounded-md p-2">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<p className="text-muted-foreground text-[10px]">테이블</p>
|
|
<p className="text-xs font-medium">{config.categoryTable || tableName || "-"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-[10px]">컬럼</p>
|
|
<p className="text-xs font-medium">{config.categoryColumn || columnName || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 카테고리 값 로딩 중 */}
|
|
{loadingCategoryValues && (
|
|
<div className="text-muted-foreground flex items-center gap-2 text-xs">
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
|
카테고리 값 로딩 중...
|
|
</div>
|
|
)}
|
|
|
|
{/* 카테고리 값 목록 표시 */}
|
|
{categoryValues.length > 0 && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">카테고리 값 ({categoryValues.length}개)</Label>
|
|
<div className="bg-muted max-h-32 space-y-0.5 overflow-y-auto rounded-md p-1.5">
|
|
{categoryValues.map((cv) => (
|
|
<div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5">
|
|
<span className="text-muted-foreground shrink-0 font-mono text-[10px]">{cv.valueCode}</span>
|
|
<span className="truncate text-xs">{cv.valueLabel}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 기본값 설정 */}
|
|
{categoryValues.length > 0 && (
|
|
<div className="border-t pt-2">
|
|
<Label className="text-xs font-medium">기본값</Label>
|
|
<Select
|
|
value={config.defaultValue || "_none_"}
|
|
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
|
|
>
|
|
<SelectTrigger className="mt-1 h-8 text-xs">
|
|
<SelectValue placeholder="기본값 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="_none_">선택 안함</SelectItem>
|
|
{categoryValues.map((cv) => (
|
|
<SelectItem key={cv.valueCode} value={cv.valueCode}>
|
|
{cv.valueLabel}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 카테고리 값</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 카테고리 값 없음 안내 */}
|
|
{!loadingCategoryValues && categoryValues.length === 0 && (
|
|
<p className="text-[10px] text-amber-600">
|
|
카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 정적 옵션 관리 */}
|
|
{effectiveSource === "static" && (
|
|
<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={addOption} className="h-6 px-2 text-xs">
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<div className="max-h-40 space-y-1.5 overflow-y-auto">
|
|
{options.map((option: any, index: number) => (
|
|
<div key={index} className="flex items-center gap-1.5">
|
|
<Input
|
|
value={option.value || ""}
|
|
onChange={(e) => updateOptionValue(index, e.target.value)}
|
|
placeholder={`옵션 ${index + 1}`}
|
|
className="h-7 flex-1 text-xs"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeOption(index)}
|
|
className="text-destructive h-7 w-7 shrink-0 p-0"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{options.length === 0 && (
|
|
<p className="text-muted-foreground py-2 text-center text-xs">옵션을 추가해주세요</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 기본값 설정 */}
|
|
{options.length > 0 && (
|
|
<div className="mt-3 border-t pt-2">
|
|
<Label className="text-xs font-medium">기본값</Label>
|
|
<Select
|
|
value={config.defaultValue || "_none_"}
|
|
onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
|
|
>
|
|
<SelectTrigger className="mt-1 h-8 text-xs">
|
|
<SelectValue placeholder="기본값 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="_none_">선택 안함</SelectItem>
|
|
{options.map((option: any, index: number) => (
|
|
<SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
|
|
{option.label || option.value || `옵션 ${index + 1}`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 값</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 공통 코드 설정 */}
|
|
{effectiveSource === "code" && (
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">코드 그룹</Label>
|
|
{config.codeGroup ? (
|
|
<p className="text-foreground text-sm font-medium">{config.codeGroup}</p>
|
|
) : (
|
|
<p className="text-xs text-amber-600">테이블 타입 관리에서 코드 그룹을 설정해주세요</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 엔티티(참조 테이블) 설정 */}
|
|
{effectiveSource === "entity" && (
|
|
<div className="space-y-3">
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">참조 테이블</Label>
|
|
<Input
|
|
value={config.entityTable || ""}
|
|
readOnly
|
|
disabled
|
|
placeholder="테이블 타입 관리에서 설정"
|
|
className="bg-muted h-8 text-xs"
|
|
/>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
조인할 테이블명 (테이블 타입 관리에서 설정된 경우 자동 입력됨)
|
|
</p>
|
|
</div>
|
|
|
|
{loadingColumns && (
|
|
<div className="text-muted-foreground flex items-center gap-2 text-xs">
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
|
컬럼 목록 로딩 중...
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">값 컬럼 (코드)</Label>
|
|
{entityColumns.length > 0 ? (
|
|
<Select
|
|
value={config.entityValueColumn || ""}
|
|
onValueChange={(value) => updateConfig("entityValueColumn", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{entityColumns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.columnLabel || col.columnName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={config.entityValueColumn || ""}
|
|
onChange={(e) => updateConfig("entityValueColumn", e.target.value)}
|
|
placeholder="id"
|
|
className="h-8 text-xs"
|
|
/>
|
|
)}
|
|
<p className="text-muted-foreground text-[10px]">저장될 값</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">표시 컬럼</Label>
|
|
{entityColumns.length > 0 ? (
|
|
<Select
|
|
value={config.entityLabelColumn || ""}
|
|
onValueChange={(value) => updateConfig("entityLabelColumn", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{entityColumns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.columnLabel || col.columnName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={config.entityLabelColumn || ""}
|
|
onChange={(e) => updateConfig("entityLabelColumn", e.target.value)}
|
|
placeholder="name"
|
|
className="h-8 text-xs"
|
|
/>
|
|
)}
|
|
<p className="text-muted-foreground text-[10px]">화면에 표시될 값</p>
|
|
</div>
|
|
</div>
|
|
|
|
{config.entityTable && !loadingColumns && entityColumns.length === 0 && (
|
|
<p className="text-[10px] text-amber-600">
|
|
테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
|
|
</p>
|
|
)}
|
|
|
|
{config.entityTable && entityColumns.length > 0 && (
|
|
<div className="border-t pt-3">
|
|
<p className="text-muted-foreground text-[10px]">
|
|
같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로
|
|
채워집니다.
|
|
</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="multiple"
|
|
checked={config.multiple || false}
|
|
onCheckedChange={(checked) => updateConfig("multiple", checked)}
|
|
/>
|
|
<label htmlFor="multiple" 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="allowClear"
|
|
checked={config.allowClear !== false}
|
|
onCheckedChange={(checked) => updateConfig("allowClear", checked)}
|
|
/>
|
|
<label htmlFor="allowClear" className="text-xs">
|
|
값 초기화 허용
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 다중 선택 시 최대 개수 */}
|
|
{config.multiple && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">최대 선택 개수</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.maxSelect ?? ""}
|
|
onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
|
|
placeholder="제한 없음"
|
|
min="1"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
V2SelectConfigPanel.displayName = "V2SelectConfigPanel";
|
|
|
|
export default V2SelectConfigPanel;
|