diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue index ec3df7e26..c3e1f13e0 100644 --- a/src/modules/system/users/UserList.vue +++ b/src/modules/system/users/UserList.vue @@ -19,12 +19,13 @@ import { import UserEditingModal from "./components/UserEditingModal.vue"; import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue"; import GrantPermissionModal from "./components/GrantPermissionModal.vue"; -import { inject, onMounted, ref, watch } from "vue"; +import { computed, inject, onMounted, ref, watch } from "vue"; import { apiClient } from "@/utils/api-client"; import type { User, UserList } from "@halo-dev/api-client"; import { rbacAnnotations } from "@/constants/annotations"; import { formatDatetime } from "@/utils/date"; import { useRouteQuery } from "@vueuse/router"; +import Fuse from "fuse.js"; const dialog = useDialog(); @@ -47,6 +48,8 @@ const selectedUserNames = ref([]); const selectedUser = ref(); const currentUser = inject("currentUser"); +let fuse: Fuse | undefined = undefined; + const handleFetchUsers = async () => { try { const { data } = await apiClient.extension.user.listv1alpha1User({ @@ -54,13 +57,28 @@ const handleFetchUsers = async () => { size: users.value.size, }); users.value = data; + + fuse = new Fuse(data.items, { + keys: ["spec.displayName", "metadata.name", "spec.email"], + useExtendedSearch: true, + }); } catch (e) { - console.error(e); + console.error("Failed to fetch users", e); } finally { selectedUser.value = undefined; } }; +const keyword = ref(""); + +const searchResults = computed(() => { + if (!fuse || !keyword.value) { + return users.value.items; + } + + return fuse?.search(keyword.value).map((item) => item.item); +}); + const handlePaginationChange = async ({ page, size, @@ -248,6 +266,7 @@ onMounted(() => {
@@ -257,7 +276,7 @@ onMounted(() => {
-
+
{
    -
  • +