nocodb/packages/nc-gui/components/webhook/ChannelMultiSelect.vue

<script setup lang="ts">
import { onBeforeMount, useVModel, watch } from '#imports'

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
const availableChannelWithIdxList = ref<Record<string, any>[]>([])

function setAvailableChannelWithIdxList(availableChannelList: Record<string, any>[]) {
  if (availableChannelList.length) {
    // enrich idx
    let idx = 0
    availableChannelWithIdxList.value = availableChannelList.map((channel) => ({
      ...channel,
      idx: idx++,
    }))

    // build localChannelValues from modelValue
    for (const channel of rest.modelValue || []) {
      const target = availableChannelWithIdxList.value.find(
        (availableChannelWithIdx) =>
          availableChannelWithIdx.webhook_url === channel.webhook_url && availableChannelWithIdx.channel === channel.channel,
      )
      if (target) {
        localChannelValues.value.push(target.idx)
      }
    }
  }
}

watch(
  () => availableChannelList,
  (n, o) => {
    if (n !== o) {
      setAvailableChannelWithIdxList(n)
    }
  },
)

watch(
  () => localChannelValues.value,
  (v) => {
    const res = []
    for (const channelIdx of v) {
      const target = availableChannelWithIdxList.value.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>
  <a-select
    v-model:value="localChannelValues"
    mode="multiple"
    :placeholder="placeholder"
    max-tag-count="responsive"
    dropdown-class-name="nc-dropdown-webhook-channel"
  >
    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
      {{ channel.channel }}
    </a-select-option>
  </a-select>
</template>