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

Added more options to the User List

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-26 13:23:53 +01:00
parent b0a11a5f8d
commit 733138f2be
6 changed files with 122 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,46 @@
import Button from "@/components/Low/Button";
import {PERMISSIONS} from "@/constants/userPermissions";
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 {useState} from "react";
import {Fragment} from "react";
import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
const columnHelper = createColumnHelper<User>();
export default function UserList() {
const {users} = useUsers();
export default function UserList({user}: {user: User}) {
const {users, reload} = useUsers();
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 defaultColumns = [
columnHelper.accessor("name", {
@@ -46,12 +77,66 @@ export default function UserList() {
cell: ({row}: {row: {original: User}}) => {
return (
<div className="flex gap-4">
<div data-tip="Change Type" className="cursor-pointer tooltip">
<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
<div data-tip="Delete" className="cursor-pointer tooltip">
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
{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>
)}
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
<div data-tip="Delete" className="cursor-pointer tooltip">
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
{!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>
)}
</div>
);
},