Use paginationTemplate for search results page

src/app/components/annotations/components/annotation-search-form/annotation-search-form.component.html

@@ -1,4 +1,4 @@
-<form #ngForm="ngForm">
+<form #form="ngForm">
   <baw-date-time-filter
     (modelChange)="updateDateTime($event)"
   ></baw-date-time-filter>

src/app/components/annotations/components/annotation-search-form/annotation-search-form.component.ts

@@ -98,10 +98,9 @@ export class AnnotationSearchFormComponent {
   ): TypeaheadSearchCallback {
     return (id: string, activeItems: T[]): Observable<T[]> =>
       api.filter({
-        filter: filterAnd(
-          notIn<T>("id", activeItems),
-          { id: { eq: id } } as any
-        ),
+        filter: filterAnd(notIn<T>("id", activeItems), {
+          id: { eq: id },
+        } as any),
       });
   }
 

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

@@ -11,7 +11,7 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
         type="button"
         class="btn-close"
         aria-label="Close"
-        (click)="closeModal()"
+        (click)="closeModal(false)"
       ></button>
     </div>
 
@@ -30,9 +30,9 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
         <button
           id="cancel-btn"
           class="btn btn-outline-primary float-start"
-          (click)="closeModal()"
+          (click)="closeModal(false)"
         >
-          Undo Changes
+          Cancel
         </button>
 
         <button
@@ -48,14 +48,12 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 })
 export class ResetProgressWarningComponent implements ModalComponent {
   @Input() public modal: NgbActiveModal;
-  @Input() public successCallback: () => void;
 
-  public closeModal(): void {
-    this.modal.close();
+  public closeModal(status: boolean): void {
+    this.modal.close(status);
   }
 
   public success(): void {
-    this.successCallback();
-    this.modal.close();
+    this.closeModal(true);
   }
 }

src/app/components/annotations/components/search-filters-modal/search-filters-modal.component.ts

@@ -24,7 +24,7 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 
     <div class="modal-footer justify-content-start">
       <div>
-        @if (shouldUpdatePagingCallback()) {
+        @if (dirty) {
         <p>
           <strong>
             You have unapplied search filters. If you update the verification
@@ -34,13 +34,19 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
         }
 
         <div class="mt-2">
-          <button class="btn btn-outline-primary me-2">Undo Changes</button>
+          <button
+            class="btn btn-outline-primary me-2"
+            (click)="closeModal()"
+            [disabled]="!this.dirty"
+          >
+            Undo Changes
+          </button>
           <button
             class="btn btn-warning"
             (click)="success()"
             [ngClass]="{
-              'btn-primary': !shouldUpdatePagingCallback(),
-              'btn-warning': shouldUpdatePagingCallback()
+              'btn-primary': !dirty,
+              'btn-warning': dirty
             }"
           >
             Update Search Filters
@@ -53,22 +59,25 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 export class SearchFiltersModalComponent implements ModalComponent {
   @Input() public modal: NgbActiveModal;
   @Input() public formValue: AnnotationSearchParameters;
-  @Input() public successCallback: () => void;
+  @Input() public successCallback: (newModel: AnnotationSearchParameters) => void;
 
   @Input() public project: Project;
   @Input() public region: Region;
   @Input() public site: Site;
 
+  protected dirty = true;
+
   public closeModal(): void {
     this.modal.close();
   }
 
   public success(): void {
-    this.successCallback();
-    this.modal.dismiss();
-  }
+    if (this.dirty) {
+      this.successCallback(this.formValue);
+      this.closeModal();
+      return;
+    }
 
-  protected shouldUpdatePagingCallback(): boolean {
-    return true;
+    this.closeModal();
   }
 }

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

@@ -1,4 +1,4 @@
-<h1>Annotations Search</h1>
+<h1>Annotation Search</h1>
 
 <div>
   <baw-annotation-search-form
@@ -24,22 +24,20 @@ <h1>Annotations Search</h1>
   </div>
 </div>
 
-<hr>
+<hr />
 
 <div>
   <p>
-    Displaying <span class="fw-bold">{{ pageSize }}</span> of
-    <span class="fw-bold">all {{ totalModels }}</span> audio events.
+    Displaying <span class="fw-bold">{{ paginationInformation?.items }}</span> of
+    <span class="fw-bold">all {{ paginationInformation?.total }}</span> audio events.
   </p>
 
   <div class="annotations-grid my-2">
     @for (verificationModel of searchResults; track $index) {
-    <div>
-      @if (verificationModel) {
+    <div *ngIf="verificationModel">
       <baw-audio-event-card
         [audioEvent]="verificationModel"
       ></baw-audio-event-card>
-      }
     </div>
     }
   </div>
@@ -53,8 +51,7 @@ <h2 class="no-results-error">
 
   <ngb-pagination
     class="d-flex justify-content-center mt-4"
-    [(page)]="previewPage"
-    [collectionSize]="searchResults.length"
-  >
-  </ngb-pagination>
+    [(page)]="page"
+    [collectionSize]="paginationInformation?.total ?? 0"
+  ></ngb-pagination>
 </div>

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

@@ -2,7 +2,6 @@ import { Component, Injector, OnInit } from "@angular/core";
 import { projectResolvers } from "@baw-api/project/projects.service";
 import { siteResolvers } from "@baw-api/site/sites.service";
 import { annotationMenuItems } from "@components/annotations/annotation.menu";
-import { PageComponent } from "@helpers/page/pageComponent";
 import { IPageInfo } from "@helpers/page/pageInfo";
 import { Verification } from "@models/Verification";
 import { retrieveResolvers } from "@baw-api/resolver-common";
@@ -16,6 +15,8 @@ import { takeUntil } from "rxjs";
 import { StrongRoute } from "@interfaces/strongRoute";
 import { regionResolvers } from "@baw-api/region/regions.service";
 import { Location } from "@angular/common";
+import { PaginationTemplate } from "@helpers/paginationTemplate/paginationTemplate";
+import { NgbPaginationConfig } from "@ng-bootstrap/ng-bootstrap";
 import { AnnotationSearchParameters } from "../annotationSearchParameters";
 
 const projectKey = "project";
@@ -27,18 +28,31 @@ const siteKey = "site";
   templateUrl: "search.component.html",
   styleUrl: "search.component.scss",
 })
-class AnnotationSearchComponent extends PageComponent implements OnInit {
+class AnnotationSearchComponent
+  extends PaginationTemplate<Verification>
+  implements OnInit
+{
   public constructor(
     protected verificationApi: VerificationService,
-    private route: ActivatedRoute,
-    private router: Router,
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected config: NgbPaginationConfig,
     private location: Location,
     private injector: Injector
   ) {
-    super();
+    super(
+      router,
+      route,
+      config,
+      verificationApi,
+      "id",
+      () => [],
+      (newResults: Verification[]) => (this.searchResults = newResults),
+      () => this.searchParameters.toFilter().filter,
+    );
   }
 
-  public paginationInfo: Paging;
+  protected paginationInformation: Paging;
   protected searchResults: Verification[] = Array.from({ length: 15 });
   protected searchParameters: AnnotationSearchParameters;
   protected verificationRoute: StrongRoute;
@@ -69,16 +83,19 @@ class AnnotationSearchComponent extends PageComponent implements OnInit {
     }
 
     this.verificationRoute = this.verifyAnnotationsRoute();
+
+    super.ngOnInit();
   }
 
   protected updateSearchResults(): void {
-    const filterBody = this.buildFilter();
-
-    this.verificationApi
-      .filter(filterBody)
+    this.getModels()
       .pipe(takeUntil(this.unsubscribe))
-      .subscribe((results) => {
+      .subscribe((results: Verification[]) => {
         this.searchResults = results;
+
+        if (results.length > 0) {
+          this.paginationInformation = results[0].getMetadata().paging;
+        }
       });
   }
 
@@ -106,19 +123,6 @@ class AnnotationSearchComponent extends PageComponent implements OnInit {
     );
   }
 
-  protected pagePreviewNext(): void {
-    this.previewPage++;
-  }
-
-  protected pagePreviewPrevious(): void {
-    if (this.pagedItems <= 0) {
-      this.pagedItems = 0;
-      return;
-    }
-
-    this.previewPage--;
-  }
-
   private updateUrlParameters(): void {
     const queryParams = this.searchParameters.toQueryParams();
     const urlTree = this.router.createUrlTree([], { queryParams });

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

@@ -8,7 +8,10 @@
 -->
 <div class="centered-content">
   <h2 class="mb-2">
-    <button class="btn btn-outline-secondary" (click)="modals.open(searchFiltersModal, { size: 'xl' })">
+    <button
+      class="btn btn-outline-secondary"
+      (click)="openSearchFiltersModal()"
+    >
       <fa-icon [icon]="['fas', 'filter']"></fa-icon>
     </button>
     Annotation Verification
@@ -29,7 +32,6 @@ <h2 class="mb-2">
 <ng-template #progressWarningModal let-warningModal>
   <baw-reset-progress-warning-modal
     [modal]="warningModal"
-    [successCallback]="toggleParameters.bind(this)"
   ></baw-reset-progress-warning-modal>
 </ng-template>
 
@@ -40,5 +42,6 @@ <h2 class="mb-2">
     [project]="project"
     [region]="region"
     [site]="site"
+    [successCallback]="requestModelUpdate.bind(this)"
   ></baw-search-filters-modal>
 </ng-template>