This blog article will illustrate how the roles are created via the external model on the admin permissions page in Open Event Frontend, using the roles API. Our discussion primarily will involve the admin/permissions/index route to illustrate the process.The primary end point of Open Event API with which we are concerned with for fetching the permissions for a user is
POST /v1/roles
First we need to create a model for the user-permissions, which will have the fields corresponding to the api, so we proceed with the ember CLI command:
ember g model role
Next we define the model according to the requirements. The model needs to extend the base model class, and has only two fields one for the title and one for the actual name of the role.
import attr from 'ember-data/attr'; import ModelBase from 'open-event-frontend/models/base'; export default ModelBase.extend({ name : attr('string'), titleName : attr('string') });
Next we need to modify the existing modal to incorporate the API and creation of roles in it. It is very important to note here that using createRecord as the model will result in a major flaw. If createRecord is used and the user tries to create multiple roles, other than the first POST request all the subsequent requests will be PATCH requests and will keep on modifying the same role. To avoid this, a new record needs to be created every time the user clicks on Add Role. We slightly modify the modal component call to pass in the name and titleName to it.
{{modals/add-system-role-modal isOpen=isAddSystemRoleModalOpen isLoading=isLoading name=name titleName=titleName addSystemRole=(action 'addSystemRole')}}
Upon entering the details of the roles and successful validation of the form, if the user clicks the Add Role button of the modal, the action addSystemRole will be triggered. We will write the entire logic for the same in the respective controller of the route.
addSystemRole() { this.set('isLoading', true); this.get('store').createRecord('role', { name : this.get('name'), titleName : this.get('titleName') }).save() .then(() => { this.set('isLoading', false); this.notify.success(this.l10n.t('User permissions have been saved successfully.')); this.set('isAddSystemRoleModalOpen', false); this.setProperties({ name : null, roleTitleName : null }); }) .catch(()=> { this.set('isLoading', false); this.notify.error(this.l10n.t('An unexpected error has occurred. User permissions not saved.')); }); },
At first the isLoading property is made true.This adds the semantic UI class loading to the the form, and so the form goes in the loading state, Next, a record is created of the type role and it’s properties are made equal to the corresponding values entered by the user.
Then save() is called, which subsequently makes a POST request to the server. If the request is successful the modal is closed by setting the isAddSystemRoleModalOpen property to false. Also, the fields of the modal are cleared for a better user experience in case multiple roles need to be added one after the other.
In cases when there is an error during the processing of the request the catch() block executes. And the modal is not closed. Neither are the fields cleared.
Resources
- Ember JS-models – Official ember documentation
- Ember JS-Controller – Official ember documentation
- Open Event API Docs – authored by Fossasia project open-event-orga-server contributors
- Open Event frontend User permission route