Added a list for codes, for users to delete unused ones

2024-04-04 23:05:12 +01:00
parent 11e2ea3249
commit fe2abaacae
4 changed files with 137 additions and 1 deletions
--- a/src/pages/(admin)/Lists/CodeList.tsx
+++ b/src/pages/(admin)/Lists/CodeList.tsx
@@ -0,0 +1,106 @@
+import useCodes from "@/hooks/useCodes";
+import {Code, User} from "@/interfaces/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import axios from "axios";
+import {BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+const columnHelper = createColumnHelper<Code>();
+
+export default function CodeList({user}: {user: User}) {
+	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
+
+	const deleteCode = async (code: Code) => {
+		if (!confirm(`Are you sure you want to delete this "${code.code}" code?`)) return;
+
+		axios
+			.delete(`/api/code/${code.code}`)
+			.then(() => toast.success(`Deleted the "${code.code}" exam`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Code not found!");
+					return;
+				}
+
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this code!");
+					return;
+				}
+
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
+
+	const defaultColumns = [
+		columnHelper.accessor("code", {
+			header: "Code",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("email", {
+			header: "Invited E-mail",
+			cell: (info) => info.getValue() || "N/A",
+		}),
+		columnHelper.accessor("userId", {
+			header: "Availability",
+			cell: (info) =>
+				info.getValue() ? (
+					<span className="flex gap-1 items-center text-mti-green">
+						<div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
+					</span>
+				) : (
+					<span className="flex gap-1 items-center text-mti-red">
+						<div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
+					</span>
+				),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Code}}) => {
+				return (
+					<div className="flex gap-4">
+						{!row.original.userId && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteCode(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
+					</div>
+				);
+			},
+		},
+	];
+
+	const table = useReactTable({
+		data: codes,
+		columns: defaultColumns,
+		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="p-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" key={cell.id}>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}