implemented adding and editing of tasks

2025-01-19 01:16:22 +00:00
parent e17c9db90c
commit 3c30d6c163
18 changed files with 470 additions and 54 deletions
--- a/client/src/app/admin/(users)/Users.tsx
+++ b/client/src/app/admin/(users)/Users.tsx
@@ -0,0 +1,156 @@
+import { apiCall } from "@/lib";
+import { User } from "@/Zustand";
+import {
+	Button,
+	Checkbox,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+	Tooltip,
+} from "@heroui/react";
+import { useAsyncList } from "@react-stately/data";
+import { FormEvent, useState } from "react";
+import AddUser from "./AddUser";
+import { AddLarge, Edit } from "@carbon/icons-react";
+import EditUser from "./EditUser";
+
+export default function Users() {
+	const [showAddUser, setShowAddUser] = useState(false);
+	const [editUser, setEditUser] = useState<User | undefined>();
+
+	const users = useAsyncList<User>({
+		async load() {
+			const result = await apiCall("GET", "users");
+
+			if (result.ok) {
+				const users = (await result.json()) as User[];
+
+				return {
+					items: users,
+				};
+			} else {
+				return {
+					items: [],
+				};
+			}
+		},
+		async sort({ items, sortDescriptor }) {
+			return {
+				items: items.sort((a, b) => {
+					let cmp = 0;
+
+					switch (sortDescriptor.column) {
+						case "admin":
+							if (a.admin && !b.admin) {
+								cmp = -1;
+							} else if (!a.admin && b.admin) {
+								cmp = 1;
+							}
+							break;
+						case "userName":
+							cmp = a.userName.localeCompare(b.userName);
+					}
+
+					if (sortDescriptor.direction === "descending") {
+						cmp *= -1;
+					}
+
+					return cmp;
+				}),
+			};
+		},
+	});
+
+	// send an addUser request to the backend then reload the table
+	async function addUser(e: FormEvent<HTMLFormElement>) {
+		const data = Object.fromEntries(new FormData(e.currentTarget));
+
+		const result = await apiCall("POST", "users", undefined, {
+			...data,
+			admin: data.admin === "admin",
+		});
+
+		if (result.ok) {
+			users.reload();
+		}
+	}
+
+	// content above the user-tabel
+	const topContent = (
+		<>
+			<Button
+				color="primary"
+				startContent={<AddLarge />}
+				onPress={() => setShowAddUser(true)}
+			>
+				Add User
+			</Button>
+		</>
+	);
+
+	return (
+		<div>
+			<Table
+				aria-label="Table with all users"
+				shadow="none"
+				isHeaderSticky
+				isStriped
+				topContent={topContent}
+				sortDescriptor={users.sortDescriptor}
+				onSortChange={users.sort}
+			>
+				<TableHeader>
+					<TableColumn allowsSorting key="userName">
+						Username
+					</TableColumn>
+					<TableColumn allowsSorting key="admin">
+						Admin
+					</TableColumn>
+					<TableColumn key="edit">Edit</TableColumn>
+				</TableHeader>
+				<TableBody items={users.items}>
+					{(user) => (
+						<TableRow key={user.userName}>
+							<TableCell>{user.userName}</TableCell>
+							<TableCell>
+								<Checkbox isSelected={user.admin} />
+							</TableCell>
+							<TableCell>
+								<Button
+									isIconOnly
+									variant="light"
+									size="sm"
+									onPress={() => setEditUser(user)}
+								>
+									<Tooltip content="Edit user">
+										<Edit />
+									</Tooltip>
+								</Button>
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+
+			<AddUser
+				isOpen={showAddUser}
+				onOpenChange={setShowAddUser}
+				onSubmit={(e) => void addUser(e)}
+			/>
+			<EditUser
+				isOpen={editUser !== undefined}
+				user={editUser}
+				onOpenChange={(isOpen) =>
+					!isOpen ? setEditUser(undefined) : undefined
+				}
+				onSuccess={() => {
+					users.reload();
+					setEditUser(undefined);
+				}}
+			/>
+		</div>
+	);
+}