[#12508] Give respondents a way to reset a rubric question submission

src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.html

@@ -1,49 +1,64 @@
-<table class="table table-bordered desktop-view" [attr.aria-label]="getAriaLabel()">
-  <thead>
-    <tr>
-      <td></td>
-      <th *ngFor="let choice of questionDetails.rubricChoices" scope="col">{{ choice }}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;"
-        [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
-      <th class="fw-normal" scope="row">{{ questionDetails.rubricSubQuestions[i] }}</th>
-      <td *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;" class="text-secondary answer-cell" (click)="selectAnswer(i, j)">
-        <input
-          type="radio"
-          [disabled]="isDisabled"
-          [name]="getInputId(id, i, j, 'desktop')"
-          [id]="getInputId(id, i, j, 'desktop')"
-          [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
-        />
-        <label [for]="getInputId(id, i, j, 'desktop')" (click)="$event.stopPropagation()">
-          {{ rubricDescriptionCell }}
-        </label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<div class="mobile-view" [attr.aria-label]="getAriaLabel()">
-  <div class="card" *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;">
-    <div class="card-header bg-light">
-      {{ questionDetails.rubricSubQuestions[i] }}
-    </div>
-    <div class="card-body"
-         [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
-      <div *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;">
-        <label>
-          <input
-            type="radio"
-            [disabled]="isDisabled"
-            (click)="selectAnswer(i, j)"
-            [name]="getInputId(id, i, j, 'mobile')"
-            [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
-            [attr.aria-label]="getAriaLabelForChoice(questionDetails.rubricChoices[j], rubricDescriptionCell, questionDetails.rubricSubQuestions[i])"
-          >
-          {{ getChoiceWithDescription(questionDetails.rubricChoices[j], rubricDescriptionCell) }}
-        </label>
+<div>
+  <div class="table-container">
+    <table class="table table-bordered desktop-view" [attr.aria-label]="getAriaLabel()">
+      <thead>
+        <tr>
+          <td></td>
+          <th *ngFor="let choice of questionDetails.rubricChoices" scope="col">{{ choice }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;"
+            [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
+          <th class="fw-normal" scope="row">{{ questionDetails.rubricSubQuestions[i] }}</th>
+          <td *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;" class="text-secondary answer-cell" (click)="selectAnswer(i, j)">
+            <input
+              type="radio"
+              [disabled]="isDisabled"
+              [name]="getInputId(id, i, j, 'desktop')"
+              [id]="getInputId(id, i, j, 'desktop')"
+              [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
+            />
+            <label [for]="getInputId(id, i, j, 'desktop')" (click)="$event.stopPropagation()">
+              {{ rubricDescriptionCell }}
+            </label>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="mobile-view" [attr.aria-label]="getAriaLabel()">
+      <div class="card" *ngFor="let rubricDescriptionRow of questionDetails.rubricDescriptions; let i = index;">
+        <div class="card-header bg-light">
+          {{ questionDetails.rubricSubQuestions[i] }}
+        </div>
+        <div class="card-body"
+             [ngClass]="{ 'row-answered': i < responseDetails.answer.length && responseDetails.answer[i] !== RUBRIC_ANSWER_NOT_CHOSEN }">
+          <div *ngFor="let rubricDescriptionCell of rubricDescriptionRow; let j = index;">
+            <label>
+              <input
+                type="radio"
+                [disabled]="isDisabled"
+                (click)="selectAnswer(i, j)"
+                [name]="getInputId(id, i, j, 'mobile')"
+                [checked]="i < responseDetails.answer.length && responseDetails.answer[i] === j"
+                [attr.aria-label]="getAriaLabelForChoice(questionDetails.rubricChoices[j], rubricDescriptionCell, questionDetails.rubricSubQuestions[i])"
+              >
+              {{ getChoiceWithDescription(questionDetails.rubricChoices[j], rubricDescriptionCell) }}
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</div>
+  <div class="button-container">
+    <button
+      type="button"
+      class="btn btn-warning"
+      title="Reset choices"
+      id="btn-reset"
+      name="button-reset"
+      ngbTooltip="Reset current choices"
+      [disabled]="isDisabled"
+      (click)="resetHandler()">
+      Reset choices
+    </button>

src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.scss

@@ -17,3 +17,12 @@
     display: none;
   }
 }
+
+.table-container {
+  margin-bottom: 1.25em;
+}
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+}

src/web/app/components/question-types/question-edit-answer-form/rubric-question-edit-answer-form.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { QuestionEditAnswerFormComponent } from './question-edit-answer-form';
+import { SimpleModalService } from '../../../../services/simple-modal.service';
 import {
   FeedbackRubricQuestionDetails, FeedbackRubricResponseDetails,
 } from '../../../../types/api-output';
 import {
   DEFAULT_RUBRIC_QUESTION_DETAILS, DEFAULT_RUBRIC_RESPONSE_DETAILS,
 } from '../../../../types/default-question-structs';
 import { RUBRIC_ANSWER_NOT_CHOSEN } from '../../../../types/feedback-response-details';
+import { SimpleModalType } from '../../simple-modal/simple-modal-type';
 
 /**
  * The rubric question submission form for a recipient.
@@ -30,7 +32,7 @@ export class RubricQuestionEditAnswerFormComponent extends QuestionEditAnswerFor
   // constant
   readonly RUBRIC_ANSWER_NOT_CHOSEN: number = RUBRIC_ANSWER_NOT_CHOSEN;
 
-  constructor() {
+  constructor(private simpleModalService: SimpleModalService) {
     super(DEFAULT_RUBRIC_QUESTION_DETAILS(), DEFAULT_RUBRIC_RESPONSE_DETAILS());
   }
 
@@ -71,4 +73,20 @@ export class RubricQuestionEditAnswerFormComponent extends QuestionEditAnswerFor
   getInputId(id: string, row: number, col: number, platform: string): string {
     return `${id}-row${row}-col${col}-${platform}`;
   }
+
+  resetHandler(): void {
+    this.simpleModalService.openConfirmationModal(
+      'Reset Choices?',
+      SimpleModalType.WARNING,
+      'Are you sure you want to reset your choices? This action cannot be reverted',
+    ).result.then(() => {
+        this.resetRubricAnswer();
+    }, () => {});
+  }
+
+  resetRubricAnswer(): void {
+    const resettedAnswer: number[] =
+        Array(this.questionDetails.rubricSubQuestions.length).fill(RUBRIC_ANSWER_NOT_CHOSEN);
+    this.triggerResponseDetailsChange('answer', resettedAnswer);
+  }
 }