feat: add client action (surveys) (#618)

Fixes: #617

src/app/clients/clients-view/client-actions/client-actions.component.html

@@ -1,3 +1,3 @@
 <mifosx-client-assign-staff *ngIf="actions['Assign Staff']"></mifosx-client-assign-staff>
 <mifosx-close-client *ngIf="actions['Close']"></mifosx-close-client>
-
+<mifosx-view-survey *ngIf="actions['Survey']"></mifosx-view-survey>

src/app/clients/clients-view/client-actions/client-actions.component.ts

@@ -15,10 +15,12 @@ export class ClientActionsComponent {
   /** Flag object to store possible actions and render appropriate UI to the user */
   actions: {
     'Assign Staff': boolean
-    'Close': boolean
+    'Close': boolean,
+    'Survey': boolean
   } = {
     'Assign Staff': false,
-    'Close': false
+    'Close': false,
+    'Survey': false
   };
 
   /**

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -0,0 +1,71 @@
+<div class="container">
+
+  <mat-card>
+
+    <div class="container">
+
+      <mat-card-content>
+
+        <div class="headingContent">
+          <div fxLayout="column" fxFlex="50%">
+            <div className="headingName">
+              <h3>List of All Surveys</h3>
+            </div>
+          </div>
+          <div fxLayout="column" fxFlex="50%">
+            <div fxLayout="row" fxLayoutAlign="flex-end">
+              <button mat-raised-button color="primary">
+                <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                Take Survey
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div fxLayout="row">
+          <mat-form-field fxFlex>
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event.target.value)">
+          </mat-form-field>
+        </div>
+
+        <div>
+
+          <table mat-table [dataSource]="dataSource" matSort>
+
+            <ng-container matColumnDef="surveyName">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header='surveyName'> Survey </th>
+              <td mat-cell *matCellDef="let surveydata"> {{ surveydata.surveyName }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="createdBy">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header='createdby'> Created By </th>
+              <td mat-cell *matCellDef="let surveydata"> {{ surveydata.createdby }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="date">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+              <td mat-cell *matCellDef="let surveydata"> {{ surveydata.date | date }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="score">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
+              <td mat-cell *matCellDef="let surveydata"> {{ surveydata.score }} </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+
+          </table>
+
+          <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+        </div>
+
+      </mat-card-content>
+
+    </div>
+
+  </mat-card>
+
+</div>

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.scss

@@ -0,0 +1,8 @@
+.headingContent{
+  margin-bottom: 1%;
+  margin-top: 1%;
+}
+
+.headingName {
+  display: block;
+}

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.spec.ts

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

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.ts

@@ -0,0 +1,71 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+
+/**
+ * View Survey component.
+ */
+@Component({
+  selector: 'mifosx-view-survey',
+  templateUrl: './view-survey.component.html',
+  styleUrls: ['./view-survey.component.scss']
+})
+export class ViewSurveyComponent implements OnInit {
+
+  surveyData: any;
+  /** Data source for view surveys table. */
+  dataSource: MatTableDataSource<any>;
+  /** Columns to be displayed in list of surveys table. */
+  displayedColumns: string[] = ['surveyName', 'createdBy', 'date', 'score'];
+  /** Paginator for list of surveys table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for list of surveys table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+
+  /**
+   * Retrieves the survey data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { clientActionData: any }) => {
+      this.surveyData = data.clientActionData;
+    });
+  }
+
+  ngOnInit() {
+    this.constructSurvey(this.surveyData);
+  }
+
+  /**
+   * Constructs the list of survey data
+   * @param data Survey Data
+   */
+  constructSurvey(data: any) {
+    const surveys: any[] = [];
+    data.forEach((ele: { id: number, userId: number, username: string, clientId: number, surveyId: number, surveyName: string, scorecardValues: Object[] }) => {
+      ele.scorecardValues.forEach((element: { createdOn: number, value: number }) => {
+        const item = {} as { surveyName: string, createdby: string, date: number, score: number };
+        item.surveyName = ele.surveyName;
+        item.createdby = ele.username;
+        item.date = element.createdOn;
+        item.score = element.value;
+        surveys.push(item);
+      });
+    });
+
+    this.dataSource = new MatTableDataSource(surveys);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Filters data in list of surveys table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}

src/app/clients/clients-view/clients-view.component.html

@@ -43,6 +43,7 @@
         <span *ngIf="!clientViewData.staffId"><button mat-menu-item (click)="doAction('Assign Staff')">Assign Staff</button></span>
         <span *ngIf="clientViewData.staffId"><button mat-menu-item (click)="doAction('Unassign Staff')">Unassign Staff</button></span>
         <button mat-menu-item (click)="doAction('Close')">Close</button>
+        <button mat-menu-item (click)="doAction('Survey')"> Survey</button>
       </mat-menu>
     </mat-card-actions>
   </mat-card-header>

src/app/clients/clients-view/clients-view.component.ts

@@ -52,6 +52,7 @@ export class ClientsViewComponent implements OnInit {
     switch (name) {
       case 'Assign Staff':
       case 'Close':
+      case 'Survey':
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;
        case 'Unassign Staff':

src/app/clients/clients.module.ts

@@ -29,7 +29,7 @@ import { ClientActionsComponent } from './clients-view/client-actions/client-act
 import { ClientAssignStaffComponent } from './clients-view/client-actions/client-assign-staff/client-assign-staff.component';
 import { UnassignStaffDialogComponent } from './clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component';
 import { CloseClientComponent } from './clients-view/client-actions/close-client/close-client.component';
-
+import { ViewSurveyComponent } from './clients-view/client-actions/view-survey/view-survey.component';
 
 /**
  * Clients Module
@@ -63,7 +63,8 @@ import { CloseClientComponent } from './clients-view/client-actions/close-client
     ClientActionsComponent,
     ClientAssignStaffComponent,
     UnassignStaffDialogComponent,
-    CloseClientComponent
+    CloseClientComponent,
+    ViewSurveyComponent
   ],
   entryComponents: [
     UploadDocumentDialogComponent,

src/app/clients/clients.service.ts

@@ -223,4 +223,11 @@ export class ClientsService {
     return this.http.get(`/clients/template`, { params: httpParams });
   }
 
+  /**
+   * returns the list of survey data of the particular Client
+   * @param clientId
+   */
+  getSurveys(clientId: string) {
+    return this.http.get(`/surveys/scorecards/clients/${clientId}`);
+  }
 }

src/app/clients/common-resolvers/client-actions.resolver.ts

@@ -32,6 +32,8 @@ export class ClientActionsResolver implements Resolve<Object> {
         return this.clientsService.getClientDataAndTemplate(clientId);
       case 'Close':
         return this.clientsService.getClientCommandTemplate('close');
+      case 'Survey':
+        return this.clientsService.getSurveys(clientId);
       default:
         return undefined;
     }