From 0acf4194ca01f73b50ab5760e14ee6b2613c4430 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 28 Jun 2024 11:40:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20filter=20out=20selected=20values=20?=
 =?UTF-8?q?=E2=80=8B=E2=80=8Bin=20other=20to=20fields=20from=20the=20curre?=
 =?UTF-8?q?n=E2=80=A6=20(#1307)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

feat: filter out selected values ​​in other to fields from the current
drop-down box options #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 .../flow/categorize-form/dynamic-categorize.tsx | 13 +++++++++++--
 web/src/pages/flow/categorize-form/hooks.ts     | 17 ++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
index 8843db981..8beb7e9a2 100644
--- a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
@@ -1,6 +1,7 @@
 import { CloseOutlined } from '@ant-design/icons';
 import { Button, Card, Form, Input, Select, Typography } from 'antd';
 import { useUpdateNodeInternals } from 'reactflow';
+import { ICategorizeItem } from '../interface';
 import { useBuildCategorizeToOptions, useHandleToSelectChange } from './hooks';
 
 interface IProps {
@@ -10,7 +11,7 @@ interface IProps {
 const DynamicCategorize = ({ nodeId }: IProps) => {
   const updateNodeInternals = useUpdateNodeInternals();
   const form = Form.useFormInstance();
-  const options = useBuildCategorizeToOptions();
+  const buildCategorizeToOptions = useBuildCategorizeToOptions();
   const { handleSelectChange } = useHandleToSelectChange(nodeId);
 
   return (
@@ -60,7 +61,15 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                   <Form.Item label="to" name={[field.name, 'to']}>
                     <Select
                       allowClear
-                      options={options}
+                      options={buildCategorizeToOptions(
+                        (form.getFieldValue(['items']) ?? [])
+                          .map((x: ICategorizeItem) => x.to)
+                          .filter(
+                            (x: string) =>
+                              x !==
+                              form.getFieldValue(['items', field.name, 'to']),
+                          ),
+                      )}
                       onChange={handleSelectChange(
                         form.getFieldValue(['items', field.name, 'name']),
                       )}
diff --git a/web/src/pages/flow/categorize-form/hooks.ts b/web/src/pages/flow/categorize-form/hooks.ts
index 80df0cf53..1305e3cbd 100644
--- a/web/src/pages/flow/categorize-form/hooks.ts
+++ b/web/src/pages/flow/categorize-form/hooks.ts
@@ -17,9 +17,20 @@ const excludedNodes = [Operator.Categorize, Operator.Answer, Operator.Begin];
 export const useBuildCategorizeToOptions = () => {
   const nodes = useGraphStore((state) => state.nodes);
 
-  return nodes
-    .filter((x) => excludedNodes.every((y) => y !== x.data.label))
-    .map((x) => ({ label: x.id, value: x.id }));
+  const buildCategorizeToOptions = useCallback(
+    (toList: string[]) => {
+      return nodes
+        .filter(
+          (x) =>
+            excludedNodes.every((y) => y !== x.data.label) &&
+            !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
+        )
+        .map((x) => ({ label: x.id, value: x.id }));
+    },
+    [nodes],
+  );
+
+  return buildCategorizeToOptions;
 };
 
 /**