From 72711ae7a09c604635ae924091fb20ed9873f354 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Sat, 9 Apr 2022 17:07:33 +0800
Subject: [PATCH] optimize webhook list queries

---
 .../components/SubscriptionModal.vue          | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionModal.vue b/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionModal.vue
index 01727c703..0b14534db 100644
--- a/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionModal.vue
+++ b/apps/vue/src/views/webhooks/subscriptions/components/SubscriptionModal.vue
@@ -36,13 +36,21 @@
         <InputPassword v-model:value="modelRef.secret" autocomplete="off" />
       </FormItem>
       <FormItem name="webhooks" :label="L('DisplayName:Webhooks')">
-        <Select v-model:value="modelRef.webhooks" mode="multiple">
-          <SelectGroup v-for="group in webhooksGroupRef" :key="group.name"  :label="group.displayName">
+        <Select v-model:value="modelRef.webhooks" mode="multiple" :filterOption="optionFilter">
+          <SelectGroup v-for="group in webhooksGroupRef" :key="group.name" :label="group.displayName">
             <SelectOption
               v-for="option in group.webhooks"
               :key="option.name"
               :value="option.name"
-            >{{ option.displayName }}</SelectOption>
+              :displayName="option.displayName"
+            >
+              <Tooltip placement="right">
+                <template #title>
+                  {{ option.description }}
+                </template>
+                {{ option.displayName }}
+              </Tooltip>
+            </SelectOption>
           </SelectGroup>
         </Select>
       </FormItem>
@@ -62,6 +70,7 @@
     Checkbox,
     Form,
     Select,
+    Tooltip,
     Input,
     InputPassword
   } from 'ant-design-vue';
@@ -181,6 +190,16 @@
     });
   }
 
+  function optionFilter(onputValue: string, option: any) {
+    if (option.displayName) {
+      return option.displayName.includes(onputValue);
+    }
+    if (option.label) {
+      return option.label.includes(onputValue);
+    }
+    return true;
+  }
+
   function getDefaultModel() : WebhookSubscription {
     return {
       id: '',