Add member roles to your website

using the Membership Microservice

This walkthrough will demonstrate how to use the Membership Microservices to add member roles to your website

1. Add Members to your website
2. Add a list of member roles
3. Add roles to a member
4. Remove roles from a member

1. Add Members to your website

Continue from the members walkthrough and perform steps 1-7 without the cleanup

2. Add a list of member roles

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”

3. Add roles to a member

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.

4. Remove roles from a 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.

5. Wrapup

Thats the end of this walk-through.

6. Cleanup

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