feat: search group members (#2445)

apps/client/src/features/group/components/group-members.tsx

@@ -12,13 +12,19 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import { IUser } from "@/features/user/types/user.types.ts";
 import Paginate from "@/components/common/paginate.tsx";
-import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
+import { SearchInput } from "@/components/common/search-input.tsx";
+import NoTableResults from "@/components/common/no-table-results.tsx";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
 
 export default function GroupMembersList() {
   const { t } = useTranslation();
   const { groupId } = useParams();
-  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { search, cursor, goNext, goPrev, handleSearch } =
-  const { data, isLoading } = useGroupMembersQuery(groupId, { cursor });
+    usePaginateAndSearch();
+  const { data, isLoading } = useGroupMembersQuery(groupId, {
+    cursor,
+    query: search,
+  });
   const removeGroupMember = useRemoveGroupMemberMutation();
   const { isAdmin } = useUserRole();
 
@@ -48,6 +54,7 @@ export default function GroupMembersList() {
 
   return (
     <>
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Thead>
@@ -59,11 +66,15 @@ export default function GroupMembersList() {
           </Table.Thead>
 
           <Table.Tbody>
-            {data?.items.map((user: IUser, index: number) => (
+            {data?.items.length > 0 ? (
+              data?.items.map((user: IUser, index: number) => (
                 <Table.Tr key={index}>
                   <Table.Td>
                     <Group gap="sm" wrap="nowrap">
-                    <CustomAvatar avatarUrl={user.avatarUrl} name={user.name} />
+                      <CustomAvatar
+                        avatarUrl={user.avatarUrl}
+                        name={user.name}
+                      />
                       <div>
                         <Text fz="sm" fw={500} lineClamp={1}>
                           {user.name}
@@ -107,7 +118,10 @@ export default function GroupMembersList() {
                     )}
                   </Table.Td>
                 </Table.Tr>
-            ))}
+              ))
+            ) : (
+              <NoTableResults colSpan={3} />
+            )}
           </Table.Tbody>
         </Table>
       </Table.ScrollContainer>

apps/server/src/database/repos/group/group-user.repo.ts

@@ -60,6 +60,10 @@ export class GroupUserRepo {
           sql`f_unaccent(users.name)`,
           'ilike',
           sql`f_unaccent(${'%' + pagination.query + '%'})`,
+        ).or(
+          sql`users.email`,
+          'ilike',
+          sql`f_unaccent(${'%' + pagination.query + '%'})`,
         ),
       );
     }