1091 lines
40 KiB
TypeScript
1091 lines
40 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo, useCallback, useRef } 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 { Checkbox } from "@/components/ui/checkbox";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Check, ChevronsUpDown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { CodePartType, DATE_FORMAT_OPTIONS } from "@/types/numbering-rule";
|
|
import { tableManagementApi } from "@/lib/api/tableManagement";
|
|
|
|
interface AutoConfigPanelProps {
|
|
partType: CodePartType;
|
|
config?: any;
|
|
onChange: (config: any) => void;
|
|
isPreview?: boolean;
|
|
}
|
|
|
|
interface TableInfo {
|
|
tableName: string;
|
|
displayName: string;
|
|
}
|
|
|
|
interface ColumnInfo {
|
|
columnName: string;
|
|
displayName: string;
|
|
dataType: string;
|
|
inputType?: string;
|
|
}
|
|
|
|
export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
|
|
partType,
|
|
config = {},
|
|
onChange,
|
|
isPreview = false,
|
|
}) => {
|
|
// 1. 순번 (자동 증가)
|
|
if (partType === "sequence") {
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">순번 자릿수</Label>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={10}
|
|
value={config.sequenceLength || 3}
|
|
onChange={(e) =>
|
|
onChange({ ...config, sequenceLength: parseInt(e.target.value) || 3 })
|
|
}
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
예: 3 → 001, 4 → 0001
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">시작 번호</Label>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
value={config.startFrom || 1}
|
|
onChange={(e) =>
|
|
onChange({ ...config, startFrom: parseInt(e.target.value) || 1 })
|
|
}
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
순번이 시작될 번호
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 2. 숫자 (고정 자릿수)
|
|
if (partType === "number") {
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">숫자 자릿수</Label>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={10}
|
|
value={config.numberLength || 4}
|
|
onChange={(e) =>
|
|
onChange({ ...config, numberLength: parseInt(e.target.value) || 4 })
|
|
}
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
예: 4 → 0001, 5 → 00001
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">숫자 값</Label>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
value={config.numberValue || 0}
|
|
onChange={(e) =>
|
|
onChange({ ...config, numberValue: parseInt(e.target.value) || 0 })
|
|
}
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
고정으로 사용할 숫자
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 3. 날짜
|
|
if (partType === "date") {
|
|
return (
|
|
<DateConfigPanel
|
|
config={config}
|
|
onChange={onChange}
|
|
isPreview={isPreview}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 4. 문자
|
|
if (partType === "text") {
|
|
return (
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">텍스트 값</Label>
|
|
<Input
|
|
value={config.textValue || ""}
|
|
onChange={(e) => onChange({ ...config, textValue: e.target.value })}
|
|
placeholder="예: PRJ, CODE, PROD"
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
고정으로 사용할 텍스트 또는 코드
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 5. 카테고리
|
|
if (partType === "category") {
|
|
return (
|
|
<CategoryConfigPanel
|
|
config={config}
|
|
onChange={onChange}
|
|
isPreview={isPreview}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* 날짜 타입 전용 설정 패널
|
|
* - 날짜 형식 선택
|
|
* - 컬럼 값 기준 생성 옵션
|
|
*/
|
|
interface DateConfigPanelProps {
|
|
config?: any;
|
|
onChange: (config: any) => void;
|
|
isPreview?: boolean;
|
|
}
|
|
|
|
const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
|
|
config = {},
|
|
onChange,
|
|
isPreview = false,
|
|
}) => {
|
|
// 테이블 목록
|
|
const [tables, setTables] = useState<TableInfo[]>([]);
|
|
const [loadingTables, setLoadingTables] = useState(false);
|
|
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
|
|
|
|
// 컬럼 목록
|
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
|
|
|
|
// 체크박스 상태
|
|
const useColumnValue = config.useColumnValue || false;
|
|
const sourceTableName = config.sourceTableName || "";
|
|
const sourceColumnName = config.sourceColumnName || "";
|
|
|
|
// 테이블 목록 로드
|
|
useEffect(() => {
|
|
if (useColumnValue && tables.length === 0) {
|
|
loadTables();
|
|
}
|
|
}, [useColumnValue]);
|
|
|
|
// 테이블 변경 시 컬럼 로드
|
|
useEffect(() => {
|
|
if (sourceTableName) {
|
|
loadColumns(sourceTableName);
|
|
} else {
|
|
setColumns([]);
|
|
}
|
|
}, [sourceTableName]);
|
|
|
|
const loadTables = async () => {
|
|
setLoadingTables(true);
|
|
try {
|
|
const response = await tableManagementApi.getTableList();
|
|
if (response.success && response.data) {
|
|
const tableList = response.data.map((t: any) => ({
|
|
tableName: t.tableName || t.table_name,
|
|
displayName: t.displayName || t.table_label || t.tableName || t.table_name,
|
|
}));
|
|
setTables(tableList);
|
|
}
|
|
} catch (error) {
|
|
console.error("테이블 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoadingTables(false);
|
|
}
|
|
};
|
|
|
|
const loadColumns = async (tableName: string) => {
|
|
setLoadingColumns(true);
|
|
try {
|
|
const response = await tableManagementApi.getColumnList(tableName);
|
|
if (response.success && response.data) {
|
|
const rawColumns = response.data?.columns || response.data;
|
|
// 날짜 타입 컬럼만 필터링
|
|
const dateColumns = (rawColumns as any[]).filter((col: any) => {
|
|
const inputType = col.inputType || col.input_type || "";
|
|
const dataType = (col.dataType || col.data_type || "").toLowerCase();
|
|
return (
|
|
inputType === "date" ||
|
|
inputType === "datetime" ||
|
|
dataType.includes("date") ||
|
|
dataType.includes("timestamp")
|
|
);
|
|
});
|
|
|
|
setColumns(
|
|
dateColumns.map((col: any) => ({
|
|
columnName: col.columnName || col.column_name,
|
|
displayName: col.displayName || col.column_label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type || "",
|
|
inputType: col.inputType || col.input_type || "",
|
|
}))
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("컬럼 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
|
|
// 선택된 테이블/컬럼 라벨
|
|
const selectedTableLabel = useMemo(() => {
|
|
const found = tables.find((t) => t.tableName === sourceTableName);
|
|
return found ? `${found.displayName} (${found.tableName})` : "";
|
|
}, [tables, sourceTableName]);
|
|
|
|
const selectedColumnLabel = useMemo(() => {
|
|
const found = columns.find((c) => c.columnName === sourceColumnName);
|
|
return found ? `${found.displayName} (${found.columnName})` : "";
|
|
}, [columns, sourceColumnName]);
|
|
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4">
|
|
{/* 날짜 형식 선택 */}
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
|
|
<Select
|
|
value={config.dateFormat || "YYYYMMDD"}
|
|
onValueChange={(value) => onChange({ ...config, dateFormat: value })}
|
|
disabled={isPreview}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{DATE_FORMAT_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
|
|
{option.label} ({option.example})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
|
{useColumnValue
|
|
? "선택한 컬럼의 날짜 값이 이 형식으로 변환됩니다"
|
|
: "현재 날짜가 자동으로 입력됩니다"}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 컬럼 값 기준 생성 체크박스 */}
|
|
<div className="flex items-start gap-2">
|
|
<Checkbox
|
|
id="useColumnValue"
|
|
checked={useColumnValue}
|
|
onCheckedChange={(checked) => {
|
|
onChange({
|
|
...config,
|
|
useColumnValue: checked,
|
|
// 체크 해제 시 테이블/컬럼 초기화
|
|
...(checked ? {} : { sourceTableName: "", sourceColumnName: "" }),
|
|
});
|
|
}}
|
|
disabled={isPreview}
|
|
className="mt-0.5"
|
|
/>
|
|
<div className="flex-1">
|
|
<Label
|
|
htmlFor="useColumnValue"
|
|
className="cursor-pointer text-xs font-medium sm:text-sm"
|
|
>
|
|
날짜 컬럼 기준으로 생성
|
|
</Label>
|
|
<p className="text-[10px] text-muted-foreground sm:text-xs">
|
|
폼에 입력된 날짜 값으로 코드를 생성합니다
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 선택 (체크 시 표시) */}
|
|
{useColumnValue && (
|
|
<>
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">테이블</Label>
|
|
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={tableComboboxOpen}
|
|
disabled={isPreview || loadingTables}
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
{loadingTables
|
|
? "로딩 중..."
|
|
: sourceTableName
|
|
? selectedTableLabel
|
|
: "테이블 선택"}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="p-0"
|
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
|
align="start"
|
|
>
|
|
<Command>
|
|
<CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs sm:text-sm">
|
|
테이블을 찾을 수 없습니다
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{tables.map((table) => (
|
|
<CommandItem
|
|
key={table.tableName}
|
|
value={`${table.displayName} ${table.tableName}`}
|
|
onSelect={() => {
|
|
onChange({
|
|
...config,
|
|
sourceTableName: table.tableName,
|
|
sourceColumnName: "", // 테이블 변경 시 컬럼 초기화
|
|
});
|
|
setTableComboboxOpen(false);
|
|
}}
|
|
className="text-xs sm:text-sm"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
sourceTableName === table.tableName ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{table.displayName}</span>
|
|
<span className="text-[10px] text-gray-500">{table.tableName}</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 컬럼 선택 */}
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">날짜 컬럼</Label>
|
|
<Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={columnComboboxOpen}
|
|
disabled={isPreview || loadingColumns || !sourceTableName}
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
{loadingColumns
|
|
? "로딩 중..."
|
|
: !sourceTableName
|
|
? "테이블을 먼저 선택하세요"
|
|
: sourceColumnName
|
|
? selectedColumnLabel
|
|
: columns.length === 0
|
|
? "날짜 컬럼이 없습니다"
|
|
: "컬럼 선택"}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="p-0"
|
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
|
align="start"
|
|
>
|
|
<Command>
|
|
<CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs sm:text-sm">
|
|
날짜 컬럼을 찾을 수 없습니다
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{columns.map((column) => (
|
|
<CommandItem
|
|
key={column.columnName}
|
|
value={`${column.displayName} ${column.columnName}`}
|
|
onSelect={() => {
|
|
onChange({ ...config, sourceColumnName: column.columnName });
|
|
setColumnComboboxOpen(false);
|
|
}}
|
|
className="text-xs sm:text-sm"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
sourceColumnName === column.columnName ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{column.displayName}</span>
|
|
<span className="text-[10px] text-gray-500">
|
|
{column.columnName} ({column.inputType || column.dataType})
|
|
</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
{sourceTableName && columns.length === 0 && !loadingColumns && (
|
|
<p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
|
|
이 테이블에 날짜 타입 컬럼이 없습니다
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* 카테고리 타입 전용 설정 패널
|
|
* - 카테고리 선택 (테이블.컬럼)
|
|
* - 카테고리 값별 형식 매핑
|
|
*/
|
|
import { CategoryFormatMapping } from "@/types/numbering-rule";
|
|
import { Plus, Trash2, FolderTree } from "lucide-react";
|
|
import { getCategoryTree, getAllCategoryKeys } from "@/lib/api/categoryTree";
|
|
|
|
interface CategoryValueNode {
|
|
valueId: number;
|
|
valueCode: string;
|
|
valueLabel: string;
|
|
depth: number;
|
|
path: string;
|
|
parentValueId: number | null;
|
|
children?: CategoryValueNode[];
|
|
}
|
|
|
|
interface CategoryConfigPanelProps {
|
|
config?: {
|
|
categoryKey?: string;
|
|
categoryMappings?: CategoryFormatMapping[];
|
|
};
|
|
onChange: (config: any) => void;
|
|
isPreview?: boolean;
|
|
}
|
|
|
|
const CategoryConfigPanel: React.FC<CategoryConfigPanelProps> = ({
|
|
config = {},
|
|
onChange,
|
|
isPreview = false,
|
|
}) => {
|
|
// 카테고리 옵션 (테이블.컬럼 + 라벨)
|
|
const [categoryOptions, setCategoryOptions] = useState<{
|
|
tableName: string;
|
|
columnName: string;
|
|
displayName: string;
|
|
displayLabel: string; // 라벨 (테이블라벨.컬럼라벨)
|
|
}[]>([]);
|
|
const [categoryKeyOpen, setCategoryKeyOpen] = useState(false);
|
|
|
|
// 카테고리 값 트리
|
|
const [categoryValues, setCategoryValues] = useState<CategoryValueNode[]>([]);
|
|
const [loadingValues, setLoadingValues] = useState(false);
|
|
|
|
// 계층적 선택 상태 (대분류, 중분류, 소분류)
|
|
const [level1Id, setLevel1Id] = useState<number | null>(null);
|
|
const [level2Id, setLevel2Id] = useState<number | null>(null);
|
|
const [level3Id, setLevel3Id] = useState<number | null>(null);
|
|
const [level1Open, setLevel1Open] = useState(false);
|
|
const [level2Open, setLevel2Open] = useState(false);
|
|
const [level3Open, setLevel3Open] = useState(false);
|
|
|
|
// 형식 입력
|
|
const [newFormat, setNewFormat] = useState("");
|
|
|
|
// 수정 모드
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|
|
|
// 수정 모드 진입 중 플래그 (useEffect 초기화 방지)
|
|
const isEditingRef = useRef(false);
|
|
|
|
const categoryKey = config.categoryKey || "";
|
|
const mappings = config.categoryMappings || [];
|
|
|
|
// 이미 추가된 카테고리 ID 목록 (수정 중인 항목 제외)
|
|
const addedValueIds = useMemo(() => {
|
|
return mappings
|
|
.filter(m => m.categoryValueId !== editingId)
|
|
.map(m => m.categoryValueId);
|
|
}, [mappings, editingId]);
|
|
|
|
// 카테고리 옵션 로드
|
|
useEffect(() => {
|
|
loadCategoryOptions();
|
|
}, []);
|
|
|
|
// 카테고리 키 변경 시 값 로드 및 선택 초기화
|
|
useEffect(() => {
|
|
if (categoryKey) {
|
|
const [tableName, columnName] = categoryKey.split(".");
|
|
if (tableName && columnName) {
|
|
loadCategoryValues(tableName, columnName);
|
|
}
|
|
} else {
|
|
setCategoryValues([]);
|
|
}
|
|
// 선택 초기화
|
|
setLevel1Id(null);
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
}, [categoryKey]);
|
|
|
|
// 대분류 변경 시 중분류/소분류 초기화 (수정 모드 진입 중에는 건너뜀)
|
|
useEffect(() => {
|
|
if (isEditingRef.current) return;
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
}, [level1Id]);
|
|
|
|
// 중분류 변경 시 소분류 초기화 (수정 모드 진입 중에는 건너뜀)
|
|
useEffect(() => {
|
|
if (isEditingRef.current) return;
|
|
setLevel3Id(null);
|
|
}, [level2Id]);
|
|
|
|
const loadCategoryOptions = async () => {
|
|
try {
|
|
const response = await getAllCategoryKeys();
|
|
if (response.success && response.data) {
|
|
const options = response.data.map((item: { tableName: string; columnName: string; tableLabel?: string; columnLabel?: string }) => ({
|
|
tableName: item.tableName,
|
|
columnName: item.columnName,
|
|
displayName: `${item.tableName}.${item.columnName}`,
|
|
displayLabel: `${item.tableLabel || item.tableName}.${item.columnLabel || item.columnName}`,
|
|
}));
|
|
setCategoryOptions(options);
|
|
}
|
|
} catch (error) {
|
|
console.error("카테고리 옵션 로드 실패:", error);
|
|
}
|
|
};
|
|
|
|
const loadCategoryValues = async (tableName: string, columnName: string) => {
|
|
console.log("loadCategoryValues 호출:", { tableName, columnName });
|
|
setLoadingValues(true);
|
|
try {
|
|
const response = await getCategoryTree(tableName, columnName);
|
|
console.log("getCategoryTree 응답:", response);
|
|
if (response.success && response.data) {
|
|
console.log("카테고리 트리 로드 성공:", response.data);
|
|
setCategoryValues(response.data);
|
|
} else {
|
|
console.log("카테고리 트리 로드 실패:", response.error);
|
|
setCategoryValues([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("카테고리 값 로드 실패:", error);
|
|
setCategoryValues([]);
|
|
} finally {
|
|
setLoadingValues(false);
|
|
}
|
|
};
|
|
|
|
// 이미 추가된 항목 확인 (해당 노드 또는 하위 노드가 추가되었는지)
|
|
const isNodeOrDescendantAdded = useCallback((node: CategoryValueNode): boolean => {
|
|
if (addedValueIds.includes(node.valueId)) return true;
|
|
if (node.children?.length) {
|
|
return node.children.every(child => isNodeOrDescendantAdded(child));
|
|
}
|
|
return false;
|
|
}, [addedValueIds]);
|
|
|
|
// 각 레벨별 항목 계산 (이미 추가된 항목 필터링)
|
|
const level1Items = useMemo(() => {
|
|
return categoryValues.filter(v => !isNodeOrDescendantAdded(v));
|
|
}, [categoryValues, isNodeOrDescendantAdded]);
|
|
|
|
const level2Items = useMemo(() => {
|
|
if (!level1Id) return [];
|
|
const parent = categoryValues.find(v => v.valueId === level1Id);
|
|
const children = parent?.children || [];
|
|
return children.filter(v => !isNodeOrDescendantAdded(v));
|
|
}, [categoryValues, level1Id, isNodeOrDescendantAdded]);
|
|
|
|
const level3Items = useMemo(() => {
|
|
if (!level2Id) return [];
|
|
const parent = categoryValues.find(v => v.valueId === level1Id);
|
|
const level2Parent = parent?.children?.find(v => v.valueId === level2Id);
|
|
const children = level2Parent?.children || [];
|
|
return children.filter(v => !addedValueIds.includes(v.valueId));
|
|
}, [categoryValues, level1Id, level2Id, addedValueIds]);
|
|
|
|
// 선택된 값 정보 계산
|
|
const getSelectedInfo = () => {
|
|
// 가장 깊은 레벨의 선택된 값
|
|
const selectedId = level3Id || level2Id || level1Id;
|
|
if (!selectedId) return null;
|
|
|
|
// 선택된 노드 찾기
|
|
const findNode = (nodes: CategoryValueNode[], id: number): CategoryValueNode | null => {
|
|
for (const node of nodes) {
|
|
if (node.valueId === id) return node;
|
|
if (node.children?.length) {
|
|
const found = findNode(node.children, id);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const node = findNode(categoryValues, selectedId);
|
|
if (!node) return null;
|
|
|
|
// 경로 생성
|
|
const pathParts: string[] = [];
|
|
const l1 = categoryValues.find(v => v.valueId === level1Id);
|
|
if (l1) pathParts.push(l1.valueLabel);
|
|
if (level2Id) {
|
|
const l2 = level2Items.find(v => v.valueId === level2Id);
|
|
if (l2) pathParts.push(l2.valueLabel);
|
|
}
|
|
if (level3Id) {
|
|
const l3 = level3Items.find(v => v.valueId === level3Id);
|
|
if (l3) pathParts.push(l3.valueLabel);
|
|
}
|
|
|
|
return {
|
|
valueId: selectedId,
|
|
valueCode: node.valueCode, // valueCode 추가 (V2Select 호환)
|
|
valueLabel: node.valueLabel,
|
|
valuePath: pathParts.join(" > "),
|
|
};
|
|
};
|
|
|
|
const selectedInfo = getSelectedInfo();
|
|
|
|
// 매핑 추가/수정
|
|
const handleAddMapping = () => {
|
|
if (!selectedInfo || !newFormat.trim()) return;
|
|
|
|
const newMapping: CategoryFormatMapping = {
|
|
categoryValueId: selectedInfo.valueId,
|
|
categoryValueCode: selectedInfo.valueCode, // V2Select에서 valueCode를 value로 사용하므로 매칭용 저장
|
|
categoryValueLabel: selectedInfo.valueLabel,
|
|
categoryValuePath: selectedInfo.valuePath,
|
|
format: newFormat.trim(),
|
|
};
|
|
|
|
let updatedMappings: CategoryFormatMapping[];
|
|
|
|
if (editingId !== null) {
|
|
// 수정 모드: 기존 항목 교체
|
|
updatedMappings = mappings.map(m =>
|
|
m.categoryValueId === editingId ? newMapping : m
|
|
);
|
|
} else {
|
|
// 추가 모드: 중복 체크
|
|
const exists = mappings.some(m => m.categoryValueId === selectedInfo.valueId);
|
|
if (exists) {
|
|
alert("이미 추가된 카테고리입니다");
|
|
return;
|
|
}
|
|
updatedMappings = [...mappings, newMapping];
|
|
}
|
|
|
|
onChange({
|
|
...config,
|
|
categoryMappings: updatedMappings,
|
|
});
|
|
|
|
// 초기화
|
|
setLevel1Id(null);
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
setNewFormat("");
|
|
setEditingId(null);
|
|
};
|
|
|
|
// 매핑 수정 모드 진입
|
|
const handleEditMapping = (mapping: CategoryFormatMapping) => {
|
|
// useEffect 초기화 방지 플래그 설정
|
|
isEditingRef.current = true;
|
|
|
|
// 해당 카테고리의 경로를 파싱해서 레벨별로 설정
|
|
const findParentIds = (nodes: CategoryValueNode[], targetId: number, path: number[] = []): number[] | null => {
|
|
for (const node of nodes) {
|
|
if (node.valueId === targetId) {
|
|
return path;
|
|
}
|
|
if (node.children?.length) {
|
|
const result = findParentIds(node.children, targetId, [...path, node.valueId]);
|
|
if (result) return result;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const parentPath = findParentIds(categoryValues, mapping.categoryValueId);
|
|
|
|
if (parentPath && parentPath.length > 0) {
|
|
setLevel1Id(parentPath[0] || null);
|
|
if (parentPath.length === 2) {
|
|
// 3단계: 대분류 > 중분류 > 소분류
|
|
setLevel2Id(parentPath[1]);
|
|
setLevel3Id(mapping.categoryValueId);
|
|
} else if (parentPath.length === 1) {
|
|
// 2단계: 대분류 > 중분류
|
|
setLevel2Id(mapping.categoryValueId);
|
|
setLevel3Id(null);
|
|
} else {
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
}
|
|
} else {
|
|
// 루트 레벨 항목 (1단계)
|
|
setLevel1Id(mapping.categoryValueId);
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
}
|
|
|
|
setNewFormat(mapping.format);
|
|
setEditingId(mapping.categoryValueId);
|
|
|
|
// 다음 렌더링 사이클에서 플래그 해제
|
|
setTimeout(() => {
|
|
isEditingRef.current = false;
|
|
}, 0);
|
|
};
|
|
|
|
// 수정 취소
|
|
const handleCancelEdit = () => {
|
|
setLevel1Id(null);
|
|
setLevel2Id(null);
|
|
setLevel3Id(null);
|
|
setNewFormat("");
|
|
setEditingId(null);
|
|
};
|
|
|
|
// 매핑 삭제
|
|
const handleRemoveMapping = (valueId: number) => {
|
|
onChange({
|
|
...config,
|
|
categoryMappings: mappings.filter(m => m.categoryValueId !== valueId),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 카테고리 선택 */}
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">카테고리 구분</Label>
|
|
<Popover open={categoryKeyOpen} onOpenChange={setCategoryKeyOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={categoryKeyOpen}
|
|
disabled={isPreview}
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
<span className="truncate">
|
|
{categoryKey
|
|
? categoryOptions.find(o => o.displayName === categoryKey)?.displayLabel || categoryKey
|
|
: "카테고리 선택"}
|
|
</span>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64 p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="카테고리 검색..." className="text-xs sm:text-sm" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs">카테고리가 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{categoryOptions.map((opt) => (
|
|
<CommandItem
|
|
key={opt.displayName}
|
|
value={opt.displayLabel}
|
|
onSelect={() => {
|
|
onChange({ ...config, categoryKey: opt.displayName, categoryMappings: [] });
|
|
setCategoryKeyOpen(false);
|
|
}}
|
|
className="text-xs sm:text-sm"
|
|
>
|
|
<Check className={cn("mr-2 h-4 w-4", categoryKey === opt.displayName ? "opacity-100" : "opacity-0")} />
|
|
{opt.displayLabel}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 형식 설정 */}
|
|
{categoryKey && (
|
|
<div className="space-y-3 border-t pt-3">
|
|
<Label className="flex items-center gap-2 text-xs font-medium sm:text-sm">
|
|
<FolderTree className="h-4 w-4" />
|
|
형식 설정
|
|
</Label>
|
|
|
|
{/* 계층적 선택 UI */}
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap gap-2">
|
|
{/* 대분류 선택 */}
|
|
<div className="min-w-[100px] flex-1">
|
|
<Label className="text-[10px] text-muted-foreground">대분류</Label>
|
|
<Popover open={level1Open} onOpenChange={setLevel1Open}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
disabled={isPreview || loadingValues || level1Items.length === 0}
|
|
className="h-8 w-full justify-between text-xs"
|
|
>
|
|
<span className="truncate">
|
|
{loadingValues ? "로딩..." : level1Items.find(v => v.valueId === level1Id)?.valueLabel || "선택"}
|
|
</span>
|
|
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-48 p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs">항목이 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{level1Items.map((val) => (
|
|
<CommandItem
|
|
key={val.valueId}
|
|
value={val.valueLabel}
|
|
onSelect={() => {
|
|
setLevel1Id(val.valueId);
|
|
setLevel1Open(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", level1Id === val.valueId ? "opacity-100" : "opacity-0")} />
|
|
{val.valueLabel}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 중분류 선택 (대분류 선택 후 하위가 있을 때만 표시) */}
|
|
{level1Id && level2Items.length > 0 && (
|
|
<div className="min-w-[100px] flex-1">
|
|
<Label className="text-[10px] text-muted-foreground">중분류</Label>
|
|
<Popover open={level2Open} onOpenChange={setLevel2Open}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
disabled={isPreview}
|
|
className="h-8 w-full justify-between text-xs"
|
|
>
|
|
<span className="truncate">
|
|
{level2Items.find(v => v.valueId === level2Id)?.valueLabel || "선택"}
|
|
</span>
|
|
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-48 p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs">항목이 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{level2Items.map((val) => (
|
|
<CommandItem
|
|
key={val.valueId}
|
|
value={val.valueLabel}
|
|
onSelect={() => {
|
|
setLevel2Id(val.valueId);
|
|
setLevel2Open(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", level2Id === val.valueId ? "opacity-100" : "opacity-0")} />
|
|
{val.valueLabel}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
|
|
{/* 소분류 선택 (중분류 선택 후 하위가 있을 때만 표시) */}
|
|
{level2Id && level3Items.length > 0 && (
|
|
<div className="min-w-[100px] flex-1">
|
|
<Label className="text-[10px] text-muted-foreground">소분류</Label>
|
|
<Popover open={level3Open} onOpenChange={setLevel3Open}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
disabled={isPreview}
|
|
className="h-8 w-full justify-between text-xs"
|
|
>
|
|
<span className="truncate">
|
|
{level3Items.find(v => v.valueId === level3Id)?.valueLabel || "선택"}
|
|
</span>
|
|
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-48 p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs">항목이 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{level3Items.map((val) => (
|
|
<CommandItem
|
|
key={val.valueId}
|
|
value={val.valueLabel}
|
|
onSelect={() => {
|
|
setLevel3Id(val.valueId);
|
|
setLevel3Open(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", level3Id === val.valueId ? "opacity-100" : "opacity-0")} />
|
|
{val.valueLabel}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 형식 입력 + 추가/수정 버튼 */}
|
|
<div className="flex gap-2">
|
|
<div className="flex-1">
|
|
<Label className="text-[10px] text-muted-foreground">형식</Label>
|
|
<Input
|
|
value={newFormat}
|
|
onChange={(e) => setNewFormat(e.target.value.toUpperCase())}
|
|
placeholder="예: ITM, VLV, PIP"
|
|
disabled={isPreview || !selectedInfo}
|
|
className="h-8 text-xs"
|
|
maxLength={10}
|
|
/>
|
|
</div>
|
|
<div className="flex items-end gap-1">
|
|
{editingId !== null && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={handleCancelEdit}
|
|
className="h-8 text-xs"
|
|
>
|
|
취소
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
onClick={handleAddMapping}
|
|
disabled={isPreview || !selectedInfo || !newFormat.trim()}
|
|
className="h-8"
|
|
>
|
|
{editingId !== null ? <Check className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 선택된 경로 표시 */}
|
|
{selectedInfo && (
|
|
<p className="text-[10px] text-muted-foreground">
|
|
{editingId !== null ? "수정 중: " : "선택: "}{selectedInfo.valuePath}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 추가된 매핑 목록 */}
|
|
{mappings.length > 0 && (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px] text-muted-foreground">추가된 형식 (클릭하여 수정)</Label>
|
|
<div className="space-y-1">
|
|
{mappings.map((m) => (
|
|
<div
|
|
key={m.categoryValueId}
|
|
className={cn(
|
|
"flex cursor-pointer items-center justify-between rounded px-2 py-1 transition-colors hover:bg-muted",
|
|
editingId === m.categoryValueId ? "bg-primary/10 ring-1 ring-primary" : "bg-muted/50"
|
|
)}
|
|
onClick={() => !isPreview && handleEditMapping(m)}
|
|
>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<span className="text-muted-foreground">{m.categoryValuePath || m.categoryValueLabel}</span>
|
|
<span>→</span>
|
|
<span className="font-mono font-medium">{m.format}</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleRemoveMapping(m.categoryValueId);
|
|
}}
|
|
disabled={isPreview}
|
|
className="h-5 w-5"
|
|
>
|
|
<Trash2 className="h-3 w-3 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-[10px] text-muted-foreground">
|
|
선택된 카테고리 값에 따라 다른 형식이 생성됩니다
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|