Implemented View, Edit and Delete for Questions

thewecas · Jan 2, 2024 · 18b129d · 18b129d
1 parent fea0a49
commit 18b129d
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 73 deletions.
diff --git a/src/app/surveys/list-questions/list-questions.component.html b/src/app/surveys/list-questions/list-questions.component.html
@@ -1,4 +1,4 @@
-    <button mat-stroked-button color="primary" (click)="handleAddQuestion()">
+    <button mat-stroked-button color="primary" (click)="handleAddOrEditQuestion()">
       Add Question
     </button>
 
@@ -19,13 +19,13 @@
         <td>{{ question.question }}</td>
         <td>
           <div class="action-btn">
-            <button mat-icon-button color="primary">
+            <button mat-icon-button color="primary" (click)="handleAddOrEditQuestion(question.id,true)">
               <mat-icon>visibility</mat-icon>
             </button>
-            <button mat-icon-button color="accent">
+            <button mat-icon-button color="accent" (click)="handleAddOrEditQuestion(question.id)">
               <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button color="warn">
+            <button mat-icon-button color="warn" (click)="handleDeleteQuestion(question.id)">
               <mat-icon>delete</mat-icon>
             </button>
           </div>

diff --git a/src/app/surveys/list-questions/list-questions.component.ts b/src/app/surveys/list-questions/list-questions.component.ts
@@ -25,13 +25,23 @@ export class ListQuestionsComponent implements OnChanges {
       this.questionList = res;
     });
   }
-  handleAddQuestion() {
+  handleAddOrEditQuestion(questionId?: string, isReadOnly = false) {
+    const data = {
+      surveyId: this.surveyId,
+      readOnly: isReadOnly,
+    };
+    if (questionId) Object.assign(data, { questionId });
+
     const dialogRef = this._dialog.open(QuestionFormComponent, {
-      data: this.surveyId,
+      data: data,
     });
   }
 
   trackById(index: number, item: SurveyQuestion) {
     return item.id;
   }
+
+  handleDeleteQuestion(questionId: string) {
+    this.service.deleteQuestion(this.surveyId, questionId);
+  }
 }
diff --git a/src/app/surveys/question-form/question-form.component.html b/src/app/surveys/question-form/question-form.component.html
@@ -2,7 +2,12 @@ <h1 mat-dialog-title>{{ title }}</h1>
 <div mat-dialog-content [formGroup]="questionForm">
   <mat-form-field appearance="outline">
     <mat-label>Question</mat-label>
-    <textarea [autoResize]="100" matInput formControlName="question"></textarea>
+    <textarea
+      [autoResize]="100"
+      matInput
+      [readonly]="obj.readOnly"
+      formControlName="question"
+    ></textarea>
     <mat-error *ngIf="questionForm.controls['question'].invalid"
       >Required</mat-error
     >
@@ -11,16 +16,26 @@ <h1 mat-dialog-title>{{ title }}</h1>
   <mat-form-field appearance="outline">
     <mat-label>Answer Type</mat-label>
     <mat-select formControlName="answerType">
-      <mat-option value="free-text">Free Text </mat-option>
-      <mat-option value="single-choice">Single Choice</mat-option>
-      <mat-option value="multiple-choice">Multiple Choice</mat-option>
+      <mat-option [disabled]="obj.readOnly" value="free-text"
+        >Free Text
+      </mat-option>
+      <mat-option [disabled]="obj.readOnly" value="single-choice"
+        >Single Choice</mat-option
+      >
+      <mat-option [disabled]="obj.readOnly" value="multiple-choice"
+        >Multiple Choice</mat-option
+      >
     </mat-select>
     <mat-error *ngIf="questionForm.controls['answerType'].invalid"
       >Required</mat-error
     >
   </mat-form-field>
 
-  <div class="options-container" *ngIf="isOptionsAvailable">
+  <div
+    class="options-container"
+    [class.paddingRight]="obj.readOnly"
+    *ngIf="isOptionsAvailable"
+  >
     <ng-container
       formArrayName="options"
       *ngFor="
@@ -33,11 +48,12 @@ <h1 mat-dialog-title>{{ title }}</h1>
       <div class="option">
         <mat-form-field appearance="outline">
           <mat-label>Option {{ i + 1 }}</mat-label>
-          <input matInput [formControlName]="i" />
+          <input matInput [readonly]="obj.readOnly" [formControlName]="i" />
           <mat-error *ngIf="options.invalid">Required</mat-error>
         </mat-form-field>
         <button
           mat-icon-button
+          *ngIf="!obj.readOnly"
           [disabled]="isFirst && isLast"
           (click)="removeOption(i)"
         >
@@ -48,7 +64,7 @@ <h1 mat-dialog-title>{{ title }}</h1>
     <button
       mat-raised-button
       color="primary"
-      *ngIf="isOptionsAvailable"
+      *ngIf="isOptionsAvailable && !obj.readOnly"
       (click)="addOption()"
     >
       Add Option
@@ -61,6 +77,7 @@ <h1 mat-dialog-title>{{ title }}</h1>
       class="scroll"
       [autoResize]="100"
       matInput
+      [readonly]="obj.readOnly"
       formControlName="instrctions"
     ></textarea>
     <mat-error *ngIf="questionForm.controls['question'].invalid"
@@ -69,21 +86,29 @@ <h1 mat-dialog-title>{{ title }}</h1>
   </mat-form-field>
 </div>
 <div mat-dialog-actions align="end">
-  <button mat-button matDialogClose>Cancel</button>
+  <button mat-stroked-button matDialogClose>Cancel</button>
   <button
-    mat-button
+    mat-stroked-button
+    *ngIf="obj.questionId && !obj.readOnly"
+    (click)="initializeForm()"
+  >
+    Reset
+  </button>
+  <button
+    mat-stroked-button
     color="primary"
     (click)="handleCreateQuestion()"
+    *ngIf="!obj.readOnly"
     [disabled]="questionForm.invalid"
   >
     Submit
   </button>
+  <button
+    mat-stroked-button
+    color="primary"
+    *ngIf="obj.readOnly"
+    (click)="enableEdit()"
+  >
+    Edit
+  </button>
 </div>
-
-<!-- <mat-form-field>
-  <mat-label>Select</mat-label>
-  <mat-select>
-    <mat-option value="one">First option</mat-option>
-    <mat-option value="two">Second option</mat-option>
-  </mat-select>
-</mat-form-field> -->
diff --git a/src/app/surveys/question-form/question-form.component.scss b/src/app/surveys/question-form/question-form.component.scss
@@ -20,6 +20,9 @@ mat-form-field {
     margin-bottom: 0.5rem;
   }
 }
+.paddingRight{
+  padding-right: 1rem;
+}
 
 .option {
   display: flex;

diff --git a/src/app/surveys/question-form/question-form.component.ts b/src/app/surveys/question-form/question-form.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { SurveyQuestion } from 'src/app/model/survey-question';
 import { SurveyService } from '../survey.service';
 
 @Component({
@@ -12,12 +13,13 @@ export class QuestionFormComponent implements OnInit {
   title = 'Add Question';
   questionForm!: FormGroup;
   isOptionsAvailable: boolean = false;
+  questionData!: SurveyQuestion | null;
 
   constructor(
     private fb: FormBuilder,
     private service: SurveyService,
     private _dialogRef: MatDialogRef<QuestionFormComponent>,
-    @Inject(MAT_DIALOG_DATA) public surveyId: string
+    @Inject(MAT_DIALOG_DATA) public obj: any
   ) {}
 
   ngOnInit(): void {
@@ -27,6 +29,12 @@ export class QuestionFormComponent implements OnInit {
       answerType: ['', Validators.required],
     });
 
+    if (this.obj.questionId) {
+      this.initializeForm();
+      this.title = 'Edit Question';
+    }
+    if (this.obj.readOnly) this.title = 'View Question';
+
     this.questionForm.get('answerType')?.valueChanges.subscribe((value) => {
       if (value == 'free-text') {
         this.isOptionsAvailable = false;
@@ -38,10 +46,8 @@ export class QuestionFormComponent implements OnInit {
     });
   }
   addOptionsControl() {
-    this.questionForm.addControl(
-      'options',
-      this.fb.array([this.fb.control('', [Validators.required])])
-    );
+    this.questionForm.addControl('options', this.fb.array([]));
+    if (this.getOptionsArray().length == 0) this.addOption();
   }
   removeOptionsControl() {
     this.questionForm.removeControl('options');
@@ -51,23 +57,56 @@ export class QuestionFormComponent implements OnInit {
     return (<FormArray>this.questionForm.get('options')).controls;
   }
 
-  addOption() {
-    const control = this.fb.control('', [Validators.required]);
+  addOption(value = '') {
+    const control = this.fb.control(value, [Validators.required]);
     (<FormArray>this.questionForm.get('options')).push(control);
   }
   removeOption(index: number) {
     (<FormArray>this.questionForm.get('options')).removeAt(index);
   }
 
-  handleCreateQuestion() {
-    this.service.addQuestionToSurvey(this.surveyId, {
-      id: crypto.randomUUID(),
-      question: this.questionForm.get('question')?.value,
-      answerType: this.questionForm.get('answerType')?.value,
-      instrctions: this.questionForm.get('instrctions')?.value ?? null,
-      options: this.questionForm.get('options')?.value ?? null,
+  initializeForm() {
+    this.removeOptionsControl();
+
+    this.questionData = this.service.getQuestionData(
+      this.obj.surveyId,
+      this.obj.questionId
+    );
+
+    this.questionForm.patchValue({
+      question: this.questionData?.question,
+      instrctions: this.questionData?.instrctions,
+      answerType: this.questionData?.answerType,
     });
 
+    if (this.questionData?.answerType !== 'free-text') {
+      this.addOptionsControl();
+      this.removeOption(0);
+      this.isOptionsAvailable = true;
+      this.questionData?.options?.forEach((option) => {
+        this.addOption(option);
+      });
+    }
+  }
+
+  enableEdit() {
+    this.obj.readOnly = false;
+    this.title = 'Edit Question';
+  }
+
+  handleCreateQuestion() {
+    this.service.addQuestionToSurvey(
+      this.obj.surveyId,
+      {
+        id: this.obj.questionId ?? crypto.randomUUID(),
+        question: this.questionForm.get('question')?.value,
+        answerType: this.questionForm.get('answerType')?.value,
+        instrctions: this.questionForm.get('instrctions')?.value ?? null,
+        options: this.questionForm.get('options')?.value ?? null,
+      },
+      this.obj.questionId
+    );
+
     this._dialogRef.close();
   }
 }
diff --git a/src/app/surveys/survey.service.ts b/src/app/surveys/survey.service.ts
@@ -38,10 +38,21 @@ export class SurveyService {
     );
   }
 
-  addQuestionToSurvey(surveyId: string, newQuestion: SurveyQuestion) {
-    this.surveyList
-      .find((survey) => survey.id == surveyId)
-      ?.questions.push(newQuestion);
+  addQuestionToSurvey(
+    surveyId: string,
+    newQuestion: SurveyQuestion,
+    questionId: string
+  ) {
+    const surveyIndex = this.surveyList.findIndex(
+      (survey) => survey.id == surveyId
+    );
+    if (questionId) {
+      const questionIndex = this.surveyList[surveyIndex].questions.findIndex(
+        (question) => question.id == questionId
+      );
+      this.surveyList[surveyIndex].questions[questionIndex] = newQuestion;
+    } else this.surveyList[surveyIndex].questions.push(newQuestion);
+
     this.api.storeSurveyList(this.surveyList);
   }
 
@@ -73,6 +84,14 @@ export class SurveyService {
       ?.question;
   }
 
+  getQuestionData(surveyId: string, questionId: string) {
+    const surveyQuestions =
+      this.surveyList.find((survey) => survey.id == surveyId)?.questions ?? [];
+    return (
+      surveyQuestions.find((question) => question.id == questionId) ?? null
+    );
+  }
+
   exportData(surveyId: string) {
     const survey = this.getSurveyDetails(surveyId);
     let filename = 'data.xlsx';
@@ -115,36 +134,16 @@ export class SurveyService {
     return data;
   }
 
-  // addDummyData() {
-  //   this.surveyList.push({
-  //     id: '8e74acd8-dde2-4149-9588-0553dbf6ff5a',
-  //     name: 'Survey 1',
-  //     description: 'Some random description',
-  //     questions: [],
-  //     createdOn: new Date('2023-12-28T09:57:41.755Z'),
-  //   });
-
-  //   this.surveyList.push({
-  //     id: 'b7862c0d-ccbb-4786-b441-38c4f0b6d3a0',
-  //     name: 'Survey 2',
-  //     description:
-  //       " Some Description that is more that a line long , so basically I'm trying to put some long description ",
-  //     questions: [],
-  //     createdOn: new Date('2023-12-28T09:59:19.609Z'),
-  //   });
-  //   this.surveyList.push({
-  //     id: '50679706-bc05-4567-8c81-9d806d4f3d20',
-  //     name: 'Survey 3',
-  //     description: 'Awesome Description Here',
-  //     questions: [],
-  //     createdOn: new Date('2023-12-28T10:00:46.487Z'),
-  //   });
-  //   this.surveyList.push({
-  //     id: '12243c27-7334-487a-8bb4-b92107441d69',
-  //     name: 'New Survey',
-  //     description: 'No More Description',
-  //     questions: [],
-  //     createdOn: new Date('2023-12-28T10:49:34.118Z'),
-  //   });
-  // }
+  deleteQuestion(surveyId: string, questionId: string) {
+    const surveyIndex = this.surveyList.findIndex(
+      (survey) => survey.id == surveyId
+    );
+    if (surveyIndex) {
+      const questionIndex = this.surveyList[surveyIndex].questions.findIndex(
+        (question) => question.id == questionId
+      );
+      this.surveyList[surveyIndex].questions.splice(questionIndex, 1);
+    }
+    this.api.storeSurveyList(this.surveyList);
+  }
 }