781 lines
24 KiB
TypeScript
781 lines
24 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect, useCallback } from "react";
|
||
|
|
import { Plus, Trash2, Check, ChevronsUpDown } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Switch } from "@/components/ui/switch";
|
||
|
|
import {
|
||
|
|
Command,
|
||
|
|
CommandEmpty,
|
||
|
|
CommandGroup,
|
||
|
|
CommandInput,
|
||
|
|
CommandItem,
|
||
|
|
CommandList,
|
||
|
|
} from "@/components/ui/command";
|
||
|
|
import {
|
||
|
|
Popover,
|
||
|
|
PopoverContent,
|
||
|
|
PopoverTrigger,
|
||
|
|
} from "@/components/ui/popover";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { ItemRoutingConfig, ProcessColumnDef } from "./types";
|
||
|
|
import { defaultConfig } from "./config";
|
||
|
|
|
||
|
|
interface TableInfo {
|
||
|
|
tableName: string;
|
||
|
|
displayName?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ColumnInfo {
|
||
|
|
columnName: string;
|
||
|
|
displayName?: string;
|
||
|
|
dataType?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ScreenInfo {
|
||
|
|
screenId: number;
|
||
|
|
screenName: string;
|
||
|
|
screenCode: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 테이블 셀렉터 Combobox
|
||
|
|
function TableSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
tables,
|
||
|
|
loading,
|
||
|
|
}: {
|
||
|
|
value: string;
|
||
|
|
onChange: (v: string) => void;
|
||
|
|
tables: TableInfo[];
|
||
|
|
loading: boolean;
|
||
|
|
}) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const selected = tables.find((t) => t.tableName === value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className="h-8 w-full justify-between text-xs"
|
||
|
|
disabled={loading}
|
||
|
|
>
|
||
|
|
{loading
|
||
|
|
? "로딩 중..."
|
||
|
|
: selected
|
||
|
|
? selected.displayName || selected.tableName
|
||
|
|
: "테이블 선택"}
|
||
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[280px] p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="테이블 검색..." className="text-xs" />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty className="py-4 text-center text-xs">
|
||
|
|
테이블을 찾을 수 없습니다.
|
||
|
|
</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-[200px] overflow-auto">
|
||
|
|
{tables.map((t) => (
|
||
|
|
<CommandItem
|
||
|
|
key={t.tableName}
|
||
|
|
value={`${t.displayName || ""} ${t.tableName}`}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange(t.tableName);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-3 w-3",
|
||
|
|
value === t.tableName ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">
|
||
|
|
{t.displayName || t.tableName}
|
||
|
|
</span>
|
||
|
|
{t.displayName && (
|
||
|
|
<span className="text-[10px] text-muted-foreground">
|
||
|
|
{t.tableName}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 컬럼 셀렉터 Combobox
|
||
|
|
function ColumnSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
tableName,
|
||
|
|
label,
|
||
|
|
}: {
|
||
|
|
value: string;
|
||
|
|
onChange: (v: string) => void;
|
||
|
|
tableName: string;
|
||
|
|
label?: string;
|
||
|
|
}) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!tableName) {
|
||
|
|
setColumns([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const load = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const { tableManagementApi } = await import(
|
||
|
|
"@/lib/api/tableManagement"
|
||
|
|
);
|
||
|
|
const res = await tableManagementApi.getColumnList(tableName);
|
||
|
|
if (res.success && res.data?.columns) {
|
||
|
|
setColumns(res.data.columns);
|
||
|
|
}
|
||
|
|
} catch {
|
||
|
|
/* ignore */
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
load();
|
||
|
|
}, [tableName]);
|
||
|
|
|
||
|
|
const selected = columns.find((c) => c.columnName === value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className="h-8 w-full justify-between text-xs"
|
||
|
|
disabled={loading || !tableName}
|
||
|
|
>
|
||
|
|
{loading
|
||
|
|
? "로딩..."
|
||
|
|
: !tableName
|
||
|
|
? "테이블 먼저 선택"
|
||
|
|
: selected
|
||
|
|
? selected.displayName || selected.columnName
|
||
|
|
: label || "컬럼 선택"}
|
||
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[260px] p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty className="py-4 text-center text-xs">
|
||
|
|
컬럼을 찾을 수 없습니다.
|
||
|
|
</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-[200px] overflow-auto">
|
||
|
|
{columns.map((c) => (
|
||
|
|
<CommandItem
|
||
|
|
key={c.columnName}
|
||
|
|
value={`${c.displayName || ""} ${c.columnName}`}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange(c.columnName);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-3 w-3",
|
||
|
|
value === c.columnName ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">
|
||
|
|
{c.displayName || c.columnName}
|
||
|
|
</span>
|
||
|
|
{c.displayName && (
|
||
|
|
<span className="text-[10px] text-muted-foreground">
|
||
|
|
{c.columnName}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 화면 셀렉터 Combobox
|
||
|
|
function ScreenSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
}: {
|
||
|
|
value?: number;
|
||
|
|
onChange: (v?: number) => void;
|
||
|
|
}) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [screens, setScreens] = useState<ScreenInfo[]>([]);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const load = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const { screenApi } = await import("@/lib/api/screen");
|
||
|
|
const res = await screenApi.getScreens({ page: 1, size: 1000 });
|
||
|
|
setScreens(
|
||
|
|
res.data.map((s: any) => ({
|
||
|
|
screenId: s.screenId,
|
||
|
|
screenName: s.screenName,
|
||
|
|
screenCode: s.screenCode,
|
||
|
|
}))
|
||
|
|
);
|
||
|
|
} catch {
|
||
|
|
/* ignore */
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
load();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const selected = screens.find((s) => s.screenId === value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className="h-8 w-full justify-between text-xs"
|
||
|
|
disabled={loading}
|
||
|
|
>
|
||
|
|
{loading
|
||
|
|
? "로딩 중..."
|
||
|
|
: selected
|
||
|
|
? `${selected.screenName} (${selected.screenId})`
|
||
|
|
: "화면 선택"}
|
||
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[350px] p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="화면 검색..." className="text-xs" />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty className="py-4 text-center text-xs">
|
||
|
|
화면을 찾을 수 없습니다.
|
||
|
|
</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-[300px] overflow-auto">
|
||
|
|
{screens.map((s) => (
|
||
|
|
<CommandItem
|
||
|
|
key={s.screenId}
|
||
|
|
value={`${s.screenName.toLowerCase()} ${s.screenCode.toLowerCase()} ${s.screenId}`}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange(s.screenId === value ? undefined : s.screenId);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-3 w-3",
|
||
|
|
value === s.screenId ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">{s.screenName}</span>
|
||
|
|
<span className="text-[10px] text-muted-foreground">
|
||
|
|
{s.screenCode} (ID: {s.screenId})
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 공정 테이블 컬럼 셀렉터 (routingDetailTable의 컬럼 목록에서 선택)
|
||
|
|
function ProcessColumnSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
tableName,
|
||
|
|
processTable,
|
||
|
|
}: {
|
||
|
|
value: string;
|
||
|
|
onChange: (v: string) => void;
|
||
|
|
tableName: string;
|
||
|
|
processTable: string;
|
||
|
|
}) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadAll = async () => {
|
||
|
|
if (!tableName) return;
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const { tableManagementApi } = await import(
|
||
|
|
"@/lib/api/tableManagement"
|
||
|
|
);
|
||
|
|
const res = await tableManagementApi.getColumnList(tableName);
|
||
|
|
const cols: ColumnInfo[] = [];
|
||
|
|
if (res.success && res.data?.columns) {
|
||
|
|
cols.push(...res.data.columns);
|
||
|
|
}
|
||
|
|
if (processTable && processTable !== tableName) {
|
||
|
|
const res2 = await tableManagementApi.getColumnList(processTable);
|
||
|
|
if (res2.success && res2.data?.columns) {
|
||
|
|
cols.push(
|
||
|
|
...res2.data.columns.map((c: any) => ({
|
||
|
|
...c,
|
||
|
|
columnName: c.columnName,
|
||
|
|
displayName: `[${processTable}] ${c.displayName || c.columnName}`,
|
||
|
|
}))
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setColumns(cols);
|
||
|
|
} catch {
|
||
|
|
/* ignore */
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
loadAll();
|
||
|
|
}, [tableName, processTable]);
|
||
|
|
|
||
|
|
const selected = columns.find((c) => c.columnName === value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
className="h-7 w-24 justify-between text-[10px]"
|
||
|
|
disabled={loading}
|
||
|
|
>
|
||
|
|
{selected ? selected.displayName || selected.columnName : value || "선택"}
|
||
|
|
<ChevronsUpDown className="ml-1 h-2.5 w-2.5 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[250px] p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty className="py-3 text-center text-xs">
|
||
|
|
없음
|
||
|
|
</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-[200px] overflow-auto">
|
||
|
|
{columns.map((c) => (
|
||
|
|
<CommandItem
|
||
|
|
key={c.columnName}
|
||
|
|
value={`${c.displayName || ""} ${c.columnName}`}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange(c.columnName);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-1 h-3 w-3",
|
||
|
|
value === c.columnName ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
{c.displayName || c.columnName}
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ConfigPanelProps {
|
||
|
|
config: Partial<ItemRoutingConfig>;
|
||
|
|
onChange: (config: Partial<ItemRoutingConfig>) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ItemRoutingConfigPanel({
|
||
|
|
config: configProp,
|
||
|
|
onChange,
|
||
|
|
}: ConfigPanelProps) {
|
||
|
|
const config: ItemRoutingConfig = {
|
||
|
|
...defaultConfig,
|
||
|
|
...configProp,
|
||
|
|
dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
|
||
|
|
modals: { ...defaultConfig.modals, ...configProp?.modals },
|
||
|
|
processColumns: configProp?.processColumns?.length
|
||
|
|
? configProp.processColumns
|
||
|
|
: defaultConfig.processColumns,
|
||
|
|
};
|
||
|
|
|
||
|
|
const [allTables, setAllTables] = useState<TableInfo[]>([]);
|
||
|
|
const [tablesLoading, setTablesLoading] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const load = async () => {
|
||
|
|
setTablesLoading(true);
|
||
|
|
try {
|
||
|
|
const { tableManagementApi } = await import(
|
||
|
|
"@/lib/api/tableManagement"
|
||
|
|
);
|
||
|
|
const res = await tableManagementApi.getTableList();
|
||
|
|
if (res.success && res.data) {
|
||
|
|
setAllTables(res.data);
|
||
|
|
}
|
||
|
|
} catch {
|
||
|
|
/* ignore */
|
||
|
|
} finally {
|
||
|
|
setTablesLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
load();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const update = (partial: Partial<ItemRoutingConfig>) => {
|
||
|
|
onChange({ ...configProp, ...partial });
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateDataSource = (field: string, value: string) => {
|
||
|
|
update({ dataSource: { ...config.dataSource, [field]: value } });
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateModals = (field: string, value: number | undefined) => {
|
||
|
|
update({ modals: { ...config.modals, [field]: value } });
|
||
|
|
};
|
||
|
|
|
||
|
|
// 컬럼 관리
|
||
|
|
const addColumn = () => {
|
||
|
|
update({
|
||
|
|
processColumns: [
|
||
|
|
...config.processColumns,
|
||
|
|
{ name: "", label: "새 컬럼", width: 100 },
|
||
|
|
],
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeColumn = (idx: number) => {
|
||
|
|
update({
|
||
|
|
processColumns: config.processColumns.filter((_, i) => i !== idx),
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateColumn = (
|
||
|
|
idx: number,
|
||
|
|
field: keyof ProcessColumnDef,
|
||
|
|
value: any
|
||
|
|
) => {
|
||
|
|
const next = [...config.processColumns];
|
||
|
|
next[idx] = { ...next[idx], [field]: value };
|
||
|
|
update({ processColumns: next });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-5 p-4">
|
||
|
|
<h3 className="text-sm font-semibold">품목별 라우팅 설정</h3>
|
||
|
|
|
||
|
|
{/* 데이터 소스 설정 */}
|
||
|
|
<section className="space-y-3">
|
||
|
|
<p className="text-xs font-medium text-muted-foreground">
|
||
|
|
데이터 소스
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">품목 테이블</Label>
|
||
|
|
<TableSelector
|
||
|
|
value={config.dataSource.itemTable}
|
||
|
|
onChange={(v) => updateDataSource("itemTable", v)}
|
||
|
|
tables={allTables}
|
||
|
|
loading={tablesLoading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">품목명 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.itemNameColumn}
|
||
|
|
onChange={(v) => updateDataSource("itemNameColumn", v)}
|
||
|
|
tableName={config.dataSource.itemTable}
|
||
|
|
label="품목명"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">품목코드 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.itemCodeColumn}
|
||
|
|
onChange={(v) => updateDataSource("itemCodeColumn", v)}
|
||
|
|
tableName={config.dataSource.itemTable}
|
||
|
|
label="품목코드"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">라우팅 버전 테이블</Label>
|
||
|
|
<TableSelector
|
||
|
|
value={config.dataSource.routingVersionTable}
|
||
|
|
onChange={(v) => updateDataSource("routingVersionTable", v)}
|
||
|
|
tables={allTables}
|
||
|
|
loading={tablesLoading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">버전 FK 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.routingVersionFkColumn}
|
||
|
|
onChange={(v) => updateDataSource("routingVersionFkColumn", v)}
|
||
|
|
tableName={config.dataSource.routingVersionTable}
|
||
|
|
label="FK 컬럼"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">버전명 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.routingVersionNameColumn}
|
||
|
|
onChange={(v) =>
|
||
|
|
updateDataSource("routingVersionNameColumn", v)
|
||
|
|
}
|
||
|
|
tableName={config.dataSource.routingVersionTable}
|
||
|
|
label="버전명"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 상세 테이블</Label>
|
||
|
|
<TableSelector
|
||
|
|
value={config.dataSource.routingDetailTable}
|
||
|
|
onChange={(v) => updateDataSource("routingDetailTable", v)}
|
||
|
|
tables={allTables}
|
||
|
|
loading={tablesLoading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 상세 FK 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.routingDetailFkColumn}
|
||
|
|
onChange={(v) => updateDataSource("routingDetailFkColumn", v)}
|
||
|
|
tableName={config.dataSource.routingDetailTable}
|
||
|
|
label="FK 컬럼"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 마스터 테이블</Label>
|
||
|
|
<TableSelector
|
||
|
|
value={config.dataSource.processTable}
|
||
|
|
onChange={(v) => updateDataSource("processTable", v)}
|
||
|
|
tables={allTables}
|
||
|
|
loading={tablesLoading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정명 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.processNameColumn}
|
||
|
|
onChange={(v) => updateDataSource("processNameColumn", v)}
|
||
|
|
tableName={config.dataSource.processTable}
|
||
|
|
label="공정명"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정코드 컬럼</Label>
|
||
|
|
<ColumnSelector
|
||
|
|
value={config.dataSource.processCodeColumn}
|
||
|
|
onChange={(v) => updateDataSource("processCodeColumn", v)}
|
||
|
|
tableName={config.dataSource.processTable}
|
||
|
|
label="공정코드"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 모달 설정 */}
|
||
|
|
<section className="space-y-3">
|
||
|
|
<p className="text-xs font-medium text-muted-foreground">모달 연동</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">버전 추가 모달</Label>
|
||
|
|
<ScreenSelector
|
||
|
|
value={config.modals.versionAddScreenId}
|
||
|
|
onChange={(v) => updateModals("versionAddScreenId", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 추가 모달</Label>
|
||
|
|
<ScreenSelector
|
||
|
|
value={config.modals.processAddScreenId}
|
||
|
|
onChange={(v) => updateModals("processAddScreenId", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 수정 모달</Label>
|
||
|
|
<ScreenSelector
|
||
|
|
value={config.modals.processEditScreenId}
|
||
|
|
onChange={(v) => updateModals("processEditScreenId", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 공정 테이블 컬럼 설정 */}
|
||
|
|
<section className="space-y-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<p className="text-xs font-medium text-muted-foreground">
|
||
|
|
공정 테이블 컬럼
|
||
|
|
</p>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="h-6 gap-1 text-[10px]"
|
||
|
|
onClick={addColumn}
|
||
|
|
>
|
||
|
|
<Plus className="h-3 w-3" />
|
||
|
|
컬럼 추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
{config.processColumns.map((col, idx) => (
|
||
|
|
<div
|
||
|
|
key={idx}
|
||
|
|
className="flex items-center gap-1.5 rounded border bg-muted/30 p-1.5"
|
||
|
|
>
|
||
|
|
<ProcessColumnSelector
|
||
|
|
value={col.name}
|
||
|
|
onChange={(v) => updateColumn(idx, "name", v)}
|
||
|
|
tableName={config.dataSource.routingDetailTable}
|
||
|
|
processTable={config.dataSource.processTable}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
value={col.label}
|
||
|
|
onChange={(e) => updateColumn(idx, "label", e.target.value)}
|
||
|
|
className="h-7 flex-1 text-[10px]"
|
||
|
|
placeholder="표시명"
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
value={col.width || ""}
|
||
|
|
onChange={(e) =>
|
||
|
|
updateColumn(
|
||
|
|
idx,
|
||
|
|
"width",
|
||
|
|
e.target.value ? Number(e.target.value) : undefined
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="h-7 w-14 text-[10px]"
|
||
|
|
placeholder="너비"
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
|
||
|
|
onClick={() => removeColumn(idx)}
|
||
|
|
disabled={config.processColumns.length <= 1}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* UI 설정 */}
|
||
|
|
<section className="space-y-3">
|
||
|
|
<p className="text-xs font-medium text-muted-foreground">UI 설정</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">좌우 분할 비율 (%)</Label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
value={config.splitRatio || 40}
|
||
|
|
onChange={(e) => update({ splitRatio: Number(e.target.value) })}
|
||
|
|
min={20}
|
||
|
|
max={60}
|
||
|
|
className="mt-1 h-8 w-20 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">좌측 패널 제목</Label>
|
||
|
|
<Input
|
||
|
|
value={config.leftPanelTitle || ""}
|
||
|
|
onChange={(e) => update({ leftPanelTitle: e.target.value })}
|
||
|
|
className="mt-1 h-8 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">우측 패널 제목</Label>
|
||
|
|
<Input
|
||
|
|
value={config.rightPanelTitle || ""}
|
||
|
|
onChange={(e) => update({ rightPanelTitle: e.target.value })}
|
||
|
|
className="mt-1 h-8 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">버전 추가 버튼 텍스트</Label>
|
||
|
|
<Input
|
||
|
|
value={config.versionAddButtonText || ""}
|
||
|
|
onChange={(e) => update({ versionAddButtonText: e.target.value })}
|
||
|
|
className="mt-1 h-8 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs">공정 추가 버튼 텍스트</Label>
|
||
|
|
<Input
|
||
|
|
value={config.processAddButtonText || ""}
|
||
|
|
onChange={(e) => update({ processAddButtonText: e.target.value })}
|
||
|
|
className="mt-1 h-8 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Switch
|
||
|
|
checked={config.autoSelectFirstVersion ?? true}
|
||
|
|
onCheckedChange={(v) => update({ autoSelectFirstVersion: v })}
|
||
|
|
/>
|
||
|
|
<Label className="text-xs">첫 번째 버전 자동 선택</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Switch
|
||
|
|
checked={config.readonly || false}
|
||
|
|
onCheckedChange={(v) => update({ readonly: v })}
|
||
|
|
/>
|
||
|
|
<Label className="text-xs">읽기 전용 모드</Label>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|