added adding and editing of availabilities

client/src/app/admin/AddAvailability.tsx

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

client/src/app/admin/Availabilities.tsx

@@ -1,9 +1,164 @@
-import ColorSelector from "@/components/Colorselector";
+import { color2Tailwind, colors } from "@/components/Colorselector";
+import { apiCall } from "@/lib";
+import { Edit } from "@carbon/icons-react";
+import {
+	Button,
+	Checkbox,
+	Chip,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+	Tooltip,
+} from "@heroui/react";
+import { useAsyncList } from "@react-stately/data";
+import { useState } from "react";
+import AddAvailability from "./AddAvailability";
+import { Availability } from "./AvailabilityEditor";
+import EditAvailability from "./EditAvailability";
 
 export default function Availabilities() {
+	const [showAddAvailability, setShowAddAvailability] = useState(false);
+	const [editAvailability, setEditAvailability] = useState<Availability>();
+
+	const availabilities = useAsyncList<Availability>({
+		async load() {
+			const result = await apiCall("GET", "availabilities");
+
+			if (result.ok) {
+				const json = await result.json();
+
+				return {
+					items: json.availabilities,
+				};
+			} 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;
+						case "color":
+							const aIndex = colors.findIndex((c) => c.value === a.color);
+							const bIndex = colors.findIndex((c) => c.value === a.color);
+
+							if (aIndex > bIndex) {
+								cmp = -1;
+							} else {
+								cmp = 1;
+							}
+					}
+
+					if (sortDescriptor.direction === "descending") {
+						cmp *= -1;
+					}
+
+					return cmp;
+				}),
+			};
+		},
+	});
+
+	const topContent = (
+		<>
+			<Button onPress={() => setShowAddAvailability(true)}>
+				Add Availability
+			</Button>
+		</>
+	);
+
 	return (
 		<div>
-			<ColorSelector />
+			<Table
+				aria-label="Table with the availabilites"
+				shadow="none"
+				isHeaderSticky
+				topContent={topContent}
+				sortDescriptor={availabilities.sortDescriptor}
+				onSortChange={availabilities.sort}
+			>
+				<TableHeader>
+					<TableColumn allowsSorting key="userName">
+						Text
+					</TableColumn>
+					<TableColumn allowsSorting key="color" align="center">
+						Color
+					</TableColumn>
+					<TableColumn allowsSorting key="admin" align="center">
+						Enabled
+					</TableColumn>
+					<TableColumn key="edit" align="center">
+						Edit
+					</TableColumn>
+				</TableHeader>
+				<TableBody items={availabilities.items}>
+					{(availability) => (
+						<TableRow key={availability.text}>
+							<TableCell
+								className={`text-${color2Tailwind(availability.color)}`}
+							>
+								{availability.text}
+							</TableCell>
+							<TableCell>
+								<Chip
+									classNames={{
+										base: `bg-${color2Tailwind(availability.color)}`,
+									}}
+								>
+									{availability.color}
+								</Chip>
+							</TableCell>
+							<TableCell>
+								<Checkbox isSelected={availability.enabled} />
+							</TableCell>
+							<TableCell>
+								<Button
+									isIconOnly
+									variant="light"
+									size="sm"
+									onPress={() => setEditAvailability(availability)}
+								>
+									<Tooltip content="Edit availability">
+										<Edit />
+									</Tooltip>
+								</Button>
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+
+			<AddAvailability
+				isOpen={showAddAvailability}
+				onOpenChange={setShowAddAvailability}
+				onSuccess={availabilities.reload}
+			/>
+
+			<EditAvailability
+				value={editAvailability}
+				isOpen={!!editAvailability}
+				onOpenChange={(isOpen) =>
+					!isOpen ? setEditAvailability(undefined) : null
+				}
+				onSuccess={availabilities.reload}
+			/>
 		</div>
 	);
 }

client/src/app/admin/AvailabilityEditor.tsx

@@ -0,0 +1,93 @@
+import ColorSelector from "@/components/Colorselector";
+import {
+	Checkbox,
+	Form,
+	Input,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@heroui/react";
+import React, { FormEvent, useState } from "react";
+
+export interface Availability {
+	text: string;
+	color: string;
+	id: number | undefined;
+	enabled: boolean;
+}
+
+export default function AvailabilityEditor(props: {
+	header: React.ReactNode;
+	footer: React.ReactNode;
+	value?: Availability;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSubmit?: (e: Availability) => void;
+}) {
+	const [text, setText] = useState(props.value?.text);
+	const [color, setColor] = useState(props.value?.color ?? "Red");
+	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"
+						/>
+						<ColorSelector
+							value={color}
+							onValueChange={setColor}
+							name="color"
+						/>
+						<Checkbox
+							value="true"
+							isSelected={enabled}
+							onValueChange={setEnabled}
+							name="enabled"
+						>
+							Enabled
+						</Checkbox>
+					</ModalBody>
+					<ModalFooter>{props.footer} </ModalFooter>
+				</ModalContent>
+			</Form>
+		</Modal>
+	);
+}

client/src/app/admin/EditAvailability.tsx

@@ -0,0 +1,36 @@
+import { apiCall } from "@/lib";
+import AvailabilityEditor, { Availability } from "./AvailabilityEditor";
+import { Button } from "@heroui/react";
+import { Renew } from "@carbon/icons-react";
+
+export default function EditAvailability(props: {
+	value: Availability | undefined;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSuccess?: () => void;
+}) {
+	async function addAvailability(a: Availability) {
+		const result = await apiCall("PATCH", "availabilities", undefined, a);
+
+		if (result.ok) {
+			props.onSuccess?.();
+			props.onOpenChange?.(false);
+		}
+	}
+
+	return (
+		<AvailabilityEditor
+			key={props.value?.id}
+			header="Edit Availability"
+			footer={
+				<Button type="submit" color="primary" startContent={<Renew />}>
+					Update
+				</Button>
+			}
+			value={props.value}
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			onSubmit={addAvailability}
+		/>
+	);
+}

client/src/app/admin/EditUser.tsx

@@ -67,23 +67,23 @@ export default function EditUser(props: {
 
 	return (
 		<Modal isOpen={props.isOpen} onOpenChange={props.onOpenChange}>
-			{props.user !== undefined ? (
-				<ModalContent>
-					<ModalHeader>
-						<h1 className="text-2xl">
-							Edit User{" "}
-							<span className="font-numbers font-normal italic">
-								{props.user.userName}
-							</span>
-						</h1>
-					</ModalHeader>
-					<Form
-						validationBehavior="native"
-						onSubmit={(e) => {
-							e.preventDefault();
-							updateUser(e);
-						}}
-					>
+			<Form
+				validationBehavior="native"
+				onSubmit={(e) => {
+					e.preventDefault();
+					updateUser(e);
+				}}
+			>
+				{props.user !== undefined ? (
+					<ModalContent>
+						<ModalHeader>
+							<h1 className="text-2xl">
+								Edit User{" "}
+								<span className="font-numbers font-normal italic">
+									{props.user.userName}
+								</span>
+							</h1>
+						</ModalHeader>
 						<ModalBody className="w-full">
 							<Input
 								label="Name"
@@ -129,9 +129,9 @@ export default function EditUser(props: {
 								Update
 							</Button>
 						</ModalFooter>
-					</Form>
-				</ModalContent>
-			) : null}
+					</ModalContent>
+				) : null}
+			</Form>
 		</Modal>
 	);
 }

client/src/app/admin/Users.tsx

@@ -118,7 +118,7 @@ export default function Users() {
 									size="sm"
 									onPress={() => setEditUser(user)}
 								>
-									<Tooltip content="Edit event">
+									<Tooltip content="Edit user">
 										<Edit />
 									</Tooltip>
 								</Button>