This blog will illustrate how to add a new section to admin dashboard of Open Event Frontend which allows admin to add event types. For this we need modals to display a form by which we can edit or add a new event type and we need to create a new route admin/content/events. To create a new route we use ember CLI command:
ember g route admin/content/events
The primary end point of Open Event API with which we are concerned with for creating a new event type or topic is:
GET/POST/DELETE /v1/event-types
The model concerned with event types is:
name : attr('string'), slug : attr('string'), events: hasMany('event')
This model is very basic and contains only name and slug and a relationship to event model. Next we want to fetch the existing event types and display them in table. We write queries which fetches data in event-type model in the route file admin/content/events.js.
import Route from '@ember/routing/route'; export default Route.extend({ titleToken() { return this.get('l10n').t('Social Links'); }, async model() { return { 'eventTopics': await this.get('store').query('event-topic', {}), 'eventTypes': await this.get('store').query('event-type', {}) }; } });
This will fetch the data in our model. Next we need to display this data in a template for which we define a table that will display each event type.
<button class="ui blue button {{if device.isMobile 'fluid'}}" {{action 'openNewEventTypeModal'}}>{{t 'Add New Event Type'}}</button> <table class="ui celled table"> <tbody> {{#each model.eventTypes as |eventType|}} <tr> <td> {{eventType.name}} </td> </tr> {{/each}} </tbody> </table>
We have two buttons that are used to edit or delete a event type. Both buttons open up a modal to achieve this functionality. We also have a “Add new Event Type” button at the top. This buttons opens up a modal and sends out a action to its controller when user successfully fills up the name of the event type. Let us take a look at the code of our controller that saves/deletes our event type to server.
addEventType() { this.set('isLoading', true); this.get('eventType').save() .then(() => { // Success message }) .catch(()=> { //failure message }) .finally(() => { this.set('isLoading', false); }); }
deleteEventType(eventType) { this.set('isLoading', true); eventType.destroyRecord() .then(() => { // Success }) .catch(()=> { //failure }) .finally(() => { this.set('isLoading', false); }); }
In addNewEventType() function we take the data from the form and save the model, which eventually sends POST request to save the new Event Type on server. This returns a JavaScript promise and we handle it via then and catch. It goes to then block if promise resolves and goes to catch is promise rejects/fails.
Similarly in delete function we take the eventType which is passed as model of event-type object and call destroyRecord() function which eventually sends out a DELETE request to server and data gets deleted. Here also we handle the response via resolve and reject depicted with then and catch respectively.