416 lines
17 KiB
TypeScript
416 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState, useRef } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
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 { Search, X, Check, ChevronsUpDown, Database } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { screenApi, tableTypeApi } from "@/lib/api/screen";
|
|
import { ScreenDefinition } from "@/types/screen";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
|
|
interface CreateScreenModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onCreated?: (screen: ScreenDefinition) => void;
|
|
}
|
|
|
|
export default function CreateScreenModal({ open, onOpenChange, onCreated }: CreateScreenModalProps) {
|
|
const { user } = useAuth();
|
|
|
|
const [screenName, setScreenName] = useState("");
|
|
const [screenCode, setScreenCode] = useState("");
|
|
const [tableName, setTableName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [tableSearchTerm, setTableSearchTerm] = useState("");
|
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// 외부 DB 연결 관련 상태
|
|
const [selectedDbSource, setSelectedDbSource] = useState<"internal" | number>("internal");
|
|
const [externalConnections, setExternalConnections] = useState<any[]>([]);
|
|
const [externalTableList, setExternalTableList] = useState<string[]>([]);
|
|
const [loadingExternalTables, setLoadingExternalTables] = useState(false);
|
|
const [openDbSourceCombobox, setOpenDbSourceCombobox] = useState(false);
|
|
// 화면 코드 자동 생성
|
|
const generateCode = async () => {
|
|
try {
|
|
const companyCode = (user as any)?.company_code || (user as any)?.companyCode || "*";
|
|
const generatedCode = await screenApi.generateScreenCode(companyCode);
|
|
setScreenCode(generatedCode);
|
|
} catch (e) {
|
|
// console.error("화면 코드 생성 실패", e);
|
|
}
|
|
};
|
|
|
|
// 내부 DB 테이블 목록 로드
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
let abort = false;
|
|
const loadTables = async () => {
|
|
try {
|
|
const list = await tableTypeApi.getTables();
|
|
if (abort) return;
|
|
setTables(list.map((t) => ({ tableName: t.tableName, displayName: t.displayName || t.tableName })));
|
|
} catch (e) {
|
|
setTables([]);
|
|
}
|
|
};
|
|
loadTables();
|
|
return () => {
|
|
abort = true;
|
|
};
|
|
}, [open]);
|
|
|
|
// 외부 DB 연결 목록 로드
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const loadConnections = async () => {
|
|
try {
|
|
const token = localStorage.getItem("authToken");
|
|
if (!token) {
|
|
console.warn("No auth token found");
|
|
return;
|
|
}
|
|
|
|
const response = await fetch("/api/external-db-connections/control/active", {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (response && response.ok) {
|
|
const data = await response.json();
|
|
if (data.success && data.data) {
|
|
const filtered = data.data.filter(
|
|
(conn: any) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
|
|
);
|
|
setExternalConnections(filtered);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load external connections:", error);
|
|
setExternalConnections([]);
|
|
}
|
|
};
|
|
loadConnections();
|
|
}, [open]);
|
|
|
|
// 외부 DB 테이블 목록 로드
|
|
useEffect(() => {
|
|
if (selectedDbSource === "internal" || !selectedDbSource) {
|
|
setExternalTableList([]);
|
|
return;
|
|
}
|
|
|
|
const loadExternalTables = async () => {
|
|
try {
|
|
setLoadingExternalTables(true);
|
|
const token = localStorage.getItem("authToken");
|
|
|
|
const response = await fetch(`/api/multi-connection/connections/${selectedDbSource}/tables`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (response && response.ok) {
|
|
const data = await response.json();
|
|
if (data.success && data.data) {
|
|
const tables = Array.isArray(data.data) ? data.data : [];
|
|
const tableNames = tables
|
|
.map((t: any) => (typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name))
|
|
.filter(Boolean);
|
|
setExternalTableList(tableNames);
|
|
} else {
|
|
setExternalTableList([]);
|
|
}
|
|
} else {
|
|
setExternalTableList([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("외부 DB 테이블 목록 조회 오류:", error);
|
|
setExternalTableList([]);
|
|
} finally {
|
|
setLoadingExternalTables(false);
|
|
}
|
|
};
|
|
|
|
loadExternalTables();
|
|
}, [selectedDbSource]);
|
|
|
|
// 모달이 열릴 때 자동으로 화면 코드 생성
|
|
useEffect(() => {
|
|
if (open && !screenCode) {
|
|
generateCode();
|
|
}
|
|
}, [open, screenCode]);
|
|
|
|
const isValid = useMemo(() => {
|
|
return screenName.trim().length > 0 && screenCode.trim().length > 0 && tableName.trim().length > 0;
|
|
}, [screenName, screenCode, tableName]);
|
|
|
|
// 테이블 필터링 (내부 DB용)
|
|
const filteredTables = useMemo(() => {
|
|
if (!tableSearchTerm) return tables;
|
|
const searchLower = tableSearchTerm.toLowerCase();
|
|
return tables.filter(
|
|
(table) =>
|
|
table.displayName.toLowerCase().includes(searchLower) || table.tableName.toLowerCase().includes(searchLower),
|
|
);
|
|
}, [tables, tableSearchTerm]);
|
|
|
|
// 외부 DB 테이블 필터링
|
|
const filteredExternalTables = useMemo(() => {
|
|
if (!tableSearchTerm) return externalTableList;
|
|
const searchLower = tableSearchTerm.toLowerCase();
|
|
return externalTableList.filter((table) => table.toLowerCase().includes(searchLower));
|
|
}, [externalTableList, tableSearchTerm]);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!isValid || submitting) return;
|
|
try {
|
|
setSubmitting(true);
|
|
const companyCode = (user as any)?.company_code || (user as any)?.companyCode || "*";
|
|
|
|
// DB 소스 정보 추가
|
|
const created = await screenApi.createScreen({
|
|
screenName: screenName.trim(),
|
|
screenCode: screenCode.trim(),
|
|
tableName: tableName.trim(),
|
|
companyCode,
|
|
description: description.trim() || undefined,
|
|
createdBy: (user as any)?.userId,
|
|
dbSourceType: selectedDbSource === "internal" ? "internal" : "external",
|
|
dbConnectionId: selectedDbSource === "internal" ? undefined : Number(selectedDbSource),
|
|
} as any);
|
|
|
|
// 날짜 필드 보정
|
|
const mapped: ScreenDefinition = {
|
|
...created,
|
|
createdDate: created.createdDate ? new Date(created.createdDate as any) : new Date(),
|
|
updatedDate: created.updatedDate ? new Date(created.updatedDate as any) : new Date(),
|
|
} as ScreenDefinition;
|
|
|
|
onCreated?.(mapped);
|
|
onOpenChange(false);
|
|
setScreenName("");
|
|
setScreenCode("");
|
|
setTableName("");
|
|
setDescription("");
|
|
setSelectedDbSource("internal");
|
|
} catch (e) {
|
|
// 필요 시 토스트 추가 가능
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>새 화면 생성</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="screenName">화면명</Label>
|
|
<Input id="screenName" value={screenName} onChange={(e) => setScreenName(e.target.value)} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="screenCode">화면 코드</Label>
|
|
<Input
|
|
id="screenCode"
|
|
value={screenCode}
|
|
readOnly
|
|
placeholder="자동 생성됩니다..."
|
|
className="cursor-not-allowed bg-gray-50"
|
|
/>
|
|
</div>
|
|
|
|
{/* DB 소스 선택 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="dbSource">데이터베이스 소스</Label>
|
|
<Popover open={openDbSourceCombobox} onOpenChange={setOpenDbSourceCombobox}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={openDbSourceCombobox}
|
|
className="w-full justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Database className="h-4 w-4" />
|
|
{selectedDbSource === "internal"
|
|
? "내부 데이터베이스"
|
|
: externalConnections.find((conn) => conn.id === selectedDbSource)?.connection_name ||
|
|
"선택하세요"}
|
|
</div>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
|
|
<Command>
|
|
<CommandInput placeholder="데이터베이스 검색..." />
|
|
<CommandList>
|
|
<CommandEmpty>데이터베이스를 찾을 수 없습니다.</CommandEmpty>
|
|
<CommandGroup>
|
|
<CommandItem
|
|
value="internal"
|
|
onSelect={() => {
|
|
setSelectedDbSource("internal");
|
|
setTableName("");
|
|
setTableSearchTerm("");
|
|
setOpenDbSourceCombobox(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn("mr-2 h-4 w-4", selectedDbSource === "internal" ? "opacity-100" : "opacity-0")}
|
|
/>
|
|
<Database className="mr-2 h-4 w-4 text-blue-500" />
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">내부 데이터베이스</span>
|
|
<span className="text-xs text-gray-500">PostgreSQL (현재 시스템)</span>
|
|
</div>
|
|
</CommandItem>
|
|
{externalConnections.map((conn: any) => (
|
|
<CommandItem
|
|
key={conn.id}
|
|
value={`${conn.connection_name} ${conn.db_type}`}
|
|
onSelect={() => {
|
|
setSelectedDbSource(conn.id);
|
|
setTableName("");
|
|
setTableSearchTerm("");
|
|
setOpenDbSourceCombobox(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn("mr-2 h-4 w-4", selectedDbSource === conn.id ? "opacity-100" : "opacity-0")}
|
|
/>
|
|
<Database className="mr-2 h-4 w-4 text-green-500" />
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{conn.connection_name}</span>
|
|
<span className="text-xs text-gray-500">{conn.db_type?.toUpperCase()}</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<p className="text-xs text-gray-500">화면에서 사용할 데이터베이스를 선택합니다</p>
|
|
</div>
|
|
|
|
{/* 테이블 선택 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="tableName">테이블</Label>
|
|
<Select
|
|
value={tableName}
|
|
onValueChange={setTableName}
|
|
disabled={loadingExternalTables}
|
|
onOpenChange={(open) => {
|
|
if (open) {
|
|
setTimeout(() => {
|
|
searchInputRef.current?.focus();
|
|
}, 100);
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder={loadingExternalTables ? "로딩 중..." : "테이블을 선택하세요"} />
|
|
</SelectTrigger>
|
|
<SelectContent className="max-h-80">
|
|
{/* 검색 입력 필드 */}
|
|
<div className="sticky top-0 z-10 border-b bg-white p-2" onKeyDown={(e) => e.stopPropagation()}>
|
|
<div className="relative">
|
|
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
|
|
<input
|
|
ref={searchInputRef}
|
|
type="text"
|
|
placeholder="테이블명으로 검색..."
|
|
value={tableSearchTerm}
|
|
autoFocus
|
|
onChange={(e) => {
|
|
e.stopPropagation();
|
|
setTableSearchTerm(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onFocus={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-8 w-full rounded-md border px-3 py-2 pr-8 pl-10 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
{tableSearchTerm && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setTableSearchTerm("");
|
|
}}
|
|
className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 옵션들 */}
|
|
<div className="max-h-60 overflow-y-auto">
|
|
{selectedDbSource === "internal" ? (
|
|
// 내부 DB 테이블 목록
|
|
filteredTables.length === 0 ? (
|
|
<div className="px-2 py-6 text-center text-sm text-gray-500">
|
|
{tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
|
|
</div>
|
|
) : (
|
|
filteredTables.map((table) => (
|
|
<SelectItem key={table.tableName} value={table.tableName}>
|
|
{table.displayName} ({table.tableName})
|
|
</SelectItem>
|
|
))
|
|
)
|
|
) : // 외부 DB 테이블 목록
|
|
filteredExternalTables.length === 0 ? (
|
|
<div className="px-2 py-6 text-center text-sm text-gray-500">
|
|
{tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
|
|
</div>
|
|
) : (
|
|
filteredExternalTables.map((tableName) => (
|
|
<SelectItem key={tableName} value={tableName}>
|
|
{tableName}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</div>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">설명</Label>
|
|
<Input id="description" value={description} onChange={(e) => setDescription(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="mt-4">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSubmit} disabled={!isValid || submitting} variant="default">
|
|
생성
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|