feat: groups add and unassign role (#1027)

Fixes #1026

src/app/groups/groups-view/committee-tab/committee-tab.component.html

@@ -6,15 +6,14 @@
     </div>
     <div class="action-button m-b-10" fxLayoutGap="25px" *ngIf="groupStatus !== 'Closed'">
       <button mat-raised-button class="f-right" color="primary"
-      *mifosxHasPermission="'ASSIGNROLE_GROUP'">
+      *mifosxHasPermission="'ASSIGNROLE_GROUP'" [routerLink]="['add-role']">
         <i class="fa fa-plus"></i>&nbsp; Add</button>
     </div>
   </div>
 
   <div *ngIf="groupRolesData">
     
-    <table mat-table [dataSource]="groupRolesData"
-      class="mat-elevation-z1 m-b-25">
+    <table #rolesTable mat-table [dataSource]="groupRolesData" class="mat-elevation-z1 m-b-25">
 
       <ng-container matColumnDef="Name">
         <th mat-header-cell *matHeaderCellDef> Name </th>
@@ -35,8 +34,8 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let element">
           <span *ngIf="groupStatus !== 'Closed'">
-            <button class="account-action-button" mat-raised-button color="primary"
-            *mifosxHasPermission="'UNASSIGNROLE_GROUP'">
+            <button class="account-action-button" mat-raised-button color="warn"
+            *mifosxHasPermission="'UNASSIGNROLE_GROUP'" (click)="unassignRole(element.clientId, element.id)">
             <i class="fa fa-ban" matTooltip="Unassign"></i>
             </button>
           </span>

src/app/groups/groups-view/committee-tab/committee-tab.component.ts

@@ -1,6 +1,13 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { MatDialog, MatTable } from '@angular/material';
+
+/** Custom Dialogs */
+import { UnassignRoleDialogComponent } from '../custom-dialogs/unassign-role-dialog/unassign-role-dialog.component';
+
+/** Custom Services */
+import { GroupsService } from 'app/groups/groups.service';
 
 /**
  * Groups Committee Tab Component
@@ -15,18 +22,46 @@ export class CommitteeTabComponent {
   /** Group Status */
   groupStatus: any;
   /** Group Roles Data */
-  groupRolesData: any;
+  groupRolesData: any[];
+  /** Groups View Data */
+  groupViewData: any;
   /** Columns to be Displayed for client members table */
   groupRolesColumns: string[] = ['Name', 'Role', 'Client Id', 'Actions'];
 
+  /** Roles Table */
+  @ViewChild('rolesTable') rolesTableRef: MatTable<Element>;
+
   /**
    * Fetches groups data from parent's `resolve`.
-   * @param {ActivatedRoute} route Activated Route.
+   * @param {ActivatedRoute} route Activated Route
+   * @param {GroupsService} groupsService Groups Service
+   * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private groupsService: GroupsService,
+              public dialog: MatDialog) {
     this.route.parent.data.subscribe((data: { groupViewData: any }) => {
-      this.groupRolesData = data.groupViewData.groupRoles;
-      this.groupStatus = data.groupViewData.status.value;
+      this.groupViewData = data.groupViewData;
+      this.groupRolesData = this.groupViewData.groupRoles;
+      this.groupStatus = this.groupViewData.status.value;
+    });
+  }
+  /**
+   * Unassigns a client's role.
+   * @param {any} clientId Client Id
+   * @param {any} roleId Role Id
+   */
+  unassignRole(clientId: any, roleId: any) {
+    const unAssignRoleDialogRef = this.dialog.open(UnassignRoleDialogComponent, {
+      data: { id: clientId }
+    });
+    unAssignRoleDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        const clientIndex = this.groupRolesData.findIndex((client: any) => client.clientId === clientId);
+        this.groupRolesData.splice(clientIndex, 1);
+        this.rolesTableRef.renderRows();
+        this.groupsService.unAssignRoleCommand(this.groupViewData.id, roleId).subscribe(() => {});
+      }
     });
   }