Staging to use pagination template

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

@@ -24,47 +24,37 @@ <h1>Annotations Search</h1>
   </div>
 </div>
 
-<hr />
+<hr>
 
-<div class="annotations-grid my-2">
-  @for (item of searchResults; track $index) {
-  <div class="preview-item border">
-    @if (item) {
-    <oe-spectrogram
-      [id]="'spectrogram-' + item.id"
-      [src]="item.audioLink"
-      scaling="stretch"
-      color-map="audacity"
-    ></oe-spectrogram>
+<div>
+  <p>
+    Displaying <span class="fw-bold">{{ pageSize }}</span> of
+    <span class="fw-bold">all {{ totalModels }}</span> audio events.
+  </p>
+
+  <div class="annotations-grid my-2">
+    @for (verificationModel of searchResults; track $index) {
+    <div>
+      @if (verificationModel) {
+      <baw-audio-event-card
+        [audioEvent]="verificationModel"
+      ></baw-audio-event-card>
+      }
+    </div>
     }
   </div>
-  }
-</div>
-
-@if (searchResults.length === 0) {
-<h2 class="no-results-error">
-  No {{ searchParameters.onlyUnverified ? "unverified" : "" }} annotations found
-</h2>
-}
 
-<div class="annotation-grid-controls">
-  <div class="preview-controls my-2">
-    <button
-      type="button"
-      class="btn btn-secondary me-2"
-      [disabled]="searchResults.length === 0"
-      (click)="pagePreviewPrevious()"
-    >
-      Previous Page
-    </button>
+  @if (searchResults.length === 0) {
+  <h2 class="no-results-error">
+    No {{ searchParameters.onlyUnverified ? "unverified" : "" }} annotations
+    found
+  </h2>
+  }
 
-    <button
-      type="button"
-      class="btn btn-secondary"
-      [disabled]="searchResults.length === 0"
-      (click)="pagePreviewNext()"
-    >
-      Next Page
-    </button>
-  </div>
+  <ngb-pagination
+    class="d-flex justify-content-center mt-4"
+    [(page)]="previewPage"
+    [collectionSize]="searchResults.length"
+  >
+  </ngb-pagination>
 </div>

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

@@ -1,25 +1,13 @@
-$gap-size: 0.5em;
-
 .annotations-grid {
   display: flex;
-  justify-content: start;
+  justify-content: space-evenly;
   flex-wrap: wrap;
-  flex-direction: row;
 
   position: relative;
-  gap: $gap-size;
+  gap: 1em;
   min-height: 2rem;
 }
 
-.preview-item {
-  display: inline-block;
-  flex: 0 0 calc(20% - $gap-size);
-
-  position: relative;
-  min-width: calc(20% - $gap-size);
-  min-height: 133px;
-}
-
 .annotation-grid-controls {
   position: relative;
 }

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

@@ -38,9 +38,8 @@ class AnnotationSearchComponent extends PageComponent implements OnInit {
     super();
   }
 
-  public previewPage = 1;
-  public previewSize = 15;
-  protected searchResults: Verification[] = Array.from({ length: this.previewSize });
+  public paginationInfo: Paging;
+  protected searchResults: Verification[] = Array.from({ length: 15 });
   protected searchParameters: AnnotationSearchParameters;
   protected verificationRoute: StrongRoute;
   protected project: Project;

src/app/components/shared/audio-event-card/audio-event-card.component.html

@@ -0,0 +1,23 @@
+<div class="card p-2">
+  <oe-axes>
+    <oe-indicator>
+      <oe-spectrogram
+        [id]="'spectrogram-' + audioEvent.id"
+        [src]="audioEvent.audioLink"
+        scaling="stretch"
+        color-map="audacity"
+      ></oe-spectrogram>
+    </oe-indicator>
+  </oe-axes>
+
+  <div class="card-header">
+    <h5 class="card-title text-truncate">{{ audioEvent.tags }}</h5>
+  </div>
+
+  <div class="card-body">
+    <a class="info-line" [href]="audioEvent.listenViewUrl">{{
+      audioEvent.startTimeSeconds | date
+    }}</a>
+    <a class="info-line" [href]="audioEvent.viewUrl">More information</a>
+  </div>
+</div>

src/app/components/shared/audio-event-card/audio-event-card.component.scss

@@ -0,0 +1,4 @@
+.info-line {
+  display: block;
+  width: 100%;
+}

src/app/components/shared/audio-event-card/audio-event-card.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+import { Verification } from "@models/Verification";
+
+@Component({
+  selector: "baw-audio-event-card",
+  templateUrl: "audio-event-card.component.html",
+  styleUrl: "audio-event-card.component.scss",
+})
+export class AudioEventCardComponent {
+  @Input({ required: true }) public audioEvent: Verification;
+}

src/app/components/shared/audio-event-card/audio-event-card.module.ts

@@ -0,0 +1,11 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AudioEventCardComponent } from "./audio-event-card.component";
+
+@NgModule({
+  declarations: [AudioEventCardComponent],
+  imports: [CommonModule],
+  exports: [AudioEventCardComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AudioEventCardModule {}

src/app/components/shared/shared.components.ts

@@ -56,6 +56,7 @@ import { TimeSinceComponent } from "./datetime-formats/time-since/time-since.com
 import { DurationComponent } from "./datetime-formats/duration/duration.component";
 import { ZonedDateTimeComponent } from "./datetime-formats/datetime/zoned-datetime/zoned-datetime.component";
 import { DatetimeComponent } from "./datetime-formats/datetime/datetime/datetime.component";
+import { AudioEventCardModule } from "./audio-event-card/audio-event-card.module";
 
 export const sharedComponents = [
   AnnotationDownloadComponent,
@@ -114,6 +115,7 @@ export const sharedModules = [
   LoadingModule,
   MenuModule,
   ModelCardsModule,
+  AudioEventCardModule,
   PipesModule,
   ProgressModule,
   StepperModule,