549 lines
21 KiB
TypeScript
549 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Database, Search, Plus, Trash2 } from "lucide-react";
|
|
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
|
|
import { WidgetComponent, EntityTypeConfig } from "@/types/screen";
|
|
|
|
interface EntityField {
|
|
name: string;
|
|
label: string;
|
|
type: string;
|
|
visible: boolean;
|
|
}
|
|
|
|
export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
|
|
component,
|
|
onUpdateComponent,
|
|
onUpdateProperty,
|
|
}) => {
|
|
const widget = component as WidgetComponent;
|
|
const config = (widget.webTypeConfig as EntityTypeConfig) || {};
|
|
|
|
// 로컬 상태
|
|
const [localConfig, setLocalConfig] = useState<EntityTypeConfig>({
|
|
entityType: config.entityType || "",
|
|
displayFields: config.displayFields || [],
|
|
searchFields: config.searchFields || [],
|
|
valueField: config.valueField || "id",
|
|
labelField: config.labelField || "name",
|
|
multiple: config.multiple || false,
|
|
searchable: config.searchable !== false, // 기본값 true
|
|
placeholder: config.placeholder || "엔티티를 선택하세요",
|
|
emptyMessage: config.emptyMessage || "검색 결과가 없습니다",
|
|
pageSize: config.pageSize || 20,
|
|
minSearchLength: config.minSearchLength || 1,
|
|
defaultValue: config.defaultValue || "",
|
|
required: config.required || false,
|
|
readonly: config.readonly || false,
|
|
apiEndpoint: config.apiEndpoint || "",
|
|
filters: config.filters || {},
|
|
});
|
|
|
|
// 새 필드 추가용 상태
|
|
const [newFieldName, setNewFieldName] = useState("");
|
|
const [newFieldLabel, setNewFieldLabel] = useState("");
|
|
const [newFieldType, setNewFieldType] = useState("string");
|
|
|
|
// 컴포넌트 변경 시 로컬 상태 동기화
|
|
useEffect(() => {
|
|
const currentConfig = (widget.webTypeConfig as EntityTypeConfig) || {};
|
|
setLocalConfig({
|
|
entityType: currentConfig.entityType || "",
|
|
displayFields: currentConfig.displayFields || [],
|
|
searchFields: currentConfig.searchFields || [],
|
|
valueField: currentConfig.valueField || "id",
|
|
labelField: currentConfig.labelField || "name",
|
|
multiple: currentConfig.multiple || false,
|
|
searchable: currentConfig.searchable !== false,
|
|
placeholder: currentConfig.placeholder || "엔티티를 선택하세요",
|
|
emptyMessage: currentConfig.emptyMessage || "검색 결과가 없습니다",
|
|
pageSize: currentConfig.pageSize || 20,
|
|
minSearchLength: currentConfig.minSearchLength || 1,
|
|
defaultValue: currentConfig.defaultValue || "",
|
|
required: currentConfig.required || false,
|
|
readonly: currentConfig.readonly || false,
|
|
apiEndpoint: currentConfig.apiEndpoint || "",
|
|
filters: currentConfig.filters || {},
|
|
});
|
|
}, [widget.webTypeConfig]);
|
|
|
|
// 설정 업데이트 핸들러
|
|
const updateConfig = (field: keyof EntityTypeConfig, value: any) => {
|
|
const newConfig = { ...localConfig, [field]: value };
|
|
setLocalConfig(newConfig);
|
|
onUpdateProperty("webTypeConfig", newConfig);
|
|
};
|
|
|
|
// 필드 추가
|
|
const addDisplayField = () => {
|
|
if (!newFieldName.trim() || !newFieldLabel.trim()) return;
|
|
|
|
const newField: EntityField = {
|
|
name: newFieldName.trim(),
|
|
label: newFieldLabel.trim(),
|
|
type: newFieldType,
|
|
visible: true,
|
|
};
|
|
|
|
const newFields = [...localConfig.displayFields, newField];
|
|
updateConfig("displayFields", newFields);
|
|
setNewFieldName("");
|
|
setNewFieldLabel("");
|
|
setNewFieldType("string");
|
|
};
|
|
|
|
// 필드 제거
|
|
const removeDisplayField = (index: number) => {
|
|
const newFields = localConfig.displayFields.filter((_, i) => i !== index);
|
|
updateConfig("displayFields", newFields);
|
|
};
|
|
|
|
// 필드 업데이트
|
|
const updateDisplayField = (index: number, field: keyof EntityField, value: any) => {
|
|
const newFields = [...localConfig.displayFields];
|
|
newFields[index] = { ...newFields[index], [field]: value };
|
|
updateConfig("displayFields", newFields);
|
|
};
|
|
|
|
// 검색 필드 토글
|
|
const toggleSearchField = (fieldName: string) => {
|
|
const currentSearchFields = localConfig.searchFields || [];
|
|
const newSearchFields = currentSearchFields.includes(fieldName)
|
|
? currentSearchFields.filter((f) => f !== fieldName)
|
|
: [...currentSearchFields, fieldName];
|
|
updateConfig("searchFields", newSearchFields);
|
|
};
|
|
|
|
// 기본 엔티티 타입들
|
|
const commonEntityTypes = [
|
|
{ value: "user", label: "사용자", fields: ["id", "name", "email", "department"] },
|
|
{ value: "department", label: "부서", fields: ["id", "name", "code", "parentId"] },
|
|
{ value: "product", label: "제품", fields: ["id", "name", "code", "category", "price"] },
|
|
{ value: "customer", label: "고객", fields: ["id", "name", "company", "contact"] },
|
|
{ value: "project", label: "프로젝트", fields: ["id", "name", "status", "manager", "startDate"] },
|
|
];
|
|
|
|
// 기본 엔티티 타입 적용
|
|
const applyEntityType = (entityType: string) => {
|
|
const entityConfig = commonEntityTypes.find((e) => e.value === entityType);
|
|
if (!entityConfig) return;
|
|
|
|
updateConfig("entityType", entityType);
|
|
updateConfig("apiEndpoint", `/api/entities/${entityType}`);
|
|
|
|
const defaultFields: EntityField[] = entityConfig.fields.map((field) => ({
|
|
name: field,
|
|
label: field.charAt(0).toUpperCase() + field.slice(1),
|
|
type: field.includes("Date") ? "date" : field.includes("price") || field.includes("Id") ? "number" : "string",
|
|
visible: true,
|
|
}));
|
|
|
|
updateConfig("displayFields", defaultFields);
|
|
updateConfig("searchFields", [entityConfig.fields[1] || "name"]); // 두 번째 필드를 기본 검색 필드로
|
|
};
|
|
|
|
// 필드 타입 옵션
|
|
const fieldTypes = [
|
|
{ value: "string", label: "문자열" },
|
|
{ value: "number", label: "숫자" },
|
|
{ value: "date", label: "날짜" },
|
|
{ value: "boolean", label: "불린" },
|
|
{ value: "email", label: "이메일" },
|
|
{ value: "url", label: "URL" },
|
|
];
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-sm">
|
|
<Database className="h-4 w-4" />
|
|
엔티티 설정
|
|
</CardTitle>
|
|
<CardDescription className="text-xs">데이터베이스 엔티티 선택 필드의 설정을 관리합니다.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 기본 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">기본 설정</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="entityType" className="text-xs">
|
|
엔티티 타입
|
|
</Label>
|
|
<Input
|
|
id="entityType"
|
|
value={localConfig.entityType || ""}
|
|
onChange={(e) => updateConfig("entityType", e.target.value)}
|
|
placeholder="user, product, department..."
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">기본 엔티티 타입</Label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{commonEntityTypes.map((entity) => (
|
|
<Button
|
|
key={entity.value}
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => applyEntityType(entity.value)}
|
|
className="text-xs"
|
|
>
|
|
{entity.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="apiEndpoint" className="text-xs">
|
|
API 엔드포인트
|
|
</Label>
|
|
<Input
|
|
id="apiEndpoint"
|
|
value={localConfig.apiEndpoint || ""}
|
|
onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
|
|
placeholder="/api/entities/user"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필드 매핑 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">필드 매핑</h4>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="valueField" className="text-xs">
|
|
값 필드
|
|
</Label>
|
|
<Input
|
|
id="valueField"
|
|
value={localConfig.valueField || ""}
|
|
onChange={(e) => updateConfig("valueField", e.target.value)}
|
|
placeholder="id"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="labelField" className="text-xs">
|
|
라벨 필드
|
|
</Label>
|
|
<Input
|
|
id="labelField"
|
|
value={localConfig.labelField || ""}
|
|
onChange={(e) => updateConfig("labelField", e.target.value)}
|
|
placeholder="name"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 표시 필드 관리 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">표시 필드</h4>
|
|
|
|
{/* 새 필드 추가 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">필드 추가</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={newFieldName}
|
|
onChange={(e) => setNewFieldName(e.target.value)}
|
|
placeholder="필드명"
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Input
|
|
value={newFieldLabel}
|
|
onChange={(e) => setNewFieldLabel(e.target.value)}
|
|
placeholder="라벨"
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Select value={newFieldType} onValueChange={setNewFieldType}>
|
|
<SelectTrigger className="w-24 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{fieldTypes.map((type) => (
|
|
<SelectItem key={type.value} value={type.value}>
|
|
{type.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
size="sm"
|
|
onClick={addDisplayField}
|
|
disabled={!newFieldName.trim() || !newFieldLabel.trim()}
|
|
className="text-xs"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 현재 필드 목록 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">표시 필드 ({localConfig.displayFields.length}개)</Label>
|
|
<div className="max-h-40 space-y-2 overflow-y-auto">
|
|
{localConfig.displayFields.map((field, index) => (
|
|
<div key={index} className="flex items-center gap-2 rounded border p-2">
|
|
<Switch
|
|
checked={field.visible}
|
|
onCheckedChange={(checked) => updateDisplayField(index, "visible", checked)}
|
|
/>
|
|
<Input
|
|
value={field.name}
|
|
onChange={(e) => updateDisplayField(index, "name", e.target.value)}
|
|
placeholder="필드명"
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Input
|
|
value={field.label}
|
|
onChange={(e) => updateDisplayField(index, "label", e.target.value)}
|
|
placeholder="라벨"
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Select value={field.type} onValueChange={(value) => updateDisplayField(index, "type", value)}>
|
|
<SelectTrigger className="w-24 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{fieldTypes.map((type) => (
|
|
<SelectItem key={type.value} value={type.value}>
|
|
{type.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
size="sm"
|
|
variant={localConfig.searchFields.includes(field.name) ? "default" : "outline"}
|
|
onClick={() => toggleSearchField(field.name)}
|
|
className="p-1 text-xs"
|
|
title={localConfig.searchFields.includes(field.name) ? "검색 필드에서 제거" : "검색 필드로 추가"}
|
|
>
|
|
<Search className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => removeDisplayField(index)}
|
|
className="p-1 text-xs"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 검색 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">검색 설정</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="placeholder" className="text-xs">
|
|
플레이스홀더
|
|
</Label>
|
|
<Input
|
|
id="placeholder"
|
|
value={localConfig.placeholder || ""}
|
|
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
|
placeholder="엔티티를 선택하세요"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="emptyMessage" className="text-xs">
|
|
빈 결과 메시지
|
|
</Label>
|
|
<Input
|
|
id="emptyMessage"
|
|
value={localConfig.emptyMessage || ""}
|
|
onChange={(e) => updateConfig("emptyMessage", e.target.value)}
|
|
placeholder="검색 결과가 없습니다"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="minSearchLength" className="text-xs">
|
|
최소 검색 길이
|
|
</Label>
|
|
<Input
|
|
id="minSearchLength"
|
|
type="number"
|
|
value={localConfig.minSearchLength || 1}
|
|
onChange={(e) => updateConfig("minSearchLength", parseInt(e.target.value))}
|
|
min={0}
|
|
max={10}
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="pageSize" className="text-xs">
|
|
페이지 크기
|
|
</Label>
|
|
<Input
|
|
id="pageSize"
|
|
type="number"
|
|
value={localConfig.pageSize || 20}
|
|
onChange={(e) => updateConfig("pageSize", parseInt(e.target.value))}
|
|
min={5}
|
|
max={100}
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="searchable" className="text-xs">
|
|
검색 가능
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">엔티티를 검색할 수 있습니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="searchable"
|
|
checked={localConfig.searchable !== false}
|
|
onCheckedChange={(checked) => updateConfig("searchable", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="multiple" className="text-xs">
|
|
다중 선택
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">여러 엔티티를 선택할 수 있습니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="multiple"
|
|
checked={localConfig.multiple || false}
|
|
onCheckedChange={(checked) => updateConfig("multiple", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">추가 필터</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="filters" className="text-xs">
|
|
JSON 필터
|
|
</Label>
|
|
<Textarea
|
|
id="filters"
|
|
value={JSON.stringify(localConfig.filters || {}, null, 2)}
|
|
onChange={(e) => {
|
|
try {
|
|
const parsed = JSON.parse(e.target.value);
|
|
updateConfig("filters", parsed);
|
|
} catch {
|
|
// 유효하지 않은 JSON은 무시
|
|
}
|
|
}}
|
|
placeholder='{"status": "active", "department": "IT"}'
|
|
className="font-mono text-xs"
|
|
rows={3}
|
|
/>
|
|
<p className="text-muted-foreground text-xs">API 요청에 추가될 필터 조건을 JSON 형태로 입력하세요.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 상태 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">상태 설정</h4>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="required" className="text-xs">
|
|
필수 선택
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">엔티티가 반드시 선택되어야 합니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="required"
|
|
checked={localConfig.required || false}
|
|
onCheckedChange={(checked) => updateConfig("required", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="readonly" className="text-xs">
|
|
읽기 전용
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">엔티티를 변경할 수 없습니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="readonly"
|
|
checked={localConfig.readonly || false}
|
|
onCheckedChange={(checked) => updateConfig("readonly", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 미리보기 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">미리보기</h4>
|
|
<div className="bg-muted/50 rounded-md border p-3">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 rounded border bg-white p-2">
|
|
<Database className="h-4 w-4 text-gray-400" />
|
|
<span className="flex-1 text-xs text-gray-600">{localConfig.placeholder || "엔티티를 선택하세요"}</span>
|
|
{localConfig.searchable && <Search className="h-4 w-4 text-gray-400" />}
|
|
</div>
|
|
|
|
{localConfig.displayFields.length > 0 && (
|
|
<div className="text-muted-foreground text-xs">
|
|
<div className="font-medium">표시 필드:</div>
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{localConfig.displayFields
|
|
.filter((f) => f.visible)
|
|
.map((field, index) => (
|
|
<span key={index} className="rounded bg-gray-100 px-2 py-1">
|
|
{field.label}
|
|
{localConfig.searchFields.includes(field.name) && " 🔍"}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-muted-foreground text-xs">
|
|
타입: {localConfig.entityType || "미정"}• 값 필드: {localConfig.valueField}• 라벨 필드:{" "}
|
|
{localConfig.labelField}
|
|
{localConfig.multiple && " • 다중선택"}
|
|
{localConfig.required && " • 필수"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
EntityConfigPanel.displayName = "EntityConfigPanel";
|
|
|
|
|