607 lines
30 KiB
TypeScript
607 lines
30 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||
|
|
import { Check, ChevronsUpDown, ChevronRight, Database, Link2, Move, Trash2 } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { SplitPanelLayoutConfig } from "../types";
|
||
|
|
import { PanelInlineComponent } from "../types";
|
||
|
|
import { ColumnInfo } from "@/types/screen";
|
||
|
|
import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
|
||
|
|
import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
|
||
|
|
import { SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
|
||
|
|
import { SortableColumnRow, ScreenSelector } from "./SharedComponents";
|
||
|
|
|
||
|
|
export interface LeftPanelConfigTabProps {
|
||
|
|
config: SplitPanelLayoutConfig;
|
||
|
|
onChange: (config: SplitPanelLayoutConfig) => void;
|
||
|
|
updateLeftPanel: (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => void;
|
||
|
|
screenTableName?: string;
|
||
|
|
allTables: any[];
|
||
|
|
leftTableOpen: boolean;
|
||
|
|
setLeftTableOpen: (open: boolean) => void;
|
||
|
|
localTitles: { left: string; right: string };
|
||
|
|
setLocalTitles: (fn: (prev: { left: string; right: string }) => { left: string; right: string }) => void;
|
||
|
|
isUserEditing: boolean;
|
||
|
|
setIsUserEditing: (v: boolean) => void;
|
||
|
|
leftTableColumns: ColumnInfo[];
|
||
|
|
entityJoinColumns: Record<string, {
|
||
|
|
availableColumns: Array<{ tableName: string; columnName: string; columnLabel: string; dataType: string; joinAlias: string; suggestedLabel: string }>;
|
||
|
|
joinTables: Array<{ tableName: string; currentDisplayColumn: string; joinConfig?: any; availableColumns: Array<{ columnName: string; columnLabel: string; dataType: string; inputType?: string; description?: string }> }>;
|
||
|
|
}>;
|
||
|
|
menuObjid?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
|
||
|
|
config,
|
||
|
|
onChange,
|
||
|
|
updateLeftPanel,
|
||
|
|
screenTableName,
|
||
|
|
allTables,
|
||
|
|
leftTableOpen,
|
||
|
|
setLeftTableOpen,
|
||
|
|
localTitles,
|
||
|
|
setLocalTitles,
|
||
|
|
setIsUserEditing,
|
||
|
|
leftTableColumns,
|
||
|
|
entityJoinColumns,
|
||
|
|
menuObjid,
|
||
|
|
}) => {
|
||
|
|
const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
|
||
|
|
const inputNumericTypes = ["number", "decimal", "currency", "integer"];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
|
||
|
|
<h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-medium">표시 테이블</Label>
|
||
|
|
<Popover open={leftTableOpen} onOpenChange={setLeftTableOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={leftTableOpen}
|
||
|
|
className="h-9 w-full justify-between text-xs"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2 truncate">
|
||
|
|
<Database className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||
|
|
<span className="truncate">
|
||
|
|
{config.leftPanel?.tableName
|
||
|
|
? allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.tableLabel ||
|
||
|
|
allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.displayName ||
|
||
|
|
config.leftPanel?.tableName
|
||
|
|
: "테이블을 선택하세요"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[300px] p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="테이블 검색..." className="text-xs" />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
|
||
|
|
테이블을 찾을 수 없습니다.
|
||
|
|
</CommandEmpty>
|
||
|
|
{screenTableName && (
|
||
|
|
<CommandGroup heading="기본 (화면 테이블)">
|
||
|
|
<CommandItem
|
||
|
|
value={screenTableName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateLeftPanel({ tableName: screenTableName, columns: [] });
|
||
|
|
setLeftTableOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-4 w-4",
|
||
|
|
config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
|
||
|
|
{allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
|
||
|
|
allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
|
||
|
|
screenTableName}
|
||
|
|
</CommandItem>
|
||
|
|
</CommandGroup>
|
||
|
|
)}
|
||
|
|
<CommandGroup heading="전체 테이블">
|
||
|
|
{allTables
|
||
|
|
.filter((t) => (t.tableName || t.table_name) !== screenTableName)
|
||
|
|
.map((table) => {
|
||
|
|
const tableName = table.tableName || table.table_name;
|
||
|
|
const displayName = table.tableLabel || table.displayName || tableName;
|
||
|
|
return (
|
||
|
|
<CommandItem
|
||
|
|
key={tableName}
|
||
|
|
value={tableName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateLeftPanel({ tableName, columns: [] });
|
||
|
|
setLeftTableOpen(false);
|
||
|
|
}}
|
||
|
|
className="text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-4 w-4",
|
||
|
|
config.leftPanel?.tableName === tableName ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<Database className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
|
||
|
|
<span className="truncate">{displayName}</span>
|
||
|
|
</CommandItem>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
{config.leftPanel?.tableName && config.leftPanel?.tableName !== screenTableName && (
|
||
|
|
<p className="text-[10px] text-muted-foreground">
|
||
|
|
화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시합니다.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label>패널 제목</Label>
|
||
|
|
<Input
|
||
|
|
value={localTitles.left}
|
||
|
|
onChange={(e) => {
|
||
|
|
setIsUserEditing(true);
|
||
|
|
setLocalTitles((prev) => ({ ...prev, left: e.target.value }));
|
||
|
|
}}
|
||
|
|
onBlur={() => {
|
||
|
|
setIsUserEditing(false);
|
||
|
|
updateLeftPanel({ title: localTitles.left });
|
||
|
|
}}
|
||
|
|
placeholder="좌측 패널 제목"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label>표시 모드</Label>
|
||
|
|
<Select
|
||
|
|
value={config.leftPanel?.displayMode || "list"}
|
||
|
|
onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-10 bg-white">
|
||
|
|
<SelectValue placeholder="표시 모드 선택">
|
||
|
|
{(config.leftPanel?.displayMode || "list") === "list" ? "목록 (LIST)" : (config.leftPanel?.displayMode || "list") === "table" ? "테이블 (TABLE)" : "커스텀 (CUSTOM)"}
|
||
|
|
</SelectValue>
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="list">
|
||
|
|
<div className="flex flex-col py-1">
|
||
|
|
<span className="text-sm font-medium">목록 (LIST)</span>
|
||
|
|
<span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="table">
|
||
|
|
<div className="flex flex-col py-1">
|
||
|
|
<span className="text-sm font-medium">테이블 (TABLE)</span>
|
||
|
|
<span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="custom">
|
||
|
|
<div className="flex flex-col py-1">
|
||
|
|
<span className="text-sm font-medium">커스텀 (CUSTOM)</span>
|
||
|
|
<span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
{config.leftPanel?.displayMode === "custom" && (
|
||
|
|
<p className="text-xs text-amber-600">
|
||
|
|
화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{config.leftPanel?.displayMode === "custom" && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-medium">배치된 컴포넌트</Label>
|
||
|
|
{!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
|
||
|
|
<div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
|
||
|
|
<Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
|
||
|
|
<p className="text-muted-foreground text-xs">
|
||
|
|
디자인 화면에서 컴포넌트를 드래그하여 추가하세요
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{config.leftPanel.components.map((comp: PanelInlineComponent) => (
|
||
|
|
<div
|
||
|
|
key={comp.id}
|
||
|
|
className="flex items-center justify-between rounded-md border bg-background p-2"
|
||
|
|
>
|
||
|
|
<div className="flex-1">
|
||
|
|
<p className="text-xs font-medium">{comp.label || comp.componentType}</p>
|
||
|
|
<p className="text-muted-foreground text-[10px]">
|
||
|
|
{comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
const updatedComponents = (config.leftPanel?.components || []).filter(
|
||
|
|
(c: PanelInlineComponent) => c.id !== comp.id
|
||
|
|
);
|
||
|
|
onChange({
|
||
|
|
...config,
|
||
|
|
leftPanel: {
|
||
|
|
...config.leftPanel,
|
||
|
|
components: updatedComponents,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
className="h-6 w-6 p-0 text-destructive hover:text-destructive"
|
||
|
|
>
|
||
|
|
<Trash2 className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{config.leftPanel?.displayMode !== "custom" && (() => {
|
||
|
|
const selectedColumns = config.leftPanel?.columns || [];
|
||
|
|
const filteredTableColumns = leftTableColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
|
||
|
|
const unselectedColumns = filteredTableColumns.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
|
||
|
|
|
||
|
|
const handleLeftDragEnd = (event: DragEndEvent) => {
|
||
|
|
const { active, over } = event;
|
||
|
|
if (over && active.id !== over.id) {
|
||
|
|
const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
|
||
|
|
const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
|
||
|
|
if (oldIndex !== -1 && newIndex !== -1) {
|
||
|
|
updateLeftPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
|
||
|
|
<div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
|
||
|
|
{leftTableColumns.length === 0 ? (
|
||
|
|
<p className="text-muted-foreground py-2 text-center text-xs">컬럼 로딩 중...</p>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{selectedColumns.length > 0 && (
|
||
|
|
<DndContext collisionDetection={closestCenter} onDragEnd={handleLeftDragEnd}>
|
||
|
|
<SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
|
||
|
|
<div className="space-y-1">
|
||
|
|
{selectedColumns.map((col, index) => {
|
||
|
|
const colInfo = leftTableColumns.find((c) => c.columnName === col.name);
|
||
|
|
const isNumeric = colInfo && (
|
||
|
|
dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
|
||
|
|
inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
|
||
|
|
inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<SortableColumnRow
|
||
|
|
key={col.name}
|
||
|
|
id={col.name}
|
||
|
|
col={col}
|
||
|
|
index={index}
|
||
|
|
isNumeric={!!isNumeric}
|
||
|
|
isEntityJoin={!!(col as any).isEntityJoin}
|
||
|
|
onLabelChange={(value) => {
|
||
|
|
const newColumns = [...selectedColumns];
|
||
|
|
newColumns[index] = { ...newColumns[index], label: value };
|
||
|
|
updateLeftPanel({ columns: newColumns });
|
||
|
|
}}
|
||
|
|
onWidthChange={(value) => {
|
||
|
|
const newColumns = [...selectedColumns];
|
||
|
|
newColumns[index] = { ...newColumns[index], width: value };
|
||
|
|
updateLeftPanel({ columns: newColumns });
|
||
|
|
}}
|
||
|
|
onFormatChange={(checked) => {
|
||
|
|
const newColumns = [...selectedColumns];
|
||
|
|
newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
|
||
|
|
updateLeftPanel({ columns: newColumns });
|
||
|
|
}}
|
||
|
|
onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</SortableContext>
|
||
|
|
</DndContext>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{selectedColumns.length > 0 && unselectedColumns.length > 0 && (
|
||
|
|
<div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
|
||
|
|
<span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-0.5">
|
||
|
|
{unselectedColumns.map((column) => (
|
||
|
|
<div
|
||
|
|
key={column.columnName}
|
||
|
|
className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
|
||
|
|
onClick={() => {
|
||
|
|
updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
|
||
|
|
<span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{(() => {
|
||
|
|
const leftTable = config.leftPanel?.tableName || screenTableName;
|
||
|
|
const joinData = leftTable ? entityJoinColumns[leftTable] : null;
|
||
|
|
if (!joinData || joinData.joinTables.length === 0) return null;
|
||
|
|
|
||
|
|
return joinData.joinTables.map((joinTable, tableIndex) => {
|
||
|
|
const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
|
||
|
|
const matchingJoinColumn = joinData.availableColumns.find(
|
||
|
|
(jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
|
||
|
|
);
|
||
|
|
if (!matchingJoinColumn) return false;
|
||
|
|
return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
|
||
|
|
});
|
||
|
|
const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
|
||
|
|
|
||
|
|
if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<details key={`join-${tableIndex}`} className="group">
|
||
|
|
<summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
|
||
|
|
<ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
|
||
|
|
<Link2 className="h-3 w-3 shrink-0 text-blue-500" />
|
||
|
|
<span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
|
||
|
|
{addedCount > 0 && (
|
||
|
|
<span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
|
||
|
|
)}
|
||
|
|
<span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
|
||
|
|
</summary>
|
||
|
|
<div className="space-y-0.5 pt-1">
|
||
|
|
{joinColumnsToShow.map((column, colIndex) => {
|
||
|
|
const matchingJoinColumn = joinData.availableColumns.find(
|
||
|
|
(jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
|
||
|
|
);
|
||
|
|
if (!matchingJoinColumn) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={colIndex}
|
||
|
|
className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
|
||
|
|
onClick={() => {
|
||
|
|
updateLeftPanel({
|
||
|
|
columns: [...selectedColumns, {
|
||
|
|
name: matchingJoinColumn.joinAlias,
|
||
|
|
label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
|
||
|
|
width: 100,
|
||
|
|
isEntityJoin: true,
|
||
|
|
joinInfo: {
|
||
|
|
sourceTable: leftTable!,
|
||
|
|
sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
|
||
|
|
referenceTable: matchingJoinColumn.tableName,
|
||
|
|
joinAlias: matchingJoinColumn.joinAlias,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
|
||
|
|
<Link2 className="h-3 w-3 shrink-0 text-blue-500" />
|
||
|
|
<span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{joinColumnsToShow.length === 0 && (
|
||
|
|
<p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
})()}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})()}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
|
||
|
|
<h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 데이터 필터링</h3>
|
||
|
|
<p className="text-muted-foreground text-xs">특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다</p>
|
||
|
|
<DataFilterConfigPanel
|
||
|
|
tableName={config.leftPanel?.tableName || screenTableName}
|
||
|
|
columns={leftTableColumns.map(
|
||
|
|
(col) =>
|
||
|
|
({
|
||
|
|
columnName: col.columnName,
|
||
|
|
columnLabel: col.columnLabel || col.columnName,
|
||
|
|
dataType: col.dataType || "text",
|
||
|
|
input_type: (col as any).input_type,
|
||
|
|
}) as any,
|
||
|
|
)}
|
||
|
|
config={config.leftPanel?.dataFilter}
|
||
|
|
onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
|
||
|
|
menuObjid={menuObjid}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
|
||
|
|
<h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 버튼 설정</h3>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-4 gap-2">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Checkbox
|
||
|
|
id="left-showSearch"
|
||
|
|
checked={config.leftPanel?.showSearch ?? false}
|
||
|
|
onCheckedChange={(checked) => updateLeftPanel({ showSearch: !!checked })}
|
||
|
|
/>
|
||
|
|
<label htmlFor="left-showSearch" className="text-xs">검색</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Checkbox
|
||
|
|
id="left-showAdd"
|
||
|
|
checked={config.leftPanel?.showAdd ?? false}
|
||
|
|
onCheckedChange={(checked) => updateLeftPanel({ showAdd: !!checked })}
|
||
|
|
/>
|
||
|
|
<label htmlFor="left-showAdd" className="text-xs">추가</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Checkbox
|
||
|
|
id="left-showEdit"
|
||
|
|
checked={config.leftPanel?.showEdit ?? true}
|
||
|
|
onCheckedChange={(checked) => updateLeftPanel({ showEdit: !!checked })}
|
||
|
|
/>
|
||
|
|
<label htmlFor="left-showEdit" className="text-xs">수정</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Checkbox
|
||
|
|
id="left-showDelete"
|
||
|
|
checked={config.leftPanel?.showDelete ?? true}
|
||
|
|
onCheckedChange={(checked) => updateLeftPanel({ showDelete: !!checked })}
|
||
|
|
/>
|
||
|
|
<label htmlFor="left-showDelete" className="text-xs">삭제</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{config.leftPanel?.showAdd && (
|
||
|
|
<div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
|
||
|
|
<h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">추가 모드</Label>
|
||
|
|
<Select
|
||
|
|
value={config.leftPanel?.addButton?.mode || "auto"}
|
||
|
|
onValueChange={(value: "auto" | "modal") =>
|
||
|
|
updateLeftPanel({
|
||
|
|
addButton: { ...config.leftPanel?.addButton, enabled: true, mode: value },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="auto">자동 (내장 폼)</SelectItem>
|
||
|
|
<SelectItem value="modal">모달 화면</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{config.leftPanel?.addButton?.mode === "modal" && (
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">추가 모달 화면</Label>
|
||
|
|
<ScreenSelector
|
||
|
|
value={config.leftPanel?.addButton?.modalScreenId}
|
||
|
|
onChange={(screenId) =>
|
||
|
|
updateLeftPanel({
|
||
|
|
addButton: { ...config.leftPanel?.addButton, enabled: true, mode: "modal", modalScreenId: screenId },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">버튼 라벨</Label>
|
||
|
|
<Input
|
||
|
|
value={config.leftPanel?.addButton?.buttonLabel || ""}
|
||
|
|
onChange={(e) =>
|
||
|
|
updateLeftPanel({
|
||
|
|
addButton: {
|
||
|
|
...config.leftPanel?.addButton,
|
||
|
|
enabled: true,
|
||
|
|
mode: config.leftPanel?.addButton?.mode || "auto",
|
||
|
|
buttonLabel: e.target.value || undefined,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
placeholder="추가"
|
||
|
|
className="h-7 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{(config.leftPanel?.showEdit ?? true) && (
|
||
|
|
<div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
|
||
|
|
<h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">수정 모드</Label>
|
||
|
|
<Select
|
||
|
|
value={config.leftPanel?.editButton?.mode || "auto"}
|
||
|
|
onValueChange={(value: "auto" | "modal") =>
|
||
|
|
updateLeftPanel({
|
||
|
|
editButton: { ...config.leftPanel?.editButton, enabled: true, mode: value },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="auto">자동 (인라인)</SelectItem>
|
||
|
|
<SelectItem value="modal">모달 화면</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{config.leftPanel?.editButton?.mode === "modal" && (
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">수정 모달 화면</Label>
|
||
|
|
<ScreenSelector
|
||
|
|
value={config.leftPanel?.editButton?.modalScreenId}
|
||
|
|
onChange={(screenId) =>
|
||
|
|
updateLeftPanel({
|
||
|
|
editButton: { ...config.leftPanel?.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px]">버튼 라벨</Label>
|
||
|
|
<Input
|
||
|
|
value={config.leftPanel?.editButton?.buttonLabel || ""}
|
||
|
|
onChange={(e) =>
|
||
|
|
updateLeftPanel({
|
||
|
|
editButton: {
|
||
|
|
...config.leftPanel?.editButton,
|
||
|
|
enabled: true,
|
||
|
|
mode: config.leftPanel?.editButton?.mode || "auto",
|
||
|
|
buttonLabel: e.target.value || undefined,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
placeholder="수정"
|
||
|
|
className="h-7 text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|