diff --git a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx index 0a9301d56..4cbd1362d 100644 --- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx +++ b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx @@ -62,7 +62,7 @@ export const IdentityProjectRow = ({ }); }} > - {project.name} + {project.name} {`${formatRoleName(roles[0].role, roles[0].customRoleName)}${ roles.length > 1 ? ` (+${roles.length - 1})` : "" }`} diff --git a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx index a005ad1c8..86d6185f5 100644 --- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx +++ b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx @@ -1,7 +1,18 @@ -import { faFolder } from "@fortawesome/free-solid-svg-icons"; +import { useMemo } from "react"; +import { + faArrowDown, + faArrowUp, + faFolder, + faMagnifyingGlass, + faSearch +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { EmptyState, + IconButton, + Input, + Pagination, Table, TableContainer, TableSkeleton, @@ -10,7 +21,9 @@ import { THead, Tr } from "@app/components/v2"; +import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetIdentityProjectMemberships } from "@app/hooks/api"; +import { OrderByDirection } from "@app/hooks/api/generic/types"; import { UsePopUpState } from "@app/hooks/usePopUp"; import { IdentityProjectRow } from "./IdentityProjectRow"; @@ -23,36 +36,115 @@ type Props = { ) => void; }; +enum IdentityProjectsOrderBy { + Name = "name" +} + export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) => { - const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId); + const { data: projectMemberships = [], isLoading } = useGetIdentityProjectMemberships(identityId); + + const { + search, + setSearch, + setPage, + page, + perPage, + setPerPage, + offset, + orderDirection, + toggleOrderDirection + } = usePagination(IdentityProjectsOrderBy.Name, { initPerPage: 10 }); + + const filteredProjectMemberships = useMemo( + () => + projectMemberships + ?.filter((membership) => + membership.project.name.toLowerCase().includes(search.trim().toLowerCase()) + ) + .sort((a, b) => { + const [membershipOne, membershipTwo] = + orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; + + return membershipOne.project.name + .toLowerCase() + .localeCompare(membershipTwo.project.name.toLowerCase()); + }) ?? [], + [projectMemberships, orderDirection, search] + ); + + useResetPageHelper({ + totalCount: filteredProjectMemberships.length, + offset, + setPage + }); + return ( - - - - - - - - - - - {isLoading && } - {!isLoading && - projectMemberships?.map((membership) => { - return ( - - ); - })} - -
NameRoleAdded On -
- {!isLoading && !projectMemberships?.length && ( - - )} -
+
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search projects..." + /> + + + + + + + + + + + + {isLoading && } + {!isLoading && + filteredProjectMemberships.slice(offset, perPage * page).map((membership) => { + return ( + + ); + })} + +
+
+ Name + + + +
+
RoleAdded On +
+ {Boolean(filteredProjectMemberships.length) && ( + + )} + {!isLoading && !filteredProjectMemberships?.length && ( + + )} +
+
); }; diff --git a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx index ab50937d9..eda562055 100644 --- a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx +++ b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx @@ -49,7 +49,6 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { perPage, setPerPage, offset, - limit, orderDirection, toggleOrderDirection } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 }); @@ -59,7 +58,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { membershipId ); - const filteredProjects = useMemo( + const filteredProjectMemberships = useMemo( () => projectMemberships ?.filter((membership) => @@ -77,7 +76,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { ); useResetPageHelper({ - totalCount: filteredProjects.length, + totalCount: filteredProjectMemberships.length, offset, setPage }); @@ -116,7 +115,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { {isLoading && } {!isLoading && - filteredProjects?.slice(offset, limit * page)?.map((membership) => { + filteredProjectMemberships.slice(offset, perPage * page).map((membership) => { return ( { })} - {Boolean(filteredProjects.length) && ( + {Boolean(filteredProjectMemberships.length) && ( )} - {!isLoading && !filteredProjects?.length && ( + {!isLoading && !filteredProjectMemberships?.length && (