devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pagination on UserList

Browse Source
This commit is contained in:
Carlos Mesquita
2024-09-09 01:22:13 +01:00
parent 02564c8426
commit 9177a6b2ac
4 changed files with 111 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/hooks/useUsers.tsx
View File

@@ -9,7 +9,7 @@ export const userHashStudent = {type: "student"} as {type: Type};
export const userHashTeacher = {type: "teacher"} as {type: Type}; export const userHashTeacher = {type: "teacher"} as {type: Type};
export const userHashCorporate = {type: "corporate"} as {type: Type}; export const userHashCorporate = {type: "corporate"} as {type: Type};
export default function useUsers(props?: {type?: string; page?: number; size?: number; orderBy?: string; direction?: "asc" | "desc"}) { export default function useUsers(props?: {type?: string; page?: number; size?: number; orderBy?: string; direction?: "asc" | "desc", searchTerm?: string | undefined}) {
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -35,7 +35,7 @@ export default function useUsers(props?: {type?: string; page?: number; size?: n
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(getData, [props?.page, props?.size, props?.type, props?.orderBy, props?.direction]); useEffect(getData, [props?.page, props?.size, props?.type, props?.orderBy, props?.direction, props?.searchTerm]);
return {users, total, isLoading, isError, reload: getData}; return {users, total, isLoading, isError, reload: getData};
} }

170
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -1,37 +1,38 @@
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import {PERMISSIONS} from "@/constants/userPermissions"; import { PERMISSIONS } from "@/constants/userPermissions";
import useGroups from "@/hooks/useGroups"; import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user"; import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
import {Popover, Transition} from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table"; import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import {capitalize, reverse} from "lodash"; import { capitalize, reverse } from "lodash";
import moment from "moment"; import moment from "moment";
import {Fragment, useEffect, useState, useMemo} from "react"; import { Fragment, useEffect, useState, useMemo } from "react";
import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs"; import { BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash } from "react-icons/bs";
import {toast} from "react-toastify"; import { toast } from "react-toastify";
import {countries, TCountries} from "countries-list"; import { countries, TCountries } from "countries-list";
import countryCodes from "country-codes-list"; import countryCodes from "country-codes-list";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import UserCard from "@/components/UserCard"; import UserCard from "@/components/UserCard";
import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user"; import { getUserCompanyName, isAgentUser, USER_TYPE_LABELS } from "@/resources/user";
import useFilterStore from "@/stores/listFilterStore"; import useFilterStore from "@/stores/listFilterStore";
import {useRouter} from "next/router"; import { useRouter } from "next/router";
import {isCorporateUser} from "@/resources/user"; import { isCorporateUser } from "@/resources/user";
import {useListSearch} from "@/hooks/useListSearch"; import { useListSearch } from "@/hooks/useListSearch";
import {getUserCorporate} from "@/utils/groups"; import { getUserCorporate } from "@/utils/groups";
import {asyncSorter} from "@/utils"; import { asyncSorter } from "@/utils";
import {exportListToExcel, UserListRow} from "@/utils/users"; import { exportListToExcel, UserListRow } from "@/utils/users";
import {checkAccess} from "@/utils/permissions"; import { checkAccess } from "@/utils/permissions";
import {PermissionType} from "@/interfaces/permissions"; import { PermissionType } from "@/interfaces/permissions";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import useUserBalance from "@/hooks/useUserBalance"; import useUserBalance from "@/hooks/useUserBalance";
import Input from "@/components/Low/Input";
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]]; const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => { const CompanyNameCell = ({ users, user, groups }: { user: User; users: User[]; groups: Group[] }) => {
const [companyName, setCompanyName] = useState(""); const [companyName, setCompanyName] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -59,20 +60,13 @@ export default function UserList({
const [displayUsers, setDisplayUsers] = useState<User[]>([]); const [displayUsers, setDisplayUsers] = useState<User[]>([]);
const [selectedUser, setSelectedUser] = useState<User>(); const [selectedUser, setSelectedUser] = useState<User>();
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined);
const userHash = useMemo( const { users, total, isLoading, reload } = useUsers({type: type, size: 16, page: page, searchTerm: searchTerm});
() => ({
type,
size: 16,
page,
}),
[type, page],
);
const {users, total, isLoading, reload} = useUsers(userHash); const { permissions } = usePermissions(user?.id || "");
const {permissions} = usePermissions(user?.id || ""); const { balance } = useUserBalance();
const {balance} = useUserBalance(); const { groups } = useGroups({
const {groups} = useGroups({
admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined, admin: user && ["corporate", "teacher", "mastercorporate"].includes(user?.type) ? user.id : undefined,
userType: user?.type, userType: user?.type,
}); });
@@ -106,20 +100,20 @@ export default function UserList({
if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return; if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
axios axios
.delete<{ok: boolean}>(`/api/user?id=${user.id}`) .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
.then(() => { .then(() => {
toast.success("User deleted successfully!"); toast.success("User deleted successfully!");
reload(); reload();
}) })
.catch(() => { .catch(() => {
toast.error("Something went wrong!", {toastId: "delete-error"}); toast.error("Something went wrong!", { toastId: "delete-error" });
}) })
.finally(reload); .finally(reload);
}; };
const verifyAccount = (user: User) => { const verifyAccount = (user: User) => {
axios axios
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
...user, ...user,
isVerified: true, isVerified: true,
}) })
@@ -128,22 +122,21 @@ export default function UserList({
reload(); reload();
}) })
.catch(() => { .catch(() => {
toast.error("Something went wrong!", {toastId: "update-error"}); toast.error("Something went wrong!", { toastId: "update-error" });
}); });
}; };
const toggleDisableAccount = (user: User) => { const toggleDisableAccount = (user: User) => {
if ( if (
!confirm( !confirm(
`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${ `Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${user.name
user.name
}'s account? This change is usually related to their payment state.`, }'s account? This change is usually related to their payment state.`,
) )
) )
return; return;
axios axios
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
...user, ...user,
status: user.status === "disabled" ? "active" : "disabled", status: user.status === "disabled" ? "active" : "disabled",
}) })
@@ -152,18 +145,18 @@ export default function UserList({
reload(); reload();
}) })
.catch(() => { .catch(() => {
toast.error("Something went wrong!", {toastId: "update-error"}); toast.error("Something went wrong!", { toastId: "update-error" });
}); });
}; };
const SorterArrow = ({name}: {name: string}) => { const SorterArrow = ({ name }: { name: string }) => {
if (sorter === name) return <BsArrowUp />; if (sorter === name) return <BsArrowUp />;
if (sorter === reverseString(name)) return <BsArrowDown />; if (sorter === reverseString(name)) return <BsArrowDown />;
return <BsArrowDownUp />; return <BsArrowDownUp />;
}; };
const actionColumn = ({row}: {row: {original: User}}) => { const actionColumn = ({ row }: { row: { original: User } }) => {
const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as { const updateUserPermission = PERMISSIONS.updateUser[row.original.type] as {
list: Type[]; list: Type[];
perm: PermissionType; perm: PermissionType;
@@ -208,11 +201,11 @@ export default function UserList({
<SorterArrow name="name" /> <SorterArrow name="name" />
</button> </button>
) as any, ) as any,
cell: ({row, getValue}) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer", "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)} )}
onClick={() => onClick={() =>
checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
@@ -230,9 +223,8 @@ export default function UserList({
) as any, ) as any,
cell: (info) => cell: (info) =>
info.getValue() info.getValue()
? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${ ? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${countries[info.getValue() as unknown as keyof TCountries]?.name
countries[info.getValue() as unknown as keyof TCountries]?.name } (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
} (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
: "N/A", : "N/A",
}), }),
columnHelper.accessor("demographicInformation.phone", { columnHelper.accessor("demographicInformation.phone", {
@@ -298,11 +290,11 @@ export default function UserList({
<SorterArrow name="name" /> <SorterArrow name="name" />
</button> </button>
) as any, ) as any,
cell: ({row, getValue}) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer", "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)} )}
onClick={() => onClick={() =>
checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) ? setSelectedUser(row.original) : null
@@ -318,11 +310,11 @@ export default function UserList({
<SorterArrow name="email" /> <SorterArrow name="email" />
</button> </button>
) as any, ) as any,
cell: ({row, getValue}) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) && PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer", "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)} )}
onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}> onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
{getValue()} {getValue()}
@@ -505,19 +497,17 @@ export default function UserList({
return a.id.localeCompare(b.id); return a.id.localeCompare(b.id);
}; };
const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
const table = useReactTable({ const table = useReactTable({
data: filteredRows, data: displayUsers,
columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any, columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}); });
const downloadExcel = () => { const downloadExcel = () => {
const csv = exportListToExcel(filteredRows, users, groups); const csv = exportListToExcel(displayUsers, users, groups);
const element = document.createElement("a"); const element = document.createElement("a");
const file = new Blob([csv], {type: "text/csv"}); const file = new Blob([csv], { type: "text/csv" });
element.href = URL.createObjectURL(file); element.href = URL.createObjectURL(file);
element.download = "users.csv"; element.download = "users.csv";
document.body.appendChild(element); document.body.appendChild(element);
@@ -551,53 +541,53 @@ export default function UserList({
onViewStudents={ onViewStudents={
(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0 (selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
? () => { ? () => {
appendUserFilters({ appendUserFilters({
id: "view-students", id: "view-students",
filter: viewStudentFilter, filter: viewStudentFilter,
}); });
appendUserFilters({ appendUserFilters({
id: "belongs-to-admin", id: "belongs-to-admin",
filter: belongsToAdminFilter, filter: belongsToAdminFilter,
}); });
router.push("/list/users"); router.push("/list/users");
} }
: undefined : undefined
} }
onViewTeachers={ onViewTeachers={
(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0 (selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
? () => { ? () => {
appendUserFilters({ appendUserFilters({
id: "view-teachers", id: "view-teachers",
filter: viewTeacherFilter, filter: viewTeacherFilter,
}); });
appendUserFilters({ appendUserFilters({
id: "belongs-to-admin", id: "belongs-to-admin",
filter: belongsToAdminFilter, filter: belongsToAdminFilter,
}); });
router.push("/list/users"); router.push("/list/users");
} }
: undefined : undefined
} }
onViewCorporate={ onViewCorporate={
selectedUser.type === "teacher" || selectedUser.type === "student" selectedUser.type === "teacher" || selectedUser.type === "student"
? () => { ? () => {
appendUserFilters({ appendUserFilters({
id: "view-corporate", id: "view-corporate",
filter: (x: User) => x.type === "corporate", filter: (x: User) => x.type === "corporate",
}); });
appendUserFilters({ appendUserFilters({
id: "belongs-to-admin", id: "belongs-to-admin",
filter: (x: User) => filter: (x: User) =>
groups groups
.filter((g) => g.participants.includes(selectedUser.id)) .filter((g) => g.participants.includes(selectedUser.id))
.flatMap((g) => [g.admin, ...g.participants]) .flatMap((g) => [g.admin, ...g.participants])
.includes(x.id), .includes(x.id),
}); });
router.push("/list/users"); router.push("/list/users");
} }
: undefined : undefined
} }
onClose={(shouldReload) => { onClose={(shouldReload) => {
@@ -619,7 +609,7 @@ export default function UserList({
</Modal> </Modal>
<div className="w-full flex flex-col gap-2"> <div className="w-full flex flex-col gap-2">
<div className="w-full flex gap-2 items-end"> <div className="w-full flex gap-2 items-end">
{renderSearch()} <Input label="Search" type="text" name="search" onChange={setSearchTerm} placeholder="Enter search text" value={searchTerm} />
<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}> <Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
Download List Download List
</Button> </Button>

4
src/pages/api/users/list.ts
View File

@@ -19,7 +19,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
page, page,
orderBy, orderBy,
direction = "desc", direction = "desc",
} = req.query as {size?: string; type?: Type; page?: string; orderBy?: string; direction?: "asc" | "desc"}; searchTerm
} = req.query as {size?: string; type?: Type; page?: string; orderBy?: string; direction?: "asc" | "desc"; searchTerm?: string | undefined};
const {users, total} = await getLinkedUsers( const {users, total} = await getLinkedUsers(
req.session.user?.id, req.session.user?.id,
@@ -29,6 +30,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
size !== undefined ? parseInt(size) : undefined, size !== undefined ? parseInt(size) : undefined,
orderBy, orderBy,
direction, direction,
searchTerm
); );
res.status(200).json({users, total}); res.status(200).json({users, total});

41
src/utils/users.be.ts
View File

@@ -1,7 +1,7 @@
import {CorporateUser, Group, Type, User} from "@/interfaces/user"; import { CorporateUser, Group, Type, User } from "@/interfaces/user";
import {getGroupsForUser, getParticipantGroups, getUserGroups, getUsersGroups} from "./groups.be"; import { getGroupsForUser, getParticipantGroups, getUserGroups, getUsersGroups } from "./groups.be";
import {last, uniq, uniqBy} from "lodash"; import { last, uniq, uniqBy } from "lodash";
import {getUserCodes} from "./codes.be"; import { getUserCodes } from "./codes.be";
import moment from "moment"; import moment from "moment";
import client from "@/lib/mongodb"; import client from "@/lib/mongodb";
@@ -12,7 +12,7 @@ export async function getUsers() {
} }
export async function getUser(id: string): Promise<User | undefined> { export async function getUser(id: string): Promise<User | undefined> {
const user = await db.collection("users").findOne<User>({id}); const user = await db.collection("users").findOne<User>({ id });
return !!user ? user : undefined; return !!user ? user : undefined;
} }
@@ -21,7 +21,7 @@ export async function getSpecificUsers(ids: string[]) {
return await db return await db
.collection("users") .collection("users")
.find<User>({id: {$in: ids}}) .find<User>({ id: { $in: ids } })
.toArray(); .toArray();
} }
@@ -33,21 +33,32 @@ export async function getLinkedUsers(
size?: number, size?: number,
sort?: string, sort?: string,
direction?: "asc" | "desc", direction?: "asc" | "desc",
searchTerm?: string | undefined,
) { ) {
const filters = { const filters: any = {};
...(!!type ? {type} : {}),
}; if (type) {
filters.type = type;
}
if (searchTerm) {
filters.$or = [
{ name: { $regex: searchTerm, $options: 'i' } },
{ email: { $regex: searchTerm, $options: 'i' } },
{ company: { $regex: searchTerm, $options: 'i' } },
];
}
if (!userID || userType === "admin" || userType === "developer") { if (!userID || userType === "admin" || userType === "developer") {
const users = await db const users = await db
.collection("users") .collection("users")
.find<User>(filters) .find<User>(filters)
.sort(sort ? {[sort]: direction === "desc" ? -1 : 1} : {}) .sort(sort ? { [sort]: direction === "desc" ? -1 : 1 } : {})
.skip(page && size ? page * size : 0) .skip(page && size ? page * size : 0)
.limit(size || 0) .limit(size || 0)
.toArray(); .toArray();
const total = await db.collection("users").countDocuments(filters); const total = await db.collection("users").countDocuments(filters);
return {users, total}; return { users, total };
} }
const adminGroups = await getUserGroups(userID); const adminGroups = await getUserGroups(userID);
@@ -61,17 +72,17 @@ export async function getLinkedUsers(
]); ]);
// ⨯ [FirebaseError: Invalid Query. A non-empty array is required for 'in' filters.] { // ⨯ [FirebaseError: Invalid Query. A non-empty array is required for 'in' filters.] {
if (participants.length === 0) return {users: [], total: 0}; if (participants.length === 0) return { users: [], total: 0 };
const users = await db const users = await db
.collection("users") .collection("users")
.find<User>({...filters, id: {$in: participants}}) .find<User>({ ...filters, id: { $in: participants } })
.skip(page && size ? page * size : 0) .skip(page && size ? page * size : 0)
.limit(size || 0) .limit(size || 0)
.toArray(); .toArray();
const total = await db.collection("users").countDocuments({...filters, id: {$in: participants}}); const total = await db.collection("users").countDocuments({ ...filters, id: { $in: participants } });
return {users, total}; return { users, total };
} }
export async function getUserBalance(user: User) { export async function getUserBalance(user: User) {