added viewing all availabilities in events view

client/src/components/AvailabilityChip.tsx

@@ -3,21 +3,21 @@ import { color2Tailwind } from "./Colorselector";
 import { Availability } from "@/app/admin/(availabilities)/AvailabilityEditor";
 
 export default function AvailabilityChip({
-	availability,
+	children,
 	className,
 }: {
-	availability?: Availability;
+	children?: Availability;
 	className?: string;
 	classNames?: ChipProps["classNames"];
 }) {
-	return !!availability ? (
+	return !!children ? (
 		<Chip
 			classNames={{
-				base: `bg-${color2Tailwind(availability.color)}`,
+				base: `bg-${color2Tailwind(children.color)}`,
 			}}
 			className={className}
 		>
-			{availability.availabilityName}
+			{children.availabilityName}
 		</Chip>
 	) : null;
 }

client/src/components/Event/AssignmentTable.tsx

@@ -1,13 +1,6 @@
 import { classNames } from "@/lib";
 import { EventData } from "@/Zustand";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableColumn,
-	TableHeader,
-	TableRow,
-} from "@heroui/react";
+import { Fragment } from "react";
 
 export default function AssignmentTable({
 	tasks,
@@ -23,40 +16,27 @@ export default function AssignmentTable({
 	return (
 		<div className={className}>
 			<h4 id="assignmentTableHeader">Tasks</h4>
-			<Table
-				aria-labelledby="assignmentTableHeader"
-				hideHeader
-				removeWrapper
-				classNames={{
-					td: "text-base",
-				}}
-				shadow="none"
-				title="Tasks"
-			>
-				<TableHeader>
-					<TableColumn>Task</TableColumn>
-					<TableColumn>Volunteer</TableColumn>
-				</TableHeader>
-				<TableBody items={tasks}>
-					{(task) => (
-						<TableRow
-							key={task.taskID}
-							className={classNames({
-								"text-danger":
-									task.userName === highlightUser ||
-									task.taskName === highlightTask,
-							})}
+			<div className="grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2">
+				{tasks.map((task) => (
+					<Fragment key={task.taskID}>
+						<div
+							className={classNames(
+								classNames({
+									"text-danger":
+										task.userName === highlightUser ||
+										task.taskName === highlightTask,
+								}),
+								"text-sm font-bold",
+							)}
 						>
-							<TableCell className="font-bold">{task.taskName}</TableCell>
-							<TableCell>
-								{task.userName ?? (
-									<span className="italic text-highlight">missing</span>
-								)}
-							</TableCell>
-						</TableRow>
-					)}
-				</TableBody>
-			</Table>
+							{task.taskName}
+						</div>
+						{task.userName ?? (
+							<span className="text-sm italic text-highlight">missing</span>
+						)}
+					</Fragment>
+				))}
+			</div>
 		</div>
 	);
 }

client/src/components/Event/AvailabilitySelector.tsx

@@ -9,10 +9,12 @@ export default function AvailabilitySelector({
 	event,
 	className,
 	startSelection,
+	onRefresh,
 }: {
 	event: EventAvailability;
 	className?: string;
 	startSelection?: number;
+	onRefresh?: () => void;
 }) {
 	const [value, setValue] = useState<Selection>(new Set([]));
 
@@ -38,12 +40,16 @@ export default function AvailabilitySelector({
 	});
 
 	async function setAvailability(eventID: number, availabilityID: number) {
-		await apiCall(
+		const request = await apiCall(
 			"PUT",
 			"events/user/availability",
 			{ eventID },
 			availabilityID,
 		);
+
+		if (request.ok) {
+			onRefresh?.();
+		}
 	}
 
 	return (
@@ -59,7 +65,7 @@ export default function AvailabilitySelector({
 					<div>
 						{availability.map((a) =>
 							!!a.data ? (
-								<AvailabilityChip key={a.key} availability={a.data} />
+								<AvailabilityChip key={a.key}>{a.data}</AvailabilityChip>
 							) : null,
 						)}
 					</div>
@@ -75,7 +81,7 @@ export default function AvailabilitySelector({
 						key={availability.availabilityID}
 						textValue={availability.availabilityName}
 					>
-						<AvailabilityChip availability={availability} />
+						<AvailabilityChip>{availability}</AvailabilityChip>
 					</SelectItem>
 				)}
 			</Select>

client/src/components/Event/AvailabilityTable.tsx

@@ -0,0 +1,39 @@
+import { useAsyncList } from "@react-stately/data";
+import AvailabilityChip from "../AvailabilityChip";
+import { EventAvailabilities } from "@/Zustand";
+import { getAvailabilities } from "@/lib";
+import { Fragment } from "react";
+
+export default function AvailabilityTable({
+	className,
+	availabilities: eventAvailabilities,
+}: {
+	className?: string;
+	availabilities: EventAvailabilities["availabilities"];
+}) {
+	const availabilities = useAsyncList({
+		async load() {
+			return {
+				items: await getAvailabilities(),
+			};
+		},
+	});
+
+	return (
+		<div className={className}>
+			<h4>Availabilities</h4>
+			<div className="grid grid-cols-[auto_1fr] items-center gap-2">
+				{Object.entries(eventAvailabilities).map(([a, users]) => (
+					<Fragment key={a}>
+						<AvailabilityChip className="mx-auto">
+							{availabilities.items.find(
+								(i) => i.availabilityID === parseInt(a),
+							)}
+						</AvailabilityChip>
+						<div className="text-sm italic">{users.join(", ")}</div>
+					</Fragment>
+				))}
+			</div>
+		</div>
+	);
+}

client/src/components/Event/Event.tsx

@@ -7,9 +7,11 @@ import React from "react";
 
 export default function Event({
 	event,
+	hideDescription,
 	children,
 }: {
 	event: BaseEvent;
+	hideDescription?: boolean;
 	children?: React.ReactNode | [React.ReactNode, React.ReactNode];
 }) {
 	return (
@@ -34,7 +36,7 @@ export default function Event({
 			</CardHeader>
 			<Divider />
 			<CardBody>
-				{event.description != "" ? (
+				{event.description != "" && !hideDescription ? (
 					<div>
 						<h4>Description</h4>
 						<div className="ms-2 mt-2">{event.description}</div>