Page Request - /events - Event Listing Page

[pghorpade]

Page Description

This Page is used for events listing to display craft ftvaEvent entry content model/type filter and the components from the component library.
The first iteration of requirements is captured here

EventListing walk through video: Youtube
Link to the beginning of the Query:

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=11-1440&node-type=canvas&t=R3aQIMG94MzbGjuD-0
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=657-8835&node-type=frame&t=EtfyxNxW8gyAGzJ2-0

If no mobile designs provided, please use your best judgment for responsiveness.

First Iteration of Requirements:

This route link pages/events/index.vue already exists in the Nuxt pages folder.
Craft entry https://craft.library.ucla.edu/admin/entries/ftvaListingEvents/4417316-ftva-listing-events

We have a basic listing query in repo, we need to modify it to add query to get single listing page data like title and text/summary and update the rest of fields for existing query. One of the Dev's will update the query.

Header:

1. We already have the Header-sticky component added to the layout.
2. @pghorpade created a ticket to fix the header menu pushing down the page when opened, the behavior should be same as website , Acceptance Criteria: When the Header is not sticky, the NavPrimary menu will overlay just like when the header is sticky.

No Bread Crumb:

DateFilter:

1. @farosFreed has already created this component.
2. https://github.com/UCLALibrary/ucla-library-website-components/blob/main/src/lib-components/DateFilter.vue
3. Handle following event emitted by the component emit('input-selected', formattedDateSelection.value)
4. the data structure of formattedDateSelection.value can be

//. if range is selected
{
      startDate: date.value[0],
      endDate: date.value[1],
    }
or // if single date
{
      startDate: date.value,
      endDate: null,
    }

Tasks:

1. Add event handler which accepts the date objects and set these values to router push query , which is than watched on the page and then the watcher calls another method which decides if we need to call useindexFilter composable if page queries for filters exists.

FilterDropDown

1. This is a new component
2. We need a ticket to write a component request.
3. We need a ticket to implement the component request.
4. Question for @axamei or UX can we have a complete design in design system ,
5. Question: Are we showing categories?
6. this is storybook behaviour of a pill
7. What is interactions with pills, what is hover behaviours , what does selected pills looks like, if the user clicks on the pills when selected what does the pills look and do
8. This component will have child component block-remove-search-filter--ftva
9. This component will handle any user selection behavior/interactions or event handling and pass the state to blockremovesearchfilter component
10. when the user clicks the done button, this emits an event and passes the selected filters emit function.
11. In mobile view, the selected filters show as sectionRemovefilters like on website, the clear filters sectionremovesfilters will be sticky

Tasks:

1. @axamei will update craft to add categories for tag labels.
2. The decision is to make 2 separate tag label fields in the craft.
3. once categories are added, we need to update the event slug page query parsing,
4. we also need to update useIndexAggregation composable if the taglabels data structure changes.
5. will this affect the event series detail page too where taglabels are used?

TabToggle
two tabs:

1. list view: SectionTeaserList
2. calendar view: New component

BlockCard-three-column
Following updates need to be implemented:

1. Category is not linked
2. taglabels are have dark grey background when that tablabel is filter selected
3. No date grouping
4. sort by today and ascending date order
5. The team decided on no sticky behavior for dates in the list also no grouping events by dates for the first iteration or for launch

CalendarView

• UX working on adding the specs for this component
  
• Popover is auto height or the content determines the height, no truncation
• Popver opens on hover or click, will be decided on what the third party calendar supports

Following are my notes from the preliminary discussion with UX:

1. Todays date has a unique styling
2. For calendar view if no filters selected show the current month and events that belong to this month. Task: We need separate ES filter query to fetch these events.
3. For calendar view , the prop will be array of items object, we pass all the event data like title, category, taglabels, BlockEventDetail data,
4. Task: create a new component PopOver
5. Task: There will be separate tickets to fill this rubric to research 3 third party calendar components.

SectionPagination
Update SectionPagination to navigate between different page numbers.
It should be backward compatible and the legacy props should keep working.
We have ticket for component request which is complete -> APPS-2623 | Issue no 512
Pending work -> APPS-2623

Footer

1. We already have the footer component added to the layout.

Events

Describe any events that this page should handle.

1. No event handling on this page

Child components

Questions to UX

clear filters button and filters pils will be added to the figma template under filters for desktop and mobile (show all / clear)
-- No need for clear buttons to clear filters because they exist in the dropdowns
font color of the current date highlighted in calendar view question for Jen Rhee
-- today's date on calendar will have a circle around the date/number with a grey-blue fill
the filter dropdown will span the width for calendar view
-- the filter dropdown will fill the container area while the gap and view toggles remain the same size
is the Elastic search query doing an and operation when multiple event filters are selected from the drop down.
-- Yes
Is the Elastic search performing or operation when there is date range and filters selected?
-- No, it is an AND operation
Are there style specs for calendar view and other parts of this page for desktop and mobile.
-- There will be / in progress
Remind me if Calendar View is only available for Desktop and Listing is the only choice for Mobile and tablet?
-- Correct. Calendar view is only on Desktop
How is the list view sorted?
-- Most recent/upcoming first ASC
When the user loads the page for the first time without any filters applied, Are we showing all events and how are they sorted on the listing page?
-- Today going forward / upcoming events sorted by soonest event first
Craft work -> how are the filters grouped by content type or other labels in figma design drop down, we don't see that support in craft event filters. Do we need event filter groups?
-- Categories / Axa work on this

Update 11-27-2024

Event Listing filters and Calendar and List View discussion

Tablet spec decisions:

• Question: Are we showing calendar view in tablet?
• we need specs or design for tablet.

Mobile spec Decisions:

• No grouping by dates or sticky behaviour on dates for launch.
• The date and time will be part of the card itself
• clear filter pils for taglabels and date selected will be shown for mobile view
• No toggle tabs for mobile view, only list view sectionteaserlist component with vertical cards in mobile view
• The background color can be set to paleblue when this list view component is wrapped in sectionwrapper based on useWindowSize composable from vueuse? or do we prefer some other way to add the paleblue theme

Screenshots

Desktop:

Mobile: