feat: add view, edit configure maker checker component (#917)

Fixes: #184

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html

@@ -0,0 +1,54 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <ng-container>
+
+      <div fxLayout="row">
+
+        <div fxFlex="30" fxLayout="column">
+          <mat-list>
+            <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
+              <span class="groupingName">
+                {{ formatName(grouping) }}
+              </span>
+            </mat-list-item>
+          </mat-list>
+        </div>
+
+        <div fxFlex="70" fxLayout="column" class="listPermission">
+          <form [formGroup]="formGroup" (submit)="submit()">
+
+            <div *ngFor="let permission of permissions.permissions" class="displayPermissions">
+                <div formArrayName="roster">
+                  <div [formGroupName]="permission.id">
+                    <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
+                    {{ permissionName(permission.code) }}
+                  </mat-checkbox>
+                  </div>
+                </div>
+              </div>
+
+            </form>
+        </div>
+
+      </div>
+    </ng-container>
+
+    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
+      <mat-card-actions>
+        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">Cancel</button>
+        <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+      </mat-card-actions>
+    </div>
+
+  </mat-card>
+
+</div>

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.scss

@@ -0,0 +1,40 @@
+.displayPermissions {
+  padding-top: 15px;
+}
+
+span {
+  font-size: 1rem;
+}
+
+mat-list-item {
+  cursor: pointer;
+}
+
+.mat-list-base .mat-list-item .mat-list-item-content {
+  cursor: pointer;
+}
+
+.active {
+  background-color: #f2f2f2;
+}
+
+.groupingName {
+  padding: 0px 10px;
+}
+
+.listPermission {
+  padding-left: 20px;
+}
+
+.permissionSelected {
+  margin-top: 10px;
+  height: 40px;
+}
+
+.inactive {
+  transition: all .2s ease-in-out;
+}
+
+.inactive:hover {
+  transform: scale(1.1);
+}

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.spec.ts

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

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts

@@ -0,0 +1,164 @@
+import { Component, OnInit } from '@angular/core';
+import { constructor } from 'lodash';
+import { ActivatedRoute } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import * as _ from 'lodash';
+import { SystemService } from '../system.service';
+
+@Component({
+  selector: 'mifosx-configure-maker-checker-tasks',
+  templateUrl: './configure-maker-checker-tasks.component.html',
+  styleUrls: ['./configure-maker-checker-tasks.component.scss']
+})
+export class ConfigureMakerCheckerTasksComponent implements OnInit {
+
+  permissionsData: any;
+  groupings: string[] = [];
+  formData = {};
+  isDisabled = true;
+  newEntry: any;
+  selectedItem = '';
+  previousGrouping = '';
+  checkboxesChanged: Boolean = false;
+  currentGrouping: string;
+  formGroup: FormGroup;
+  backupform: FormGroup;
+
+  permissions: {
+    permissions: { code: string, id: number }[]
+  };
+  tempPermissionUIData: {
+    permissions: { code: string }[]
+  }[];
+
+  constructor(private route: ActivatedRoute,
+    private systemService: SystemService,
+    private formBuilder: FormBuilder, ) {
+    this.route.data.subscribe((data: { permissions: any }) => {
+      this.permissionsData = data.permissions;
+    });
+  }
+
+  ngOnInit() {
+    this.createForm();
+    this.setMakerCheckerTask();
+    this.selectedItem = 'portfolio';
+    this.showPermissions('portfolio');
+  }
+
+  /**
+   * creates the form to display and edit permissions
+   */
+  createForm() {
+    this.formGroup = this.formBuilder.group({
+      roster: this.formBuilder.array(this.permissionsData.map((elem: any) => this.createMemberGroup(elem)))
+    });
+  }
+
+  createMemberGroup(permission: any): FormGroup {
+    return this.formBuilder.group({
+      ...permission,
+      ...{
+        code: [permission.code, Validators.required],
+        selected: [{ value: permission.selected, disabled: true }, Validators.required]
+      }
+    });
+  }
+
+  setMakerCheckerTask() {
+    this.tempPermissionUIData = [{
+      permissions: []
+    }];
+    for (const i in this.permissionsData) {
+      if (this.permissionsData[i]) {
+        if (this.permissionsData[i].grouping !== this.currentGrouping) {
+          this.currentGrouping = this.permissionsData[i].grouping;
+          this.groupings.push(this.currentGrouping);
+          this.tempPermissionUIData[this.currentGrouping] = { permissions: [] };
+        }
+        const temp = { code: this.permissionsData[i].code, id: i, selected: this.permissionsData[i].selected };
+        this.tempPermissionUIData[this.currentGrouping].permissions.push(temp);
+      }
+    }
+  }
+
+  showPermissions(grouping: string) {
+    this.permissions = this.tempPermissionUIData[grouping];
+    this.selectedItem = grouping;
+    this.previousGrouping = grouping;
+  }
+
+
+  permissionName = function (name: any) {
+    name = name || '';
+    // replace '_' with ' '
+    name = name.replace(/_/g, ' ');
+    // for reorts replace read with view
+    if (this.previousGrouping === 'report') {
+      name = name.replace(/READ/g, 'View');
+    }
+    return name;
+  };
+
+  formatName = function (stringVal: string) {
+    stringVal = stringVal || '';
+    if (stringVal.indexOf('portfolio_') > -1) {
+      stringVal = stringVal.replace('portfolio_', '');
+    }
+    if (stringVal.indexOf('transaction_') > -1) {
+      const temp = stringVal.split('_');
+      stringVal = temp[1] + ' ' + temp[0].charAt(0).toUpperCase() + temp[0].slice(1) + 's';
+    }
+    stringVal = stringVal.charAt(0).toUpperCase() + stringVal.slice(1);
+    return stringVal;
+  };
+
+  /**
+   * Backups the valued
+   */
+  backupCheckValues() {
+    this.backupform = _.cloneDeep(this.formGroup) as FormGroup;
+  }
+
+  /**
+   * Restores the checkboxes to previous data on clicking cancel
+   */
+  restoreCheckboxes() {
+    this.formGroup = _.cloneDeep(this.backupform) as FormGroup;
+  }
+
+  isTaskEnable(value: any) {
+    return value;
+  }
+
+  editTask() {
+    this.isDisabled = false;
+    this.formGroup.controls.roster.enable();
+  }
+
+  /**
+   * Cancel the changes
+   */
+  cancel() {
+    this.isDisabled = true;
+    this.formGroup.controls.roster.disable();
+  }
+
+  submit() {
+    const value = this.formGroup.get('roster').value;
+    const data = {};
+    const permissionData = {
+      permissions: {}
+    };
+    for (let i = 0; i < value.length; i++ ) {
+      data[value[i].code] = value[i].selected;
+    }
+    permissionData.permissions = data;
+    this.formGroup.controls.roster.disable();
+    this.checkboxesChanged = false;
+    this.isDisabled = true;
+    this.systemService.updateMakerCheckerPermission(permissionData).subscribe((response: any) => {
+    });
+  }
+
+}

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../system.service';
+
+/**
+ * Maker Checker Tasks resolver.
+ */
+@Injectable()
+export class MakerCheckerTasksResolver implements Resolve<Object> {
+
+    /**
+     * @param {SystemService} systemService System service.
+     */
+    constructor(private systemService: SystemService) { }
+
+    /**
+     * Returns all the Configurable Maker Checker Tasks.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.systemService.getMakerCheckerPermissions();
+    }
+
+}

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

@@ -80,6 +80,8 @@ import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-schedule
 import { ManageSchedulerJobResolver } from './manage-scheduler-jobs/manage-scheduler-job.resolver';
 import { ViewRoleResolver } from './roles-and-permissions/view-role/view-role.resolver';
 import { EntityToEntityMappingResolver } from './entity-to-entity-mapping/entity-to-entity-mapping.resolver';
+import { ConfigureMakerCheckerTasksComponent } from './configure-maker-checker-tasks/configure-maker-checker-tasks.component';
+import { MakerCheckerTasksResolver } from './configure-maker-checker-tasks/configure-maker-checker-tasks.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -360,6 +362,14 @@ const routes: Routes = [
           }
         ]
       },
+      {
+        path: 'configure-mc-tasks',
+        data: { title: extract('Configure Maker Checker Tasks'), breadcrumb: 'Configure Maker Checker Tasks' },
+        component: ConfigureMakerCheckerTasksComponent,
+        resolve: {
+              permissions: MakerCheckerTasksResolver
+          }
+        },
       {
         path: 'surveys',
         component: ManageSurveysComponent,
@@ -567,7 +577,8 @@ const routes: Routes = [
     ViewSchedulerJobResolver,
     ManageSchedulerJobResolver,
     ViewRoleResolver,
-    EntityToEntityMappingResolver
+    EntityToEntityMappingResolver,
+    MakerCheckerTasksResolver
   ]
 })
 export class SystemRoutingModule { }

src/app/system/system.component.html

@@ -32,7 +32,7 @@
             <p matLine>Define or modify roles and associated permissions</p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['configure-mc-tasks']">
             <mat-icon matListIcon>
               <fa-icon icon="sitemap" size="sm"></fa-icon>
             </mat-icon>

src/app/system/system.module.ts

@@ -55,6 +55,7 @@ import { ReportParameterDialogComponent } from './manage-reports/report-paramete
 import { AddEventDialogComponent } from './manage-hooks/add-event-dialog/add-event-dialog.component';
 import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
 import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
+import { ConfigureMakerCheckerTasksComponent } from './configure-maker-checker-tasks/configure-maker-checker-tasks.component';
 
 @NgModule({
   imports: [
@@ -108,7 +109,8 @@ import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-schedule
     EditSchedulerJobComponent,
     ViewRoleComponent,
     EditRoleComponent,
-    EntityToEntityMappingComponent
+    EntityToEntityMappingComponent,
+    ConfigureMakerCheckerTasksComponent
   ],
   entryComponents: [
     ReportParameterDialogComponent,

src/app/system/system.service.ts

@@ -541,5 +541,25 @@ export class SystemService {
     return this.http.get('/charges');
   }
 
+  /**
+   * @returns {Observable<any>}
+   */
+  getMakerCheckerPermissions(): Observable<any> {
+    const httpParams = new HttpParams()
+                      .set('makerCheckerable', 'true');
+    return this.http.get('/permissions', {params: httpParams});
+  }
+
+  /**
+   * @param data Maker Checker data
+   * @returns {Observable<any>}
+   */
+  updateMakerCheckerPermission(data: any): Observable<any> {
+    const httpParams = new HttpParams()
+                      .set('makerCheckerable', 'true');
+                      console.log('data: ', data);
+    return this.http.put('/permissions', data, { params: httpParams });
+  }
+
 
 }