340 lines
12 KiB
TypeScript
340 lines
12 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useCallback, useEffect } from "react";
|
||
|
|
import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from "./types";
|
||
|
|
import { QueryEditor } from "./QueryEditor";
|
||
|
|
import { ChartConfigPanel } from "./ChartConfigPanel";
|
||
|
|
import { VehicleMapConfigPanel } from "./VehicleMapConfigPanel";
|
||
|
|
import { DataSourceSelector } from "./data-sources/DataSourceSelector";
|
||
|
|
import { DatabaseConfig } from "./data-sources/DatabaseConfig";
|
||
|
|
import { ApiConfig } from "./data-sources/ApiConfig";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { X, ChevronLeft, ChevronRight } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface ElementConfigSidebarProps {
|
||
|
|
element: DashboardElement | null;
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onApply: (element: DashboardElement) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 요소 설정 사이드바 컴포넌트
|
||
|
|
* - 왼쪽에서 슬라이드 인/아웃
|
||
|
|
* - 캔버스 위에 오버레이
|
||
|
|
* - "적용" 버튼으로 명시적 저장
|
||
|
|
*/
|
||
|
|
export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: ElementConfigSidebarProps) {
|
||
|
|
const [dataSource, setDataSource] = useState<ChartDataSource>({
|
||
|
|
type: "database",
|
||
|
|
connectionType: "current",
|
||
|
|
refreshInterval: 0,
|
||
|
|
});
|
||
|
|
const [chartConfig, setChartConfig] = useState<ChartConfig>({});
|
||
|
|
const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
|
||
|
|
const [currentStep, setCurrentStep] = useState<1 | 2>(1);
|
||
|
|
const [customTitle, setCustomTitle] = useState<string>("");
|
||
|
|
const [showHeader, setShowHeader] = useState<boolean>(true);
|
||
|
|
|
||
|
|
// 사이드바가 열릴 때 초기화
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen && element) {
|
||
|
|
setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
|
||
|
|
setChartConfig(element.chartConfig || {});
|
||
|
|
setQueryResult(null);
|
||
|
|
setCurrentStep(1);
|
||
|
|
setCustomTitle(element.customTitle || "");
|
||
|
|
setShowHeader(element.showHeader !== false);
|
||
|
|
}
|
||
|
|
}, [isOpen, element]);
|
||
|
|
|
||
|
|
// Esc 키로 사이드바 닫기
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isOpen) return;
|
||
|
|
|
||
|
|
const handleEsc = (e: KeyboardEvent) => {
|
||
|
|
if (e.key === "Escape") {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("keydown", handleEsc);
|
||
|
|
return () => window.removeEventListener("keydown", handleEsc);
|
||
|
|
}, [isOpen, onClose]);
|
||
|
|
|
||
|
|
// 데이터 소스 타입 변경
|
||
|
|
const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
|
||
|
|
if (type === "database") {
|
||
|
|
setDataSource({
|
||
|
|
type: "database",
|
||
|
|
connectionType: "current",
|
||
|
|
refreshInterval: 0,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
setDataSource({
|
||
|
|
type: "api",
|
||
|
|
method: "GET",
|
||
|
|
refreshInterval: 0,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setQueryResult(null);
|
||
|
|
setChartConfig({});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 데이터 소스 업데이트
|
||
|
|
const handleDataSourceUpdate = useCallback((updates: Partial<ChartDataSource>) => {
|
||
|
|
setDataSource((prev) => ({ ...prev, ...updates }));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 차트 설정 변경 처리
|
||
|
|
const handleChartConfigChange = useCallback((newConfig: ChartConfig) => {
|
||
|
|
setChartConfig(newConfig);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 쿼리 테스트 결과 처리
|
||
|
|
const handleQueryTest = useCallback((result: QueryResult) => {
|
||
|
|
setQueryResult(result);
|
||
|
|
setChartConfig({});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 다음 단계로 이동
|
||
|
|
const handleNext = useCallback(() => {
|
||
|
|
if (currentStep === 1) {
|
||
|
|
setCurrentStep(2);
|
||
|
|
}
|
||
|
|
}, [currentStep]);
|
||
|
|
|
||
|
|
// 이전 단계로 이동
|
||
|
|
const handlePrev = useCallback(() => {
|
||
|
|
if (currentStep > 1) {
|
||
|
|
setCurrentStep((prev) => (prev - 1) as 1 | 2);
|
||
|
|
}
|
||
|
|
}, [currentStep]);
|
||
|
|
|
||
|
|
// 취소 처리
|
||
|
|
const handleCancel = useCallback(() => {
|
||
|
|
onClose();
|
||
|
|
}, [onClose]);
|
||
|
|
|
||
|
|
// 적용 처리
|
||
|
|
const handleApply = useCallback(() => {
|
||
|
|
if (!element) return;
|
||
|
|
|
||
|
|
const updatedElement: DashboardElement = {
|
||
|
|
...element,
|
||
|
|
dataSource,
|
||
|
|
chartConfig,
|
||
|
|
customTitle: customTitle.trim() || undefined,
|
||
|
|
showHeader,
|
||
|
|
};
|
||
|
|
|
||
|
|
onApply(updatedElement);
|
||
|
|
// 사이드바는 열린 채로 유지 (연속 수정 가능)
|
||
|
|
}, [element, dataSource, chartConfig, customTitle, showHeader, onApply]);
|
||
|
|
|
||
|
|
// 요소가 없으면 렌더링하지 않음
|
||
|
|
if (!element) return null;
|
||
|
|
|
||
|
|
// 차트 설정이 필요 없는 위젯 (쿼리/API만 필요)
|
||
|
|
const isSimpleWidget =
|
||
|
|
element.subtype === "todo" ||
|
||
|
|
element.subtype === "booking-alert" ||
|
||
|
|
element.subtype === "maintenance" ||
|
||
|
|
element.subtype === "document" ||
|
||
|
|
element.subtype === "risk-alert" ||
|
||
|
|
element.subtype === "vehicle-status" ||
|
||
|
|
element.subtype === "vehicle-list" ||
|
||
|
|
element.subtype === "status-summary" ||
|
||
|
|
element.subtype === "delivery-status" ||
|
||
|
|
element.subtype === "delivery-status-summary" ||
|
||
|
|
element.subtype === "delivery-today-stats" ||
|
||
|
|
element.subtype === "cargo-list" ||
|
||
|
|
element.subtype === "customer-issues" ||
|
||
|
|
element.subtype === "driver-management" ||
|
||
|
|
element.subtype === "work-history" ||
|
||
|
|
element.subtype === "transport-stats";
|
||
|
|
|
||
|
|
// 자체 기능 위젯 (DB 연결 불필요, 헤더 설정만 가능)
|
||
|
|
const isSelfContainedWidget =
|
||
|
|
element.subtype === "weather" || element.subtype === "exchange" || element.subtype === "calculator";
|
||
|
|
|
||
|
|
// 지도 위젯 (위도/경도 매핑 필요)
|
||
|
|
const isMapWidget = element.subtype === "vehicle-map" || element.subtype === "map-summary";
|
||
|
|
|
||
|
|
// 헤더 전용 위젯
|
||
|
|
const isHeaderOnlyWidget =
|
||
|
|
element.type === "widget" &&
|
||
|
|
(element.subtype === "clock" || element.subtype === "calendar" || isSelfContainedWidget);
|
||
|
|
|
||
|
|
// 저장 가능 여부 확인
|
||
|
|
const isPieChart = element.subtype === "pie" || element.subtype === "donut";
|
||
|
|
const isApiSource = dataSource.type === "api";
|
||
|
|
|
||
|
|
const hasYAxis =
|
||
|
|
chartConfig.yAxis &&
|
||
|
|
(typeof chartConfig.yAxis === "string" || (Array.isArray(chartConfig.yAxis) && chartConfig.yAxis.length > 0));
|
||
|
|
|
||
|
|
const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
|
||
|
|
const isHeaderChanged = showHeader !== (element.showHeader !== false);
|
||
|
|
|
||
|
|
const canApply =
|
||
|
|
isTitleChanged ||
|
||
|
|
isHeaderChanged ||
|
||
|
|
(isSimpleWidget
|
||
|
|
? currentStep === 2 && queryResult && queryResult.rows.length > 0
|
||
|
|
: isMapWidget
|
||
|
|
? currentStep === 2 &&
|
||
|
|
queryResult &&
|
||
|
|
queryResult.rows.length > 0 &&
|
||
|
|
chartConfig.latitudeColumn &&
|
||
|
|
chartConfig.longitudeColumn
|
||
|
|
: currentStep === 2 &&
|
||
|
|
queryResult &&
|
||
|
|
queryResult.rows.length > 0 &&
|
||
|
|
chartConfig.xAxis &&
|
||
|
|
(isPieChart || isApiSource ? (chartConfig.aggregation === "count" ? true : hasYAxis) : hasYAxis));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"fixed top-14 left-0 z-[100] flex h-[calc(100vh-3.5rem)] w-96 flex-col bg-white shadow-2xl transition-transform duration-300 ease-in-out",
|
||
|
|
isOpen ? "translate-x-0" : "translate-x-[-100%]",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex items-center justify-between border-b p-4">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900">{element.title} 설정</h3>
|
||
|
|
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
|
||
|
|
<X className="h-5 w-5" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 본문: 스크롤 가능 영역 */}
|
||
|
|
<div className="flex-1 overflow-y-auto p-4">
|
||
|
|
{/* 커스텀 제목 입력 */}
|
||
|
|
<div className="mb-4">
|
||
|
|
<label className="mb-1 block text-sm font-medium text-gray-700">위젯 제목</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={customTitle}
|
||
|
|
onChange={(e) => setCustomTitle(e.target.value)}
|
||
|
|
onKeyDown={(e) => e.stopPropagation()}
|
||
|
|
placeholder="비워두면 자동 생성"
|
||
|
|
className="focus:border-primary focus:ring-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 헤더 표시 옵션 */}
|
||
|
|
<div className="mb-4 flex items-center gap-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
id="showHeader"
|
||
|
|
checked={showHeader}
|
||
|
|
onChange={(e) => setShowHeader(e.target.checked)}
|
||
|
|
className="text-primary focus:ring-primary h-4 w-4 rounded border-gray-300"
|
||
|
|
/>
|
||
|
|
<label htmlFor="showHeader" className="text-sm font-medium text-gray-700">
|
||
|
|
위젯 헤더 표시
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 진행 상황 표시 */}
|
||
|
|
{!isSimpleWidget && !isHeaderOnlyWidget && (
|
||
|
|
<div className="mb-4 rounded-md bg-gray-50 p-3">
|
||
|
|
<div className="text-sm font-medium text-gray-700">
|
||
|
|
단계 {currentStep} / 2: {currentStep === 1 ? "데이터 소스 선택" : "데이터 설정"}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 단계별 내용 */}
|
||
|
|
{!isHeaderOnlyWidget && (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{currentStep === 1 && (
|
||
|
|
<DataSourceSelector dataSource={dataSource} onTypeChange={handleDataSourceTypeChange} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{currentStep === 2 && (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* 데이터 설정 */}
|
||
|
|
{dataSource.type === "database" ? (
|
||
|
|
<>
|
||
|
|
<DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
|
||
|
|
<QueryEditor
|
||
|
|
dataSource={dataSource}
|
||
|
|
onDataSourceChange={handleDataSourceUpdate}
|
||
|
|
onQueryTest={handleQueryTest}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 차트/지도 설정 */}
|
||
|
|
{!isSimpleWidget && queryResult && queryResult.rows.length > 0 && (
|
||
|
|
<div className="mt-4">
|
||
|
|
{isMapWidget ? (
|
||
|
|
<VehicleMapConfigPanel
|
||
|
|
config={chartConfig}
|
||
|
|
queryResult={queryResult}
|
||
|
|
onConfigChange={handleChartConfigChange}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<ChartConfigPanel
|
||
|
|
config={chartConfig}
|
||
|
|
queryResult={queryResult}
|
||
|
|
onConfigChange={handleChartConfigChange}
|
||
|
|
chartType={element.subtype}
|
||
|
|
dataSourceType={dataSource.type}
|
||
|
|
query={dataSource.query}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 데이터 로드 상태 */}
|
||
|
|
{queryResult && (
|
||
|
|
<div className="mt-4">
|
||
|
|
<Badge variant="default">{queryResult.rows.length}개 데이터 로드됨</Badge>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 푸터: 단계 이동 및 적용 버튼 */}
|
||
|
|
<div className="flex items-center justify-between border-t p-4">
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{!isSimpleWidget && !isHeaderOnlyWidget && currentStep > 1 && (
|
||
|
|
<Button variant="outline" size="sm" onClick={handlePrev}>
|
||
|
|
<ChevronLeft className="mr-1 h-4 w-4" />
|
||
|
|
이전
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button variant="outline" size="sm" onClick={handleCancel}>
|
||
|
|
취소
|
||
|
|
</Button>
|
||
|
|
{isHeaderOnlyWidget || currentStep === 1 ? (
|
||
|
|
<Button size="sm" onClick={isHeaderOnlyWidget ? handleApply : handleNext}>
|
||
|
|
{isHeaderOnlyWidget ? "적용" : "다음"}
|
||
|
|
{!isHeaderOnlyWidget && <ChevronRight className="ml-1 h-4 w-4" />}
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button size="sm" onClick={handleApply} disabled={!canApply}>
|
||
|
|
적용
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|