z1glr/golunteer
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fixed styling of events modal

Browse Source
This commit is contained in:
z1glr
2025-02-07 10:33:21 +00:00
parent 46c4d2beaf
commit f0e8e927fa
5 changed files with 38 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/MyEvents.tsx
View File

@@ -28,15 +28,13 @@ export default function MyEvents() {
}, },
}); });
console.debug(events);
return ( return (
<div> <div>
<h1 className="mb-4 text-center text-4xl">My Events</h1> <h1 className="mb-4 text-center text-4xl">My Events</h1>
{events.isLoading ? ( {events.isLoading ? (
<Loading /> <Loading />
) : events.items.length > 0 ? ( ) : events.items.length > 0 ? (
<div className="flex justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
{events.items.map((e) => ( {events.items.map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AssignmentTable <AssignmentTable

2
client/src/app/PendingEvents.tsx
View File

@@ -36,7 +36,7 @@ export default function PendingEvents() {
{events.isLoading ? ( {events.isLoading ? (
<Loading /> <Loading />
) : events.items.length > 0 ? ( ) : events.items.length > 0 ? (
<div className="flex justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
{events.items.map((e) => ( {events.items.map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AvailabilitySelector event={e} className="mt-auto" /> <AvailabilitySelector event={e} className="mt-auto" />

2
client/src/app/events/page.tsx
View File

@@ -67,7 +67,7 @@ export default function Events() {
<Tab key="assigned" title="Assigned" /> <Tab key="assigned" title="Assigned" />
</Tabs> </Tabs>
<div className="flex flex-wrap justify-center gap-4"> <div className="mx-auto flex flex-wrap gap-4">
{events.items.filter(showEvent).map((e) => ( {events.items.filter(showEvent).map((e) => (
<Event key={e.eventID} event={e}> <Event key={e.eventID} event={e}>
<AssignmentTable <AssignmentTable

2
client/src/app/page.tsx
View File

@@ -3,7 +3,7 @@ import PendingEvents from "./PendingEvents";
export default function Overview() { export default function Overview() {
return ( return (
<div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-lg"> <div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-xl">
<MyEvents /> <MyEvents />
<PendingEvents /> <PendingEvents />
</div> </div>

67
client/src/components/Event/AvailabilitySelector.tsx
View File

@@ -1,6 +1,6 @@
import { Select, Selection, SelectItem } from "@heroui/react"; import { Select, Selection, SelectItem } from "@heroui/react";
import AvailabilityChip from "../AvailabilityChip"; import AvailabilityChip from "../AvailabilityChip";
import { apiCall, getAvailabilities } from "@/lib"; import { apiCall, classNames, getAvailabilities } from "@/lib";
import { useAsyncList } from "@react-stately/data"; import { useAsyncList } from "@react-stately/data";
import { EventAvailability } from "@/Zustand"; import { EventAvailability } from "@/Zustand";
import { useState } from "react"; import { useState } from "react";
@@ -47,37 +47,38 @@ export default function AvailabilitySelector({
} }
return ( return (
<Select <div className={classNames(className, "w-full")}>
items={availabilities.items} <Select
label={<h4>Availability</h4>} items={availabilities.items}
variant="bordered" label={<h4>Availability</h4>}
className={className} variant="bordered"
classNames={{ label: "text-base", trigger: "py-4" }} classNames={{ label: "text-base", trigger: "py-4" }}
labelPlacement="outside" labelPlacement="outside"
placeholder="Set availability" placeholder="Set availability"
renderValue={(availability) => ( renderValue={(availability) => (
<div> <div>
{availability.map((a) => {availability.map((a) =>
!!a.data ? ( !!a.data ? (
<AvailabilityChip key={a.key} availability={a.data} /> <AvailabilityChip key={a.key} availability={a.data} />
) : null, ) : null,
)} )}
</div> </div>
)} )}
selectedKeys={value} selectedKeys={value}
onSelectionChange={(a) => { onSelectionChange={(a) => {
void setAvailability(event.eventID, parseInt(a.anchorKey ?? "")); void setAvailability(event.eventID, parseInt(a.anchorKey ?? ""));
setValue(a); setValue(a);
}} }}
> >
{(availability) => ( {(availability) => (
<SelectItem <SelectItem
key={availability.availabilityID} key={availability.availabilityID}
textValue={availability.availabilityName} textValue={availability.availabilityName}
> >
<AvailabilityChip availability={availability} /> <AvailabilityChip availability={availability} />
</SelectItem> </SelectItem>
)} )}
</Select> </Select>
</div>
); );
} }