From d50c24b871f6b374418ae4ba02d091ea8f68e3b8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 31 Mar 2023 19:49:20 +0800
Subject: [PATCH] fix(nc-gui): channel multi select logic

---
 .../components/webhook/ChannelMultiSelect.vue | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
index d9c07bc594..d90e3c9df7 100644
--- a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
+++ b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, useVModel, watch } from '#imports'
+import { onBeforeMount, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: Record<string, any>[]
@@ -17,24 +17,9 @@ const vModel = useVModel(rest, 'modelValue', emit)
 const localChannelValues = $ref<number[]>([])
 
 // availableChannelList with idx enriched
-let availableChannelWithIdxList = $ref<Record<string, any>[]>()
+let availableChannelWithIdxList = $ref<Record<string, any>[]>([])
 
-watch(
-  () => localChannelValues,
-  (v) => {
-    const res = []
-    for (const channelIdx of v) {
-      const target = availableChannelWithIdxList.find((availableChannel) => availableChannel.idx === channelIdx)
-      if (target) {
-        // push without target.idx
-        res.push({ webhook_url: target.webhook_url, channel: target.channel })
-      }
-    }
-    vModel.value = res
-  },
-)
-
-onMounted(() => {
+function setAvailableChannelWithIdxList(availableChannelList: Record<string, any>[]) {
   if (availableChannelList.length) {
     // enrich idx
     let idx = 0
@@ -54,7 +39,33 @@ onMounted(() => {
       }
     }
   }
-})
+}
+
+watch(
+  () => availableChannelList,
+  (n, o) => {
+    if (n !== o) {
+      setAvailableChannelWithIdxList(n)
+    }
+  },
+)
+
+watch(
+  () => localChannelValues,
+  (v) => {
+    const res = []
+    for (const channelIdx of v) {
+      const target = availableChannelWithIdxList.find((availableChannel) => availableChannel.idx === channelIdx)
+      if (target) {
+        // push without target.idx
+        res.push({ webhook_url: target.webhook_url, channel: target.channel })
+      }
+    }
+    vModel.value = res
+  },
+)
+
+onBeforeMount(() => setAvailableChannelWithIdxList(availableChannelList))
 </script>
 
 <template>