From b1d95fe06de7aa79e9508528980cd0d670b241ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BA=90?=
 <73240868+JustinLiang522@users.noreply.github.com>
Date: Sat, 20 May 2023 00:29:50 +0800
Subject: [PATCH] fix: add keyword search functionality to AuthProvider list
 (#3974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug

#### What this PR does / why we need it:

添加关键字搜索功能到认证方式列表

#### Which issue(s) this PR fixes:

Fixes #3948

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?


```release-note
修复 Console 端认证方式列表无法使用搜索的问题。
```
---
 .../system/auth-providers/AuthProviders.vue   | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/console/src/modules/system/auth-providers/AuthProviders.vue b/console/src/modules/system/auth-providers/AuthProviders.vue
index d2886d405..fe829d1db 100644
--- a/console/src/modules/system/auth-providers/AuthProviders.vue
+++ b/console/src/modules/system/auth-providers/AuthProviders.vue
@@ -9,6 +9,8 @@ import { useQuery } from "@tanstack/vue-query";
 import { apiClient } from "@/utils/api-client";
 import type { ListedAuthProvider } from "@halo-dev/api-client";
 import AuthProviderListItem from "./components/AuthProviderListItem.vue";
+import { computed, ref } from "vue";
+import Fuse from "fuse.js";
 
 const {
   data: authProviders,
@@ -20,6 +22,24 @@ const {
     const { data } = await apiClient.authProvider.listAuthProviders();
     return data;
   },
+  onSuccess(data) {
+    fuse = new Fuse(data, {
+      keys: ["name", "displayName"],
+      useExtendedSearch: true,
+      threshold: 0.2,
+    });
+  },
+});
+
+const keyword = ref("");
+let fuse: Fuse<ListedAuthProvider> | undefined = undefined;
+
+const searchResults = computed(() => {
+  if (!fuse || !keyword.value) {
+    return authProviders.value;
+  }
+
+  return fuse?.search(keyword.value).map((item) => item.item);
 });
 </script>
 
@@ -39,6 +59,7 @@ const {
           >
             <div class="flex w-full flex-1 sm:w-auto">
               <FormKit
+                v-model="keyword"
                 :placeholder="$t('core.common.placeholder.search')"
                 type="text"
               ></FormKit>
@@ -52,7 +73,7 @@ const {
           class="box-border h-full w-full divide-y divide-gray-100"
           role="list"
         >
-          <li v-for="(authProvider, index) in authProviders" :key="index">
+          <li v-for="(authProvider, index) in searchResults" :key="index">
             <AuthProviderListItem
               :auth-provider="authProvider"
               @reload="refetch"