feat: add create view survey page (#1247)

Fixes: #580

src/app/clients/clients.component.scss

@@ -12,4 +12,7 @@ table {
   tr.select-row:hover {
     cursor: pointer;
   }
+  tr:nth-child(odd).td{
+    color : black;
+  }
 }

src/app/system/manage-surveys/manage-surveys.component.html

@@ -60,7 +60,7 @@
       </ng-container>
   
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let survey; columns: displayedColumns;" class="select-row"></tr>
+      <tr mat-row *matRowDef="let survey; columns: displayedColumns;" [routerLink]="[survey.id]" class="select-row"></tr>
 
     </table>
 

src/app/system/manage-surveys/survey.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../system.service';
+
+/**
+ * System data resolver.
+ */
+@Injectable()
+export class SurveyResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Survey data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const surveyId = route.paramMap.get('id');
+    return this.systemService.getSurvey(surveyId);
+  }
+
+}

src/app/system/manage-surveys/view-survey/view-survey.component.html

@@ -0,0 +1,111 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
+</div>
+
+<div class="container m-b-20">
+  <mat-card>
+    <mat-card-header fxLayout="column">
+      <mat-card-title>Survey</mat-card-title>
+      <mat-divider [inset]="true"></mat-divider>
+    </mat-card-header>
+    <mat-card-content>
+
+      <div fxLayout="row wrap" class="content">
+        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+          <b>Key:</b>
+        </div>
+
+        <div fxFlex="60%" fxFlex.lt-md="50%">
+          {{surveyData.key}}
+        </div>
+
+        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+          <b>Name:</b>
+        </div>
+
+        <div fxFlex="60%" fxFlex.lt-md="50%">
+          {{surveyData.name}}
+        </div>
+
+        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+          <b>Country Code:</b>
+        </div>
+
+        <div fxFlex="60%" fxFlex.lt-md="50%">
+          {{surveyData.countryCode}}
+        </div>
+
+        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+          <b>Description:</b>
+        </div>
+
+        <div fxFlex="60%" fxFlex.lt-md="50%">
+          {{surveyData.description}}
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
+
+<div class="container m-b-20">
+  <mat-card class="questions">
+    <mat-card-header fxLayout="column">
+      <mat-card-title>Questions</mat-card-title>
+      <mat-divider [inset]="true"></mat-divider>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="survey_questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
+        <mat-card>
+          <mat-card-content>
+            <div>Question: {{i+1}}</div>
+            <div fxLayout="row" id="key_text">
+              <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+                <b>Key:</b>
+              </div>
+
+              <div fxFlex="40%" fxFlex.lt-md="50%">
+                {{questionData.key}}
+              </div>
+              <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+                <b>Text:</b>
+              </div>
+
+              <div fxFlex="40%" fxFlex.lt-md="50%">
+                {{questionData.text}}
+              </div>
+            </div>
+            <div fxLayout="row" id="description">
+              <div fxFlex="20%" fxFlex.lt-md="50%" class="header">
+                <b>Description:</b>
+              </div>
+
+              <div fxFlex="40%" fxFlex.lt-md="50%">
+                {{questionData.description}}
+              </div>
+            </div>
+            <div fxLayout="column" id="questionaire">
+              <div><b>Option: </b></div>
+              <table id="response">
+                <tr>
+                  <th *ngFor="let column of displayedColumns">{{column | titlecase}}</th>
+                </tr>
+                <tr *ngFor="let row of questionData.responseDatas">
+                  <td *ngFor="let column of displayedColumns">
+                    {{row[column]}}
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/system/manage-surveys/view-survey/view-survey.component.scss

@@ -0,0 +1,36 @@
+.mat-card{
+    margin: 5px
+}
+
+.survey_questions{
+    margin-bottom: 10px;
+}
+
+#key_text{
+    margin: 10px;
+}
+
+#description{
+    margin: 10px;
+}
+
+#questionaire{
+    margin: 10px;
+}
+
+#response {
+    width: 100%;
+}
+
+#response th,#response td{
+    text-align: left;
+    width: 100px;
+}
+
+#response tr:hover{
+    background-color: #ddd;
+}
+
+mat-card-header{
+    margin-bottom: 12px;
+}

src/app/system/manage-surveys/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/system/manage-surveys/view-survey/view-survey.component.ts

@@ -0,0 +1,43 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+import { SystemService } from 'app/system/system.service';
+
+/**
+ * View Survey Component.
+ */
+@Component({
+  selector: 'mifosx-view-survey',
+  templateUrl: './view-survey.component.html',
+  styleUrls: ['./view-survey.component.scss']
+})
+export class ViewSurveyComponent implements OnInit {
+
+  /** Survey Data */
+  surveyData: any;
+
+  /** Columns shown in individual survey table */
+  displayedColumns: string[] = [ 'text', 'value'];
+
+  /**
+   * Retrieves the survey data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {SystemService} systemService System Service.
+   * @param {MatDialog} dialog Dialog Reference.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private route: ActivatedRoute,
+              private systemService: SystemService,
+              private dialog: MatDialog,
+              private router: Router) {
+    this.route.data.subscribe((data: { survey: any }) => {
+      this.surveyData = data.survey;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+}

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

@@ -24,6 +24,7 @@ import { RolesAndPermissionsComponent } from './roles-and-permissions/roles-and-
 import { AddRoleComponent } from './roles-and-permissions/add-role/add-role.component';
 import { ManageSurveysComponent } from './manage-surveys/manage-surveys.component';
 import { CreateSurveyComponent } from './manage-surveys/create-survey/create-survey.component';
+import { ViewSurveyComponent } from './manage-surveys/view-survey/view-survey.component';
 import { ManageSchedulerJobsComponent } from './manage-scheduler-jobs/manage-scheduler-jobs.component';
 import { GlobalConfigurationsComponent } from './global-configurations/global-configurations.component';
 import { EditConfigurationComponent } from './global-configurations/edit-configuration/edit-configuration.component';
@@ -74,6 +75,7 @@ import { AuditTrailSearchTemplateResolver } from './audit-trails/audit-trail-sea
 import { AuditTrailResolver } from './audit-trails/view-audit/audit-trail.resolver';
 import { ReportsResolver } from './manage-reports/reports.resolver';
 import { ReportResolver } from './manage-reports/report.resolver';
+import { SurveyResolver } from './manage-surveys/survey.resolver';
 import { ReportTemplateResolver } from './manage-reports/report-template.resolver';
 import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
 import { ViewSchedulerJobResolver } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.resolver';
@@ -388,6 +390,19 @@ const routes: Routes = [
             path: 'create',
             component: CreateSurveyComponent,
             data: { title:  extract('Create Survey'), breadcrumb: 'Create' },
+          },
+          {
+            path: ':id',
+            data: {title: extract('View Survey'), routeParamBreadcrumb: 'id'},
+            children: [
+              {
+                path: '',
+                component: ViewSurveyComponent,
+                resolve: {
+                  survey: SurveyResolver
+                }
+              }
+            ]
           }
         ]
       },
@@ -580,6 +595,7 @@ const routes: Routes = [
     HooksTemplateResolver,
     RolesAndPermissionsResolver,
     ManageSurveysResolver,
+    SurveyResolver,
     ManageSchedulerJobsResolver,
     GlobalConfigurationsResolver,
     GlobalConfigurationResolver,

src/app/system/system.module.ts

@@ -20,6 +20,7 @@ import { ManageHooksComponent } from './manage-hooks/manage-hooks.component';
 import { RolesAndPermissionsComponent } from './roles-and-permissions/roles-and-permissions.component';
 import { AddRoleComponent } from './roles-and-permissions/add-role/add-role.component';
 import { ManageSurveysComponent } from './manage-surveys/manage-surveys.component';
+import { ViewSurveyComponent } from './manage-surveys/view-survey/view-survey.component';
 import { CreateSurveyComponent } from './manage-surveys/create-survey/create-survey.component';
 import { ManageSchedulerJobsComponent } from './manage-scheduler-jobs/manage-scheduler-jobs.component';
 import { GlobalConfigurationsComponent } from './global-configurations/global-configurations.component';
@@ -117,7 +118,8 @@ import { ConfigureMakerCheckerTasksComponent } from './configure-maker-checker-t
     ConfigureMakerCheckerTasksComponent,
     CreateSurveyComponent,
     EditSchedulerJobComponent,
-    ViewHistorySchedulerJobComponent
+    ViewHistorySchedulerJobComponent,
+    ViewSurveyComponent
   ],
 })
 export class SystemModule { }

src/app/system/system.service.ts

@@ -221,6 +221,15 @@ export class SystemService {
     return this.http.post('/surveys', survey);
   }
 
+  /**
+   * @param {string} reportId Survey ID.
+   * @returns {Observable<any>} Survey.
+   */
+  getSurvey(surveyId: string): Observable<any> {
+    return this.http.get(`/surveys/${surveyId}?template=true`);
+  }
+
+
   /**
    * @returns {Observable<any>} Fetches Jobs.
    */