Add warning modal for lost progress

src/app/components/annotations/annotation.module.ts

@@ -5,12 +5,11 @@ import { RouterModule } from "@angular/router";
 import { StrongRoute } from "@interfaces/strongRoute";
 import { verificationRoute } from "./annotation.routes";
 import { VerificationComponent } from "./pages/verification/verification.component";
+import { ResetProgressWarningComponent } from "./components/reset-progress-warning/reset-progress-warning";
 
-const internalComponents = [];
+const internalComponents = [ResetProgressWarningComponent];
 
-const components = [
-  VerificationComponent,
-];
+const components = [VerificationComponent];
 
 const routes = Object.values(verificationRoute)
   .map((route: StrongRoute) => route.compileRoutes(getRouteConfigForPage))

src/app/components/annotations/components/reset-progress-warning/reset-progress-warning.ts

@@ -0,0 +1,61 @@
+import { Component, Input } from "@angular/core";
+import { ModalComponent } from "@menu/widget.component";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+
+@Component({
+  selector: "baw-reset-progress-warning-modal",
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">Confirm Loss of Progress</h4>
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
+        (click)="closeModal()"
+      ></button>
+    </div>
+
+    <div class="modal-body">
+      <p>
+        Because you have changed the verification tasks search parameters, your
+        progress will be reset if you continue.
+      </p>
+
+      <p>
+        Do you wish to reset your progress and continue with the new search
+        parameters?
+      </p>
+
+      <div class="clearfix">
+        <button
+          id="cancel-btn"
+          class="btn btn-outline-primary float-start"
+          (click)="closeModal()"
+        >
+          Undo Changes
+        </button>
+
+        <button
+          id="next-btn"
+          class="btn btn-danger text-white float-end"
+          (click)="success()"
+        >
+          Reset Progress and Continue
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class ResetProgressWarningComponent implements ModalComponent {
+  @Input() public modal: NgbActiveModal;
+  @Input() public successCallback: () => void;
+
+  public closeModal(): void {
+    this.modal.close();
+  }
+
+  public success(): void {
+    this.successCallback();
+    this.modal.close();
+  }
+}

src/app/components/annotations/pages/verification/verification.component.html

@@ -3,7 +3,7 @@ <h1 class="mb-2">Annotation Verification</h1>
 <div class="collapsed-search bg-dark mb-3 rounded">
   <button
     class="show-parameters-button btn btn-link text-light m-2"
-    (click)="toggleParameters()"
+    (click)="requestToggleParameters()"
     aria-controls="search-parameters"
   >
     <fa-icon [icon]="chevronIcon"></fa-icon>
@@ -114,7 +114,7 @@ <h1 class="mb-2">Annotation Verification</h1>
         <a
           type="submit"
           class="btn btn-primary me-2"
-          (click)="toggleParameters()"
+          (click)="requestToggleParameters()"
         >
           Verify This List
         </a>
@@ -198,10 +198,18 @@ <h2 id="no-results-error">
 </ng-template>
 
 <ng-template #verificationGridTemplate>
-  <oe-verification-grid #verificationGrid id="verification-grid">
+  <oe-verification-grid #verificationGrid id="verification-grid" grid-size="1">
     <oe-verification verified="true" shortcut="Y"></oe-verification>
     <oe-verification verified="false" shortcut="N"></oe-verification>
 
     <oe-data-source slot="data-source" for="verification-grid"></oe-data-source>
   </oe-verification-grid>
 </ng-template>
+
+<ng-template #progressWarningModal let-modal>
+  <baw-reset-progress-warning-modal
+    [modal]="modal"
+    [successCallback]="toggleParameters.bind(this)"
+  >
+  </baw-reset-progress-warning-modal>
+</ng-template>

src/app/components/annotations/pages/verification/verification.component.ts

@@ -52,6 +52,8 @@ import { DateTime } from "luxon";
 import { DateTimeFilterModel } from "@shared/date-time-filter/date-time-filter.component";
 import { Id } from "@interfaces/apiInterfaces";
 import { StrongRoute } from "@interfaces/strongRoute";
+import { ResetProgressWarningComponent } from "@components/annotations/components/reset-progress-warning/reset-progress-warning";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { AnnotationSearchParameters, IAnnotationSearchParameters } from "../annotationSearchParameters";
 
 const projectKey = "project";
@@ -75,6 +77,7 @@ class VerificationComponent
     protected sitesApi: ShallowSitesService,
     protected tagsApi: TagsService,
 
+    private modals: NgbModal,
     private route: ActivatedRoute,
     private router: Router,
     private location: Location,
@@ -95,6 +98,9 @@ class VerificationComponent
   protected hasShownVerificationGrid = false;
   protected hasShownPreview = false;
 
+  @ViewChild("progressWarningModal")
+  private lostProgressWarningModal: ElementRef<ResetProgressWarningComponent>;
+
   @ViewChild("verificationGrid")
   private verificationGridElement: ElementRef<VerificationGridComponent>;
 
@@ -140,6 +146,15 @@ class VerificationComponent
       });
   }
 
+  protected requestToggleParameters(): void {
+    if (this.shouldUpdatePagingCallback()) {
+      this.modals.open(this.lostProgressWarningModal);
+      return;
+    }
+
+    this.toggleParameters();
+  }
+
   protected toggleParameters(): void {
     this.areParametersCollapsed = !this.areParametersCollapsed;
 
@@ -246,6 +261,10 @@ class VerificationComponent
     }
   }
 
+  private shouldUpdatePagingCallback(): boolean {
+    return !this.areParametersCollapsed;
+  }
+
   private updatePagingCallback(params: Params): void {
     if (!this.verificationGridElement) {
       console.warn("Could not find verification grid element");