Created event toggle for timetable view

[danrparker]

Description

This pull request introduces a significant enhancement to the events component by adding a view mode toggle that allows users to switch between a traditional list view and a new timetable (calendar) view. It also improves filtering and search capabilities for both views, ensures consistent loading states, and refines the UI for better usability.

Major features and improvements:

Event View Modes and UI:

• Added a toggle button in events.ce.vue to switch between "List View" and "Timetable View", with visual cues for the active view. The timetable is rendered using the new EventTimetable component. [1] [2]
• Updated the display logic so that pagination and loading states are handled appropriately for each view.
• Ensured the "Short View" mode continues to work as before, showing a condensed event list.

EventTimetable Component Enhancements:

• Added support for filtering events by group, venue, category, and search term, with debounced search to avoid excessive API calls. These filters are now reactive and trigger a refresh of the timetable when changed. [1] [2]
• Improved the timetable's event fetching logic to include all active filters and search terms, and to only apply the search filter when the term is at least two characters.
• Added cleanup for the search debounce timer on component unmount.

UI and Styling:

• Updated the timetable event styling to use the application's "mustard" color for upcoming events, improving visual consistency.
• Registered new FontAwesome icons for the view toggle buttons.

Other Improvements:

• Improved the search filter in the events list to only trigger when the search term is at least two characters, reducing unnecessary filtering.
• Added new stories for the EventTimetable component to showcase different configurations.

Checklist

• I accept the contributor license agreement for this repository.
• All active GitHub checks for tests, formatting, and security are passing.
• The correct base branch is being used (if not main).
• A GitHub issue or linear task is linked to this pull request.

[linear]

WEB-535 Events toggle between standard view and timetable view

[cloudflare-workers-and-pages]

Deploying website-storybook with    Cloudflare Pages

Latest commit:	f6c2903
Status:	✅  Deploy successful!
Preview URL:	https://e6495541.vue-3-components.pages.dev
Branch Preview URL:	https://dparker-web-535.vue-3-components.pages.dev

View logs