283 lines
9.6 KiB
TypeScript
283 lines
9.6 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} 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} from "lodash";
|
|
import moment from "moment";
|
|
import {Fragment, useState} from "react";
|
|
import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
|
|
import {toast} from "react-toastify";
|
|
import {countries, TCountries} from "countries-list";
|
|
import countryCodes from "country-codes-list";
|
|
|
|
const columnHelper = createColumnHelper<User>();
|
|
|
|
export default function UserList({user}: {user: User}) {
|
|
const [showDemographicInformation, setShowDemographicInformation] = useState(false);
|
|
|
|
const {users, reload} = useUsers();
|
|
const {groups} = useGroups(user ? user.id : undefined);
|
|
|
|
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"});
|
|
});
|
|
};
|
|
|
|
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.isDisabled ? "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, isDisabled: !user.isDisabled})
|
|
.then(() => {
|
|
toast.success(`User ${user.isDisabled ? "enabled" : "disabled"} successfully!`);
|
|
reload();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", {toastId: "update-error"});
|
|
});
|
|
};
|
|
|
|
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, "admin")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
|
|
Admin
|
|
</Button>
|
|
<Button
|
|
onClick={() => updateAccountType(row.original, "owner")}
|
|
className="text-sm !py-2 !px-4"
|
|
disabled={row.original.type === "owner" || !PERMISSIONS.generateCode["owner"].includes(user.type)}>
|
|
Owner
|
|
</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.isDisabled ? "Enable User" : "Disable User"}
|
|
className="cursor-pointer tooltip"
|
|
onClick={() => toggleDisableAccount(row.original)}>
|
|
{row.original.isDisabled ? (
|
|
<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: "Name",
|
|
cell: (info) => info.getValue(),
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("demographicInformation.country", {
|
|
header: "Country",
|
|
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: "Phone",
|
|
cell: (info) => info.getValue() || "Not available",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("demographicInformation.employment", {
|
|
header: "Employment",
|
|
cell: (info) => capitalize(info.getValue()) || "Not available",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("demographicInformation.gender", {
|
|
header: "Gender",
|
|
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: "Name",
|
|
cell: (info) => info.getValue(),
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("email", {
|
|
header: "E-mail",
|
|
cell: (info) => info.getValue(),
|
|
}),
|
|
columnHelper.accessor("type", {
|
|
header: "Type",
|
|
cell: (info) => capitalize(info.getValue()),
|
|
}),
|
|
columnHelper.accessor("subscriptionExpirationDate", {
|
|
header: "Expiry Date",
|
|
cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")),
|
|
}),
|
|
columnHelper.accessor("isVerified", {
|
|
header: "Verification",
|
|
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 table = useReactTable({
|
|
data:
|
|
user && (user.type === "admin" || user.type === "student")
|
|
? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
|
|
: users,
|
|
columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|