refactor: client view survey page (#1112)

Fixes: #1111

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

@@ -20,7 +20,6 @@ import { DocumentsTabComponent } from './clients-view/documents-tab/documents-ta
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
-import { TakeSurveyComponent } from './clients-view/client-actions/view-survey/take-survey/take-survey.component';
 
 /** Custom Resolvers */
 import { ClientViewResolver } from './common-resolvers/client-view.resolver';
@@ -42,10 +41,7 @@ import { ClientAddressTemplateResolver } from './common-resolvers/client-address
 import { ChargesOverviewComponent } from './clients-view/charges-overview/charges-overview.component';
 import { ClientChargeOverviewResolver } from './clients-view/charges-overview/charge-overview.resolver';
 import { ClientActionsResolver } from './common-resolvers/client-actions.resolver';
-import { TakeSurveyResolver } from './common-resolvers/take-survey.resolver';
-import { ViewChargeComponent } from './clients-view/view-charge/view-charge.component';
 import { ClientChargeViewResolver } from './common-resolvers/client-charge-view.resolver';
-import { ClientPayChargesComponent } from './clients-view/client-pay-charges/client-pay-charges.component';
 import { ClientTransactionPayResolver } from './common-resolvers/client-transaction-pay.resolver';
 
 const routes: Routes = [
@@ -179,23 +175,10 @@ const routes: Routes = [
           {
             path: 'actions/:name',
             data: { title: extract('Client Actions'), routeParamBreadcrumb: 'name' },
-            children: [
-              {
-                path: '',
-                component: ClientActionsComponent,
-                resolve: {
-                  clientActionData: ClientActionsResolver
-                }
-              },
-              {
-                path: 'Take-Survey',
-                component: TakeSurveyComponent,
-                data: { title: extract('Take Survey'), breadcrumb: 'Take Survey', routeParamBreadcrumb: 'Survey' },
-                resolve: {
-                  allSurveysData: TakeSurveyResolver
-                }
-              },
-            ]
+            component: ClientActionsComponent,
+            resolve: {
+              clientActionData: ClientActionsResolver
+            }
           },
           {
             path: 'loans',
@@ -247,7 +230,6 @@ const routes: Routes = [
     ClientAddressTemplateResolver,
     ClientChargeOverviewResolver,
     ClientActionsResolver,
-    TakeSurveyResolver,
     ClientChargeViewResolver,
     ClientTransactionPayResolver
   ]

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

@@ -12,3 +12,4 @@
 <mifosx-reactivate-client *ngIf="actions['Reactivate']"></mifosx-reactivate-client>
 <mifosx-undo-client-rejection *ngIf="actions['Undo Rejection']"></mifosx-undo-client-rejection>
 <mifosx-add-client-charge *ngIf="actions['Add Charge']"></mifosx-add-client-charge>
+<mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>

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

@@ -27,6 +27,7 @@ export class ClientActionsComponent {
     'Reactivate': boolean
     'Undo Rejection': boolean
     'Add Charge': boolean
+    'Take Survey': boolean
   } = {
     'Assign Staff': false,
     'Close': false,
@@ -40,7 +41,8 @@ export class ClientActionsComponent {
     'Reject Transfer': false,
     'Reactivate': false,
     'Undo Rejection': false,
-    'Add Charge': false
+    'Add Charge': false,
+    'Take Survey': false
   };
 
   /**

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

@@ -1,7 +1,5 @@
 <div class="container mat-typography" style="padding-bottom: 20px;">
 
-  <h2>Surveys</h2>
-
   <div class="mat-elevation-z2 surveyCont">
 
     <div class="surveySelect" fxLayout="row">

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

@@ -3,8 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
-import { ClientsService } from '../../../../clients.service';
-import { AuthenticationService } from '../../../../../core/authentication/authentication.service';
+import { ClientsService } from '../../../clients.service';
+import { AuthenticationService } from '../../../../core/authentication/authentication.service';
 /**
  * Take Survey Component
  */
@@ -44,8 +44,8 @@ export class TakeSurveyComponent implements OnInit {
               private clientsService: ClientsService,
               private router: Router,
               private authenticationService: AuthenticationService) {
-    this.route.data.subscribe((data: { allSurveysData: any }) => {
-      this.allSurveyData = data.allSurveysData;
+    this.route.data.subscribe((data: { clientActionData: any }) => {
+      this.allSurveyData = data.clientActionData;
       this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
     });
 

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

@@ -1,71 +1,51 @@
+<div class="container m-b-20" fxLayoutAlign="end">
+  <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Take Survey
+  </button>
+</div>
+
+
 <div class="container">
 
-  <mat-card>
+  <div fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
+    </mat-form-field>
+  </div>
 
-    <div class="container">
+  <div class="mat-elevation-z8">
 
-      <mat-card-content>
+    <table mat-table [dataSource]="dataSource" matSort>
 
-        <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" [routerLink]="['./Take-Survey']">
-                <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-                Take Survey
-              </button>
-            </div>
-          </div>
-        </div>
+      <ng-container matColumnDef="surveyName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='surveyName'> Survey </th>
+        <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
+      </ng-container>
 
-        <div fxLayout="row">
-          <mat-form-field fxFlex>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event.target.value)">
-          </mat-form-field>
-        </div>
+      <ng-container matColumnDef="createdBy">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='createdBy'> Created By </th>
+        <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
+      </ng-container>
 
-        <div>
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+        <td mat-cell *matCellDef="let survey"> {{ survey.date | date }} </td>
+      </ng-container>
 
-          <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="score">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
+        <td mat-cell *matCellDef="let survey"> {{ survey.score }} </td>
+      </ng-container>
 
-            <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>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-            <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>
+    </table>
 
-            <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>
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
-            <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>
 
 </div>

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

@@ -13,11 +13,13 @@ import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
 })
 export class ViewSurveyComponent implements OnInit {
 
+  /** Survey Data */
   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. */
@@ -35,26 +37,26 @@ export class ViewSurveyComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.constructSurvey(this.surveyData);
+    this.constructSurveys(this.surveyData);
   }
 
   /**
-   * Constructs the list of survey data
+   * Sets datasource, paginator and sorter for surveys table.
    * @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);
+  constructSurveys(data: any) {
+    let surveys: any[] = [];
+    data.forEach((entry: any) => {
+      const scoreCards: any[] = entry.scorecardValues.map((element: any) => {
+        return {
+          surveyName: entry.surveyName,
+          createdBy: entry.username,
+          date: element.createdOn,
+          score: element.value
+        };
       });
+      surveys = surveys.concat(scoreCards);
     });
-
     this.dataSource = new MatTableDataSource(surveys);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;

src/app/clients/clients.module.ts

@@ -33,7 +33,7 @@ import { ViewSurveyComponent } from './clients-view/client-actions/view-survey/v
 import { RejectClientComponent } from './clients-view/client-actions/reject-client/reject-client.component';
 import { ActivateClientComponent } from './clients-view/client-actions/activate-client/activate-client.component';
 import { WithdrawClientComponent } from './clients-view/client-actions/withdraw-client/withdraw-client.component';
-import { TakeSurveyComponent } from './clients-view/client-actions/view-survey/take-survey/take-survey.component';
+import { TakeSurveyComponent } from './clients-view/client-actions/take-survey/take-survey.component';
 import { UpdateClientSavingsAccountComponent } from './clients-view/client-actions/update-client-savings-account/update-client-savings-account.component';
 import { TransferClientComponent } from './clients-view/client-actions/transfer-client/transfer-client.component';
 import { UndoClientTransferComponent } from './clients-view/client-actions/undo-client-transfer/undo-client-transfer.component';

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

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

src/app/clients/common-resolvers/take-survey.resolver.ts

@@ -1,30 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Clients Services */
-import { ClientsService } from '../clients.service';
-
-/**
- * Take Survey data resolver.
- */
-@Injectable()
-export class TakeSurveyResolver implements Resolve<Object> {
-
-  /**
-   * @param {ClientsService} clientsService Client service.
-   */
-  constructor(private clientsService: ClientsService) { }
-
-  /**
-   * Returns the All Survey Type and question data.
-   * @returns {Observable<any>}
-   */
-  resolve(): Observable<any> {
-    return this.clientsService.getAllSurveysType();
-  }
-
-}