added adding and editing of availabilities

client/src/app/Main.tsx

@@ -18,33 +18,28 @@ export default function Main({ children }: { children: React.ReactNode }) {
 
 	const router = useRouter();
 	const pathname = usePathname();
-	const user = zustand((state) => state.user);
 
 	useEffect(() => {
 		void (async () => {
 			let loggedIn = false;
 
-			if (zustand.getState().user === null) {
-				const welcomeResult = await apiCall<{
-					userName: string;
-					loggedIn: boolean;
-				}>("GET", "welcome");
+			const welcomeResult = await apiCall<{
+				userName: string;
+				loggedIn: boolean;
+			}>("GET", "welcome");
 
-				if (welcomeResult.ok) {
-					try {
-						const response = await welcomeResult.json();
+			if (welcomeResult.ok) {
+				try {
+					const response = await welcomeResult.json();
 
-						if (response.userName !== undefined && response.userName !== "") {
-							zustand.getState().reset({ user: response });
+					if (response.userName !== undefined && response.userName !== "") {
+						zustand.getState().reset({ user: response });
 
-							loggedIn = true;
-						}
-					} catch {}
-				} else {
-					zustand.getState().reset();
-				}
+						loggedIn = true;
+					}
+				} catch {}
 			} else {
-				loggedIn = true;
+				zustand.getState().reset();
 			}
 
 			if (pathname === "/login") {
@@ -62,7 +57,7 @@ export default function Main({ children }: { children: React.ReactNode }) {
 				}
 			}
 		})();
-	}, [pathname, router, user]);
+	}, [pathname, router]);
 
 	switch (auth) {
 		case AuthState.Loading:

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>

client/src/app/assignments/page.tsx

@@ -40,26 +40,6 @@ import React, { Key, useState } from "react";
 
 type EventWithAvailabilities = EventData & { availabilities: string[] };
 
-function availability2Tailwind(availability?: Availability) {
-	switch (availability) {
-		case "yes":
-			return "";
-		default:
-			return "italic";
-	}
-}
-
-function availability2Color(availability?: Availability) {
-	switch (availability) {
-		case "yes":
-			return "default";
-		case "maybe":
-			return "warning";
-		default:
-			return "danger";
-	}
-}
-
 export default function AdminPanel() {
 	const [showAddEvent, setShowAddEvent] = useState(false);
 	const [editEvent, setEditEvent] = useState<EventData | undefined>();
@@ -75,7 +55,7 @@ export default function AdminPanel() {
 					{ key: "date", label: "Date" },
 					{ key: "description", label: "Description" },
 					...Object.values(tasks)
-						.filter((task) => !task.disabled)
+						.filter((task) => task.enabled)
 						.map((task) => ({ label: task.text, key: task.text })),
 					{ key: "actions", label: "Action" },
 				],

client/src/components/Colorselector.tsx

@@ -5,34 +5,49 @@ import {
 	VisuallyHidden,
 } from "@heroui/react";
 
-export default function ColorSelector() {
-	const colors = [
-		{ value: "Red", tailwind: "red-600" },
-		{ value: "Orange", tailwind: "orange-600" },
-		{ value: "Amber", tailwind: "amber-600" },
-		{ value: "Yellow", tailwind: "yellow-600" },
-		{ value: "Lime", tailwind: "lime-600" },
-		{ value: "Green", tailwind: "green-600" },
-		{ value: "Emerald", tailwind: "emerald-600" },
-		{ value: "Teal", tailwind: "teal-600" },
-		{ value: "Cyan", tailwind: "cyan-600" },
-		{ value: "Sky", tailwind: "sky-600" },
-		{ value: "Blue", tailwind: "blue-600" },
-		{ value: "Indigo", tailwind: "indigo-600" },
-		{ value: "Violet", tailwind: "violet-600" },
-		{ value: "Purple", tailwind: "purple-600" },
-		{ value: "Fuchsia", tailwind: "fuchsia-600" },
-		{ value: "Pink", tailwind: "pink-600" },
-	];
+export const colors = [
+	{ value: "Red", tailwind: "red-600" },
+	{ value: "Orange", tailwind: "orange-600" },
+	{ value: "Amber", tailwind: "amber-600" },
+	{ value: "Yellow", tailwind: "yellow-600" },
+	{ value: "Lime", tailwind: "lime-600" },
+	{ value: "Green", tailwind: "green-600" },
+	{ value: "Emerald", tailwind: "emerald-600" },
+	{ value: "Teal", tailwind: "teal-600" },
+	{ value: "Cyan", tailwind: "cyan-600" },
+	{ value: "Sky", tailwind: "sky-600" },
+	{ value: "Blue", tailwind: "blue-600" },
+	{ value: "Indigo", tailwind: "indigo-600" },
+	{ value: "Violet", tailwind: "violet-600" },
+	{ value: "Purple", tailwind: "purple-600" },
+	{ value: "Fuchsia", tailwind: "fuchsia-600" },
+	{ value: "Pink", tailwind: "pink-600" },
+];
 
+export function color2Tailwind(v: string): string | undefined {
+	const find = colors.find((c) => c.value === v)?.tailwind;
+
+	return find;
+}
+
+export default function ColorSelector(props: {
+	name?: string;
+	value?: string;
+	onValueChange?: (value: string) => void;
+}) {
 	return (
-		<RadioGroup classNames={{ wrapper: "grid grid-cols-4" }}>
+		<RadioGroup
+			value={props.value}
+			onValueChange={props.onValueChange}
+			classNames={{ wrapper: "grid grid-cols-4" }}
+			name={props.name}
+		>
 			{colors.map((color) => (
 				<ColorRadio
 					description={color.value}
 					value={color.value}
 					key={color.value}
-					radioColor={`bg-${color.tailwind}`}
+					radiocolor={`bg-${color.tailwind}`}
 				>
 					<div>{color.value}</div>
 				</ColorRadio>
@@ -41,13 +56,13 @@ export default function ColorSelector() {
 	);
 }
 
-function ColorRadio(props: { radioColor: string } & RadioProps) {
+function ColorRadio(props: { radiocolor: string } & RadioProps) {
 	const { Component, children, getBaseProps, getInputProps } = useRadio(props);
 
 	return (
 		<Component
 			{...getBaseProps()}
-			className={`aspect-square cursor-pointer rounded-lg border-2 border-default tap-highlight-transparent hover:opacity-70 active:opacity-50 data-[selected=true]:border-primary ${props.radioColor} flex items-center justify-center p-1`}
+			className={`aspect-square cursor-pointer rounded-lg border-2 border-default text-foreground transition tap-highlight-transparent hover:opacity-70 active:opacity-50 data-[selected=true]:border-2 data-[selected=true]:border-stone-300 ${props.radiocolor} flex select-none items-center justify-center p-1 text-sm`}
 		>
 			<VisuallyHidden>
 				<input {...getInputProps()} />

client/src/components/Event/EditEvent.tsx

@@ -183,7 +183,7 @@ export default function EditEvent(props: {
 						>
 							{tasksMap !== undefined ? (
 								Object.entries(tasksMap)
-									.filter(([, task]) => !task.disabled)
+									.filter(([, task]) => task.enabled)
 									.map(([id, task]) => (
 										<div key={id}>
 											<Checkbox value={id}>{task.text}</Checkbox>

client/src/lib.ts

@@ -95,14 +95,11 @@ export function vaidatePassword(password: string): string[] {
 
 export interface Task {
 	text: string;
-	disabled: boolean;
+	enabled: boolean;
 }
 
 export async function getTasks(): Promise<Record<number, Task>> {
-	const result = await apiCall<{ text: string; disabled: boolean }[]>(
-		"GET",
-		"tasks",
-	);
+	const result = await apiCall<Task[]>("GET", "tasks");
 
 	if (result.ok) {
 		const tasks = await result.json();