This blog article will illustrate how the UI for the edit user modal is implemented and Users API has been integrated into it in Open Event Frontend.
The admin can make any user the admin, sales admin or the marketer of the app. In the route admin/users there is an ember table where all the users are listed. In the table there exists a column named ‘Action Buttons’.
When the edit action button is clicked a modal appears on the screen. Them template of the modal is as follows:
class="content">
class="ui form">
class="ui header">{{t 'Provide admin access?'}}
class="grouped inline fields">
class="field">
{{ui-radio name="isAdmin" label="Yes" value=true onChange=(action (mut isAdmin))}}
{{ui-radio name="isAdmin" label="No" value=false onChange=(action (mut isAdmin))}}
</div>
<h4 class="ui header">{{t 'Custom system roles'}}</h4>
class="field">
{{ui-checkbox label="Sales Admin" onChange=(action (mut checked))}}
{{ui-checkbox label="Marketer" onChange=(action (mut checked))}}
<button class="ui teal right floated submit button update-changes">
{{t 'Save'}}
</button>
</div>
</div>
For the API integration the users model is used. The attributes isAdmin, isSalesAdmin, isMarketer from the model are used to send a patch request to the server. The modal has basically to parts. The first part consists of radio buttons through which the super admin has the rights to create a user an admin of the app or to remove his role as the admin. The second part consists of checkboxes through which the user can get the custom system role to be the sales admin or the marketer. A get request is sent to the user’s model in the server and the initial values of the modal are decided.
If the admin changes some value, he clicks on the save button in the modal and a patch request is sent to the server. The save function is written in the modal’s component.
actions: {
saveRole(id) {
this.get('store').findRecord('user', id).then(function(user) {
user.save();
});
this.set('isOpen', false);
},
toggleSalesAdmin(user) {
user.toggleProperty('isSalesAdmin');
},
toggleMarketer(user) {
user.toggleProperty('isMarketer');
},
createAdmin(user, isAdmin) {
user.set('isAdmin', isAdmin);
}
}
Resources