Set up search states and base components

apps/datahub/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {
   RouterService,
   ThemeService,
   TRANSLATE_DEFAULT_CONFIG,
+  UiElementsModule,
   UiWidgetsModule,
 } from 'geonetwork-ui'
 import {
@@ -34,6 +35,13 @@ import { AppRouterService } from './app.router.service'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { MatIconModule } from '@angular/material/icon'
 import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
+import { ResultsListComponent } from './common/results-list/results-list.component'
+import { ResultsListItemComponent } from './common/results-list-item/results-list-item.component'
+import { ResultsListCarouselComponent } from './common/results-list/results-list-carousel/results-list-carousel.component'
+import { ResultsListGridComponent } from './common/results-list/results-list-grid/results-list-grid.component'
+import { ResultsCardFavoriteComponent } from './common/results-list-item/results-card-favorite/results-card-favorite.component'
+import { ResultsCardLastCreatedComponent } from './common/results-list-item/results-card-last-created/results-card-last-created.component'
+import { ResultsCardSearchComponent } from './common/results-list-item/results-card-search/results-card-search.component'
 
 @NgModule({
   declarations: [
@@ -44,11 +52,19 @@ import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
     HeaderComponent,
     HomePageComponent,
     HomeHeaderComponent,
+    ResultsListComponent,
+    ResultsListCarouselComponent,
+    ResultsListGridComponent,
+    ResultsListItemComponent,
+    ResultsCardFavoriteComponent,
+    ResultsCardLastCreatedComponent,
+    ResultsCardSearchComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     UiWidgetsModule,
+    UiElementsModule,
     FeatureSearchModule,
     FeatureCatalogModule,
     MatIconModule,

apps/datahub/src/app/common/results-list-item/results-card-favorite/results-card-favorite.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-green-200 rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-favorite/results-card-favorite.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsCardFavoriteComponent } from './results-card-favorite.component'
+
+describe('ResultsCardFavoriteComponent', () => {
+  let component: ResultsCardFavoriteComponent
+  let fixture: ComponentFixture<ResultsCardFavoriteComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsCardFavoriteComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsCardFavoriteComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list-item/results-card-favorite/results-card-favorite.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-favorite',
+  templateUrl: './results-card-favorite.component.html',
+  styleUrl: './results-card-favorite.component.css',
+})
+export class ResultsCardFavoriteComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-blue-200 rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsCardLastCreatedComponent } from './results-card-last-created.component'
+
+describe('ResultsCardLastCreatedComponent', () => {
+  let component: ResultsCardLastCreatedComponent
+  let fixture: ComponentFixture<ResultsCardLastCreatedComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsCardLastCreatedComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsCardLastCreatedComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-last-created',
+  templateUrl: './results-card-last-created.component.html',
+  styleUrl: './results-card-last-created.component.css',
+})
+export class ResultsCardLastCreatedComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-card-search/results-card-search.component.html

@@ -0,0 +1,16 @@
+<div
+  class="h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-card-search/results-card-search.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsCardSearchComponent } from './results-card-search.component'
+
+describe('ResultsCardSearchComponent', () => {
+  let component: ResultsCardSearchComponent
+  let fixture: ComponentFixture<ResultsCardSearchComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsCardSearchComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsCardSearchComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list-item/results-card-search/results-card-search.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+import { ResultsListItemComponent } from '../results-list-item.component'
+
+@Component({
+  selector: 'mel-datahub-results-card-search',
+  templateUrl: './results-card-search.component.html',
+  styleUrl: './results-card-search.component.css',
+})
+export class ResultsCardSearchComponent extends ResultsListItemComponent {}

apps/datahub/src/app/common/results-list-item/results-list-item.component.html

@@ -0,0 +1,21 @@
+<div
+  class="h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+>
+  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
+    <div class="flex flex-col min-h-full cursor-pointer">
+      <gn-ui-thumbnail
+        class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
+        [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+      ></gn-ui-thumbnail>
+
+      <div class="grow p-4">
+        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
+          {{ record.title }}
+        </h1>
+        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
+          {{ record.abstract }}
+        </p>
+      </div>
+    </div>
+  </a>
+</div>

apps/datahub/src/app/common/results-list-item/results-list-item.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsListItemComponent } from './results-list-item.component'
+
+describe('ResultsListItemComponent', () => {
+  let component: ResultsListItemComponent
+  let fixture: ComponentFixture<ResultsListItemComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsListItemComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsListItemComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list-item/results-list-item.component.ts

@@ -0,0 +1,11 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'mel-datahub-results-list-item',
+  template: '',
+})
+export class ResultsListItemComponent {
+  @Input() record: CatalogRecord
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+}

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html

@@ -0,0 +1,19 @@
+<div class="relative">
+  <div class="flex gap-4 p-4">
+    <div
+      *ngFor="let record of searchFacade.results$ | async"
+      [style]="'height: 12em;'"
+    >
+      <mel-datahub-results-card-last-created
+        *ngIf="!favoritesOnly"
+        [record]="record"
+        (mdSelect)="onMetadataSelection($event)"
+      ></mel-datahub-results-card-last-created>
+      <mel-datahub-results-card-favorite
+        *ngIf="favoritesOnly"
+        [record]="record"
+        (mdSelect)="onMetadataSelection($event)"
+      ></mel-datahub-results-card-favorite>
+    </div>
+  </div>
+</div>

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsListCarouselComponent } from './results-list-carousel.component'
+
+describe('ResultsListCarouselComponent', () => {
+  let component: ResultsListCarouselComponent
+  let fixture: ComponentFixture<ResultsListCarouselComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsListCarouselComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsListCarouselComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+import { ResultsListComponent } from '../results-list.component'
+
+@Component({
+  selector: 'mel-datahub-results-list-carousel',
+  templateUrl: './results-list-carousel.component.html',
+  styleUrl: './results-list-carousel.component.css',
+})
+export class ResultsListCarouselComponent extends ResultsListComponent {}

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html

@@ -0,0 +1,13 @@
+<div class="relative">
+  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+    <div
+      *ngFor="let record of searchFacade.results$ | async"
+      [style]="'height: 24em;'"
+    >
+      <mel-datahub-results-card-search
+        [record]="record"
+        (mdSelect)="onMetadataSelection($event)"
+      ></mel-datahub-results-card-search>
+    </div>
+  </div>
+</div>

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsListGridComponent } from './results-list-grid.component'
+
+describe('ResultsListGridComponent', () => {
+  let component: ResultsListGridComponent
+  let fixture: ComponentFixture<ResultsListGridComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsListGridComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsListGridComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+import { ResultsListComponent } from '../results-list.component'
+
+@Component({
+  selector: 'mel-datahub-results-list-grid',
+  templateUrl: './results-list-grid.component.html',
+  styleUrl: './results-list-grid.component.css',
+})
+export class ResultsListGridComponent extends ResultsListComponent {}

apps/datahub/src/app/common/results-list/results-list.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ResultsListComponent } from './results-list.component'
+
+describe('ResultsListComponent', () => {
+  let component: ResultsListComponent
+  let fixture: ComponentFixture<ResultsListComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsListComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ResultsListComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})