feat: add create view survey page (#1247)

Fixes: #580

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 {
+  }
+}