From 53169fd665678b83074319997720a3e1953f00ca Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Tue, 7 Jan 2025 22:53:09 +0900
Subject: [PATCH] fix(value-mapping): solve value mapping reactivity issue

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 ...FormDataTableCardTransformValueMapping.vue | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index b9f95c7455..366319b63a 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -136,7 +136,37 @@ const handleUpdateBasedOn = (key: string) => {
     keyInfo.value = key;
 };
 const handleUpdateOperator = (idx: number, operator: 'eq'|'regex') => {
-    casesInfo.value[idx].operator = operator;
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            operator,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdatePattern = (idx: number, pattern: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            match: pattern,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdateValue = (idx: number, value: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            value,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
 };
 
 // Update operator options
@@ -242,8 +272,9 @@ watch(() => state.invalid, (_invalid) => {
                                    required
                                    class="col-span-8"
                     >
-                        <p-text-input v-model="_case.match"
+                        <p-text-input :value="_case.match"
                                       block
+                                      @update:value="handleUpdatePattern(cIdx, $event)"
                         />
                     </p-field-group>
                 </div>
@@ -251,8 +282,9 @@ watch(() => state.invalid, (_invalid) => {
                                style-type="secondary"
                                required
                 >
-                    <p-text-input v-model="_case.value"
+                    <p-text-input :value="_case.value"
                                   block
+                                  @update:value="handleUpdateValue(cIdx, $event)"
                     />
                 </p-field-group>
             </div>