- @if (item) {
-
+
+
+ Displaying {{ pageSize }} of
+ all {{ totalModels }} audio events.
+
+
+
+ @for (verificationModel of searchResults; track $index) {
+
+ @if (verificationModel) {
+
+ }
+
}
- }
-
-
-@if (searchResults.length === 0) {
-
- No {{ searchParameters.onlyUnverified ? "unverified" : "" }} annotations found
-
-}
-
-
-
+ @if (searchResults.length === 0) {
+
+ No {{ searchParameters.onlyUnverified ? "unverified" : "" }} annotations
+ found
+
+ }
-
-
+
+
diff --git a/src/app/components/annotations/pages/search/search.component.scss b/src/app/components/annotations/pages/search/search.component.scss
index 672e87ad9..66af1791f 100644
--- a/src/app/components/annotations/pages/search/search.component.scss
+++ b/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;
}
diff --git a/src/app/components/annotations/pages/search/search.component.ts b/src/app/components/annotations/pages/search/search.component.ts
index 41b11325d..9d3bc9297 100644
--- a/src/app/components/annotations/pages/search/search.component.ts
+++ b/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;
diff --git a/src/app/components/shared/audio-event-card/audio-event-card.component.html b/src/app/components/shared/audio-event-card/audio-event-card.component.html
new file mode 100644
index 000000000..199d0ea6b
--- /dev/null
+++ b/src/app/components/shared/audio-event-card/audio-event-card.component.html
@@ -0,0 +1,23 @@
+
diff --git a/src/app/components/shared/audio-event-card/audio-event-card.component.scss b/src/app/components/shared/audio-event-card/audio-event-card.component.scss
new file mode 100644
index 000000000..0f9c3cd39
--- /dev/null
+++ b/src/app/components/shared/audio-event-card/audio-event-card.component.scss
@@ -0,0 +1,4 @@
+.info-line {
+ display: block;
+ width: 100%;
+}
diff --git a/src/app/components/shared/audio-event-card/audio-event-card.component.spec.ts b/src/app/components/shared/audio-event-card/audio-event-card.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/components/shared/audio-event-card/audio-event-card.component.ts b/src/app/components/shared/audio-event-card/audio-event-card.component.ts
new file mode 100644
index 000000000..a1f65b384
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/components/shared/audio-event-card/audio-event-card.module.ts b/src/app/components/shared/audio-event-card/audio-event-card.module.ts
new file mode 100644
index 000000000..8376a4f2d
--- /dev/null
+++ b/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 {}
diff --git a/src/app/components/shared/shared.components.ts b/src/app/components/shared/shared.components.ts
index 940457df7..a4a8cc372 100644
--- a/src/app/components/shared/shared.components.ts
+++ b/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,