added availability changing to events view

client/src/components/Event/AssignmentTable.tsx

@@ -5,13 +5,15 @@ export default function AssignmentTable({
 	tasks,
 	highlightTask,
 	highlightUser,
+	className,
 }: {
 	tasks: EventData["tasks"];
 	highlightUser?: string;
 	highlightTask?: string;
+	className?: string;
 }) {
 	return (
-		<table>
+		<table className={className}>
 			<tbody>
 				{tasks.map((task) => (
 					<tr

client/src/components/Event/AvailabilitySelector.tsx

@@ -0,0 +1,81 @@
+import { Select, Selection, SelectItem } from "@heroui/react";
+import AvailabilityChip from "../AvailabilityChip";
+import { apiCall, getAvailabilities } from "@/lib";
+import { useAsyncList } from "@react-stately/data";
+import { EventAvailability } from "@/Zustand";
+import { useState } from "react";
+
+export default function AvailabilitySelector({
+	event,
+	className,
+	startSelection,
+}: {
+	event: EventAvailability;
+	className?: string;
+	startSelection?: number;
+}) {
+	const [value, setValue] = useState<Selection>(new Set([]));
+
+	// the individual, selectable availabilities
+	const availabilities = useAsyncList({
+		async load() {
+			const availabilities = (await getAvailabilities()).filter(
+				(a) => a.enabled,
+			);
+
+			// if the availabilities contain the startSelection, set it
+			if (
+				!!startSelection &&
+				availabilities.some((a) => a.availabilityID === startSelection)
+			) {
+				setValue(new Set([startSelection.toString()]));
+			}
+
+			return {
+				items: availabilities,
+			};
+		},
+	});
+
+	async function setAvailability(eventID: number, availabilityID: number) {
+		await apiCall(
+			"PUT",
+			"events/user/availability",
+			{ eventID },
+			availabilityID,
+		);
+	}
+
+	return (
+		<Select
+			items={availabilities.items}
+			label="Availability"
+			variant="bordered"
+			className={className}
+			isMultiline
+			renderValue={(availability) => (
+				<div>
+					{availability.map((a) =>
+						!!a.data ? (
+							<AvailabilityChip key={a.key} availability={a.data} />
+						) : null,
+					)}
+				</div>
+			)}
+			selectedKeys={value}
+			onSelectionChange={(a) => {
+				void setAvailability(event.eventID, parseInt(a.anchorKey ?? ""));
+				setValue(a);
+			}}
+		>
+			{(availability) => (
+				<SelectItem
+					key={availability.availabilityID}
+					textValue={availability.availabilityName}
+				>
+					<AvailabilityChip availability={availability} />
+				</SelectItem>
+			)}
+		</Select>
+	);
+}

client/src/components/Event/Event.tsx

@@ -2,7 +2,7 @@
 
 import LocalDate from "../LocalDate";
 import { BaseEvent } from "@/Zustand";
-import { Card, CardBody, CardHeader, Divider } from "@heroui/react";
+import { Card, CardBody, CardHeader, Divider, Textarea } from "@heroui/react";
 import React from "react";
 
 export default function Event({
@@ -34,7 +34,12 @@ export default function Event({
 			</CardHeader>
 			<Divider />
 			<CardBody>
-				<div>{event.description}</div>
+				<Textarea
+					isReadOnly
+					label="Description"
+					defaultValue={event.description}
+					variant="bordered"
+				/>
 
 				{children}
 			</CardBody>