[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