This blog article will illustrate how the tickets are displayed on the public event page in Open Event Frontend, using the tickets API. It will also illustrate the use of the add on, ember-data-has-query, and what role it will play in fetching data from various APIs. Our discussion primarily will involve the public/index route. The primary end point of Open Event API with which we are concerned with for fetching tickets for an event is
GET /v1/events/{event_identifier}/tickets
Since there are multiple routes under public including public/index, and they share some common event data, it is efficient to make the call for Event on the public route, rather than repeating it for each sub route, so the model for public route is:
model(params) {
return this.store.findRecord('event', params.event_id, { include: 'social-links' });
}
This modal takes care of fetching all the event data, but as we can see, the tickets are not included in the include parameter. The primary reason for this is the fact that the tickets data is not required on each of the public routes, rather it is required for the index route only. However the tickets have a has-many relationship to events, and it is not possible to make a call for them without calling in the entire event data again. This is where a really useful addon, ember-data-has-many-query comes in.
To quote the official documentation,
Ember Data‘s DS.Store supports querying top-level records using the query function.However, DS.hasMany and DS.belongsTo cannot be queried in the same way.This addon provides a way to query has-many and belongs-to relationships
So we can now proceed with the model for public/index route.
model() {
const eventDetails = this._super(...arguments);
return RSVP.hash({
event : eventDetails,
tickets : eventDetails.query('tickets', {
filter: [
{
and: [
{
name : 'sales-starts-at',
op : 'le',
val : moment().toISOString()
},
{
name : 'sales-ends-at',
op : 'ge',
val : moment().toISOString()
}
]
}
]
}),
We make use of this._super(…arguments) to use the event data fetched in the model of public route, eliminating the need for a separate API call for the same. Next, the ember-has-many-query add on allows us to query the tickets of the event, and we apply the filters restricting the tickets to only those, whose sale is live.
After the tickets are fetched they are passed onto the ticket list component to display them. We also need to take care of the cases, where there might be no tickets in case the event organiser is using an external ticket URL for ticketing, which can be easily handled via the is-ticketing-enabled property of events. And in case they are not enabled we don’t render the ticket-list component rather a button linked to the external ticket URL is rendered. In case where ticketing is enabled the various properties which need to be computed such as the total price of tickets based on user input are handled by the ticket-list component itself.
{{#if model.event.isTicketingEnabled}}
{{public/ticket-list tickets=model.tickets}}
{{else}}
<div class="ui grid">
<div class="ui row">
<a href="{{ticketUrl}}" class="ui right labeled blue icon button">
<i class="ticket icon"></i>
{{t 'Order tickets'}}
</a>
</div>
<div class="ui row muted text">
{{t 'You will be taken to '}} {{ticketUrl}} {{t ' to complete the purchase of tickets'}}
</div>
</div>
{{/if}}
This is the most efficient way to fetch tickets, and also ensures that only the relevant data is passed to the concerned ticket-list component, without making any extra API calls, and it is made possible by the ember-data-has-many-query add on, with very minor changes required in the adapter and the event model. All that is required to do is make the adapter and the event model extend the RestAdapterMixin and ModelMixin provided by the add on, respectively.