1209 lines
48 KiB
TypeScript
1209 lines
48 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* UnifiedRepeater 설정 패널
|
|
*
|
|
* 렌더링 모드별 설정:
|
|
* - inline: 현재 화면 테이블 컬럼 직접 입력
|
|
* - modal: 엔티티 선택 + 추가 입력 (FK 저장 + 추가 컬럼 입력)
|
|
* - button: 버튼 클릭으로 관련 화면/모달 열기
|
|
* - mixed: inline + modal 기능 결합
|
|
*/
|
|
|
|
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
Database,
|
|
Link2,
|
|
Plus,
|
|
Trash2,
|
|
GripVertical,
|
|
ArrowRight,
|
|
Calculator,
|
|
} from "lucide-react";
|
|
import { tableTypeApi, screenApi } from "@/lib/api/screen";
|
|
import { commonCodeApi } from "@/lib/api/commonCode";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
UnifiedRepeaterConfig,
|
|
RepeaterColumnConfig,
|
|
RepeaterButtonConfig,
|
|
DEFAULT_REPEATER_CONFIG,
|
|
RENDER_MODE_OPTIONS,
|
|
MODAL_SIZE_OPTIONS,
|
|
COLUMN_WIDTH_OPTIONS,
|
|
BUTTON_ACTION_OPTIONS,
|
|
BUTTON_VARIANT_OPTIONS,
|
|
BUTTON_LAYOUT_OPTIONS,
|
|
BUTTON_SOURCE_OPTIONS,
|
|
LABEL_FIELD_OPTIONS,
|
|
ButtonActionType,
|
|
ButtonVariant,
|
|
ColumnWidthOption,
|
|
} from "@/types/unified-repeater";
|
|
|
|
interface UnifiedRepeaterConfigPanelProps {
|
|
config: UnifiedRepeaterConfig;
|
|
onChange: (config: UnifiedRepeaterConfig) => void;
|
|
currentTableName?: string;
|
|
screenTableName?: string;
|
|
tableColumns?: any[];
|
|
}
|
|
|
|
interface ColumnOption {
|
|
columnName: string;
|
|
displayName: string;
|
|
inputType?: string;
|
|
detailSettings?: {
|
|
codeGroup?: string;
|
|
referenceTable?: string;
|
|
referenceColumn?: string;
|
|
displayColumn?: string;
|
|
format?: string;
|
|
};
|
|
}
|
|
|
|
interface EntityColumnOption {
|
|
columnName: string;
|
|
displayName: string;
|
|
referenceTable?: string;
|
|
referenceColumn?: string;
|
|
displayColumn?: string;
|
|
}
|
|
|
|
interface CalculationRule {
|
|
id: string;
|
|
targetColumn: string;
|
|
formula: string;
|
|
label?: string;
|
|
}
|
|
|
|
interface ScreenOption {
|
|
screenId: number;
|
|
screenName: string;
|
|
screenCode: string;
|
|
}
|
|
|
|
interface CategoryOption {
|
|
categoryCode: string;
|
|
categoryName: string;
|
|
}
|
|
|
|
export const UnifiedRepeaterConfigPanel: React.FC<UnifiedRepeaterConfigPanelProps> = ({
|
|
config: propConfig,
|
|
onChange,
|
|
currentTableName: propCurrentTableName,
|
|
screenTableName,
|
|
}) => {
|
|
const currentTableName = screenTableName || propCurrentTableName;
|
|
|
|
// config 안전하게 초기화
|
|
const config: UnifiedRepeaterConfig = useMemo(() => ({
|
|
...DEFAULT_REPEATER_CONFIG,
|
|
...propConfig,
|
|
renderMode: propConfig?.renderMode || DEFAULT_REPEATER_CONFIG.renderMode,
|
|
dataSource: {
|
|
...DEFAULT_REPEATER_CONFIG.dataSource,
|
|
...propConfig?.dataSource,
|
|
},
|
|
columns: propConfig?.columns || [],
|
|
modal: {
|
|
...DEFAULT_REPEATER_CONFIG.modal,
|
|
...propConfig?.modal,
|
|
},
|
|
button: {
|
|
...DEFAULT_REPEATER_CONFIG.button,
|
|
...propConfig?.button,
|
|
},
|
|
features: {
|
|
...DEFAULT_REPEATER_CONFIG.features,
|
|
...propConfig?.features,
|
|
},
|
|
}), [propConfig]);
|
|
|
|
// 상태 관리
|
|
const [currentTableColumns, setCurrentTableColumns] = useState<ColumnOption[]>([]); // 현재 테이블 컬럼
|
|
const [entityColumns, setEntityColumns] = useState<EntityColumnOption[]>([]); // 엔티티 타입 컬럼
|
|
const [sourceTableColumns, setSourceTableColumns] = useState<ColumnOption[]>([]); // 소스(엔티티) 테이블 컬럼
|
|
const [screens, setScreens] = useState<ScreenOption[]>([]);
|
|
const [categories, setCategories] = useState<CategoryOption[]>([]);
|
|
const [calculationRules, setCalculationRules] = useState<CalculationRule[]>([]);
|
|
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
const [loadingSourceColumns, setLoadingSourceColumns] = useState(false);
|
|
const [loadingScreens, setLoadingScreens] = useState(false);
|
|
const [loadingCategories, setLoadingCategories] = useState(false);
|
|
|
|
// 설정 업데이트 헬퍼
|
|
const updateConfig = useCallback(
|
|
(updates: Partial<UnifiedRepeaterConfig>) => {
|
|
onChange({ ...config, ...updates });
|
|
},
|
|
[config, onChange],
|
|
);
|
|
|
|
const updateDataSource = useCallback(
|
|
(field: string, value: any) => {
|
|
updateConfig({
|
|
dataSource: { ...config.dataSource, [field]: value },
|
|
});
|
|
},
|
|
[config.dataSource, updateConfig],
|
|
);
|
|
|
|
const updateModal = useCallback(
|
|
(field: string, value: any) => {
|
|
updateConfig({
|
|
modal: { ...config.modal, [field]: value },
|
|
});
|
|
},
|
|
[config.modal, updateConfig],
|
|
);
|
|
|
|
const updateButton = useCallback(
|
|
(field: string, value: any) => {
|
|
updateConfig({
|
|
button: { ...config.button, [field]: value },
|
|
});
|
|
},
|
|
[config.button, updateConfig],
|
|
);
|
|
|
|
const updateFeatures = useCallback(
|
|
(field: string, value: boolean) => {
|
|
updateConfig({
|
|
features: { ...config.features, [field]: value },
|
|
});
|
|
},
|
|
[config.features, updateConfig],
|
|
);
|
|
|
|
// 현재 화면 테이블 컬럼 로드 + 엔티티 컬럼 감지
|
|
useEffect(() => {
|
|
const loadCurrentTableColumns = async () => {
|
|
if (!currentTableName) {
|
|
setCurrentTableColumns([]);
|
|
setEntityColumns([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingColumns(true);
|
|
try {
|
|
const columnData = await tableTypeApi.getColumns(currentTableName);
|
|
const cols: ColumnOption[] = [];
|
|
const entityCols: EntityColumnOption[] = [];
|
|
|
|
for (const c of columnData) {
|
|
// detailSettings 파싱
|
|
let detailSettings: any = null;
|
|
if (c.detailSettings) {
|
|
try {
|
|
detailSettings = typeof c.detailSettings === "string"
|
|
? JSON.parse(c.detailSettings)
|
|
: c.detailSettings;
|
|
} catch (e) {
|
|
console.warn("detailSettings 파싱 실패:", c.detailSettings);
|
|
}
|
|
}
|
|
|
|
const col: ColumnOption = {
|
|
columnName: c.columnName || c.column_name,
|
|
displayName: c.displayName || c.columnLabel || c.columnName || c.column_name,
|
|
inputType: c.inputType || c.input_type,
|
|
detailSettings: detailSettings ? {
|
|
codeGroup: detailSettings.codeGroup,
|
|
referenceTable: detailSettings.referenceTable,
|
|
referenceColumn: detailSettings.referenceColumn,
|
|
displayColumn: detailSettings.displayColumn,
|
|
format: detailSettings.format,
|
|
} : undefined,
|
|
};
|
|
cols.push(col);
|
|
|
|
// 엔티티 타입 컬럼 감지
|
|
if (col.inputType === "entity") {
|
|
const referenceTable = detailSettings?.referenceTable || c.referenceTable;
|
|
const referenceColumn = detailSettings?.referenceColumn || c.referenceColumn || "id";
|
|
const displayColumn = detailSettings?.displayColumn || c.displayColumn;
|
|
|
|
if (referenceTable) {
|
|
entityCols.push({
|
|
columnName: col.columnName,
|
|
displayName: col.displayName,
|
|
referenceTable,
|
|
referenceColumn,
|
|
displayColumn,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
setCurrentTableColumns(cols);
|
|
setEntityColumns(entityCols);
|
|
} catch (error) {
|
|
console.error("현재 테이블 컬럼 로드 실패:", error);
|
|
setCurrentTableColumns([]);
|
|
setEntityColumns([]);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
loadCurrentTableColumns();
|
|
}, [currentTableName]);
|
|
|
|
// 소스(엔티티) 테이블 컬럼 로드 (모달 모드일 때)
|
|
useEffect(() => {
|
|
const loadSourceTableColumns = async () => {
|
|
const sourceTable = config.dataSource?.sourceTable;
|
|
if (!sourceTable) {
|
|
setSourceTableColumns([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingSourceColumns(true);
|
|
try {
|
|
const columnData = await tableTypeApi.getColumns(sourceTable);
|
|
const cols: ColumnOption[] = columnData.map((c: any) => ({
|
|
columnName: c.columnName || c.column_name,
|
|
displayName: c.displayName || c.columnLabel || c.columnName || c.column_name,
|
|
inputType: c.inputType || c.input_type,
|
|
}));
|
|
setSourceTableColumns(cols);
|
|
} catch (error) {
|
|
console.error("소스 테이블 컬럼 로드 실패:", error);
|
|
setSourceTableColumns([]);
|
|
} finally {
|
|
setLoadingSourceColumns(false);
|
|
}
|
|
};
|
|
|
|
if (config.renderMode === "modal" || config.renderMode === "mixed") {
|
|
loadSourceTableColumns();
|
|
}
|
|
}, [config.dataSource?.sourceTable, config.renderMode]);
|
|
|
|
// 화면 목록 로드
|
|
useEffect(() => {
|
|
const needScreens = config.renderMode === "button" || config.renderMode === "mixed";
|
|
if (!needScreens) return;
|
|
|
|
const loadScreens = async () => {
|
|
setLoadingScreens(true);
|
|
try {
|
|
const response = await screenApi.getScreens({ size: 1000 });
|
|
setScreens(
|
|
response.data.map((s) => ({
|
|
screenId: s.screenId!,
|
|
screenName: s.screenName,
|
|
screenCode: s.screenCode,
|
|
})),
|
|
);
|
|
} catch (error) {
|
|
console.error("화면 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoadingScreens(false);
|
|
}
|
|
};
|
|
loadScreens();
|
|
}, [config.renderMode]);
|
|
|
|
// 공통코드 카테고리 로드
|
|
useEffect(() => {
|
|
const needCategories =
|
|
(config.renderMode === "button" || config.renderMode === "mixed") &&
|
|
config.button?.sourceType === "commonCode";
|
|
if (!needCategories) return;
|
|
|
|
const loadCategories = async () => {
|
|
setLoadingCategories(true);
|
|
try {
|
|
const response = await commonCodeApi.categories.getList();
|
|
if (response.success && response.data) {
|
|
setCategories(
|
|
response.data.map((c) => ({
|
|
categoryCode: c.categoryCode,
|
|
categoryName: c.categoryName,
|
|
})),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("공통코드 카테고리 로드 실패:", error);
|
|
} finally {
|
|
setLoadingCategories(false);
|
|
}
|
|
};
|
|
loadCategories();
|
|
}, [config.renderMode, config.button?.sourceType]);
|
|
|
|
// 컬럼 토글 (현재 테이블 컬럼 - 입력용)
|
|
const toggleInputColumn = (column: ColumnOption) => {
|
|
const existingIndex = config.columns.findIndex((c) => c.key === column.columnName);
|
|
if (existingIndex >= 0) {
|
|
const newColumns = config.columns.filter((c) => c.key !== column.columnName);
|
|
updateConfig({ columns: newColumns });
|
|
} else {
|
|
// 컬럼의 inputType과 detailSettings 정보 포함
|
|
const newColumn: RepeaterColumnConfig = {
|
|
key: column.columnName,
|
|
title: column.displayName,
|
|
width: "auto",
|
|
visible: true,
|
|
editable: true,
|
|
inputType: column.inputType || "text",
|
|
detailSettings: column.detailSettings ? {
|
|
codeGroup: column.detailSettings.codeGroup,
|
|
referenceTable: column.detailSettings.referenceTable,
|
|
referenceColumn: column.detailSettings.referenceColumn,
|
|
displayColumn: column.detailSettings.displayColumn,
|
|
format: column.detailSettings.format,
|
|
} : undefined,
|
|
};
|
|
updateConfig({ columns: [...config.columns, newColumn] });
|
|
}
|
|
};
|
|
|
|
// 소스 컬럼 토글 (모달에 표시용 - 라벨 포함)
|
|
const toggleSourceDisplayColumn = (column: ColumnOption) => {
|
|
const sourceDisplayColumns = config.modal?.sourceDisplayColumns || [];
|
|
const exists = sourceDisplayColumns.some(c => c.key === column.columnName);
|
|
|
|
if (exists) {
|
|
updateModal("sourceDisplayColumns", sourceDisplayColumns.filter(c => c.key !== column.columnName));
|
|
} else {
|
|
updateModal("sourceDisplayColumns", [
|
|
...sourceDisplayColumns,
|
|
{ key: column.columnName, label: column.displayName }
|
|
]);
|
|
}
|
|
};
|
|
|
|
const isColumnAdded = (columnName: string) => {
|
|
return config.columns.some((c) => c.key === columnName);
|
|
};
|
|
|
|
const isSourceColumnSelected = (columnName: string) => {
|
|
return (config.modal?.sourceDisplayColumns || []).some(c => c.key === columnName);
|
|
};
|
|
|
|
// 컬럼 속성 업데이트
|
|
const updateColumnProp = (key: string, field: keyof RepeaterColumnConfig, value: any) => {
|
|
const newColumns = config.columns.map((col) => (col.key === key ? { ...col, [field]: value } : col));
|
|
updateConfig({ columns: newColumns });
|
|
};
|
|
|
|
// 계산 규칙 추가
|
|
const addCalculationRule = () => {
|
|
setCalculationRules(prev => [
|
|
...prev,
|
|
{ id: `calc_${Date.now()}`, targetColumn: "", formula: "" }
|
|
]);
|
|
};
|
|
|
|
// 계산 규칙 삭제
|
|
const removeCalculationRule = (id: string) => {
|
|
setCalculationRules(prev => prev.filter(r => r.id !== id));
|
|
};
|
|
|
|
// 계산 규칙 업데이트
|
|
const updateCalculationRule = (id: string, field: keyof CalculationRule, value: string) => {
|
|
setCalculationRules(prev =>
|
|
prev.map(r => r.id === id ? { ...r, [field]: value } : r)
|
|
);
|
|
};
|
|
|
|
// 엔티티 컬럼 선택 시 소스 테이블 자동 설정
|
|
const handleEntityColumnSelect = (columnName: string) => {
|
|
const selectedEntity = entityColumns.find(c => c.columnName === columnName);
|
|
|
|
if (selectedEntity) {
|
|
console.log("엔티티 컬럼 선택:", selectedEntity);
|
|
|
|
// 소스 테이블 컬럼에서 라벨 정보 찾기
|
|
const displayColInfo = sourceTableColumns.find(c => c.columnName === selectedEntity.displayColumn);
|
|
const displayLabel = displayColInfo?.displayName || selectedEntity.displayColumn || "";
|
|
|
|
updateConfig({
|
|
dataSource: {
|
|
...config.dataSource,
|
|
sourceTable: selectedEntity.referenceTable || "",
|
|
foreignKey: selectedEntity.columnName,
|
|
referenceKey: selectedEntity.referenceColumn || "id",
|
|
displayColumn: selectedEntity.displayColumn,
|
|
},
|
|
modal: {
|
|
...config.modal,
|
|
searchFields: selectedEntity.displayColumn ? [selectedEntity.displayColumn] : [],
|
|
// 라벨 포함 형식으로 저장
|
|
sourceDisplayColumns: selectedEntity.displayColumn
|
|
? [{ key: selectedEntity.displayColumn, label: displayLabel }]
|
|
: [],
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
// 수동 버튼 관리
|
|
const addManualButton = () => {
|
|
const newButton: RepeaterButtonConfig = {
|
|
id: `btn_${Date.now()}`,
|
|
label: "새 버튼",
|
|
action: "create",
|
|
variant: "outline",
|
|
};
|
|
const currentButtons = config.button?.manualButtons || [];
|
|
updateButton("manualButtons", [...currentButtons, newButton]);
|
|
};
|
|
|
|
const removeManualButton = (id: string) => {
|
|
const currentButtons = config.button?.manualButtons || [];
|
|
updateButton("manualButtons", currentButtons.filter((b) => b.id !== id));
|
|
};
|
|
|
|
const updateManualButton = (id: string, field: keyof RepeaterButtonConfig, value: any) => {
|
|
const currentButtons = config.button?.manualButtons || [];
|
|
const updated = currentButtons.map((b) => (b.id === id ? { ...b, [field]: value } : b));
|
|
updateButton("manualButtons", updated);
|
|
};
|
|
|
|
// 모드 여부
|
|
const isInlineMode = config.renderMode === "inline";
|
|
const isModalMode = config.renderMode === "modal" || config.renderMode === "mixed";
|
|
const isButtonMode = config.renderMode === "button" || config.renderMode === "mixed";
|
|
|
|
// 엔티티 컬럼 제외한 입력 가능 컬럼 (FK 컬럼 제외)
|
|
const inputableColumns = useMemo(() => {
|
|
const fkColumn = config.dataSource?.foreignKey;
|
|
return currentTableColumns.filter(col =>
|
|
col.columnName !== fkColumn && // FK 컬럼 제외
|
|
col.inputType !== "entity" // 다른 엔티티 컬럼도 제외 (필요시)
|
|
);
|
|
}, [currentTableColumns, config.dataSource?.foreignKey]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Tabs defaultValue="basic" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
|
|
<TabsTrigger value="columns" className="text-xs">컬럼</TabsTrigger>
|
|
<TabsTrigger value="modal" className="text-xs" disabled={!isModalMode}>모달</TabsTrigger>
|
|
<TabsTrigger value="button" className="text-xs" disabled={!isButtonMode}>버튼</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 기본 설정 탭 */}
|
|
<TabsContent value="basic" className="mt-4 space-y-4">
|
|
{/* 렌더링 모드 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">렌더링 모드</Label>
|
|
<Select value={config.renderMode} onValueChange={(value) => updateConfig({ renderMode: value as any })}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="모드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{RENDER_MODE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
<div className="flex flex-col">
|
|
<span>{opt.label}</span>
|
|
<span className="text-[10px] text-gray-400">
|
|
{opt.value === "inline" && "현재 테이블 컬럼 직접 입력"}
|
|
{opt.value === "modal" && "엔티티 선택 후 추가 정보 입력"}
|
|
{opt.value === "button" && "버튼으로 관련 화면 열기"}
|
|
{opt.value === "mixed" && "직접 입력 + 엔티티 검색"}
|
|
</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 현재 화면 정보 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">현재 화면</Label>
|
|
{currentTableName ? (
|
|
<div className="rounded border border-blue-200 bg-blue-50 p-2">
|
|
<p className="text-xs text-blue-700 font-medium">{currentTableName}</p>
|
|
<p className="text-[10px] text-blue-500">
|
|
컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="rounded border border-amber-200 bg-amber-50 p-2">
|
|
<p className="text-[10px] text-amber-600">화면에 테이블을 먼저 설정해주세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 모달 모드: 엔티티 컬럼 선택 */}
|
|
{isModalMode && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">엔티티 선택</Label>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
모달에서 검색할 엔티티를 선택하세요 (FK만 저장됨)
|
|
</p>
|
|
|
|
{entityColumns.length > 0 ? (
|
|
<Select
|
|
value={config.dataSource?.foreignKey || ""}
|
|
onValueChange={handleEntityColumnSelect}
|
|
disabled={!currentTableName}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="엔티티 컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{entityColumns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
<div className="flex items-center gap-2">
|
|
<Link2 className="h-3 w-3 text-blue-500" />
|
|
<span>{col.displayName}</span>
|
|
<ArrowRight className="h-3 w-3 text-gray-400" />
|
|
<span className="text-gray-500">{col.referenceTable}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<div className="rounded border border-gray-200 bg-gray-50 p-2">
|
|
<p className="text-[10px] text-gray-500">
|
|
{loadingColumns ? "로딩 중..." : "엔티티 타입 컬럼이 없습니다"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 선택된 엔티티 정보 */}
|
|
{config.dataSource?.sourceTable && (
|
|
<div className="rounded border border-green-200 bg-green-50 p-2 space-y-1">
|
|
<p className="text-xs text-green-700 font-medium">선택된 엔티티</p>
|
|
<div className="text-[10px] text-green-600">
|
|
<p>검색 테이블: {config.dataSource.sourceTable}</p>
|
|
<p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* 기능 옵션 */}
|
|
<div className="space-y-3">
|
|
<Label className="text-xs font-medium">기능 옵션</Label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showAddButton"
|
|
checked={config.features?.showAddButton ?? true}
|
|
onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)}
|
|
/>
|
|
<label htmlFor="showAddButton" className="text-xs">추가 버튼</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showDeleteButton"
|
|
checked={config.features?.showDeleteButton ?? true}
|
|
onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)}
|
|
/>
|
|
<label htmlFor="showDeleteButton" className="text-xs">삭제 버튼</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="inlineEdit"
|
|
checked={config.features?.inlineEdit ?? false}
|
|
onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)}
|
|
/>
|
|
<label htmlFor="inlineEdit" className="text-xs">인라인 편집</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="multiSelect"
|
|
checked={config.features?.multiSelect ?? true}
|
|
onCheckedChange={(checked) => updateFeatures("multiSelect", !!checked)}
|
|
/>
|
|
<label htmlFor="multiSelect" className="text-xs">다중 선택</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="showRowNumber"
|
|
checked={config.features?.showRowNumber ?? false}
|
|
onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)}
|
|
/>
|
|
<label htmlFor="showRowNumber" className="text-xs">행 번호</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="selectable"
|
|
checked={config.features?.selectable ?? false}
|
|
onCheckedChange={(checked) => updateFeatures("selectable", !!checked)}
|
|
/>
|
|
<label htmlFor="selectable" className="text-xs">행 선택</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 컬럼 설정 탭 */}
|
|
<TabsContent value="columns" className="mt-4 space-y-4">
|
|
{/* 모달 모드: 모달에 표시할 컬럼 */}
|
|
{isModalMode && config.dataSource?.sourceTable && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">모달 표시 컬럼</Label>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
검색 모달에서 보여줄 컬럼 (보기용)
|
|
</p>
|
|
|
|
{loadingSourceColumns ? (
|
|
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
|
|
) : sourceTableColumns.length === 0 ? (
|
|
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
|
|
) : (
|
|
<div className="max-h-32 space-y-1 overflow-y-auto rounded-md border p-2">
|
|
{sourceTableColumns.map((column) => (
|
|
<div
|
|
key={column.columnName}
|
|
className={cn(
|
|
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
|
|
isSourceColumnSelected(column.columnName) && "bg-blue-50",
|
|
)}
|
|
onClick={() => toggleSourceDisplayColumn(column)}
|
|
>
|
|
<Checkbox
|
|
checked={isSourceColumnSelected(column.columnName)}
|
|
onCheckedChange={() => toggleSourceDisplayColumn(column)}
|
|
className="pointer-events-none h-3.5 w-3.5"
|
|
/>
|
|
<span className="truncate text-xs">{column.displayName}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{/* 추가 입력 컬럼 (현재 테이블에서 FK 제외) */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">
|
|
{isModalMode ? "추가 입력 컬럼" : "입력 컬럼"}
|
|
</Label>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
{isModalMode
|
|
? "엔티티 선택 후 추가로 입력받을 컬럼 (수량, 단가 등)"
|
|
: "직접 입력받을 컬럼을 선택하세요"
|
|
}
|
|
</p>
|
|
|
|
{loadingColumns ? (
|
|
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
|
|
) : inputableColumns.length === 0 ? (
|
|
<p className="text-muted-foreground py-2 text-xs">
|
|
{isModalMode ? "추가 입력 가능한 컬럼이 없습니다" : "컬럼 정보가 없습니다"}
|
|
</p>
|
|
) : (
|
|
<div className="max-h-48 space-y-1 overflow-y-auto rounded-md border p-2">
|
|
{inputableColumns.map((column) => (
|
|
<div
|
|
key={column.columnName}
|
|
className={cn(
|
|
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
|
|
isColumnAdded(column.columnName) && "bg-primary/10",
|
|
)}
|
|
onClick={() => toggleInputColumn(column)}
|
|
>
|
|
<Checkbox
|
|
checked={isColumnAdded(column.columnName)}
|
|
onCheckedChange={() => toggleInputColumn(column)}
|
|
className="pointer-events-none h-3.5 w-3.5"
|
|
/>
|
|
<Database className="text-muted-foreground h-3 w-3" />
|
|
<span className="truncate text-xs">{column.displayName}</span>
|
|
<span className="text-[10px] text-gray-400 ml-auto">{column.inputType}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 선택된 컬럼 상세 설정 */}
|
|
{config.columns.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">선택된 컬럼 ({config.columns.length}개)</Label>
|
|
<div className="max-h-40 space-y-1 overflow-y-auto">
|
|
{config.columns.map((col) => (
|
|
<div key={col.key} className="bg-muted/30 flex items-center gap-2 rounded-md border p-2">
|
|
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
|
|
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
|
|
<Input
|
|
value={col.title}
|
|
onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
|
|
placeholder="제목"
|
|
className="h-6 flex-1 text-xs"
|
|
/>
|
|
<Select
|
|
value={col.width || "auto"}
|
|
onValueChange={(value) => updateColumnProp(col.key, "width", value as ColumnWidthOption)}
|
|
>
|
|
<SelectTrigger className="h-6 w-20 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{COLUMN_WIDTH_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Checkbox
|
|
checked={col.editable ?? true}
|
|
onCheckedChange={(checked) => updateColumnProp(col.key, "editable", !!checked)}
|
|
title="편집 가능"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => toggleInputColumn({ columnName: col.key, displayName: col.title })}
|
|
className="text-destructive h-6 w-6 p-0"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 계산 규칙 */}
|
|
{(isModalMode || isInlineMode) && config.columns.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">계산 규칙</Label>
|
|
<Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-6 text-xs">
|
|
<Calculator className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
예: 금액 = 수량 * 단가
|
|
</p>
|
|
|
|
<div className="max-h-32 space-y-2 overflow-y-auto">
|
|
{calculationRules.map((rule) => (
|
|
<div key={rule.id} className="flex items-center gap-2 rounded border p-2">
|
|
<Select
|
|
value={rule.targetColumn}
|
|
onValueChange={(value) => updateCalculationRule(rule.id, "targetColumn", value)}
|
|
>
|
|
<SelectTrigger className="h-7 w-24 text-xs">
|
|
<SelectValue placeholder="결과" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{config.columns.map((col) => (
|
|
<SelectItem key={col.key} value={col.key}>
|
|
{col.title}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<span className="text-xs">=</span>
|
|
|
|
<Input
|
|
value={rule.formula}
|
|
onChange={(e) => updateCalculationRule(rule.id, "formula", e.target.value)}
|
|
placeholder="quantity * unit_price"
|
|
className="h-7 flex-1 text-xs"
|
|
/>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeCalculationRule(rule.id)}
|
|
className="h-7 w-7 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
{calculationRules.length === 0 && (
|
|
<p className="text-muted-foreground py-2 text-center text-xs">
|
|
계산 규칙이 없습니다
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* 모달 설정 탭 */}
|
|
<TabsContent value="modal" className="mt-4 space-y-4">
|
|
{isModalMode ? (
|
|
<>
|
|
{/* 모달 크기 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">모달 크기</Label>
|
|
<Select
|
|
value={config.modal?.size || "lg"}
|
|
onValueChange={(value) => updateModal("size", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{MODAL_SIZE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 모달 제목 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">모달 제목</Label>
|
|
<Input
|
|
value={config.modal?.title || ""}
|
|
onChange={(e) => updateModal("title", e.target.value)}
|
|
placeholder="예: 품목 검색"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 버튼 텍스트 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">추가 버튼 텍스트</Label>
|
|
<Input
|
|
value={config.modal?.buttonText || ""}
|
|
onChange={(e) => updateModal("buttonText", e.target.value)}
|
|
placeholder="예: 품목 검색"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 검색 필드 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">검색 필드</Label>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
검색어 입력 시 검색할 필드
|
|
</p>
|
|
|
|
<div className="max-h-24 space-y-1 overflow-y-auto rounded-md border p-2">
|
|
{sourceTableColumns.map((column) => {
|
|
const searchFields = config.modal?.searchFields || [];
|
|
const isChecked = searchFields.includes(column.columnName);
|
|
|
|
return (
|
|
<div
|
|
key={column.columnName}
|
|
className={cn(
|
|
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
|
|
isChecked && "bg-blue-50",
|
|
)}
|
|
onClick={() => {
|
|
if (isChecked) {
|
|
updateModal("searchFields", searchFields.filter(f => f !== column.columnName));
|
|
} else {
|
|
updateModal("searchFields", [...searchFields, column.columnName]);
|
|
}
|
|
}}
|
|
>
|
|
<Checkbox checked={isChecked} className="pointer-events-none h-3.5 w-3.5" />
|
|
<span className="truncate text-xs">{column.displayName}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-muted-foreground py-4 text-center text-xs">
|
|
모달 또는 혼합 모드에서만 설정할 수 있습니다
|
|
</p>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* 버튼 설정 탭 */}
|
|
<TabsContent value="button" className="mt-4 space-y-4">
|
|
{isButtonMode ? (
|
|
<>
|
|
{/* 버튼 소스 선택 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">버튼 소스</Label>
|
|
<RadioGroup
|
|
value={config.button?.sourceType || "manual"}
|
|
onValueChange={(value) => updateButton("sourceType", value)}
|
|
className="flex gap-4"
|
|
>
|
|
{BUTTON_SOURCE_OPTIONS.map((opt) => (
|
|
<div key={opt.value} className="flex items-center space-x-2">
|
|
<RadioGroupItem value={opt.value} id={opt.value} />
|
|
<label htmlFor={opt.value} className="text-xs">{opt.label}</label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 공통코드 모드 */}
|
|
{config.button?.sourceType === "commonCode" && (
|
|
<div className="space-y-3">
|
|
<Label className="text-xs font-medium">공통코드 설정</Label>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground text-[10px]">코드 카테고리</Label>
|
|
<Select
|
|
value={config.button?.commonCode?.categoryCode || ""}
|
|
onValueChange={(value) =>
|
|
updateButton("commonCode", {
|
|
...config.button?.commonCode,
|
|
categoryCode: value,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder={loadingCategories ? "로딩 중..." : "카테고리 선택"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{categories.map((cat) => (
|
|
<SelectItem key={cat.categoryCode} value={cat.categoryCode}>
|
|
{cat.categoryName} ({cat.categoryCode})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground text-[10px]">버튼 라벨 표시</Label>
|
|
<Select
|
|
value={config.button?.commonCode?.labelField || "codeName"}
|
|
onValueChange={(value) =>
|
|
updateButton("commonCode", {
|
|
...config.button?.commonCode,
|
|
labelField: value,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LABEL_FIELD_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground text-[10px]">값 저장 컬럼</Label>
|
|
<Select
|
|
value={config.button?.commonCode?.valueField || ""}
|
|
onValueChange={(value) =>
|
|
updateButton("commonCode", {
|
|
...config.button?.commonCode,
|
|
valueField: value,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{currentTableColumns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.displayName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 수동 설정 모드 */}
|
|
{config.button?.sourceType === "manual" && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">버튼 목록</Label>
|
|
<Button type="button" variant="outline" size="sm" onClick={addManualButton} className="h-7 text-xs">
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="max-h-48 space-y-2 overflow-y-auto">
|
|
{(config.button?.manualButtons || []).map((btn) => (
|
|
<div key={btn.id} className="space-y-2 rounded-md border p-2">
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={btn.label}
|
|
onChange={(e) => updateManualButton(btn.id, "label", e.target.value)}
|
|
placeholder="버튼 라벨"
|
|
className="h-7 flex-1 text-xs"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeManualButton(btn.id)}
|
|
className="text-destructive h-7 w-7 p-0"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Select
|
|
value={btn.action}
|
|
onValueChange={(value) => updateManualButton(btn.id, "action", value as ButtonActionType)}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="액션" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BUTTON_ACTION_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select
|
|
value={btn.variant}
|
|
onValueChange={(value) => updateManualButton(btn.id, "variant", value as ButtonVariant)}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="스타일" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BUTTON_VARIANT_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{btn.action === "navigate" && (
|
|
<Select
|
|
value={String(btn.navigateScreen || "")}
|
|
onValueChange={(value) =>
|
|
updateManualButton(btn.id, "navigateScreen", value ? Number(value) : undefined)
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="이동할 화면 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{screens.map((s) => (
|
|
<SelectItem key={s.screenId} value={String(s.screenId)}>
|
|
{s.screenName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{(config.button?.manualButtons || []).length === 0 && (
|
|
<p className="text-muted-foreground py-4 text-center text-xs">버튼을 추가해주세요</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* 버튼 레이아웃 */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground text-[10px]">레이아웃</Label>
|
|
<Select
|
|
value={config.button?.layout || "horizontal"}
|
|
onValueChange={(value) => updateButton("layout", value)}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BUTTON_LAYOUT_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground text-[10px]">기본 스타일</Label>
|
|
<Select
|
|
value={config.button?.style || "outline"}
|
|
onValueChange={(value) => updateButton("style", value)}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BUTTON_VARIANT_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-muted-foreground py-4 text-center text-xs">
|
|
버튼 또는 혼합 모드에서만 설정할 수 있습니다
|
|
</p>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
UnifiedRepeaterConfigPanel.displayName = "UnifiedRepeaterConfigPanel";
|
|
|
|
export default UnifiedRepeaterConfigPanel;
|