[#12749] Autosave and restore progress if user navigates away (#13140)

src/web/app/components/question-submission-form/question-submission-form.component.html

@@ -241,6 +241,8 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
             <tm-ajax-loading *ngIf="isSavingResponses"></tm-ajax-loading>
             <span>{{ isQuestionCountOne ? "Submit Response" : "Submit Response for Question " + model.questionNumber }}</span>
           </button>
+          <button type="button" class="btn btn-warning float-end" (click)="resetForm(); resetTooltip.close();" ngbTooltip="Reset your responses for this question to the last submitted state."
+          #resetTooltip="ngbTooltip" (mouseenter)="resetTooltip.open()" [disabled]="!hasResponseChanged">{{ "Reset Question " + model.questionNumber }}</button>
         </div>
       </div>
     </div>

src/web/app/components/question-submission-form/question-submission-form.component.ts

@@ -93,6 +93,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
 
       this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true);
     });
+    this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value);
   }
 
   @Input()
@@ -118,6 +119,12 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   @Output()
   responsesSave: EventEmitter<QuestionSubmissionFormModel> = new EventEmitter();
 
+  @Output()
+  autoSave: EventEmitter<{ id: string, model: QuestionSubmissionFormModel }> = new EventEmitter();
+
+  @Output()
+  resetFeedback: EventEmitter<QuestionSubmissionFormModel> = new EventEmitter<QuestionSubmissionFormModel>();
+
   @ViewChild(ContributionQuestionConstraintComponent)
   private contributionQuestionConstraint!: ContributionQuestionConstraintComponent;
 
@@ -168,6 +175,8 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   visibilityStateMachine: VisibilityStateMachine;
   isEveryRecipientSorted: boolean = false;
 
+  autosaveTimeout: any;
+
   constructor(private feedbackQuestionsService: FeedbackQuestionsService,
     private feedbackResponseService: FeedbackResponsesService) {
     this.visibilityStateMachine =
@@ -221,6 +230,13 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     });
   }
 
+  resetForm(): void {
+    this.resetFeedback.emit(this.model);
+    this.isSaved = true;
+    this.hasResponseChanged = false;
+    clearTimeout(this.autosaveTimeout);
+  }
+
   toggleQuestionTab(): void {
     if (this.currentSelectedSessionView === this.allSessionViews.DEFAULT) {
       this.model.isTabExpanded = !this.model.isTabExpanded;
@@ -350,7 +366,6 @@ export class QuestionSubmissionFormComponent implements DoCheck {
    */
   triggerRecipientSubmissionFormChange(index: number, field: string, data: any): void {
     if (!this.isFormsDisabled) {
-      this.hasResponseChanged = true;
       this.isSubmitAllClickedChange.emit(false);
       this.model.hasResponseChangedForRecipients.set(this.model.recipientList[index].recipientIdentifier, true);
 
@@ -362,6 +377,12 @@ export class QuestionSubmissionFormComponent implements DoCheck {
 
       this.updateIsValidByQuestionConstraint();
       this.formModelChange.emit(this.model);
+
+      this.autoSave.emit({ id: this.model.feedbackQuestionId, model: this.model });
+      clearTimeout(this.autosaveTimeout);
+      this.autosaveTimeout = setTimeout(() => {
+        this.hasResponseChanged = true;
+      }, 100); // 0.1 second to prevent people from trying to immediately reset before autosave kicks in
     }
   }
 
@@ -451,6 +472,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
    * Triggers saving of responses for the specific question.
    */
   saveFeedbackResponses(): void {
+    clearTimeout(this.autosaveTimeout);
     this.isSaved = true;
     this.hasResponseChanged = false;
     this.model.hasResponseChangedForRecipients.forEach(