feat(gui-v2): add channel multi select

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>