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

7
src/constants/userPermissions.ts
View File

@@ -15,4 +15,11 @@ export const PERMISSIONS = {
owner: ["developer", "owner"],
developer: ["developer"],
},
updateUser: {
student: ["teacher", "admin", "developer", "owner"],
teacher: ["admin", "developer", "owner"],
admin: ["owner", "developer"],
owner: ["developer", "owner"],
developer: ["developer"],
},
};

8
src/hooks/useUsers.tsx
View File

@@ -7,13 +7,15 @@ export default function useUsers() {
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const getData = () => {
setIsLoading(true);
axios
.get<User[]>("/api/users/list")
.then((response) => setUsers(response.data))
.finally(() => setIsLoading(false));
}, []);
};
return {users, isLoading, isError};
useEffect(getData, []);
return {users, isLoading, isError, reload: getData};
}

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>
);
},

5
src/pages/(admin)/Lists/index.tsx
View File

@@ -1,9 +1,10 @@
import {User} from "@/interfaces/user";
import {Tab} from "@headlessui/react";
import clsx from "clsx";
import ExamList from "./ExamList";
import UserList from "./UserList";
export default function Lists() {
export default function Lists({user}: {user: User}) {
return (
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
@@ -32,7 +33,7 @@ export default function Lists() {
</Tab.List>
<Tab.Panels className="mt-2">
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
<UserList />
<UserList user={user} />
</Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
<ExamList />

2
src/pages/admin.tsx
View File

@@ -63,7 +63,7 @@ export default function Admin() {
<CodeGenerator />
</section>
<section className="w-full">
<Lists />
<Lists user={user} />
</section>
</Layout>
)}

15
src/pages/api/users/update.ts
View File

@@ -21,9 +21,15 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
const userRef = doc(db, "users", req.session.user.id);
const userRef = doc(db, "users", req.query.id ? (req.query.id as string) : req.session.user.id);
const updatedUser = req.body as User & {password?: string; newPassword?: string};
if (!!req.query.id) {
await setDoc(userRef, updatedUser, {merge: true});
res.status(200).json({ok: true});
return;
}
if (updatedUser.profilePicture && updatedUser.profilePicture !== req.session.user.profilePicture) {
const profilePictureFiletype = updatedUser.profilePicture.split(";")[0].split("/")[1];
const profilePictureRef = ref(storage, `profile_pictures/${req.session.user.id}.${profilePictureFiletype}`);
@@ -62,8 +68,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const docUser = await getDoc(doc(db, "users", req.session.user.id));
const user = docUser.data() as User;
req.session.user = {...user, id: req.session.user.id};
await req.session.save();
if (!req.query.id) {
req.session.user = {...user, id: req.session.user.id};
await req.session.save();
}
res.status(200).json({user});
}