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 ( - - - - - - - - - {groups?.map((group) => ( - - ))} - -
Name -
- {!isLoading && !groups?.length && ( - - )} -
+
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search projects..." + /> + + + + + + + + + {filteredGroupMemberships.slice(offset, perPage * page).map((group) => ( + + ))} + +
+
+ Name + + + +
+
+
+ {Boolean(filteredGroupMemberships.length) && ( + + )} + {!isLoading && !filteredGroupMemberships?.length && ( + + )} +
+
); };