feat: edit button functionality added (#1459)

* fix: edit button functionality added

* lint fixes

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

@@ -0,0 +1,162 @@
+<div class="container">
+
+    <form [formGroup]="surveyForm" (ngSubmit)="submit()">
+  
+      <div fxLayout="column" fxLayoutGap="4%">
+  
+        <mat-card>
+  
+          <mat-card-content>
+  
+            <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  
+              <mat-form-field fxFlex="48%">
+                <mat-label>Key</mat-label>
+                <input matInput maxlength="32" required formControlName="key">
+                <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
+                  Key is <strong>required</strong>
+                </mat-error>
+              </mat-form-field>
+  
+              <mat-form-field fxFlex="48%">
+                <mat-label>Name</mat-label>
+                <input matInput maxlength="255" required formControlName="name">
+                <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
+                  Name is <strong>required</strong>
+                </mat-error>
+              </mat-form-field>
+  
+              <mat-form-field fxFlex="48%">
+                <mat-label>Country Code</mat-label>
+                <input matInput maxlength="2" required formControlName="countryCode">
+                <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
+                  Country Code is <strong>required</strong>
+                </mat-error>
+                <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
+                  Country Code <strong>must consist of 2 alphabetic characters</strong>
+                </mat-error>
+              </mat-form-field>
+  
+              <mat-form-field fxFlex="98%">
+                <mat-label>Description</mat-label>
+                <textarea matInput formControlName="description"></textarea>
+              </mat-form-field>
+  
+            </div>
+  
+          </mat-card-content>
+  
+        </mat-card>
+  
+        <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
+  
+          <mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
+  
+            <mat-card-content>
+  
+              <div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
+  
+                <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
+                  <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
+                  <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
+                    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                    Delete Question
+                  </button>
+                </div>
+  
+                <mat-form-field fxFlex="48%">
+                  <mat-label>Key</mat-label>
+                  <input matInput maxlength="32" required formControlName="key">
+                  <mat-error *ngIf="question.get('key').hasError('required')">
+                    Key is <strong>required</strong>
+                  </mat-error>
+                </mat-form-field>
+  
+                <mat-form-field fxFlex="48">
+                  <mat-label>Text</mat-label>
+                  <input matInput maxlength="255" required formControlName="text">
+                  <mat-error *ngIf="question.get('text').hasError('required')">
+                    Text is <strong>required</strong>
+                  </mat-error>
+                </mat-form-field>
+  
+                <mat-form-field fxFlex="98%">
+                  <mat-label>Description</mat-label>
+                  <textarea matInput formControlName="description"></textarea>
+                </mat-form-field>
+  
+                <mat-divider [inset]="true"></mat-divider>
+  
+                <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
+                  <h4 class="mat-h4">Options</h4>
+                  <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
+                    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                    Add Option
+                  </button>
+                </div>
+  
+                <div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
+  
+                  <div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
+  
+                    <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
+  
+                      <mat-form-field fxFlex="43%">
+                        <mat-label>Text</mat-label>
+                        <input matInput required formControlName="text">
+                        <mat-error *ngIf="response.get('text').hasError('required')">
+                          Text is <strong>required</strong>
+                        </mat-error>
+                      </mat-form-field>
+  
+                      <mat-form-field fxFlex="43%">
+                        <mat-label>Value</mat-label>
+                        <input matInput required formControlName="value">
+                        <mat-error *ngIf="response.get('value').hasError('required')">
+                          Value is <strong>required</strong>
+                        </mat-error>
+                        <mat-error *ngIf="response.get('value').hasError('pattern')">
+                          Value <strong>must be an integer between -9999 and 9999</strong>
+                        </mat-error>
+                      </mat-form-field>
+  
+                      <div fxFlex="8%">
+                        <div class="delete-wrapper">
+                          <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
+                            <fa-icon icon="trash" size="lg"></fa-icon>
+                          </button>  
+                        </div>
+                      </div>
+  
+                    </div>
+  
+                  </div>
+  
+                </div>
+  
+              </div>
+  
+            </mat-card-content>
+  
+            <div>
+  
+              <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+                <button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
+                <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
+                  <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                  Add Question
+                </button>
+                <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Edit Survey</button>
+              </mat-card-actions>    
+  
+            </div>
+  
+          </mat-card>  
+  
+        </div>
+  
+      </div>
+  
+    </form>
+  
+  </div>

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

@@ -0,0 +1,21 @@
+.delete-wrapper {
+    padding: 17.5px 0 0 0;
+}
+
+h2 {
+    font-weight: 500;
+    margin: 0;
+}
+
+h4 {
+    font-weight: 500;
+    margin: 0;
+}
+
+.mat-card .mat-divider-horizontal.mat-divider-inset {
+    margin: 1em 0 2em 0;
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}

src/app/system/manage-surveys/edit-survey/edit-survey.component.spec.ts

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

src/app/system/manage-surveys/edit-survey/edit-survey.component.ts

@@ -0,0 +1,242 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormArray, Validators, FormControl } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/** Custom Components */
+import { CancelDialogComponent } from '../../../shared/cancel-dialog/cancel-dialog.component';
+
+/** Survey Models */
+import { Survey, QuestionData, ResponseData } from './../survey.model';
+
+/**
+ * Edit survey component.
+ */
+@Component({
+  selector: 'mifosx-edit-survey',
+  templateUrl: './edit-survey.component.html',
+  styleUrls: ['./edit-survey.component.scss']
+})
+export class EditSurveyComponent implements OnInit {
+
+  /** Survey form. */
+  surveyForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService System Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private systemService: SystemService,
+              private route: ActivatedRoute,
+              private router: Router,
+              public dialog: MatDialog) {
+                this.createSurveyForm();
+                this.route.data.subscribe((data: { survey: any }) => {
+                  this.prepareSurveyForm(data.survey);
+                });
+              }
+
+  /**
+   * Fills the survey form.
+   */
+  ngOnInit() {
+  }
+
+  /**
+   * Takes an object of type Survey
+   * and prepares the survey form.
+   */
+  prepareSurveyForm(survey: Survey) {
+      this.surveyForm.get('key').setValue(survey.key);
+      this.surveyForm.get('name').setValue(survey.name);
+      this.surveyForm.get('countryCode').setValue(survey.countryCode);
+      this.surveyForm.get('description').setValue(survey.description);
+      this.prepareQuestionDatas(this.questionDatas, survey.questionDatas);
+  }
+
+  /**
+   * Fills all the question forms.
+   */
+  prepareQuestionDatas(questionForms: FormArray, questionDatas: Array<QuestionData>) {
+    questionDatas.forEach((questionData, idx) => {
+      this.addQuestion();
+      const questionForm: FormGroup = <FormGroup>questionForms.at(idx);
+      questionForm.get('key').setValue(questionData.key);
+      questionForm.get('text').setValue(questionData.text);
+      questionForm.get('description').setValue(questionData.description);
+      // questionForm.get('responseDatas').setValue([]);
+      this.prepareResponseDatas((<FormArray>questionForm.get('responseDatas')), questionData.responseDatas, idx);
+    });
+  }
+
+  /**
+   * Fills all the response forms.
+   */
+  prepareResponseDatas(responseForms: FormArray, responseDatas: Array<ResponseData>, questionIdx: number) {
+    responseDatas.forEach((responseData, idx) => {
+      if (idx) {
+        this.addResponse(questionIdx);
+      }
+
+      const responseForm = responseForms.at(idx);
+      responseForm.get('text').setValue(responseData.text);
+      responseForm.get('value').setValue(responseData.value);
+    });
+  }
+
+  /**
+   * Creates the survey form.
+   */
+  createSurveyForm() {
+    this.surveyForm = this.formBuilder.group({
+      'key': ['', Validators.required],
+      'name': ['', Validators.required],
+      'countryCode': ['', [Validators.required, Validators.pattern('^\\s*([A-Za-z]{2})?\\s*$')]],
+      'description': [''],
+      'questionDatas': this.formBuilder.array([])
+    });
+  }
+
+  /**
+   * Gets the questions form array.
+   * @returns {FormArray} Questions form array.
+   */
+  get questionDatas(): FormArray {
+    return this.surveyForm.get('questionDatas') as FormArray;
+  }
+
+  /**
+   * Gets the responses form array.
+   * @param {number} questionIndex Index of question to retrieve responses from.
+   * @returns {FormArray} Responses form array.
+   */
+  getResponseDatas(questionIndex: number): FormArray {
+    return this.surveyForm.get(['questionDatas', questionIndex, 'responseDatas']) as FormArray;
+  }
+
+  /**
+   * Creates a question form group
+   * @returns {FormGroup} Question form group.
+   */
+  createQuestionForm(): FormGroup {
+    return this.formBuilder.group({
+      'key': ['', Validators.required],
+      'text': ['', Validators.required],
+      'description': [''],
+      'responseDatas': this.formBuilder.array([this.createResponseForm()]),
+      'sequenceNo': ['']
+    });
+  }
+
+  /**
+   * Adds a question to the questions form array
+   */
+  addQuestion() {
+    this.questionDatas.push(this.createQuestionForm());
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Removes the particular question form from the questions form array at given index.
+   * @param {number} index Array index from where question form needs to be removed.
+   */
+  removeQuestion(index: number) {
+    this.questionDatas.removeAt(index);
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Creates a response form group
+   * @returns {FormGroup} Response form group.
+   */
+  createResponseForm(): FormGroup {
+    return this.formBuilder.group({
+      'text': ['', Validators.required],
+      'value': ['', [Validators.required, Validators.pattern('^\\s*[-]?\\d{0,4}\\s*$')]],
+      'sequenceNo': ['']
+    });
+  }
+
+  /**
+   * Adds a response to the responses form array of the question with the given Index
+   * @param {number} questionIndex Index of question to add response to.
+   */
+  addResponse(questionIndex: number) {
+    this.getResponseDatas(questionIndex).push(this.createResponseForm());
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Removes the particular response form from the given responses form array at given index.
+   * @param {FormArray} responseFormArray Given responses form array.
+   * @param {number} index Array index from where response form needs to be removed.
+   */
+  removeResponse(responseFormArray: FormArray, index: number) {
+    responseFormArray.removeAt(index);
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Updates the sequence numbers of questions and responses
+   */
+  updateSequenceNumber() {
+    for (let questionIndex = 0; questionIndex < this.questionDatas.length; questionIndex++) {
+      this.questionDatas.at(questionIndex).get('sequenceNo').setValue(questionIndex + 1);
+      console.log(this.questionDatas);
+      for (let responseIndex = 0; responseIndex < this.getResponseDatas(questionIndex).length; responseIndex++) {
+        this.getResponseDatas(questionIndex).at(responseIndex).get('sequenceNo').setValue(responseIndex + 1);
+      }
+    }
+  }
+
+  /**
+   * Cancels the survey and redirects to surveys.
+   */
+  cancelSurvey() {
+    const cancelSurveyDialogRef = this.dialog.open(CancelDialogComponent);
+    cancelSurveyDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.cancel) {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      }
+    });
+  }
+
+  /**
+   * Reorders the question order according to the user drop
+   */
+  dropQuestion(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.questionDatas.controls, event.previousIndex, event.currentIndex);
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Reorders the response order according to the user drop
+   */
+  dropResponse(event: CdkDragDrop<string[]>, questionIndex: number) {
+    moveItemInArray(this.getResponseDatas(questionIndex).controls, event.previousIndex, event.currentIndex);
+    this.updateSequenceNumber();
+  }
+
+  /**
+   * Submits the survey form and creates survey,
+   * if successful redirects to surveys.
+   */
+  submit() {
+    this.surveyForm.patchValue({
+      countryCode: this.surveyForm.value.countryCode.toUpperCase()
+    });
+    this.systemService.editSurvey(this.route.snapshot.paramMap.get('id'), this.surveyForm.value).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -0,0 +1,24 @@
+export class Survey {
+    id: number;
+    key: string;
+    name: string;
+    countryCode: string;
+    description: string;
+    questionDatas: Array<QuestionData>;
+}
+
+export class QuestionData {
+    id: number;
+    key: string;
+    sequenceNo: number;
+    text: string;
+    description: string;
+    responseDatas: Array<ResponseData>;
+}
+
+export class ResponseData {
+    id: number;
+    sequenceNo: number;
+    text: string;
+    value: number;
+}

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

@@ -1,5 +1,5 @@
 <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'">
+  <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>

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

@@ -40,4 +40,9 @@ export class ViewSurveyComponent implements OnInit {
 
   ngOnInit(): void {
   }
+
+  /** Go to edit survey page. */
+  onEdit() {
+    this.router.navigate(['./edit'], { relativeTo: this.route });
+  }
 }

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

@@ -25,6 +25,7 @@ import { AddRoleComponent } from './roles-and-permissions/add-role/add-role.comp
 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 { EditSurveyComponent } from './manage-surveys/edit-survey/edit-survey.component';
 import { ManageSchedulerJobsComponent } from './manage-scheduler-jobs/manage-scheduler-jobs.component';
 import { AmazonS3Component } from './external-services/amazon-s3/amazon-s3.component';
 import { EmailComponent } from './external-services/email/email.component';
@@ -400,6 +401,14 @@ const routes: Routes = [
                   resolve: {
                     survey: SurveyResolver
                   }
+                },
+                {
+                  path: 'edit',
+                  component: EditSurveyComponent,
+                  data: { title: extract('Edit Survey'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    survey: SurveyResolver
+                  }
                 }
               ]
             }

src/app/system/system.module.ts

@@ -59,6 +59,7 @@ import { AddEventDialogComponent } from './manage-hooks/add-event-dialog/add-eve
 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';
+import { EditSurveyComponent } from './manage-surveys/edit-survey/edit-survey.component';
 import { BusinessDateTabComponent } from './configurations/business-date-tab/business-date-tab.component';
 import { ConfigurationsComponent } from './configurations/configurations.component';
 import { GlobalConfigurationsTabComponent } from './configurations/global-configurations-tab/global-configurations-tab.component';
@@ -121,6 +122,7 @@ import { GlobalConfigurationsTabComponent } from './configurations/global-config
     EditSchedulerJobComponent,
     ViewHistorySchedulerJobComponent,
     ViewSurveyComponent,
+    EditSurveyComponent,
     BusinessDateTabComponent,
     ConfigurationsComponent,
     GlobalConfigurationsTabComponent

src/app/system/system.service.ts

@@ -230,6 +230,15 @@ export class SystemService {
     return this.http.get(`/surveys/${surveyId}?template=true`);
   }
 
+  /**
+   * @param {string} surveyId Survey ID.
+   * @param {any} survey Survey Data.
+   * @returns {Observable<any>}
+   */
+  editSurvey(surveyId: string, survey: any): Observable<any> {
+    return this.http.put(`/surveys/${surveyId}`, survey);
+  }
+
 
   /**
    * @returns {Observable<any>} Fetches Jobs.
@@ -272,8 +281,8 @@ export class SystemService {
   }
 
   /**
-   * @param jobId Job Id to be edited
-   * @returns {Observable<any>} Fetches Scheduler Job.
+   * @param {string} jobId Job Id on which jobs to run
+   * @returns {Observable<any>}
    */
    runSelectedJob(jobId: string): Promise<any> {
     return this.http.post(`/jobs/${jobId}?command=executeJob`, this.emptyPayload).toPromise();