79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
|
||
|
|
interface TableSearchWidgetConfigPanelProps {
|
||
|
|
component: any;
|
||
|
|
onUpdateProperty: (property: string, value: any) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableSearchWidgetConfigPanel({
|
||
|
|
component,
|
||
|
|
onUpdateProperty,
|
||
|
|
}: TableSearchWidgetConfigPanelProps) {
|
||
|
|
const [localAutoSelect, setLocalAutoSelect] = useState(
|
||
|
|
component.componentConfig?.autoSelectFirstTable ?? true
|
||
|
|
);
|
||
|
|
const [localShowSelector, setLocalShowSelector] = useState(
|
||
|
|
component.componentConfig?.showTableSelector ?? true
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setLocalAutoSelect(component.componentConfig?.autoSelectFirstTable ?? true);
|
||
|
|
setLocalShowSelector(component.componentConfig?.showTableSelector ?? true);
|
||
|
|
}, [component.componentConfig]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h3 className="text-sm font-semibold">검색 필터 위젯 설정</h3>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
이 위젯은 화면 내의 테이블들을 자동으로 감지하여 검색, 필터, 그룹 기능을 제공합니다.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 첫 번째 테이블 자동 선택 */}
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id="autoSelectFirstTable"
|
||
|
|
checked={localAutoSelect}
|
||
|
|
onCheckedChange={(checked) => {
|
||
|
|
setLocalAutoSelect(checked as boolean);
|
||
|
|
onUpdateProperty("componentConfig.autoSelectFirstTable", checked);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="autoSelectFirstTable" className="text-xs sm:text-sm cursor-pointer">
|
||
|
|
첫 번째 테이블 자동 선택
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 테이블 선택 드롭다운 표시 */}
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id="showTableSelector"
|
||
|
|
checked={localShowSelector}
|
||
|
|
onCheckedChange={(checked) => {
|
||
|
|
setLocalShowSelector(checked as boolean);
|
||
|
|
onUpdateProperty("componentConfig.showTableSelector", checked);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="showTableSelector" className="text-xs sm:text-sm cursor-pointer">
|
||
|
|
테이블 선택 드롭다운 표시 (여러 테이블이 있을 때)
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-md bg-muted p-3 text-xs">
|
||
|
|
<p className="font-medium mb-1">참고사항:</p>
|
||
|
|
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
|
||
|
|
<li>테이블 리스트, 분할 패널, 플로우 위젯이 자동 감지됩니다</li>
|
||
|
|
<li>여러 테이블이 있으면 드롭다운에서 선택할 수 있습니다</li>
|
||
|
|
<li>선택한 테이블의 컬럼 정보가 자동으로 로드됩니다</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|