943 lines
30 KiB
TypeScript
943 lines
30 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import { PERMISSIONS } from "@/constants/userPermissions";
|
|
import useGroups from "@/hooks/useGroups";
|
|
import useUsers from "@/hooks/useUsers";
|
|
import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
import {
|
|
createColumnHelper,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
import axios from "axios";
|
|
import clsx from "clsx";
|
|
import { capitalize, reverse } from "lodash";
|
|
import moment from "moment";
|
|
import { Fragment, useEffect, useState } from "react";
|
|
import {
|
|
BsArrowDown,
|
|
BsArrowDownUp,
|
|
BsArrowUp,
|
|
BsCheck,
|
|
BsCheckCircle,
|
|
BsEye,
|
|
BsFillExclamationOctagonFill,
|
|
BsPerson,
|
|
BsTrash,
|
|
} from "react-icons/bs";
|
|
import { toast } from "react-toastify";
|
|
import { countries, TCountries } from "countries-list";
|
|
import countryCodes from "country-codes-list";
|
|
import Modal from "@/components/Modal";
|
|
import UserCard from "@/components/UserCard";
|
|
import {
|
|
getUserCompanyName,
|
|
isAgentUser,
|
|
USER_TYPE_LABELS,
|
|
} from "@/resources/user";
|
|
import useFilterStore from "@/stores/listFilterStore";
|
|
import { useRouter } from "next/router";
|
|
import { isCorporateUser } from "@/resources/user";
|
|
import { useListSearch } from "@/hooks/useListSearch";
|
|
import { getUserCorporate } from "@/utils/groups";
|
|
import { asyncSorter } from "@/utils";
|
|
import { exportListToExcel, UserListRow } from "@/utils/users";
|
|
|
|
const columnHelper = createColumnHelper<User>();
|
|
const searchFields = [
|
|
["name"],
|
|
["email"],
|
|
["corporateInformation", "companyInformation", "name"],
|
|
];
|
|
|
|
const CompanyNameCell = ({
|
|
users,
|
|
user,
|
|
groups,
|
|
}: {
|
|
user: User;
|
|
users: User[];
|
|
groups: Group[];
|
|
}) => {
|
|
const [companyName, setCompanyName] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const name = getUserCompanyName(user, users, groups);
|
|
setCompanyName(name);
|
|
}, [user, users, groups]);
|
|
|
|
return isLoading ? (
|
|
<span className="animate-pulse">Loading...</span>
|
|
) : (
|
|
<>{companyName}</>
|
|
);
|
|
};
|
|
|
|
export default function UserList({
|
|
user,
|
|
filters = [],
|
|
renderHeader,
|
|
}: {
|
|
user: User;
|
|
filters?: ((user: User) => boolean)[];
|
|
renderHeader?: (total: number) => JSX.Element;
|
|
}) {
|
|
const [showDemographicInformation, setShowDemographicInformation] =
|
|
useState(false);
|
|
const [sorter, setSorter] = useState<string>();
|
|
const [displayUsers, setDisplayUsers] = useState<User[]>([]);
|
|
const [selectedUser, setSelectedUser] = useState<User>();
|
|
|
|
const { users, reload } = useUsers();
|
|
const { groups } = useGroups(
|
|
user && (user?.type === "corporate" || user?.type === "teacher")
|
|
? user.id
|
|
: undefined
|
|
);
|
|
|
|
const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
|
|
const router = useRouter();
|
|
|
|
const expirationDateColor = (date: Date) => {
|
|
const momentDate = moment(date);
|
|
const today = moment(new Date());
|
|
|
|
if (today.isAfter(momentDate))
|
|
return "!text-mti-red-light font-bold line-through";
|
|
if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
|
|
if (today.add(2, "weeks").isAfter(momentDate))
|
|
return "!text-mti-rose-light";
|
|
if (today.add(1, "months").isAfter(momentDate))
|
|
return "!text-mti-orange-light";
|
|
};
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
if (user && users) {
|
|
const filterUsers =
|
|
user.type === "corporate" || user.type === "teacher"
|
|
? users.filter((u) =>
|
|
groups.flatMap((g) => g.participants).includes(u.id)
|
|
)
|
|
: users;
|
|
|
|
const filteredUsers = filters.reduce(
|
|
(d, f) => d.filter(f),
|
|
filterUsers
|
|
);
|
|
const sortedUsers = await asyncSorter<User>(
|
|
filteredUsers,
|
|
sortFunction
|
|
);
|
|
console.log(sortedUsers);
|
|
|
|
setDisplayUsers([...sortedUsers]);
|
|
}
|
|
})();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [user, users, sorter, groups]);
|
|
|
|
const deleteAccount = (user: User) => {
|
|
if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
|
|
return;
|
|
|
|
axios
|
|
.delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
|
|
.then(() => {
|
|
toast.success("User deleted successfully!");
|
|
reload();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", { toastId: "delete-error" });
|
|
})
|
|
.finally(reload);
|
|
};
|
|
|
|
const updateAccountType = (user: User, type: Type) => {
|
|
if (
|
|
!confirm(
|
|
`Are you sure you want to update ${
|
|
user.name
|
|
}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
|
|
)
|
|
)
|
|
return;
|
|
|
|
axios
|
|
.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
|
|
...user,
|
|
type,
|
|
})
|
|
.then(() => {
|
|
toast.success("User type updated successfully!");
|
|
reload();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", { toastId: "update-error" });
|
|
});
|
|
};
|
|
|
|
const verifyAccount = (user: User) => {
|
|
axios
|
|
.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
|
|
...user,
|
|
isVerified: true,
|
|
})
|
|
.then(() => {
|
|
toast.success("User verified successfully!");
|
|
reload();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", { toastId: "update-error" });
|
|
});
|
|
};
|
|
|
|
const toggleDisableAccount = (user: User) => {
|
|
if (
|
|
!confirm(
|
|
`Are you sure you want to ${
|
|
user.status === "disabled" ? "enable" : "disable"
|
|
} ${
|
|
user.name
|
|
}'s account? This change is usually related to their payment state.`
|
|
)
|
|
)
|
|
return;
|
|
|
|
axios
|
|
.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
|
|
...user,
|
|
status: user.status === "disabled" ? "active" : "disabled",
|
|
})
|
|
.then(() => {
|
|
toast.success(
|
|
`User ${
|
|
user.status === "disabled" ? "enabled" : "disabled"
|
|
} successfully!`
|
|
);
|
|
reload();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", { toastId: "update-error" });
|
|
});
|
|
};
|
|
|
|
const SorterArrow = ({ name }: { name: string }) => {
|
|
if (sorter === name) return <BsArrowUp />;
|
|
if (sorter === reverseString(name)) return <BsArrowDown />;
|
|
|
|
return <BsArrowDownUp />;
|
|
};
|
|
|
|
const actionColumn = ({ row }: { row: { original: User } }) => {
|
|
return (
|
|
<div className="flex gap-4">
|
|
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
|
|
<Popover className="relative">
|
|
<Popover.Button>
|
|
<div data-tip="Change Type" className="cursor-pointer tooltip">
|
|
<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
</div>
|
|
</Popover.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
|
|
<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
|
|
<Button
|
|
onClick={() => updateAccountType(row.original, "student")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={
|
|
row.original.type === "student" ||
|
|
!PERMISSIONS.generateCode["student"].includes(user.type)
|
|
}
|
|
>
|
|
Student
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAccountType(row.original, "teacher")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={
|
|
row.original.type === "teacher" ||
|
|
!PERMISSIONS.generateCode["teacher"].includes(user.type)
|
|
}
|
|
>
|
|
Teacher
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAccountType(row.original, "corporate")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={
|
|
row.original.type === "corporate" ||
|
|
!PERMISSIONS.generateCode["corporate"].includes(user.type)
|
|
}
|
|
>
|
|
Corporate
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAccountType(row.original, "admin")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={
|
|
row.original.type === "admin" ||
|
|
!PERMISSIONS.generateCode["admin"].includes(user.type)
|
|
}
|
|
>
|
|
Admin
|
|
</Button>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</Popover>
|
|
)}
|
|
{!row.original.isVerified &&
|
|
PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
|
|
<div
|
|
data-tip="Verify User"
|
|
className="cursor-pointer tooltip"
|
|
onClick={() => verifyAccount(row.original)}
|
|
>
|
|
<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
</div>
|
|
)}
|
|
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
|
|
<div
|
|
data-tip={
|
|
row.original.status === "disabled"
|
|
? "Enable User"
|
|
: "Disable User"
|
|
}
|
|
className="cursor-pointer tooltip"
|
|
onClick={() => toggleDisableAccount(row.original)}
|
|
>
|
|
{row.original.status === "disabled" ? (
|
|
<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
) : (
|
|
<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
)}
|
|
</div>
|
|
)}
|
|
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
|
|
<div
|
|
data-tip="Delete"
|
|
className="cursor-pointer tooltip"
|
|
onClick={() => deleteAccount(row.original)}
|
|
>
|
|
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const demographicColumns = [
|
|
columnHelper.accessor("name", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
|
|
>
|
|
<span>Name</span>
|
|
<SorterArrow name="name" />
|
|
</button>
|
|
) as any,
|
|
cell: ({ row, getValue }) => (
|
|
<div
|
|
className={clsx(
|
|
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"
|
|
)}
|
|
onClick={() =>
|
|
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
|
|
? setSelectedUser(row.original)
|
|
: null
|
|
}
|
|
>
|
|
{getValue()}
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor("demographicInformation.country", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
|
|
>
|
|
<span>Country</span>
|
|
<SorterArrow name="country" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) =>
|
|
info.getValue()
|
|
? `${
|
|
countryCodes.findOne("countryCode" as any, info.getValue()).flag
|
|
} ${
|
|
countries[info.getValue() as unknown as keyof TCountries].name
|
|
} (+${
|
|
countryCodes.findOne("countryCode" as any, info.getValue())
|
|
.countryCallingCode
|
|
})`
|
|
: "Not available",
|
|
}),
|
|
columnHelper.accessor("demographicInformation.phone", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
|
|
>
|
|
<span>Phone</span>
|
|
<SorterArrow name="phone" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => info.getValue() || "Not available",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor(
|
|
(x) =>
|
|
x.type === "corporate"
|
|
? x.demographicInformation?.position
|
|
: x.demographicInformation?.employment,
|
|
{
|
|
id: "employment",
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() =>
|
|
setSorter((prev) => selectSorter(prev, "employment"))
|
|
}
|
|
>
|
|
<span>Employment/Position</span>
|
|
<SorterArrow name="employment" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) =>
|
|
(info.row.original.type === "corporate"
|
|
? info.getValue()
|
|
: capitalize(info.getValue())) || "Not available",
|
|
enableSorting: true,
|
|
}
|
|
),
|
|
columnHelper.accessor("demographicInformation.gender", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
|
|
>
|
|
<span>Gender</span>
|
|
<SorterArrow name="gender" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => capitalize(info.getValue()) || "Not available",
|
|
enableSorting: true,
|
|
}),
|
|
{
|
|
header: (
|
|
<span
|
|
className="cursor-pointer"
|
|
onClick={() => setShowDemographicInformation((prev) => !prev)}
|
|
>
|
|
Switch
|
|
</span>
|
|
),
|
|
id: "actions",
|
|
cell: actionColumn,
|
|
},
|
|
];
|
|
|
|
const defaultColumns = [
|
|
columnHelper.accessor("name", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
|
|
>
|
|
<span>Name</span>
|
|
<SorterArrow name="name" />
|
|
</button>
|
|
) as any,
|
|
cell: ({ row, getValue }) => (
|
|
<div
|
|
className={clsx(
|
|
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"
|
|
)}
|
|
onClick={() =>
|
|
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
|
|
? setSelectedUser(row.original)
|
|
: null
|
|
}
|
|
>
|
|
{row.original.type === "corporate"
|
|
? row.original.corporateInformation?.companyInformation?.name ||
|
|
getValue()
|
|
: getValue()}
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor("email", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
|
|
>
|
|
<span>E-mail</span>
|
|
<SorterArrow name="email" />
|
|
</button>
|
|
) as any,
|
|
cell: ({ row, getValue }) => (
|
|
<div
|
|
className={clsx(
|
|
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"
|
|
)}
|
|
onClick={() =>
|
|
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
|
|
? setSelectedUser(row.original)
|
|
: null
|
|
}
|
|
>
|
|
{getValue()}
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor("type", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
|
|
>
|
|
<span>Type</span>
|
|
<SorterArrow name="type" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => USER_TYPE_LABELS[info.getValue()],
|
|
}),
|
|
columnHelper.accessor("corporateInformation.companyInformation.name", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
|
|
>
|
|
<span>Company Name</span>
|
|
<SorterArrow name="companyName" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => (
|
|
<CompanyNameCell
|
|
user={info.row.original}
|
|
users={users}
|
|
groups={groups}
|
|
/>
|
|
),
|
|
}),
|
|
columnHelper.accessor("subscriptionExpirationDate", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
|
|
>
|
|
<span>Expiry Date</span>
|
|
<SorterArrow name="expiryDate" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => (
|
|
<span
|
|
className={clsx(
|
|
info.getValue()
|
|
? expirationDateColor(moment(info.getValue()).toDate())
|
|
: ""
|
|
)}
|
|
>
|
|
{!info.getValue()
|
|
? "No expiry date"
|
|
: moment(info.getValue()).format("DD/MM/YYYY")}
|
|
</span>
|
|
),
|
|
}),
|
|
columnHelper.accessor("isVerified", {
|
|
header: (
|
|
<button
|
|
className="flex gap-2 items-center"
|
|
onClick={() =>
|
|
setSorter((prev) => selectSorter(prev, "verification"))
|
|
}
|
|
>
|
|
<span>Verification</span>
|
|
<SorterArrow name="verification" />
|
|
</button>
|
|
) as any,
|
|
cell: (info) => (
|
|
<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
|
|
<div
|
|
className={clsx(
|
|
"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
|
|
"transition duration-300 ease-in-out",
|
|
info.getValue() && "!bg-mti-purple-light "
|
|
)}
|
|
>
|
|
<BsCheck color="white" className="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
),
|
|
}),
|
|
{
|
|
header: (
|
|
<span
|
|
className="cursor-pointer"
|
|
onClick={() => setShowDemographicInformation((prev) => !prev)}
|
|
>
|
|
Switch
|
|
</span>
|
|
),
|
|
id: "actions",
|
|
cell: actionColumn,
|
|
},
|
|
];
|
|
|
|
const reverseString = (str: string) => reverse(str.split("")).join("");
|
|
|
|
const selectSorter = (previous: string | undefined, name: string) => {
|
|
if (!previous) return name;
|
|
if (previous === name) return reverseString(name);
|
|
|
|
return undefined;
|
|
};
|
|
|
|
const sortFunction = async (a: User, b: User) => {
|
|
if (sorter === "name" || sorter === reverseString("name"))
|
|
return sorter === "name"
|
|
? a.name.localeCompare(b.name)
|
|
: b.name.localeCompare(a.name);
|
|
|
|
if (sorter === "email" || sorter === reverseString("email"))
|
|
return sorter === "email"
|
|
? a.email.localeCompare(b.email)
|
|
: b.email.localeCompare(a.email);
|
|
|
|
if (sorter === "type" || sorter === reverseString("type"))
|
|
return sorter === "type"
|
|
? userTypes.findIndex((t) => a.type === t) -
|
|
userTypes.findIndex((t) => b.type === t)
|
|
: userTypes.findIndex((t) => b.type === t) -
|
|
userTypes.findIndex((t) => a.type === t);
|
|
|
|
if (sorter === "verification" || sorter === reverseString("verification"))
|
|
return sorter === "verification"
|
|
? a.isVerified.toString().localeCompare(b.isVerified.toString())
|
|
: b.isVerified.toString().localeCompare(a.isVerified.toString());
|
|
|
|
if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
|
|
if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
|
|
return sorter === "expiryDate" ? -1 : 1;
|
|
if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
|
|
return sorter === "expiryDate" ? 1 : -1;
|
|
if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
|
|
return 0;
|
|
if (
|
|
moment(a.subscriptionExpirationDate).isAfter(
|
|
b.subscriptionExpirationDate
|
|
)
|
|
)
|
|
return sorter === "expiryDate" ? -1 : 1;
|
|
if (
|
|
moment(b.subscriptionExpirationDate).isAfter(
|
|
a.subscriptionExpirationDate
|
|
)
|
|
)
|
|
return sorter === "expiryDate" ? 1 : -1;
|
|
return 0;
|
|
}
|
|
|
|
if (sorter === "country" || sorter === reverseString("country")) {
|
|
if (
|
|
!a.demographicInformation?.country &&
|
|
b.demographicInformation?.country
|
|
)
|
|
return sorter === "country" ? -1 : 1;
|
|
if (
|
|
a.demographicInformation?.country &&
|
|
!b.demographicInformation?.country
|
|
)
|
|
return sorter === "country" ? 1 : -1;
|
|
if (
|
|
!a.demographicInformation?.country &&
|
|
!b.demographicInformation?.country
|
|
)
|
|
return 0;
|
|
|
|
return sorter === "country"
|
|
? a.demographicInformation!.country.localeCompare(
|
|
b.demographicInformation!.country
|
|
)
|
|
: b.demographicInformation!.country.localeCompare(
|
|
a.demographicInformation!.country
|
|
);
|
|
}
|
|
|
|
if (sorter === "phone" || sorter === reverseString("phone")) {
|
|
if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
|
|
return sorter === "phone" ? -1 : 1;
|
|
if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
|
|
return sorter === "phone" ? 1 : -1;
|
|
if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
|
|
return 0;
|
|
|
|
return sorter === "phone"
|
|
? a.demographicInformation!.phone.localeCompare(
|
|
b.demographicInformation!.phone
|
|
)
|
|
: b.demographicInformation!.phone.localeCompare(
|
|
a.demographicInformation!.phone
|
|
);
|
|
}
|
|
|
|
if (sorter === "employment" || sorter === reverseString("employment")) {
|
|
const aSortingItem =
|
|
a.type === "corporate"
|
|
? a.demographicInformation?.position
|
|
: a.demographicInformation?.employment;
|
|
const bSortingItem =
|
|
b.type === "corporate"
|
|
? b.demographicInformation?.position
|
|
: b.demographicInformation?.employment;
|
|
|
|
if (!aSortingItem && bSortingItem)
|
|
return sorter === "employment" ? -1 : 1;
|
|
if (aSortingItem && !bSortingItem)
|
|
return sorter === "employment" ? 1 : -1;
|
|
if (!aSortingItem && !bSortingItem) return 0;
|
|
|
|
return sorter === "employment"
|
|
? aSortingItem!.localeCompare(bSortingItem!)
|
|
: bSortingItem!.localeCompare(aSortingItem!);
|
|
}
|
|
|
|
if (sorter === "gender" || sorter === reverseString("gender")) {
|
|
if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
|
|
return sorter === "employment" ? -1 : 1;
|
|
if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
|
|
return sorter === "employment" ? 1 : -1;
|
|
if (
|
|
!a.demographicInformation?.gender &&
|
|
!b.demographicInformation?.gender
|
|
)
|
|
return 0;
|
|
|
|
return sorter === "gender"
|
|
? a.demographicInformation!.gender.localeCompare(
|
|
b.demographicInformation!.gender
|
|
)
|
|
: b.demographicInformation!.gender.localeCompare(
|
|
a.demographicInformation!.gender
|
|
);
|
|
}
|
|
|
|
if (sorter === "companyName" || sorter === reverseString("companyName")) {
|
|
const aCorporateName = getUserCompanyName(a, users, groups);
|
|
const bCorporateName = getUserCompanyName(b, users, groups);
|
|
if (!aCorporateName && bCorporateName)
|
|
return sorter === "companyName" ? -1 : 1;
|
|
if (aCorporateName && !bCorporateName)
|
|
return sorter === "companyName" ? 1 : -1;
|
|
if (!aCorporateName && !bCorporateName) return 0;
|
|
|
|
return sorter === "companyName"
|
|
? aCorporateName.localeCompare(bCorporateName)
|
|
: bCorporateName.localeCompare(aCorporateName);
|
|
}
|
|
|
|
return a.id.localeCompare(b.id);
|
|
};
|
|
|
|
const { rows: filteredRows, renderSearch } = useListSearch<User>(
|
|
searchFields,
|
|
displayUsers
|
|
);
|
|
|
|
const table = useReactTable({
|
|
data: filteredRows,
|
|
columns: (!showDemographicInformation
|
|
? defaultColumns
|
|
: demographicColumns) as any,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
const downloadExcel = () => {
|
|
const csv = exportListToExcel(filteredRows, users, groups);
|
|
|
|
const element = document.createElement("a");
|
|
const file = new Blob([csv], { type: "text/csv" });
|
|
element.href = URL.createObjectURL(file);
|
|
element.download = "users.csv";
|
|
document.body.appendChild(element);
|
|
element.click();
|
|
document.body.removeChild(element);
|
|
};
|
|
|
|
const viewStudentFilter = (x: User) => x.type === "student";
|
|
const viewTeacherFilter = (x: User) => x.type === "teacher";
|
|
const belongsToAdminFilter = (x: User) => {
|
|
if (!selectedUser) return false;
|
|
return groups
|
|
.filter(
|
|
(g) =>
|
|
g.admin === selectedUser.id ||
|
|
g.participants.includes(selectedUser.id)
|
|
)
|
|
.flatMap((g) => g.participants)
|
|
.includes(x.id);
|
|
};
|
|
|
|
const viewStudentFilterBelongsToAdmin = (x: User) =>
|
|
x.type === "student" && belongsToAdminFilter(x);
|
|
const viewTeacherFilterBelongsToAdmin = (x: User) =>
|
|
x.type === "teacher" && belongsToAdminFilter(x);
|
|
|
|
const renderUserCard = (selectedUser: User) => {
|
|
const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
|
|
const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
|
|
return (
|
|
<div className="w-full flex flex-col gap-8">
|
|
<UserCard
|
|
loggedInUser={user}
|
|
onViewStudents={
|
|
(selectedUser.type === "corporate" ||
|
|
selectedUser.type === "teacher") &&
|
|
studentsFromAdmin.length > 0
|
|
? () => {
|
|
appendUserFilters({
|
|
id: "view-students",
|
|
filter: viewStudentFilter,
|
|
});
|
|
appendUserFilters({
|
|
id: "belongs-to-admin",
|
|
filter: belongsToAdminFilter,
|
|
});
|
|
|
|
router.push("/list/users");
|
|
}
|
|
: undefined
|
|
}
|
|
onViewTeachers={
|
|
(selectedUser.type === "corporate" ||
|
|
selectedUser.type === "student") &&
|
|
teachersFromAdmin.length > 0
|
|
? () => {
|
|
appendUserFilters({
|
|
id: "view-teachers",
|
|
filter: viewTeacherFilter,
|
|
});
|
|
appendUserFilters({
|
|
id: "belongs-to-admin",
|
|
filter: belongsToAdminFilter,
|
|
});
|
|
|
|
router.push("/list/users");
|
|
}
|
|
: undefined
|
|
}
|
|
onViewCorporate={
|
|
selectedUser.type === "teacher" || selectedUser.type === "student"
|
|
? () => {
|
|
appendUserFilters({
|
|
id: "view-corporate",
|
|
filter: (x: User) => x.type === "corporate",
|
|
});
|
|
appendUserFilters({
|
|
id: "belongs-to-admin",
|
|
filter: (x: User) =>
|
|
groups
|
|
.filter((g) => g.participants.includes(selectedUser.id))
|
|
.flatMap((g) => [g.admin, ...g.participants])
|
|
.includes(x.id),
|
|
});
|
|
|
|
router.push("/list/users");
|
|
}
|
|
: undefined
|
|
}
|
|
onClose={(shouldReload) => {
|
|
setSelectedUser(undefined);
|
|
if (shouldReload) reload();
|
|
}}
|
|
user={selectedUser}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{renderHeader && renderHeader(displayUsers.length)}
|
|
<div className="w-full">
|
|
<Modal
|
|
isOpen={!!selectedUser}
|
|
onClose={() => setSelectedUser(undefined)}
|
|
>
|
|
{selectedUser && renderUserCard(selectedUser)}
|
|
</Modal>
|
|
<div className="w-full flex flex-col gap-2">
|
|
<div className="w-full flex gap-2 items-end">
|
|
{renderSearch()}
|
|
<Button
|
|
className="w-full max-w-[200px] mb-1"
|
|
variant="outline"
|
|
onClick={downloadExcel}
|
|
>
|
|
Download List
|
|
</Button>
|
|
</div>
|
|
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th className="py-4 px-4 text-left" key={header.id}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="px-2">
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr
|
|
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
|
key={row.id}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td className="px-4 py-2 items-center w-fit" key={cell.id}>
|
|
{flexRender(
|
|
cell.column.columnDef.cell,
|
|
cell.getContext()
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|