diff --git a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx
index 15299da26..999ffe794 100644
--- a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx
+++ b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx
@@ -1,6 +1,27 @@
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+ faArrowDown,
+ faArrowUp,
+ faMagnifyingGlass,
+ faSearch,
+ faUser
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { EmptyState, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import {
+ EmptyState,
+ IconButton,
+ Input,
+ Pagination,
+ Table,
+ TableContainer,
+ TBody,
+ Th,
+ THead,
+ Tr
+} from "@app/components/v2";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
import { OrgUser } from "@app/hooks/api/types";
import { useListUserGroupMemberships } from "@app/hooks/api/users/queries";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -12,31 +33,105 @@ type Props = {
handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
};
-export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
- const { data: groups, isLoading } = useListUserGroupMemberships(orgMembership.user.username);
+enum UserGroupsOrderBy {
+ Name = "name"
+}
+export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
+ const { data: groupMemberships = [], isLoading } = useListUserGroupMemberships(
+ orgMembership.user.username
+ );
+
+ const {
+ search,
+ setSearch,
+ setPage,
+ page,
+ perPage,
+ setPerPage,
+ offset,
+ orderDirection,
+ toggleOrderDirection
+ } = usePagination(UserGroupsOrderBy.Name, { initPerPage: 10 });
+
+ const filteredGroupMemberships = useMemo(
+ () =>
+ groupMemberships
+ ?.filter((group) => group.name.toLowerCase().includes(search.trim().toLowerCase()))
+ .sort((a, b) => {
+ const [membershipOne, membershipTwo] =
+ orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+ return membershipOne.name.toLowerCase().localeCompare(membershipTwo.name.toLowerCase());
+ }),
+ [groupMemberships, orderDirection, search]
+ );
+
+ useResetPageHelper({
+ totalCount: filteredGroupMemberships.length,
+ offset,
+ setPage
+ });
return (
-
-
-
- {!isLoading && !groups?.length && (
-
-
-
-
- {groups?.map((group) => (
- Name
-
-
|
+
+ Name
+
+ |
+ + |
|---|