Merge pull request #8 from camptocamp/favorite-card

feat(DH): Add favorite card

apps/datahub-e2e/src/e2e/search.cy.ts

@@ -7,14 +7,86 @@ describe('datahub-e2e', () => {
   it('should display the number of result hits', () => {
     cy.get('gn-ui-results-hits-number').should('contain', 12)
   })
-  it('should display record results in preview cards', () => {
-    cy.get('mel-datahub-results-list-grid')
-      .find('mel-datahub-results-card-search')
+
+  // If not logged in or no favorites exists
+  it('should display record results in last created cards', () => {
+    cy.get('mel-datahub-results-card-last-created')
       .eq(0)
       .find('h1')
       .should(
         'have.text',
         ' Cartographie des sols agricoles de la plaine du Rhône '
       )
+
+    cy.get('mel-datahub-results-card-last-created')
+      .find('h1')
+      .should('be.visible')
+
+    cy.get('mel-datahub-results-card-last-created')
+      .find('.mel-badge-button')
+      .should('be.visible')
   })
+
+  describe('interactions with dataset', () => {
+    beforeEach(() => {
+      cy.get('mel-datahub-results-card-last-created').first().as('firstResult')
+    })
+    it('should open the dataset page in the same application on click', () => {
+      const urlRegex = /http:\/\/[^/]+:\d+\/dataset/
+      cy.get('@firstResult').click()
+      cy.url().should('match', urlRegex)
+      cy.get('mel-datahub-dataset-page').should('be.visible')
+    })
+  })
+
+  // ********************
+  // TODO: This can be activated and tested when we will be able to add favorites
+
+  // it('should display record results in preview cards', () => {
+  //   cy.get('mel-datahub-results-card-favorite')
+  //     .eq(0)
+  //     .find('h1')
+  //     .should(
+  //       'have.text',
+  //       ' Cartographie des sols agricoles de la plaine du Rhône '
+  //     )
+
+  //   cy.get('mel-datahub-results-card-favorite')
+  //     .find('.mel-badge-button')
+  //     .should('be.visible')
+
+  //   cy.get('mel-datahub-results-card-favorite')
+  //     .find('gn-ui-star-toggle')
+  //     .should('be.visible')
+
+  //   cy.get('mel-datahub-results-card-favorite')
+  //     .find('mel-datahub-mel-datahub-metadata-quality')
+  //     .should('be.visible')
+  // })
+
+  // describe('interactions with dataset', () => {
+  //   beforeEach(() => {
+  //     cy.get('mel-datahub-results-card-favorite').first().as('firstResult')
+  //   })
+  //   it('should open the dataset page in the same application on click', () => {
+  //     const urlRegex = /http:\/\/[^/]+:\d+\/dataset/
+  //     cy.get('@firstResult').click()
+  //     cy.url().should('match', urlRegex)
+  //     cy.get('mel-datahub-dataset-page').should('be.visible')
+  //   })
+  //   it('should filter the search by clicked keyword', () => {
+  //     const urlRegex = /http:\/\/[^\/]+:\d+\/search\?q=.+/
+  //     cy.get('@firstResult')
+  //       .find('.mel-badge-button')
+  //       .first()
+  //       .as('firstKeyWord')
+  //       .should('have.text', ' Usage des sols ')
+
+  //     cy.get('@firstKeyWord').click()
+  //     cy.url().should('match', urlRegex)
+
+  //     cy.get('mel-datahub-results-card-search').should('be.visible')
+  //   })
+  // })
+  // ********************
 })

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

@@ -45,6 +45,7 @@ import { ResultsCardLastCreatedComponent } from './common/results-list-item/resu
 import { ResultsCardSearchComponent } from './common/results-list-item/results-card-search/results-card-search.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.component'
+import { MelDatahubMetadataQualityComponent } from './common/metadata-quality/mel-datahub-metadata-quality.component'
 
 @NgModule({
   declarations: [
@@ -64,6 +65,7 @@ import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.compon
     ResultsCardSearchComponent,
     DatasetPageComponent,
     DatasetApisComponent,
+    MelDatahubMetadataQualityComponent,
   ],
   imports: [
     BrowserModule,

apps/datahub/src/app/common/metadata-quality/mel-datahub-metadata-quality.component.html

@@ -0,0 +1,32 @@
+@if(metadataQualityDisplay){
+<div
+  class="flex metadata-quality"
+  (mouseenter)="showMenu()"
+  (mouseleave)="hideMenu()"
+>
+  <div class="flex gap-1 items-center">
+    <div class="flex h-[8px] w-[56px] bg-gray-6 rounded-t-lg rounded-b-lg">
+      <div
+        [style.width.%]="qualityScore"
+        class="flex bg-primary transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
+      ></div>
+    </div>
+    <span class="text-[12px] font-bold">{{
+      (qualityScore / 10).toFixed(1)
+    }}</span>
+    <img [src]="'/assets/info.svg'" [alt]="'info'" />
+  </div>
+
+  <div
+    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
+    [class]="isMenuShown ? 'block' : 'hidden'"
+  >
+    <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
+    @for(e of items; track e.name){<gn-ui-metadata-quality-item
+      [name]="e.name"
+      [value]="e.value"
+    ></gn-ui-metadata-quality-item
+    >}
+  </div>
+</div>
+}

apps/datahub/src/app/common/metadata-quality/mel-datahub-metadata-quality.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { MetadataQualityComponent } from 'geonetwork-ui'
+
+@Component({
+  selector: 'mel-datahub-mel-datahub-metadata-quality',
+  templateUrl: './mel-datahub-metadata-quality.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MelDatahubMetadataQualityComponent extends MetadataQualityComponent {}

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

@@ -1,16 +1,41 @@
-<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>
+<a
+  [title]="record.title"
+  [tabIndex]="0"
+  (click)="mdSelect.emit(record)"
+  (keyup.enter)="mdSelect.emit(record)"
+  class="bg-gray-8 group flex flex-col gap-[9px] justify-between h-[110px] py-3 px-4 w-[330px] rounded-lg border border-gray-6 filter hover:drop-shadow-lg z-0"
+  ><div class="flex justify-between">
+    <h1 class="font-bold text-[17px] line-clamp-1">
+      {{ record.title }}
+    </h1>
+  </div>
+
+  <div class="flex flex-col justify-between">
+    @if(record.keywords?.length) {
+    <div class="flex gap-1">
+      @for(keyword of record.keywords.slice(0, 2); track
+      record?.uniqueIdentifier){<button
+        type="button"
+        [attr.aria-label]="keyword"
+        [title]="keyword"
+        class="mel-badge-button truncate"
+        (click)="onKeywordClick(keyword, $event)"
+        (keyup.enter)="$event.stopPropagation()"
+      >
+        {{ keyword }}</button
+      >}
     </div>
-  </a>
-</div>
+    }
+  </div>
+  <div class="flex items-center gap-1">
+    <div class="basis-1/2 text-[12px] font-semibold">
+      <span translate>record.metadata.quality</span>
+      <span> :</span>
+    </div>
+    <mel-datahub-mel-datahub-metadata-quality
+      [metadata]="record"
+      [metadataQualityDisplay]="true"
+      [smaller]="true"
+    ></mel-datahub-mel-datahub-metadata-quality>
+  </div>
+</a>

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

@@ -1,7 +1,9 @@
 <a
   [title]="record.title"
+  [tabIndex]="0"
   (click)="mdSelect.emit(record)"
-  class="bg-gray-8 group flex flex-col justify-between relative h-40 p-[16px] w-[330px] rounded border border-gray-6 filter overflow-hidden cursor-pointer hover:drop-shadow-lg"
+  (keyup.enter)="mdSelect.emit(record)"
+  class="bg-gray-8 group flex flex-col justify-between relative h-40 p-4 w-[330px] rounded border border-gray-6 filter overflow-hidden cursor-pointer hover:drop-shadow-lg"
 >
   <h1 class="font-bold text-[17px] line-clamp-2">
     {{ record.title }}
@@ -20,6 +22,7 @@ <h1 class="font-bold text-[17px] line-clamp-2">
         [title]="keyword"
         class="mel-badge-button truncate"
         (click)="onKeywordClick(keyword, $event)"
+        (keyup.enter)="$event.stopPropagation()"
       >
         {{ keyword }}
       </button>

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

@@ -1,11 +1,12 @@
 <div class="relative">
   <div class="flex gap-4 p-4">
     @for (record of searchFacade.results$ | async; track
-    record.uniqueIdentifier) { @if (favoritesOnly) {
+    record?.uniqueIdentifier) { @if (favoritesOnlyValue) {
     <mel-datahub-results-card-favorite
       [style]="'height: 12em;'"
       [record]="record"
       (mdSelect)="onMetadataSelection($event)"
+      (keyword)="onInfoKeywordClick($event)"
     ></mel-datahub-results-card-favorite>
     } @else {
     <mel-datahub-results-card-last-created

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

@@ -14,7 +14,11 @@ import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/re
   template: '',
 })
 export class ResultsListComponent implements OnInit {
-  @Input() favoritesOnly = false
+  @Input() set favoritesOnly(value: boolean) {
+    this.favoritesOnlyValue = value
+    this.searchFacade.setFavoritesOnly(value)
+  }
+  favoritesOnlyValue: boolean
   @Input() numberOfResults = 10
 
   constructor(
@@ -25,7 +29,6 @@ export class ResultsListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    if (this.favoritesOnly) this.searchFacade.setFavoritesOnly(true)
     this.searchFacade
       .setConfigRequestFields([...FIELDS_BRIEF, 'createDate', 'changeDate'])
       .setPageSize(this.numberOfResults)

apps/datahub/src/app/search/search-header/search-header.component.html

@@ -4,7 +4,9 @@ <h1 class="flex mel-page-title" translate="">mel.datahub.search.title</h1>
     <div class="h-64" gnUiSearchStateContainer="headerSearch">
       <mel-datahub-results-list-carousel
         [numberOfResults]="10"
-        [favoritesOnly]="true"
+        [favoritesOnly]="
+          (favoritesService.myFavoritesUuid$ | async)?.length > 0
+        "
       ></mel-datahub-results-list-carousel>
     </div>
   </div>

apps/datahub/src/app/search/search-header/search-header.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { RouterFacade, SearchService } from 'geonetwork-ui'
+import { FavoritesService, RouterFacade, SearchService } from 'geonetwork-ui'
 import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/search'
 
@@ -12,7 +12,8 @@ import { SortByField } from 'geonetwork-ui/libs/common/domain/src/lib/model/sear
 export class SearchHeaderComponent {
   constructor(
     public routerFacade: RouterFacade,
-    private searchService: SearchService
+    private searchService: SearchService,
+    public favoritesService: FavoritesService
   ) {}
 
   onFuzzySearchSelection(record: CatalogRecord) {