This blog article will illustrate how to edit a Session in Open Event Frontend, for which a nested route /sessions/edit/<session_id> had to be created. Further an Edit Session Form was created on that route to use the patch end-point of the sessions API of Open Event API.
To get started with it, we simply use the ember CLI to generate the routes
| $ ember generate route events/view/sessions/edit |
Now router.js file is changed to add the session_id. The router.js file should be looking like this now.
| this.route(‘sessions’, function() { this.route(‘list’, { path: ‘/:session_status’ }); this.route(‘create’); this.route(‘edit’, { path: ‘/edit/:session_id’ }); }); |
This means that our routes and sub routes are in place. We are using ember CLI to generate these routes, that means, the template files for them generate automatically. Now these routes exist and we need to write the data in the templates of these routes which will get displayed to the end user.
The routes are nested, the content of the parent route can be made available to all the children routes via the outlet in ember js.
Next, we go to the template file of sessions/edit route which is at templates/events/view/sessions/edit.hbs which displays an Edit Session form.
| <form class=”ui form {{if isLoading ‘loading’}}” {{action ‘submit’ on=’submit’}}>
{{input type=’text’ id=’title’ value=data.title}} {{widgets/forms/rich-text-editor value=data.shortAbstract name=’shortAbstract’}} {{widgets/forms/rich-text-editor value=data.comments name=’comments’}} {{input type=’text’ value=data.slidesUrl}} <button type=”submit” class=”ui teal submit button update-changes”> |
After the editing of different attributes is done Save Session button is clicked for which the action is defined in the controller /controllers/events/view/sessions/edit.js. The patch endpoint was called and the details of the attributes changes were saved.
| save() { this.set(‘isLoading’, true); this.get(‘model’).save() .then(() => { this.get(‘notify’).success(this.get(‘l10n’).t(‘Session details have been saved’)); this.transitionToRoute(‘events.view.sessions’); }) .catch(() => { this.get(‘notify’).error(this.get(‘l10n’).t(‘Oops something went wrong. Please try again’)); }) .finally(() => { this.set(‘isLoading’, false); }); } } |
Thus after editing the attributes of sessions in the Edit Session form and clicking on the Save Session button the session details are edited.
Resources
- EmberJS Controllers: https://guides.emberjs.com/v2.12.0/controllers
- Open Event Server, API docs: https://open-event-api.herokuapp.com