feat: groups add and unassign role (#1027)

Fixes #1026

src/app/groups/common-resolvers/group-data-and-template.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { GroupsService } from '../groups.service';
+
+/**
+ * Groups data and template resolver.
+ */
+@Injectable()
+export class GroupDataAndTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} GroupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Groups data and template.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.paramMap.get('groupId');
+    return this.groupsService.getGroupData(groupId, 'true');
+  }
+
+}

src/app/groups/groups-routing.module.ts

@@ -16,6 +16,7 @@ import { NotesTabComponent } from './groups-view/notes-tab/notes-tab.component';
 import { CommitteeTabComponent } from './groups-view/committee-tab/committee-tab.component';
 import { CreateGroupComponent } from './create-group/create-group.component';
 import { DatatableTabsComponent } from './groups-view/datatable-tabs/datatable-tabs.component';
+import { AddRoleComponent } from './groups-view/add-role/add-role.component';
 
 /** Custom Resolvers */
 import { GroupViewResolver } from './common-resolvers/group-view.resolver';
@@ -25,6 +26,7 @@ import { GroupNotesResolver } from './common-resolvers/group-notes.resolver';
 import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver';
 import { GroupDatatablesResolver } from './common-resolvers/group-datatables.resolver';
 import { GroupDatatableResolver } from './common-resolvers/group-datatable.resolver';
+import { GroupDataAndTemplateResolver } from './common-resolvers/group-data-and-template.resolver';
 
 /** Groups Routes */
 const routes: Routes = [
@@ -94,6 +96,23 @@ const routes: Routes = [
                 }
               ]
             },
+            {
+              path: 'committee',
+              children: [
+                {
+                  path: '',
+                  redirectTo: '../committee', pathMatch: 'prefix'
+                },
+                {
+                  path: 'add-role',
+                  data: { title: extract('Add Role'), breadcrumb: 'Add Role', routeParamBreadcrumb: false },
+                  component: AddRoleComponent,
+                  resolve: {
+                    groupAndTemplateData: GroupDataAndTemplateResolver
+                  }
+                },
+              ]
+            },
             {
               path: 'savingsaccounts',
               loadChildren: '../savings/savings.module#SavingsModule'
@@ -118,6 +137,7 @@ const routes: Routes = [
               GroupSummaryResolver,
               GroupNotesResolver,
               GroupDatatablesResolver,
-              GroupDatatableResolver]
+              GroupDatatableResolver,
+              GroupDataAndTemplateResolver]
 })
 export class GroupsRoutingModule { }

src/app/groups/groups-view/add-role/add-role.component.html

@@ -0,0 +1,48 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="groupsAddRoleForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Client</mat-label>
+            <mat-select formControlName="clientId">
+              <mat-option *ngFor="let client of clientMemberData" [value]="client.id">
+                {{ client.displayName }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="groupsAddRoleForm.controls.clientId.hasError('required')">
+              Client Member is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Role</mat-label>
+            <mat-select formControlName="role">
+              <mat-option *ngFor="let role of roleData" [value]="role.id">
+                {{ role.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="groupsAddRoleForm.controls.role.hasError('required')">
+              Role is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!groupsAddRoleForm.valid">Confirm</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/groups/groups-view/add-role/add-role.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}

src/app/groups/groups-view/add-role/add-role.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddRoleComponent } from './add-role.component';
+
+describe('AddRoleComponent', () => {
+  let component: AddRoleComponent;
+  let fixture: ComponentFixture<AddRoleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddRoleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddRoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/groups/groups-view/add-role/add-role.component.ts

@@ -0,0 +1,68 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { GroupsService } from '../../groups.service';
+
+/**
+ * Groups Add Role Component
+ */
+@Component({
+  selector: 'mifosx-add-role',
+  templateUrl: './add-role.component.html',
+  styleUrls: ['./add-role.component.scss']
+})
+export class AddRoleComponent implements OnInit {
+
+  /** Groups Add Role Form */
+  groupsAddRoleForm: FormGroup;
+  /** Client Menmber Data */
+  clientMemberData: any;
+  /** Role Data */
+  roleData: any;
+  /** Groups Account and Template Data */
+  groupAndTemplateData: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {GroupsService} groupsService Groups Service
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   */
+  constructor(private formBuilder: FormBuilder,
+              private groupsService: GroupsService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { groupAndTemplateData: any }) => {
+      this.groupAndTemplateData = data.groupAndTemplateData;
+    });
+  }
+
+  ngOnInit() {
+    this.clientMemberData = this.groupAndTemplateData.activeClientMembers;
+    this.roleData = this.groupAndTemplateData.availableRoles;
+    this.createGroupsAddRoleForm();
+  }
+
+  /**
+   * Creates the add group role form.
+   */
+  createGroupsAddRoleForm() {
+    this.groupsAddRoleForm = this.formBuilder.group({
+      'clientId': ['', Validators.required],
+      'role': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submits the form and assigns the group role.
+   */
+  submit() {
+    this.groupsService.executeGroupCommand(this.groupAndTemplateData.id, 'assignRole', this.groupsAddRoleForm.value).subscribe(() => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

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(() => {});
+      }
     });
   }
 

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Unassign Role</h1>
+<div mat-dialog-content>
+  <p>Are you sure you want to unassign role for client member with id: {{ data.id }} ?</p>
+</div>
+<mat-dialog-actions align="end">
+  <button mat-raised-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+</mat-dialog-actions>

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnassignRoleDialogComponent } from './unassign-role-dialog.component';
+
+describe('UnassignRoleDialogComponent', () => {
+  let component: UnassignRoleDialogComponent;
+  let fixture: ComponentFixture<UnassignRoleDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UnassignRoleDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnassignRoleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.ts

@@ -0,0 +1,22 @@
+/** Angular Imports */
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+/**
+ * Unassign role dialog component.
+ */
+@Component({
+  selector: 'mifosx-unassign-role-dialog',
+  templateUrl: './unassign-role-dialog.component.html',
+  styleUrls: ['./unassign-role-dialog.component.scss']
+})
+export class UnassignRoleDialogComponent {
+
+  /**
+   * @param {MatDialogRef} dialogRef Component reference to dialog.
+   * @param {any} data.
+   */
+  constructor(public dialogRef: MatDialogRef<UnassignRoleDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+}

src/app/groups/groups.module.ts

@@ -18,6 +18,8 @@ import { CreateGroupComponent } from './create-group/create-group.component';
 import { DatatableTabsComponent } from './groups-view/datatable-tabs/datatable-tabs.component';
 import { SingleRowComponent } from './groups-view/datatable-tabs/single-row/single-row.component';
 import { MultiRowComponent } from './groups-view/datatable-tabs/multi-row/multi-row.component';
+import { AddRoleComponent } from './groups-view/add-role/add-role.component';
+import { UnassignRoleDialogComponent } from './groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component';
 
 /**
  * Groups Module
@@ -40,7 +42,12 @@ import { MultiRowComponent } from './groups-view/datatable-tabs/multi-row/multi-
     CreateGroupComponent,
     DatatableTabsComponent,
     SingleRowComponent,
-    MultiRowComponent
+    MultiRowComponent,
+    AddRoleComponent,
+    UnassignRoleDialogComponent
+  ],
+  entryComponents: [
+    UnassignRoleDialogComponent
   ],
   providers: [DatePipe]
 })

src/app/groups/groups.service.ts

@@ -13,6 +13,7 @@ import { map } from 'rxjs/operators';
     providedIn: 'root'
 })
 export class GroupsService {
+
   /**
    * @param {HttpClient} http Http Client to send requests.
    */
@@ -36,153 +37,174 @@ export class GroupsService {
     // filterBy: name
     filterBy.forEach(function (filter: any) {
       if (filter.value) {
-        console.log(filter.value);
         httpParams = httpParams.set(filter.type, filter.value);
       }
     });
     return this.http.get('/groups', { params: httpParams });
   }
 
-    /**
-     * @param {number} officeId Office Id of office to get groups for.
-     * @returns {Observable<any>}
-     */
-    getGroupsByOfficeId(officeId: number): Observable<any> {
-        const httpParams = new HttpParams().set('officeId', officeId.toString());
-        return this.http.get('/groups', { params: httpParams } );
-    }
+  /**
+   * @param {number} officeId Office Id of office to get groups for.
+   * @returns {Observable<any>}
+   */
+  getGroupsByOfficeId(officeId: number): Observable<any> {
+      const httpParams = new HttpParams().set('officeId', officeId.toString());
+      return this.http.get('/groups', { params: httpParams } );
+  }
 
-    /**
-     * @param groupId Group Id of group to get data for.
-     * @returns {Observable<any>} Group data.
-     */
-    getGroupData(groupId: string): Observable<any> {
-      const httpParams = new HttpParams().set('associations', 'all');
-      return this.http.get(`/groups/${groupId}`, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group data.
+   */
+  getGroupData(groupId: string, template?: string): Observable<any> {
+    let httpParams = new HttpParams().set('associations', 'all');
+    httpParams = template ? httpParams.set('template', template) : httpParams;
+    return this.http.get(`/groups/${groupId}`, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to get data for.
-     * @returns {Observable<any>} Group Summary data.
-     */
-    getGroupSummary(groupId: string): Observable<any> {
-      const httpParams = new HttpParams().set('R_groupId', groupId)
-        .set('genericResultSet', 'false');
-      return this.http.get(`/runreports/GroupSummaryCounts`, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group Summary data.
+   */
+  getGroupSummary(groupId: string): Observable<any> {
+    const httpParams = new HttpParams().set('R_groupId', groupId)
+      .set('genericResultSet', 'false');
+    return this.http.get(`/runreports/GroupSummaryCounts`, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to get data for.
-     * @returns {Observable<any>} Group Accounts data.
-     */
-    getGroupAccountsData(groupId: string): Observable<any> {
-      return this.http.get(`/groups/${groupId}/accounts`);
-    }
+  /**
+   * @param {string} groupId Group Id
+   * @param {string} command Command
+   * @param {any} roleId Role Id
+   * @returns {Observable<any>}
+   */
+  executeGroupCommand(groupId: string, command: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/groups/${groupId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to get data for.
-     * @returns {Observable<any>} Group Notes data.
-     */
-    getGroupNotes(groupId: string): Observable<any> {
-      return this.http.get(`/groups/${groupId}/notes`);
-    }
+  /**
+   * @param {string} groupId Group Id
+   * @param {any} roleId Role Id
+   * @returns {Observable<any>}
+   */
+  unAssignRoleCommand(groupId: string, roleId: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'unassignRole')
+      .set('roleId', roleId);
+    return this.http.post(`/groups/${groupId}`, {}, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to create note for.
-     * @param noteData Note Data.
-     * @returns {Observable<any>}
-     */
-    createGroupNote(groupId: string, noteData: any): Observable<any> {
-      return this.http.post(`/groups/${groupId}/notes`, noteData);
-    }
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group Accounts data.
+   */
+  getGroupAccountsData(groupId: string): Observable<any> {
+    return this.http.get(`/groups/${groupId}/accounts`);
+  }
 
-    /**
-     * @param groupId Group Id of group to edit note for.
-     * @param noteId Note Id
-     * @param noteData Note Data
-     * @returns {Observable<any>}
-     */
-    editGroupNote(groupId: string, noteId: string, noteData: any): Observable<any> {
-      return this.http.put(`/groups/${groupId}/notes/${noteId}`, noteData);
-    }
+  /**
+   * @param groupId Group Id of group to get data for.
+   * @returns {Observable<any>} Group Notes data.
+   */
+  getGroupNotes(groupId: string): Observable<any> {
+    return this.http.get(`/groups/${groupId}/notes`);
+  }
 
-    /**
-     * @param groupId Group Id of group to delete note for.
-     * @param noteId Note Id
-     * @returns {Observable<any>}
-     */
-    deleteGroupNote(groupId: string, noteId: string): Observable<any> {
-      return this.http.delete(`/groups/${groupId}/notes/${noteId}`);
-    }
+  /**
+   * @param groupId Group Id of group to create note for.
+   * @param noteData Note Data.
+   * @returns {Observable<any>}
+   */
+  createGroupNote(groupId: string, noteData: any): Observable<any> {
+    return this.http.post(`/groups/${groupId}/notes`, noteData);
+  }
 
-    /**
-     * @returns {Observable<any>}
-     */
-    getGroupDatatables(): Observable<any> {
-      const httpParams = new HttpParams().set('apptable', 'm_group');
-      return this.http.get(`/datatables`, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to edit note for.
+   * @param noteId Note Id
+   * @param noteData Note Data
+   * @returns {Observable<any>}
+   */
+  editGroupNote(groupId: string, noteId: string, noteData: any): Observable<any> {
+    return this.http.put(`/groups/${groupId}/notes/${noteId}`, noteData);
+  }
 
-    /**
-     * @param groupId Group Id of group to get datatable for.
-     * @param datatableName Data table name.
-     * @returns {Observable<any>}
-     */
-    getGroupDatatable(groupId: string, datatableName: string): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.get(`/datatables/${datatableName}/${groupId}`, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to delete note for.
+   * @param noteId Note Id
+   * @returns {Observable<any>}
+   */
+  deleteGroupNote(groupId: string, noteId: string): Observable<any> {
+    return this.http.delete(`/groups/${groupId}/notes/${noteId}`);
+  }
 
-    /**
-     * @param groupId Group Id of group to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @param data Data.
-     * @returns {Observable<any>}
-     */
-    addGroupDatatableEntry(groupId: string, datatableName: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.post(`/datatables/${datatableName}/${groupId}`, data, { params: httpParams });
-    }
+  /**
+   * @returns {Observable<any>}
+   */
+  getGroupDatatables(): Observable<any> {
+    const httpParams = new HttpParams().set('apptable', 'm_group');
+    return this.http.get(`/datatables`, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @param data Data.
-     * @returns {Observable<any>}
-     */
-    editGroupDatatableEntry(groupId: string, datatableName: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.put(`/datatables/${datatableName}/${groupId}`, data, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to get datatable for.
+   * @param datatableName Data table name.
+   * @returns {Observable<any>}
+   */
+  getGroupDatatable(groupId: string, datatableName: string): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${groupId}`, { params: httpParams });
+  }
 
-    /**
-     * @param groupId Group Id of group to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @returns {Observable<any>}
-     */
-    deleteDatatableContent(groupId: string, datatableName: string): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.delete(`/datatables/${datatableName}/${groupId}`, { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @param data Data.
+   * @returns {Observable<any>}
+   */
+  addGroupDatatableEntry(groupId: string, datatableName: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.post(`/datatables/${datatableName}/${groupId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param {number} officeId Office Id of office to get staff for.
-     * @returns {Observable<any>}
-     */
-    getStaff(id: number): Observable<any> {
-      const httpParams = new HttpParams()
-          .set('officeId', id.toString())
-          .set('staffInSelectedOfficeOnly', 'true');
-      return this.http.get('/groups/template', { params: httpParams });
-    }
+  /**
+   * @param groupId Group Id of group to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @param data Data.
+   * @returns {Observable<any>}
+   */
+  editGroupDatatableEntry(groupId: string, datatableName: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.put(`/datatables/${datatableName}/${groupId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param {any} group Group to be created.
-     * @returns {Observable<any>}
-     */
-    createGroup(group: any): Observable<any> {
-        return this.http.post('/groups', group);
-    }
+  /**
+   * @param groupId Group Id of group to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @returns {Observable<any>}
+   */
+  deleteDatatableContent(groupId: string, datatableName: string): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.delete(`/datatables/${datatableName}/${groupId}`, { params: httpParams });
+  }
 
+  /**
+   * @param {number} officeId Office Id of office to get staff for.
+   * @returns {Observable<any>}
+   */
+  getStaff(id: number): Observable<any> {
+    const httpParams = new HttpParams()
+        .set('officeId', id.toString())
+        .set('staffInSelectedOfficeOnly', 'true');
+    return this.http.get('/groups/template', { params: httpParams });
+  }
+
+  /**
+   * @param {any} group Group to be created.
+   * @returns {Observable<any>}
+   */
+  createGroup(group: any): Observable<any> {
+      return this.http.post('/groups', group);
+  }
 
 }