466 lines
16 KiB
TypeScript
466 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo } 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>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
};
|