improve events page table

frontend/src/Pages/EventsPage/EventPage.module.scss

@@ -0,0 +1,24 @@
+@use 'src/mixins' as *;
+
+@use 'src/constants' as *;
+
+$event-header-height: 5em;
+
+.events_container{
+    margin: 0 auto;
+    padding-top: $event-header-height;
+    margin-top: 3.5em;
+    padding-bottom: 5em;
+    max-width: $content-max-size;
+
+    @include for-mobile-only {
+        margin-top: 9em;
+    }
+}
+
+.event_day_wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+

frontend/src/Pages/EventsPage/EventsPage.tsx

@@ -3,15 +3,20 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { Page } from '~/Components';
 import { getEventsPerDay } from '~/api';
-import { useTitle } from '~/hooks';
+import type { EventsPerDayDto } from '~/dto';
+import { useDesktop, useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
-import { EventsList } from './components/EventsList';
+import styles from './EventPage.module.scss';
+import { EventGrid } from './components';
+import { EventDay } from './components/EventDay';
+import { EventFilter, type ViewType } from './components/EventFilter/EventFilter';
 
 export function EventsPage() {
   const { t } = useTranslation();
-  const [events, setEvents] = useState({});
+  const [events, setEvents] = useState<EventsPerDayDto>({});
   const [showSpinner, setShowSpinner] = useState<boolean>(true);
-
+  const [viewType, setViewType] = useState('table'); // Default view
+  const isDesktop = useDesktop();
   useTitle(t(KEY.common_events));
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: t does not need to be in deplist
@@ -27,9 +32,31 @@ export function EventsPage() {
       });
   }, []);
 
+  const renderEventDays = () => {
+    if (!events || Object.keys(events).length === 0) {
+      return <p>{t(KEY.common_something_went_wrong)}</p>;
+    }
+
+    // Sort days in chronological order
+    const sortedDays = Object.keys(events).sort();
+
+    return sortedDays.map((day) => {
+      const eventsForDay = events[day];
+      return <EventDay key={day} date={day} events={eventsForDay} isDesktop={isDesktop} />;
+    });
+  };
+
+  const handleSetViewType = (type: ViewType) => {
+    setViewType(type);
+  };
+
   return (
     <Page loading={showSpinner}>
-      <EventsList events={events} />
+      <div className={styles.events_container}>
+        <EventFilter setViewType={handleSetViewType} />
+        {viewType === 'grid' && <EventGrid events={events} />}
+        {viewType === 'table' && <div className={styles.event_day_wrapper}>{renderEventDays()}</div>}
+      </div>
     </Page>
   );
 }

frontend/src/Pages/EventsPage/components/EventDay/EventDay.module.scss

@@ -0,0 +1,43 @@
+@use 'src/constants' as *;
+
+.event_day_table {
+    width: 100%;
+    table-layout: fixed;
+    border: 2px solid $red-samf;
+}
+
+.event_title_link{
+    text-align: left;
+}
+
+.event_buy{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    z-index: 999; // the button should be at the top, so that it always is clickable
+}
+
+.event_day_item_wrapper{
+    display: flex;
+    flex-direction: column;
+    box-shadow: 1px 1px 7px $black-t25;
+}
+
+.event_day_item_header {
+    background-color:$red-samf;
+    color: $white;
+    padding: 0.25rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+    text-align: center;
+}
+
+.free_badge {
+    opacity: 0.50;
+    background-color: $blue-lighter;
+}
+
+.included_badge {
+    opacity: 0.50;
+    background-color: $blue-lighter;
+}

frontend/src/Pages/EventsPage/components/EventDay/EventDay.tsx

@@ -0,0 +1,141 @@
+import { Button, H2, H4, Link, Table, type TableRow, TimeDisplay } from '~/Components';
+import { Badge } from '~/Components/Badge';
+import type { EventDto } from '~/dto';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+import { dbT } from '~/utils';
+import styles from './EventDay.module.scss';
+import { EventTimeLocation } from './EventTimeLocation/EventTimeLocation';
+
+type EventTableProps = {
+  date: string;
+  events: EventDto[];
+  isDesktop: boolean;
+};
+
+export function EventDay({ date, events, isDesktop }: EventTableProps) {
+  const buyOrFree = (event: EventDto) => {
+    if (event.billig) {
+      return (
+        <Button theme="samf" display="pill" onClick={() => alert('TODO: add buy modal')}>
+          BUY
+        </Button>
+      );
+    }
+    if (event.ticket_type === 'free' && !isDesktop) {
+      return <Badge className={styles.free_badge} text="free" />;
+    }
+    if (event.ticket_type === 'included' && !isDesktop) {
+      return <Badge className={styles.included_badge} text="included" />;
+    }
+    return null;
+  };
+
+  const ticketInfo = (event: EventDto) => {
+    if (event.billig) {
+      return <div>TODO: add billig price</div>;
+    }
+    if (event.ticket_type === 'free') {
+      return <Badge className={styles.free_badge} text="free" />;
+    }
+    if (event.ticket_type === 'included') {
+      return <Badge className={styles.included_badge} text="included" />;
+    }
+    if (event.ticket_type === 'custom') {
+      <div>
+        {event.custom_tickets.map((ticket) => {
+          return <Badge key={ticket.id} text={`${dbT(ticket, 'name')}: ${ticket.price}`} />;
+        })}
+      </div>;
+    }
+    if (event.ticket_type === 'registration') {
+      return <Badge text="registration" />;
+    }
+  };
+
+  const eventRowsMobile = (): TableRow[] => {
+    return events.map((event: EventDto) => ({
+      cells: [
+        {
+          content: (
+            <Link
+              className={styles.event_title_link}
+              url={reverse({ pattern: ROUTES.frontend.event, urlParams: { id: event.id } })}
+            >
+              {dbT(event, 'title')}
+            </Link>
+          ),
+          value: dbT(event, 'title') ?? '',
+        },
+        {
+          content: (
+            <EventTimeLocation
+              eventStart={event.start_dt}
+              eventEnd={event.end_dt}
+              eventLocation={event.location}
+              isDesktop={isDesktop}
+            />
+          ),
+        },
+        {
+          content: <div className={styles.event_buy}>{buyOrFree(event)}</div>,
+        },
+      ],
+    }));
+  };
+
+  const eventRowsDesktop = (): TableRow[] => {
+    return events.map((event: EventDto) => ({
+      cells: [
+        {
+          content: (
+            <Link
+              className={styles.event_title_link}
+              url={reverse({ pattern: ROUTES.frontend.event, urlParams: { id: event.id } })}
+            >
+              {dbT(event, 'title')}
+            </Link>
+          ),
+          value: dbT(event, 'title') ?? '',
+        },
+        {
+          content: (
+            <EventTimeLocation
+              eventStart={event.start_dt}
+              eventEnd={event.end_dt}
+              eventLocation={event.location}
+              isDesktop={isDesktop}
+            />
+          ),
+        },
+        {
+          content: event.category,
+        },
+        {
+          content: event.doors_time ? <div>Doors: {event.doors_time}</div> : null,
+        },
+        {
+          content: ticketInfo(event),
+        },
+        {
+          content: <div className={styles.event_buy}>{buyOrFree(event)}</div>,
+        },
+      ],
+    }));
+  };
+
+  return (
+    <div className={styles.event_day_item_wrapper}>
+      {isDesktop ? (
+        <H2 className={styles.event_day_item_header}>
+          <TimeDisplay timestamp={date} displayType="nice-date" />
+        </H2>
+      ) : (
+        <H4 className={styles.event_day_item_header}>
+          <TimeDisplay timestamp={date} displayType="nice-date" />
+        </H4>
+      )}
+      <Table className={styles.event_day_table} data={isDesktop ? eventRowsDesktop() : eventRowsMobile()} />
+    </div>
+  );
+}

frontend/src/Pages/EventsPage/components/EventDay/EventTimeLocation/EventTimeLocation.module.scss

@@ -0,0 +1,9 @@
+.event_time_wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.event_time {
+    display: flex;
+    flex-direction: row;
+}

frontend/src/Pages/EventsPage/components/EventDay/EventTimeLocation/EventTimeLocation.tsx

@@ -0,0 +1,22 @@
+import { Text, TimeDisplay } from '~/Components';
+import styles from './EventTimeLocation.module.scss';
+
+type EventTimeLocationProps = {
+  eventStart: string;
+  eventEnd: string;
+  eventLocation: string;
+  isDesktop: boolean;
+};
+
+export function EventTimeLocation({ eventStart, eventEnd, eventLocation, isDesktop }: EventTimeLocationProps) {
+  return (
+    <div className={styles.event_time_wrapper}>
+      <Text as="strong">{eventLocation}</Text>
+      <div className={styles.event_time}>
+        <TimeDisplay timestamp={eventStart} displayType="time" />
+        -
+        <TimeDisplay timestamp={eventEnd} displayType="time" />
+      </div>
+    </div>
+  );
+}

frontend/src/Pages/EventsPage/components/EventDay/index.ts

@@ -0,0 +1 @@
+export { EventDay } from './EventDay';

frontend/src/Pages/EventsPage/components/EventsList/EventsList.module.scss → frontend/src/Pages/EventsPage/components/EventFilter/EventFilter.module.scss

@@ -92,51 +92,4 @@ $event-header-bg-dark: rgba(31, 31, 31, 0.9);
     justify-content: center;
     padding-bottom: 0.3em;
   }
-}
-
-.event_view_container {
-  margin: 0 auto;
-  padding-top: $event-header-height;
-  margin-top: 3.5em;
-  padding-bottom: 5em;
-  max-width: $content-max-size;
-
-  @include for-mobile-only {
-    margin-top: 9em;
-  }
-}
-
-.event_grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin: 0 auto;
-  gap: 1em;
-
-  @include for-tablet-down {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  @include for-mobile-only {
-    grid-template-columns: 1fr;
-    gap: 2em;
-  }
-}
-
-.event_container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.date_header {
-  font-size: 1.5em;
-  margin-bottom: 1em;
-  margin-top: 3em;
-  font-weight: 700;
-  color: $red-samf;
-  text-align: center;
-  padding: 0.5em;
-  border-radius: 0.5em 0.5em 0 0;
-}
+}