This walkthrough will demonstrate how to use the Membership Microservices to add member roles to your website
Continue from the members walkthrough and perform steps 1-7 without the cleanup
Open ‘views\home\index.cshtml’ and add the following within the ‘editMember’ div beneath the <ix-edit-member> element.
<ix-list-member-roles member="$ctrl.memberToEdit"></ix-list-member-roles>
Now upon selecting a member for editing, a list of the member’s roles will be displayed. As no roles are yet added to the member it will display “No roles found”
Open ‘Scripts\components\home.component.ts’ and add the following
private _addingMemberRole: boolean = false; public get addingMemberRole() { return this._addingMemberRole; } public addMemberRole = () => { this._addingMemberRole = true; } public onMemberRoleAdded = () => { this._addingMemberRole = false; }
Open ‘views\home\index.cshtml’ and add the following within the ‘editMember’ div beneath the <ix-list-member-roles> element
<button class="add-role" ng-click="$ctrl.addMemberRole()">Add Role</button> <div ng-if="$ctrl.addingMemberRole"> <ix-add-member-role member="$ctrl.memberToEdit" on-added="$ctrl.onMemberRoleAdded"></ix-add-member-role> </div>
When editing a member, pressing the “Add Role” button will display a dropdown list with available roles to add to the member.
Open ‘Scripts\components\home.component.ts’ and add the following
private _removingMemberRole: boolean = false; public get removingMemberRole() { return this._removingMemberRole; } public removeMemberRole = () => { this._addingMemberRole = false; this._removingMemberRole = true; } public onMemberRoleRemoved = () => { this._removingMemberRole = false; }
Modify the member role added function to suit:
public addMemberRole = () => { this._removingMemberRole = false; this._addingMemberRole = true; }
Open ‘views\home\index.cshtml’ and edit the ‘editMember’ div to the following
<div ng-if="$ctrl.editMember"> <ix-edit-member member="$ctrl.memberToEdit" on-edited="$ctrl.onEdited" on-cancelled="$ctrl.onEditCancelled" on-removed="$ctrl.onMemberRemoved"></ix-edit-member> <ix-list-member-roles member="$ctrl.memberToEdit"></ix-list-member-roles> <button class="add-role" ng-click="$ctrl.addMemberRole()">Add Role</button> <button class="remove-role" ng-click="$ctrl.removeMemberRole()">Remove Role</button> <div ng-if="$ctrl.addingMemberRole"> <ix-add-member-role member="$ctrl.memberToEdit" on-added="$ctrl.onMemberRoleAdded"></ix-add-member-role> </div> <div ng-if="$ctrl.removingMemberRole"> <ix-remove-member-role member="$ctrl.memberToEdit" on-removed="$ctrl.onMemberRoleRemoved"></ix-remove-member-role> </div> </div>
When editing a member, pressing the “Remove Role” button will display a dropdown list with the roles of the current member for removal.
Thats the end of this walk-through.
To stop and remove all the docker containers run the following:
docker stop mem_demo_id docker stop mem_demo_mem docker stop mem_demo_rmq docker stop mem_demo_db docker rm mem_demo_id docker rm mem_demo_mem docker rm mem_demo_rmq docker rm mem_demo_db docker network rm mem_demo-net