implemented adding and editing of tasks

client/src/app/admin/(availabilities)/Availabilities.tsx

@@ -1,6 +1,6 @@
 import { color2Tailwind, colors } from "@/components/Colorselector";
 import { apiCall } from "@/lib";
-import { Edit } from "@carbon/icons-react";
+import { AddLarge, Edit } from "@carbon/icons-react";
 import {
 	Button,
 	Checkbox,
@@ -78,7 +78,11 @@ export default function Availabilities() {
 
 	const topContent = (
 		<>
-			<Button onPress={() => setShowAddAvailability(true)}>
+			<Button
+				color="primary"
+				startContent={<AddLarge />}
+				onPress={() => setShowAddAvailability(true)}
+			>
 				Add Availability
 			</Button>
 		</>
@@ -90,6 +94,7 @@ export default function Availabilities() {
 				aria-label="Table with the availabilites"
 				shadow="none"
 				isHeaderSticky
+				isStriped
 				topContent={topContent}
 				sortDescriptor={availabilities.sortDescriptor}
 				onSortChange={availabilities.sort}

client/src/app/admin/(availabilities)/EditAvailability.tsx

@@ -9,7 +9,7 @@ export default function EditAvailability(props: {
 	onOpenChange?: (isOpen: boolean) => void;
 	onSuccess?: () => void;
 }) {
-	async function addAvailability(a: Availability) {
+	async function updateAvailability(a: Availability) {
 		const result = await apiCall("PATCH", "availabilities", undefined, a);
 
 		if (result.ok) {
@@ -21,7 +21,14 @@ export default function EditAvailability(props: {
 	return (
 		<AvailabilityEditor
 			key={props.value?.id}
-			header="Edit Availability"
+			header={
+				<>
+					Edit Availability{" "}
+					<span className="font-numbers font-normal italic">
+						&quot;{props.value?.text}&quot;
+					</span>
+				</>
+			}
 			footer={
 				<Button type="submit" color="primary" startContent={<Renew />}>
 					Update
@@ -30,7 +37,7 @@ export default function EditAvailability(props: {
 			value={props.value}
 			isOpen={props.isOpen}
 			onOpenChange={props.onOpenChange}
-			onSubmit={addAvailability}
+			onSubmit={updateAvailability}
 		/>
 	);
 }

client/src/app/admin/(tasks)/AddTask.tsx

@@ -0,0 +1,33 @@
+import { apiCall } from "@/lib";
+import TaskEditor, { Task } from "./TaskEditor";
+import { Button } from "@heroui/react";
+import { AddLarge } from "@carbon/icons-react";
+
+export default function AddTask(props: {
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSuccess?: () => void;
+}) {
+	async function addTask(a: Task) {
+		const result = await apiCall("POST", "tasks", undefined, a);
+
+		if (result.ok) {
+			props.onSuccess?.();
+			props.onOpenChange?.(false);
+		}
+	}
+
+	return (
+		<TaskEditor
+			header="Add Task"
+			footer={
+				<Button type="submit" color="primary" startContent={<AddLarge />}>
+					Add
+				</Button>
+			}
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			onSubmit={addTask}
+		/>
+	);
+}

client/src/app/admin/(tasks)/EditTask.tsx

@@ -0,0 +1,43 @@
+import { apiCall, Task } from "@/lib";
+import { Button } from "@heroui/react";
+import { Renew } from "@carbon/icons-react";
+import TaskEditor from "./TaskEditor";
+
+export default function EditTask(props: {
+	value: Task | undefined;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSuccess?: () => void;
+}) {
+	async function updateTask(t: Task) {
+		const result = await apiCall("PATCH", "tasks", undefined, t);
+
+		if (result.ok) {
+			props.onSuccess?.();
+			props.onOpenChange?.(false);
+		}
+	}
+
+	return (
+		<TaskEditor
+			key={props.value?.id}
+			header={
+				<>
+					Edit Task{" "}
+					<span className="font-numbers font-normal italic">
+						&quot;{props.value?.text}&quot;
+					</span>
+				</>
+			}
+			footer={
+				<Button type="submit" color="primary" startContent={<Renew />}>
+					Update
+				</Button>
+			}
+			value={props.value}
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			onSubmit={updateTask}
+		/>
+	);
+}

client/src/app/admin/(tasks)/TaskEditor.tsx

@@ -0,0 +1,80 @@
+import { Task } from "@/lib";
+import {
+	Checkbox,
+	Form,
+	Input,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@heroui/react";
+import React, { FormEvent, useState } from "react";
+
+export default function TaskEditor(props: {
+	header: React.ReactNode;
+	footer: React.ReactNode;
+	value?: Task;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSubmit?: (e: Task) => void;
+}) {
+	const [text, setText] = useState(props.value?.text);
+	const [enabled, setEnabled] = useState(props.value?.enabled ?? true);
+
+	function submit(e: FormEvent<HTMLFormElement>) {
+		const formData = Object.fromEntries(new FormData(e.currentTarget)) as {
+			text: string;
+			color: string;
+			enabled: string;
+		};
+
+		props.onSubmit?.({
+			...formData,
+			id: props.value?.id,
+			enabled: formData.enabled == "true",
+		});
+	}
+
+	return (
+		<Modal
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			shadow={"none" as "sm"}
+		>
+			<Form
+				validationBehavior="native"
+				onSubmit={(e) => {
+					e.preventDefault();
+					submit(e);
+				}}
+				className="w-fit border-2"
+			>
+				<ModalContent>
+					<ModalHeader>
+						<h1>{props.header}</h1>
+					</ModalHeader>
+					<ModalBody>
+						<Input
+							value={text}
+							onValueChange={setText}
+							name="text"
+							label="Text"
+							isRequired
+							variant="bordered"
+						/>
+						<Checkbox
+							value="true"
+							isSelected={enabled}
+							onValueChange={setEnabled}
+							name="enabled"
+						>
+							Enabled
+						</Checkbox>
+					</ModalBody>
+					<ModalFooter>{props.footer} </ModalFooter>
+				</ModalContent>
+			</Form>
+		</Modal>
+	);
+}

client/src/app/admin/(tasks)/Tasks.tsx

@@ -0,0 +1,139 @@
+import { apiCall, Task } from "@/lib";
+import { AddLarge, Edit } from "@carbon/icons-react";
+import {
+	Button,
+	Checkbox,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+	Tooltip,
+} from "@heroui/react";
+import { useAsyncList } from "@react-stately/data";
+import { useState } from "react";
+import AddTask from "./AddTask";
+import EditTask from "./EditTask";
+
+export default function Tasks() {
+	const [showAddTask, setShowAddTask] = useState(false);
+	const [editTask, setEditTask] = useState<Task>();
+
+	const tasks = useAsyncList<Task>({
+		async load() {
+			const result = await apiCall("GET", "tasks");
+
+			if (result.ok) {
+				const json = await result.json();
+
+				return {
+					items: json.tasks,
+				};
+			} else {
+				return {
+					items: [],
+				};
+			}
+		},
+		async sort({ items, sortDescriptor }) {
+			return {
+				items: items.sort((a, b) => {
+					let cmp = 0;
+
+					switch (sortDescriptor.column) {
+						case "text":
+							cmp = a.text.localeCompare(b.text);
+							break;
+						case "enabled":
+							if (a.enabled && !b.enabled) {
+								cmp = -1;
+							} else if (!a.enabled && b.enabled) {
+								cmp = 1;
+							}
+							break;
+					}
+
+					if (sortDescriptor.direction === "descending") {
+						cmp *= -1;
+					}
+
+					return cmp;
+				}),
+			};
+		},
+	});
+
+	const topContent = (
+		<>
+			<Button
+				color="primary"
+				startContent={<AddLarge />}
+				onPress={() => setShowAddTask(true)}
+			>
+				Add Task
+			</Button>
+		</>
+	);
+
+	return (
+		<div>
+			<Table
+				aria-label="Table with the tasks"
+				shadow="none"
+				isStriped
+				isHeaderSticky
+				topContent={topContent}
+				sortDescriptor={tasks.sortDescriptor}
+				onSortChange={tasks.sort}
+			>
+				<TableHeader>
+					<TableColumn allowsSorting key="userName">
+						Text
+					</TableColumn>
+					<TableColumn allowsSorting key="admin" align="center">
+						Enabled
+					</TableColumn>
+					<TableColumn key="edit" align="center">
+						Edit
+					</TableColumn>
+				</TableHeader>
+				<TableBody items={tasks.items}>
+					{(task) => (
+						<TableRow key={task.id}>
+							<TableCell>{task.text}</TableCell>
+							<TableCell>
+								<Checkbox isSelected={task.enabled} />
+							</TableCell>
+							<TableCell>
+								<Button
+									isIconOnly
+									variant="light"
+									size="sm"
+									onPress={() => setEditTask(task)}
+								>
+									<Tooltip content="Edit task">
+										<Edit />
+									</Tooltip>
+								</Button>
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+
+			<AddTask
+				isOpen={showAddTask}
+				onOpenChange={setShowAddTask}
+				onSuccess={tasks.reload}
+			/>
+
+			<EditTask
+				value={editTask}
+				isOpen={!!editTask}
+				onOpenChange={(isOpen) => (!isOpen ? setEditTask(undefined) : null)}
+				onSuccess={tasks.reload}
+			/>
+		</div>
+	);
+}

client/src/app/admin/(users)/Users.tsx

@@ -14,7 +14,7 @@ import {
 import { useAsyncList } from "@react-stately/data";
 import { FormEvent, useState } from "react";
 import AddUser from "./AddUser";
-import { Edit } from "@carbon/icons-react";
+import { AddLarge, Edit } from "@carbon/icons-react";
 import EditUser from "./EditUser";
 
 export default function Users() {
@@ -81,7 +81,13 @@ export default function Users() {
 	// content above the user-tabel
 	const topContent = (
 		<>
-			<Button onPress={() => setShowAddUser(true)}>Add User</Button>
+			<Button
+				color="primary"
+				startContent={<AddLarge />}
+				onPress={() => setShowAddUser(true)}
+			>
+				Add User
+			</Button>
 		</>
 	);
 
@@ -91,6 +97,7 @@ export default function Users() {
 				aria-label="Table with all users"
 				shadow="none"
 				isHeaderSticky
+				isStriped
 				topContent={topContent}
 				sortDescriptor={users.sortDescriptor}
 				onSortChange={users.sort}

client/src/app/admin/page.tsx

@@ -1,18 +1,23 @@
 "use client";
 
 import { Tab, Tabs } from "@heroui/react";
-import Users from "./Users";
-import Availabilities from "./Availabilities";
+import Users from "./(users)/Users";
+import Availabilities from "./(availabilities)/Availabilities";
+import Tasks from "./(tasks)/Tasks";
 
 export default function AdminDashboard() {
 	return (
 		<div className="flex flex-col items-center">
-			<Tabs color="primary">
+			<Tabs variant="bordered" color="primary" size="lg">
 				<Tab title="Users">
 					<Users />
 				</Tab>
-				<Tab title="Tasks">Tasks</Tab>
-				<Tab title="Availabilities"><Availabilities /></Tab>
+				<Tab title="Tasks">
+					<Tasks />
+				</Tab>
+				<Tab title="Availabilities">
+					<Availabilities />
+				</Tab>
 			</Tabs>
 		</div>
 	);