1146 lines
46 KiB
TypeScript
1146 lines
46 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check, Filter, Link2, MousePointer } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { AggregationWidgetConfig, AggregationItem, AggregationType, DataSourceType, FilterCondition, FilterOperator, FilterValueSourceType } from "./types";
|
|
import { tableManagementApi } from "@/lib/api/tableManagement";
|
|
import { tableTypeApi } from "@/lib/api/screen";
|
|
import { getCategoryValues } from "@/lib/api/tableCategoryValue";
|
|
|
|
interface AggregationWidgetConfigPanelProps {
|
|
config: AggregationWidgetConfig;
|
|
onChange: (config: Partial<AggregationWidgetConfig>) => void;
|
|
screenTableName?: string;
|
|
// 화면 내 컴포넌트 목록 (컴포넌트 연결용)
|
|
screenComponents?: Array<{ id: string; componentType: string; label?: string; tableName?: string }>;
|
|
}
|
|
|
|
/**
|
|
* 카테고리 값 콤보박스 컴포넌트
|
|
*/
|
|
function CategoryValueCombobox({
|
|
value,
|
|
options,
|
|
onChange,
|
|
placeholder = "값 선택",
|
|
}: {
|
|
value: string;
|
|
options: Array<{ value: string; label: string }>;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const selectedOption = options.find((opt) => opt.value === value);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
className="h-7 w-full justify-between text-xs font-normal"
|
|
>
|
|
<span className="truncate">
|
|
{selectedOption ? selectedOption.label : placeholder}
|
|
</span>
|
|
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs text-center">
|
|
결과 없음
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{options.map((opt, index) => (
|
|
<CommandItem
|
|
key={`${opt.value}-${index}`}
|
|
value={`${opt.label} ${opt.value}`}
|
|
onSelect={() => {
|
|
onChange(opt.value);
|
|
setOpen(false);
|
|
}}
|
|
className="text-xs cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
value === opt.value ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
{opt.label}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 집계 위젯 설정 패널
|
|
*/
|
|
// 연산자 라벨
|
|
const OPERATOR_LABELS: Record<FilterOperator, string> = {
|
|
eq: "같음 (=)",
|
|
neq: "같지 않음 (!=)",
|
|
gt: "보다 큼 (>)",
|
|
gte: "크거나 같음 (>=)",
|
|
lt: "보다 작음 (<)",
|
|
lte: "작거나 같음 (<=)",
|
|
like: "포함",
|
|
in: "목록에 포함",
|
|
isNull: "NULL",
|
|
isNotNull: "NOT NULL",
|
|
};
|
|
|
|
// 값 소스 타입 라벨
|
|
const VALUE_SOURCE_LABELS: Record<FilterValueSourceType, string> = {
|
|
static: "고정 값",
|
|
formField: "폼 필드",
|
|
selection: "선택된 행",
|
|
urlParam: "URL 파라미터",
|
|
};
|
|
|
|
export function AggregationWidgetConfigPanel({
|
|
config,
|
|
onChange,
|
|
screenTableName,
|
|
screenComponents = [],
|
|
}: AggregationWidgetConfigPanelProps) {
|
|
const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string; categoryCode?: string }>>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
|
|
const [loadingTables, setLoadingTables] = useState(false);
|
|
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
|
|
|
|
// 카테고리 옵션 캐시 (categoryCode -> options)
|
|
const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});
|
|
|
|
// 소스 컴포넌트별 컬럼 캐시 (componentId -> columns)
|
|
const [sourceComponentColumnsCache, setSourceComponentColumnsCache] = useState<Record<string, Array<{ columnName: string; label?: string }>>>({});
|
|
|
|
// 데이터 소스 타입 (기본값: table)
|
|
const dataSourceType = config.dataSourceType || "table";
|
|
|
|
// 선택 가능한 데이터 소스 컴포넌트 (테이블 리스트 등)
|
|
const selectableComponents = useMemo(() => {
|
|
console.log("[AggregationWidget] screenComponents:", screenComponents);
|
|
const filtered = screenComponents.filter(comp =>
|
|
comp.componentType === "table-list" ||
|
|
comp.componentType === "v2-table-list" ||
|
|
comp.componentType === "unified-repeater" ||
|
|
comp.componentType === "v2-unified-repeater" ||
|
|
comp.componentType === "repeat-container" ||
|
|
comp.componentType === "v2-repeat-container"
|
|
);
|
|
console.log("[AggregationWidget] selectableComponents:", filtered);
|
|
return filtered;
|
|
}, [screenComponents]);
|
|
|
|
// 소스 컴포넌트 컬럼 로드
|
|
const loadSourceComponentColumns = async (componentId: string) => {
|
|
// 이미 캐시에 있으면 스킵
|
|
if (sourceComponentColumnsCache[componentId]) {
|
|
return;
|
|
}
|
|
|
|
const sourceComp = screenComponents.find(c => c.id === componentId);
|
|
if (!sourceComp?.tableName) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await tableManagementApi.getColumns(sourceComp.tableName);
|
|
const cols = (response.data?.columns || response.data || []).map((col: any) => ({
|
|
columnName: col.column_name || col.columnName,
|
|
label: col.column_label || col.columnLabel || col.display_name || col.column_name || col.columnName,
|
|
}));
|
|
|
|
setSourceComponentColumnsCache(prev => ({
|
|
...prev,
|
|
[componentId]: cols,
|
|
}));
|
|
} catch (error) {
|
|
console.error("소스 컴포넌트 컬럼 로드 실패:", error);
|
|
}
|
|
};
|
|
|
|
// 실제 사용할 테이블 이름 계산
|
|
const targetTableName = useMemo(() => {
|
|
if (config.useCustomTable && config.customTableName) {
|
|
return config.customTableName;
|
|
}
|
|
return config.tableName || screenTableName;
|
|
}, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
|
|
|
|
// 화면 테이블명 자동 설정 (초기 한 번만)
|
|
useEffect(() => {
|
|
if (screenTableName && !config.tableName && !config.customTableName) {
|
|
onChange({ tableName: screenTableName });
|
|
}
|
|
}, [screenTableName, config.tableName, config.customTableName, onChange]);
|
|
|
|
// 전체 테이블 목록 로드
|
|
useEffect(() => {
|
|
const fetchTables = async () => {
|
|
setLoadingTables(true);
|
|
try {
|
|
const response = await tableTypeApi.getTables();
|
|
setAvailableTables(
|
|
response.map((table: any) => ({
|
|
tableName: table.tableName,
|
|
displayName: table.displayName || table.tableName,
|
|
}))
|
|
);
|
|
} catch (error) {
|
|
console.error("테이블 목록 가져오기 실패:", error);
|
|
} finally {
|
|
setLoadingTables(false);
|
|
}
|
|
};
|
|
fetchTables();
|
|
}, []);
|
|
|
|
// 기존 필터의 소스 컴포넌트 컬럼 미리 로드
|
|
useEffect(() => {
|
|
const filters = config.filters || [];
|
|
filters.forEach((filter) => {
|
|
if (filter.valueSourceType === "selection" && filter.sourceComponentId) {
|
|
loadSourceComponentColumns(filter.sourceComponentId);
|
|
}
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [config.filters, screenComponents]);
|
|
|
|
// 테이블 컬럼 로드
|
|
useEffect(() => {
|
|
const loadColumns = async () => {
|
|
if (!targetTableName) {
|
|
setColumns([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingColumns(true);
|
|
try {
|
|
const result = await tableManagementApi.getColumnList(targetTableName);
|
|
if (result.success && result.data?.columns) {
|
|
const mappedColumns = result.data.columns.map((col: any) => ({
|
|
columnName: col.columnName || col.column_name,
|
|
label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type,
|
|
inputType: col.inputType || col.input_type,
|
|
webType: col.webType || col.web_type,
|
|
categoryCode: col.categoryCode || col.category_code,
|
|
}));
|
|
setColumns(mappedColumns);
|
|
|
|
// 카테고리 타입 컬럼의 옵션 로드
|
|
const categoryColumns = mappedColumns.filter(
|
|
(col: any) => col.inputType === "category" || col.webType === "category"
|
|
);
|
|
if (categoryColumns.length > 0) {
|
|
loadCategoryOptions(categoryColumns);
|
|
}
|
|
} else {
|
|
setColumns([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("컬럼 로드 실패:", error);
|
|
setColumns([]);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
|
|
loadColumns();
|
|
}, [targetTableName]);
|
|
|
|
// 카테고리 옵션 로드 함수
|
|
const loadCategoryOptions = async (categoryColumns: Array<{ columnName: string; categoryCode?: string }>) => {
|
|
if (!targetTableName) return;
|
|
|
|
const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
|
|
|
|
for (const col of categoryColumns) {
|
|
const cacheKey = `${targetTableName}_${col.columnName}`;
|
|
if (newCache[cacheKey]) continue;
|
|
|
|
try {
|
|
// 카테고리 API 호출
|
|
const result = await getCategoryValues(targetTableName, col.columnName, false);
|
|
if (result.success && Array.isArray(result.data)) {
|
|
// 중복 제거 (valueCode 기준)
|
|
const seenCodes = new Set<string>();
|
|
const uniqueOptions: Array<{ value: string; label: string }> = [];
|
|
|
|
for (const item of result.data) {
|
|
const code = item.valueCode || item.code || item.value || item.id;
|
|
if (!seenCodes.has(code)) {
|
|
seenCodes.add(code);
|
|
uniqueOptions.push({
|
|
value: code,
|
|
// valueLabel이 실제 표시명
|
|
label: item.valueLabel || item.valueName || item.name || item.label || item.displayName || code,
|
|
});
|
|
}
|
|
}
|
|
|
|
newCache[cacheKey] = uniqueOptions;
|
|
} else {
|
|
newCache[cacheKey] = [];
|
|
}
|
|
} catch (error) {
|
|
console.error(`카테고리 옵션 로드 실패 (${col.columnName}):`, error);
|
|
// 실패해도 빈 배열로 캐시
|
|
newCache[cacheKey] = [];
|
|
}
|
|
}
|
|
|
|
setCategoryOptionsCache(newCache);
|
|
};
|
|
|
|
// 컬럼의 카테고리 옵션 가져오기
|
|
const getCategoryOptionsForColumn = (columnName: string): Array<{ value: string; label: string }> => {
|
|
if (!targetTableName) return [];
|
|
const cacheKey = `${targetTableName}_${columnName}`;
|
|
return categoryOptionsCache[cacheKey] || [];
|
|
};
|
|
|
|
// 컬럼이 카테고리 타입인지 확인
|
|
const isCategoryColumn = (columnName: string): boolean => {
|
|
const column = columns.find((c) => c.columnName === columnName);
|
|
return column?.inputType === "category" || column?.webType === "category";
|
|
};
|
|
|
|
// 집계 항목 추가
|
|
const addItem = () => {
|
|
const newItem: AggregationItem = {
|
|
id: `agg-${Date.now()}`,
|
|
columnName: "",
|
|
columnLabel: "",
|
|
type: "sum",
|
|
format: "number",
|
|
decimalPlaces: 0,
|
|
};
|
|
onChange({
|
|
items: [...(config.items || []), newItem],
|
|
});
|
|
};
|
|
|
|
// 집계 항목 삭제
|
|
const removeItem = (id: string) => {
|
|
onChange({
|
|
items: (config.items || []).filter((item) => item.id !== id),
|
|
});
|
|
};
|
|
|
|
// 집계 항목 업데이트
|
|
const updateItem = (id: string, updates: Partial<AggregationItem>) => {
|
|
onChange({
|
|
items: (config.items || []).map((item) =>
|
|
item.id === id ? { ...item, ...updates } : item
|
|
),
|
|
});
|
|
};
|
|
|
|
// 숫자형 컬럼만 필터링 (count 제외) - 입력 타입(inputType/webType)으로만 확인
|
|
const numericColumns = columns.filter((col) => {
|
|
const inputType = (col.inputType || col.webType || "")?.toLowerCase();
|
|
|
|
return (
|
|
inputType === "number" ||
|
|
inputType === "decimal" ||
|
|
inputType === "integer" ||
|
|
inputType === "float" ||
|
|
inputType === "currency" ||
|
|
inputType === "percent"
|
|
);
|
|
});
|
|
|
|
// 필터 추가
|
|
const addFilter = () => {
|
|
const newFilter: FilterCondition = {
|
|
id: `filter-${Date.now()}`,
|
|
columnName: "",
|
|
operator: "eq",
|
|
valueSourceType: "static",
|
|
staticValue: "",
|
|
enabled: true,
|
|
};
|
|
onChange({
|
|
filters: [...(config.filters || []), newFilter],
|
|
});
|
|
};
|
|
|
|
// 필터 삭제
|
|
const removeFilter = (id: string) => {
|
|
onChange({
|
|
filters: (config.filters || []).filter((f) => f.id !== id),
|
|
});
|
|
};
|
|
|
|
// 필터 업데이트
|
|
const updateFilter = (id: string, updates: Partial<FilterCondition>) => {
|
|
onChange({
|
|
filters: (config.filters || []).map((f) =>
|
|
f.id === id ? { ...f, ...updates } : f
|
|
),
|
|
});
|
|
};
|
|
|
|
// 연결 가능한 컴포넌트 (리피터, 테이블리스트)
|
|
const linkableComponents = screenComponents.filter(
|
|
(c) => c.componentType === "v2-unified-repeater" ||
|
|
c.componentType === "v2-table-list" ||
|
|
c.componentType === "unified-repeater" ||
|
|
c.componentType === "table-list"
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">집계 위젯 설정</div>
|
|
|
|
{/* 데이터 소스 타입 선택 */}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold">데이터 소스</h3>
|
|
<p className="text-muted-foreground text-[10px]">집계할 데이터를 가져올 방식을 선택합니다</p>
|
|
</div>
|
|
<hr className="border-border" />
|
|
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<Button
|
|
variant={dataSourceType === "table" ? "default" : "outline"}
|
|
size="sm"
|
|
className="h-auto flex-col gap-1 py-2 text-xs"
|
|
onClick={() => onChange({ dataSourceType: "table" })}
|
|
>
|
|
<Database className="h-4 w-4" />
|
|
<span>테이블</span>
|
|
</Button>
|
|
<Button
|
|
variant={dataSourceType === "component" ? "default" : "outline"}
|
|
size="sm"
|
|
className="h-auto flex-col gap-1 py-2 text-xs"
|
|
onClick={() => onChange({ dataSourceType: "component" })}
|
|
>
|
|
<Link2 className="h-4 w-4" />
|
|
<span>컴포넌트</span>
|
|
</Button>
|
|
<Button
|
|
variant={dataSourceType === "selection" ? "default" : "outline"}
|
|
size="sm"
|
|
className="h-auto flex-col gap-1 py-2 text-xs"
|
|
onClick={() => onChange({ dataSourceType: "selection" })}
|
|
>
|
|
<MousePointer className="h-4 w-4" />
|
|
<span>선택 데이터</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 테이블 선택 (table 타입일 때) */}
|
|
{dataSourceType === "table" && (
|
|
<div className="space-y-2 mt-3">
|
|
<Label className="text-xs">데이터 테이블</Label>
|
|
|
|
{/* 현재 선택된 테이블 표시 */}
|
|
<div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
|
|
<Database className="h-4 w-4 text-blue-500" />
|
|
<div className="flex-1">
|
|
<div className="text-xs font-medium">
|
|
{config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 선택 Combobox */}
|
|
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={tableComboboxOpen}
|
|
className="h-8 w-full justify-between text-xs"
|
|
disabled={loadingTables}
|
|
>
|
|
테이블 변경...
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
|
|
|
|
{/* 그룹 1: 화면 기본 테이블 */}
|
|
{screenTableName && (
|
|
<CommandGroup heading="기본 (화면 테이블)">
|
|
<CommandItem
|
|
key={`default-${screenTableName}`}
|
|
value={screenTableName}
|
|
onSelect={() => {
|
|
onChange({
|
|
useCustomTable: false,
|
|
customTableName: undefined,
|
|
tableName: screenTableName,
|
|
items: [],
|
|
filters: [],
|
|
});
|
|
setTableComboboxOpen(false);
|
|
}}
|
|
className="text-xs cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
!config.useCustomTable ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<Database className="mr-2 h-3 w-3 text-blue-500" />
|
|
{screenTableName}
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{/* 그룹 2: 전체 테이블 */}
|
|
<CommandGroup heading="전체 테이블">
|
|
{availableTables
|
|
.filter((table) => table.tableName !== screenTableName)
|
|
.map((table) => (
|
|
<CommandItem
|
|
key={table.tableName}
|
|
value={`${table.tableName} ${table.displayName || ""}`}
|
|
onSelect={() => {
|
|
onChange({
|
|
useCustomTable: true,
|
|
customTableName: table.tableName,
|
|
tableName: table.tableName,
|
|
items: [],
|
|
filters: [],
|
|
});
|
|
setTableComboboxOpen(false);
|
|
}}
|
|
className="text-xs cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<Table2 className="mr-2 h-3 w-3 text-slate-400" />
|
|
{table.displayName || table.tableName}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컴포넌트 연결 (component 타입일 때) */}
|
|
{dataSourceType === "component" && (
|
|
<div className="space-y-2 mt-3">
|
|
<Label className="text-xs">연결할 컴포넌트</Label>
|
|
<Select
|
|
value={config.dataSourceComponentId || ""}
|
|
onValueChange={(value) => onChange({ dataSourceComponentId: value })}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="컴포넌트 선택..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{linkableComponents.length === 0 ? (
|
|
<div className="p-2 text-xs text-muted-foreground text-center">
|
|
연결 가능한 컴포넌트가 없습니다<br/>
|
|
<span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
|
|
</div>
|
|
) : (
|
|
linkableComponents.map((comp) => (
|
|
<SelectItem key={comp.id} value={comp.id}>
|
|
{comp.label || comp.id} ({comp.componentType})
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
리피터 또는 테이블리스트의 데이터를 집계합니다
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 선택 데이터 설명 (selection 타입일 때) */}
|
|
{dataSourceType === "selection" && (
|
|
<div className="space-y-2 mt-3">
|
|
<div className="rounded-md border bg-blue-50 p-3 text-xs text-blue-700">
|
|
<p className="font-medium mb-1">선택된 행 집계</p>
|
|
<p className="text-[10px]">
|
|
화면에서 사용자가 선택(체크)한 행들만 집계합니다.
|
|
테이블리스트나 리피터에서 선택된 데이터가 자동으로 집계됩니다.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 테이블 선택 (어느 테이블의 선택 데이터인지) */}
|
|
<Label className="text-xs">대상 테이블</Label>
|
|
<div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
|
|
<Database className="h-4 w-4 text-blue-500" />
|
|
<div className="flex-1">
|
|
<div className="text-xs font-medium">
|
|
{config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 필터 조건 (table 또는 selection 타입일 때) */}
|
|
{(dataSourceType === "table" || dataSourceType === "selection") && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-semibold flex items-center gap-1">
|
|
<Filter className="h-3 w-3" />
|
|
필터 조건
|
|
</h3>
|
|
<p className="text-muted-foreground text-[10px]">집계 대상을 필터링합니다</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={addFilter} className="h-7 text-xs">
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
필터 추가
|
|
</Button>
|
|
</div>
|
|
<hr className="border-border" />
|
|
|
|
{/* 필터 결합 방식 */}
|
|
{(config.filters || []).length > 1 && (
|
|
<div className="flex items-center gap-2">
|
|
<Label className="text-xs">조건 결합:</Label>
|
|
<Select
|
|
value={config.filterLogic || "AND"}
|
|
onValueChange={(value) => onChange({ filterLogic: value as "AND" | "OR" })}
|
|
>
|
|
<SelectTrigger className="h-7 w-24 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="AND">AND (모두 만족)</SelectItem>
|
|
<SelectItem value="OR">OR (하나만 만족)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 필터 목록 */}
|
|
{(config.filters || []).length === 0 ? (
|
|
<div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
필터 조건이 없습니다. 전체 데이터를 집계합니다.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{(config.filters || []).map((filter, index) => (
|
|
<div
|
|
key={filter.id}
|
|
className={cn(
|
|
"rounded-md border p-3 space-y-2",
|
|
filter.enabled ? "bg-slate-50" : "bg-slate-100 opacity-60"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={filter.enabled}
|
|
onCheckedChange={(checked) => updateFilter(filter.id, { enabled: checked as boolean })}
|
|
/>
|
|
<span className="text-xs font-medium">필터 {index + 1}</span>
|
|
{filter.columnName && (
|
|
<Badge variant="secondary" className="text-[10px]">
|
|
{filter.columnName}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeFilter(filter.id)}
|
|
className="h-6 w-6 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{/* 컬럼 선택 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">컬럼</Label>
|
|
<Select
|
|
value={filter.columnName}
|
|
onValueChange={(value) => {
|
|
updateFilter(filter.id, { columnName: value, staticValue: "" });
|
|
// 카테고리 컬럼이면 옵션 로드
|
|
const col = columns.find((c) => c.columnName === value);
|
|
if (col && (col.inputType === "category" || col.webType === "category")) {
|
|
loadCategoryOptions([col]);
|
|
}
|
|
}}
|
|
disabled={loadingColumns}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{columns.map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.label || col.columnName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 연산자 선택 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">연산자</Label>
|
|
<Select
|
|
value={filter.operator}
|
|
onValueChange={(value) => updateFilter(filter.id, { operator: value as FilterOperator })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(OPERATOR_LABELS).map(([key, label]) => (
|
|
<SelectItem key={key} value={key}>
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 값 소스 타입 */}
|
|
{filter.operator !== "isNull" && filter.operator !== "isNotNull" && (
|
|
<>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">값 소스</Label>
|
|
<Select
|
|
value={filter.valueSourceType}
|
|
onValueChange={(value) => updateFilter(filter.id, { valueSourceType: value as FilterValueSourceType })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(VALUE_SOURCE_LABELS).map(([key, label]) => (
|
|
<SelectItem key={key} value={key}>
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 값 입력 (소스 타입에 따라) */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">
|
|
{filter.valueSourceType === "static" && "값"}
|
|
{filter.valueSourceType === "formField" && "폼 필드명"}
|
|
{filter.valueSourceType === "selection" && "소스 컬럼"}
|
|
{filter.valueSourceType === "urlParam" && "파라미터명"}
|
|
</Label>
|
|
{filter.valueSourceType === "static" && (
|
|
isCategoryColumn(filter.columnName) ? (
|
|
// 카테고리 타입일 때 콤보박스 (검색 가능)
|
|
<CategoryValueCombobox
|
|
value={String(filter.staticValue || "")}
|
|
options={getCategoryOptionsForColumn(filter.columnName)}
|
|
onChange={(value) => updateFilter(filter.id, { staticValue: value })}
|
|
placeholder="값 선택"
|
|
/>
|
|
) : (
|
|
// 일반 타입일 때 입력 필드
|
|
<Input
|
|
value={String(filter.staticValue || "")}
|
|
onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
|
|
placeholder="값 입력"
|
|
className="h-7 text-xs"
|
|
/>
|
|
)
|
|
)}
|
|
{filter.valueSourceType === "formField" && (
|
|
<Input
|
|
value={filter.formFieldName || ""}
|
|
onChange={(e) => updateFilter(filter.id, { formFieldName: e.target.value })}
|
|
placeholder="필드명 입력"
|
|
className="h-7 text-xs"
|
|
/>
|
|
)}
|
|
{filter.valueSourceType === "selection" && (
|
|
<div className="space-y-2 col-span-2">
|
|
{/* 소스 컴포넌트 선택 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">소스 컴포넌트</Label>
|
|
<Select
|
|
value={filter.sourceComponentId || ""}
|
|
onValueChange={(value) => {
|
|
updateFilter(filter.id, { sourceComponentId: value, sourceColumnName: "" });
|
|
if (value) {
|
|
loadSourceComponentColumns(value);
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="데이터 소스 컴포넌트 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{selectableComponents.map((comp) => (
|
|
<SelectItem key={comp.id} value={comp.id}>
|
|
{comp.label || comp.id} ({comp.tableName || "테이블 미설정"})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{/* 소스 컬럼 선택 */}
|
|
{filter.sourceComponentId && (
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">소스 컬럼 (선택된 행의 컬럼)</Label>
|
|
<Select
|
|
value={filter.sourceColumnName || ""}
|
|
onValueChange={(value) => updateFilter(filter.id, { sourceColumnName: value })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(sourceComponentColumnsCache[filter.sourceComponentId] || []).map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.label || col.columnName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{filter.valueSourceType === "urlParam" && (
|
|
<Input
|
|
value={filter.urlParamName || ""}
|
|
onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
|
|
placeholder="파라미터명"
|
|
className="h-7 text-xs"
|
|
/>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 레이아웃 설정 */}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold">레이아웃</h3>
|
|
</div>
|
|
<hr className="border-border" />
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">배치 방향</Label>
|
|
<Select
|
|
value={config.layout || "horizontal"}
|
|
onValueChange={(value) => onChange({ layout: value as "horizontal" | "vertical" })}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="horizontal">가로 배치</SelectItem>
|
|
<SelectItem value="vertical">세로 배치</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">항목 간격</Label>
|
|
<Input
|
|
value={config.gap || "16px"}
|
|
onChange={(e) => onChange({ gap: e.target.value })}
|
|
placeholder="16px"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="showLabels"
|
|
checked={config.showLabels ?? true}
|
|
onCheckedChange={(checked) => onChange({ showLabels: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="showLabels" className="text-xs">
|
|
라벨 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="showIcons"
|
|
checked={config.showIcons ?? true}
|
|
onCheckedChange={(checked) => onChange({ showIcons: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="showIcons" className="text-xs">
|
|
아이콘 표시
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 집계 항목 설정 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold">집계 항목</h3>
|
|
<Button variant="outline" size="sm" onClick={addItem} className="h-7 text-xs">
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
항목 추가
|
|
</Button>
|
|
</div>
|
|
<hr className="border-border" />
|
|
|
|
{(config.items || []).length === 0 ? (
|
|
<div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
집계 항목을 추가해주세요
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{(config.items || []).map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
className="rounded-md border bg-slate-50 p-3 space-y-2"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
|
|
<span className="text-xs font-medium">항목 {index + 1}</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeItem(item.id)}
|
|
className="h-6 w-6 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{/* 컬럼 선택 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">컬럼</Label>
|
|
<Select
|
|
value={item.columnName}
|
|
onValueChange={(value) => {
|
|
const col = columns.find((c) => c.columnName === value);
|
|
updateItem(item.id, {
|
|
columnName: value,
|
|
columnLabel: col?.label || value,
|
|
});
|
|
}}
|
|
disabled={loadingColumns || columns.length === 0}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue placeholder={
|
|
loadingColumns
|
|
? "로딩 중..."
|
|
: columns.length === 0
|
|
? "테이블을 선택하세요"
|
|
: "컬럼 선택"
|
|
} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(item.type === "count" ? columns : numericColumns).length === 0 ? (
|
|
<div className="p-2 text-xs text-muted-foreground text-center">
|
|
{item.type === "count"
|
|
? "컬럼이 없습니다"
|
|
: "숫자형 컬럼이 없습니다"}
|
|
</div>
|
|
) : (
|
|
(item.type === "count" ? columns : numericColumns).map((col) => (
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
|
{col.label || col.columnName}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 집계 타입 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">집계 타입</Label>
|
|
<Select
|
|
value={item.type}
|
|
onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="sum">합계 (SUM)</SelectItem>
|
|
<SelectItem value="avg">평균 (AVG)</SelectItem>
|
|
<SelectItem value="count">개수 (COUNT)</SelectItem>
|
|
<SelectItem value="max">최대 (MAX)</SelectItem>
|
|
<SelectItem value="min">최소 (MIN)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 표시 라벨 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">표시 라벨</Label>
|
|
<Input
|
|
value={item.columnLabel || ""}
|
|
onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
|
|
placeholder="표시될 라벨"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 표시 형식 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">표시 형식</Label>
|
|
<Select
|
|
value={item.format || "number"}
|
|
onValueChange={(value) =>
|
|
updateItem(item.id, { format: value as "number" | "currency" | "percent" })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="number">숫자</SelectItem>
|
|
<SelectItem value="currency">통화</SelectItem>
|
|
<SelectItem value="percent">퍼센트</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 접두사 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">접두사</Label>
|
|
<Input
|
|
value={item.prefix || ""}
|
|
onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
|
|
placeholder="예: ₩"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 접미사 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">접미사</Label>
|
|
<Input
|
|
value={item.suffix || ""}
|
|
onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
|
|
placeholder="예: 원, 개"
|
|
className="h-7 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 스타일 설정 */}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold">스타일</h3>
|
|
</div>
|
|
<hr className="border-border" />
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">배경색</Label>
|
|
<Input
|
|
type="color"
|
|
value={config.backgroundColor || "#f8fafc"}
|
|
onChange={(e) => onChange({ backgroundColor: e.target.value })}
|
|
className="h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">모서리 둥글기</Label>
|
|
<Input
|
|
value={config.borderRadius || "6px"}
|
|
onChange={(e) => onChange({ borderRadius: e.target.value })}
|
|
placeholder="6px"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">라벨 색상</Label>
|
|
<Input
|
|
type="color"
|
|
value={config.labelColor || "#64748b"}
|
|
onChange={(e) => onChange({ labelColor: e.target.value })}
|
|
className="h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">값 색상</Label>
|
|
<Input
|
|
type="color"
|
|
value={config.valueColor || "#0f172a"}
|
|
onChange={(e) => onChange({ valueColor: e.target.value })}
|
|
className="h-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|