This blog illustrates how the events explore page is implemented in the Open Event Frontend web app. The user can land on the events explore page by clicking on Browse Events button in the top panel on the home page, shown by the mouse tip in the following picture.
Here, the user can use the various filter options provided to search for the events as per his requirements, He/she can filter according to categories, sub-categories for each category, event type, and date range. A unique feature here is that the user can pick from the start date range options such as today, tomorrow, this week, this weekend, next week and many more. If neither of these fits his needs he can use custom dates as well. The user can also filter events using event location which is autocompleted using Google Maps API. Thus, searching for events is fast, easy and fun.
Let us see how this has been implemented.
Implementation
The explore routes has a method _loadEvents(params). Here, params is the various query parameters for filtering the events. This method forms the query, sends it to the server and returns the list of events returned by the server. The server uses Flask-REST-JSONAPI. It has a very flexible filtering system. It is completely related to the data layer used by the ResourceList manager. More information about this can be found here.
So, the filters are formed using syntax specified in the link mentioned above. We form an array filterOptions which stores the various filters. The default filter is that the event should be published:
let filterOptions = [ { name : 'state', op : 'eq', val : 'published' } ];
Then we check for each filter option and check if it is present or not. If yes then we add it to filterOptions. An example as follows:
if (params.category) { filterOptions.push({ name : 'event-topic', op : 'has', val : { name : 'name', op : 'eq', val : params.category } }); }
This is repeated for sub_category, event_type, location and start_date and end_date. An event is considered to fulfill the date filter if it satisfies any one of the given conditions:
- If both start_date and end_date are mentioned:
- Event start_date is after filter start date and before filter end date.
- Or, event end date if after filter start date and before filter end date.
- Or, event start date is before filter start date and event end date date is after filter end date.
- If only start_date is mentioned, then if the event start date is after filter start date or event end date is after filter start date.
The code to this can be found here. For the date ranges mentioned above(today, tomorrow etc) the start dates and end dates are calculated using the moment.js library and then passed on as params.
The filteredEvents are passed in the route model.
async model(params) { return { eventTypes : await this.store.findAll('event-type'), eventTopics : await this.store.findAll('event-topic', { include: 'event-sub-topics' }), filteredEvents : await this._loadEvents(params) }; }
The variable is set in the controller and any change to the query params is observed for. The method _loadEvents is called whenever the query params change.
setupController(controller, model) { this._super(...arguments); controller.set('filteredEvents', model.filteredEvents); this.set('controller', controller); }, actions: { async queryParamsDidChange(change, params) { if (this.get('controller')) { this.get('controller').set('filteredEvents', await this._loadEvents(params)); } } }
The template iterates over the filteredEvents and displays each one in a card.
