From 9af9a3bbb7ce54a79c8e079c9e06156ccf730c13 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 13:55:44 +0800
Subject: [PATCH] feat(gui-v2): add channel multi select

---
 .../components/webhook/ChannelMultiSelect.vue | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue

diff --git a/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
new file mode 100644
index 0000000000..7e84165d06
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted } from '@vue/runtime-core'
+
+interface Props {
+  modelValue: Record<string, any>[]
+  availableChannelList: Record<string, any>[]
+  placeholder: string
+}
+
+const { availableChannelList, placeholder, ...rest } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(rest, 'modelValue', emit)
+
+// idx of selected channels
+const localChannelValues = $ref<number[]>([])
+
+// availableChannelList with idx enriched
+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(() => {
+  if (availableChannelList.length) {
+    // enrich idx
+    let idx = 0
+    availableChannelWithIdxList = availableChannelList.map((channel) => ({
+      ...channel,
+      idx: idx++,
+    }))
+
+    // build localChannelValues from modelValue
+    for (const channel of rest.modelValue || []) {
+      const target = availableChannelWithIdxList.find(
+        (availableChannelWithIdx) =>
+          availableChannelWithIdx.webhook_url === channel.webhook_url && availableChannelWithIdx.channel === channel.channel,
+      )
+      if (target) {
+        localChannelValues.push(target.idx)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <a-select v-model:value="localChannelValues" mode="multiple" :placeholder="placeholder" max-tag-count="responsive">
+    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">{{
+      channel.channel
+    }}</a-select-option>
+  </a-select>
+</template>