fix: add keyword search functionality to AuthProvider list (#3974)

#### 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 端认证方式列表无法使用搜索的问题。
```
pull/3977/head
2023-05-20 00:29:50 +08:00 committed by GitHub
parent 170cf4e412
commit b1d95fe06d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 1 deletions

View File

@ -9,6 +9,8 @@ import { useQuery } from "@tanstack/vue-query";
import { apiClient } from "@/utils/api-client"; import { apiClient } from "@/utils/api-client";
import type { ListedAuthProvider } from "@halo-dev/api-client"; import type { ListedAuthProvider } from "@halo-dev/api-client";
import AuthProviderListItem from "./components/AuthProviderListItem.vue"; import AuthProviderListItem from "./components/AuthProviderListItem.vue";
import { computed, ref } from "vue";
import Fuse from "fuse.js";
const { const {
data: authProviders, data: authProviders,
@ -20,6 +22,24 @@ const {
const { data } = await apiClient.authProvider.listAuthProviders(); const { data } = await apiClient.authProvider.listAuthProviders();
return data; 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> </script>
@ -39,6 +59,7 @@ const {
> >
<div class="flex w-full flex-1 sm:w-auto"> <div class="flex w-full flex-1 sm:w-auto">
<FormKit <FormKit
v-model="keyword"
:placeholder="$t('core.common.placeholder.search')" :placeholder="$t('core.common.placeholder.search')"
type="text" type="text"
></FormKit> ></FormKit>
@ -52,7 +73,7 @@ const {
class="box-border h-full w-full divide-y divide-gray-100" class="box-border h-full w-full divide-y divide-gray-100"
role="list" role="list"
> >
<li v-for="(authProvider, index) in authProviders" :key="index"> <li v-for="(authProvider, index) in searchResults" :key="index">
<AuthProviderListItem <AuthProviderListItem
:auth-provider="authProvider" :auth-provider="authProvider"
@reload="refetch" @reload="refetch"