[agent-pipeline] pipe-20260311052455-y968 round-6
This commit is contained in:
DDD1542
parent
9125d04345
commit
040c746334
|
|
@ -0,0 +1,132 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { ImprovedButtonControlConfigPanel } from "../ImprovedButtonControlConfigPanel";
|
||||||
|
import { FlowVisibilityConfigPanel } from "../FlowVisibilityConfigPanel";
|
||||||
|
import type { ButtonTabProps } from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AdvancedTab - 행 선택 활성화, 제어 기능, 플로우 표시 제어
|
||||||
|
*/
|
||||||
|
export const AdvancedTab: React.FC<ButtonTabProps> = ({
|
||||||
|
component,
|
||||||
|
onUpdateProperty,
|
||||||
|
allComponents,
|
||||||
|
}) => {
|
||||||
|
// 플로우 위젯이 화면에 있는지 확인
|
||||||
|
const hasFlowWidget = useMemo(() => {
|
||||||
|
return allComponents.some((comp: { componentType?: string; widgetType?: string }) => {
|
||||||
|
const compType = comp.componentType || comp.widgetType || "";
|
||||||
|
return compType === "flow-widget" || compType?.toLowerCase().includes("flow");
|
||||||
|
});
|
||||||
|
}, [allComponents]);
|
||||||
|
|
||||||
|
const actionType = component.componentConfig?.action?.type;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 행 선택 시에만 활성화 설정 */}
|
||||||
|
<div className="space-y-4 rounded-lg border bg-muted/50 p-4">
|
||||||
|
<h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<Label>행 선택 시에만 활성화</Label>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={component.componentConfig?.action?.requireRowSelection || false}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
onUpdateProperty("componentConfig.action.requireRowSelection", checked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{component.componentConfig?.action?.requireRowSelection && (
|
||||||
|
<div className="space-y-3 border-l-2 border-primary/20 pl-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="row-selection-source">선택 데이터 소스</Label>
|
||||||
|
<Select
|
||||||
|
value={component.componentConfig?.action?.rowSelectionSource || "auto"}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
onUpdateProperty("componentConfig.action.rowSelectionSource", value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="row-selection-source" className="h-8 text-xs">
|
||||||
|
<SelectValue placeholder="데이터 소스 선택" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="auto">자동 감지 (권장)</SelectItem>
|
||||||
|
<SelectItem value="tableList">테이블 리스트 선택</SelectItem>
|
||||||
|
<SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
|
||||||
|
<SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">
|
||||||
|
자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<Label>다중 선택 허용</Label>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
|
||||||
|
<div className="rounded-md bg-muted p-2">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 제어 기능 섹션 - 엑셀 업로드 계열이 아닐 때만 표시 */}
|
||||||
|
{actionType !== "excel_upload" && actionType !== "multi_table_excel_upload" && (
|
||||||
|
<div className="border-t border-border pt-6">
|
||||||
|
<ImprovedButtonControlConfigPanel
|
||||||
|
component={component}
|
||||||
|
onUpdateProperty={onUpdateProperty}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 플로우 단계별 표시 제어 (플로우 위젯이 있을 때만) */}
|
||||||
|
{hasFlowWidget && (
|
||||||
|
<div className="border-t border-border pt-6">
|
||||||
|
<FlowVisibilityConfigPanel
|
||||||
|
component={component}
|
||||||
|
allComponents={allComponents}
|
||||||
|
onUpdateProperty={onUpdateProperty}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,20 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { ButtonTabProps } from "./types";
|
||||||
|
import { ButtonDataflowConfigPanel } from "../ButtonDataflowConfigPanel";
|
||||||
|
|
||||||
|
/** 데이터플로우 탭: 버튼 제어관리 설정 패널 래퍼 */
|
||||||
|
export const DataflowTab: React.FC<ButtonTabProps> = ({
|
||||||
|
component,
|
||||||
|
onUpdateProperty,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ButtonDataflowConfigPanel
|
||||||
|
component={component}
|
||||||
|
onUpdateProperty={onUpdateProperty}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { ComponentData } from "@/types/screen";
|
||||||
|
|
||||||
|
export interface TitleBlock {
|
||||||
|
id: string;
|
||||||
|
type: "text" | "field";
|
||||||
|
value: string;
|
||||||
|
tableName?: string;
|
||||||
|
label?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonConfigPanelProps {
|
||||||
|
component: ComponentData;
|
||||||
|
onUpdateProperty: (path: string, value: any) => void;
|
||||||
|
allComponents?: ComponentData[];
|
||||||
|
currentTableName?: string;
|
||||||
|
currentScreenCompanyCode?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ScreenOption {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonTabProps {
|
||||||
|
component: ComponentData;
|
||||||
|
onUpdateProperty: (path: string, value: any) => void;
|
||||||
|
allComponents: ComponentData[];
|
||||||
|
currentTableName?: string;
|
||||||
|
currentScreenCompanyCode?: string;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue