[Dataset page] : Filter by category in dataset page

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

@@ -149,8 +149,24 @@ describe('search', () => {
     it('should display the search form', () => {
       cy.get('mel-datahub-search-form').should('be.visible')
     })
-    it('should display the search filters', () => {
-      cy.get('mel-datahub-search-filters').should('be.visible')
+    it('should display the base search filters', () => {
+      cy.get('[data-cy="filterExpandBtn"]').click()
+      cy.get('mel-datahub-search-filters')
+        .find('mel-datahub-filter-dropdown')
+        .children()
+        .then(($dropdowns) =>
+          $dropdowns
+            .toArray()
+            .map((dropdown) => dropdown.getAttribute('data-cy-field'))
+        )
+        .should('eql', [
+          'categoryKeyword',
+          'organization',
+          'publicationYear',
+          'license',
+          'qualityScore',
+          'territories',
+        ])
     })
     it('should display the search results', () => {
       cy.get('mel-datahub-search-results').should('be.visible')
@@ -179,6 +195,14 @@ describe('search', () => {
       cy.get('@options').eq(2).click()
       cy.get('mel-datahub-results-card-search').should('have.length', 3)
     })
+    it('should filter by quality score', () => {
+      cy.get('[data-cy="filterExpandBtn"]').click()
+      cy.get('@filters').eq(4).click()
+      cy.get('gn-ui-text-input input').first().type('5')
+      cy.get('gn-ui-text-input input').last().type('7')
+      cy.get('mel-datahub-button').last().click()
+      cy.get('mel-datahub-results-card-search').should('have.length', 3)
+    })
     it('should filter the results when executing a search', () => {
       cy.get('mel-datahub-autocomplete input').type('velo')
       cy.get('mel-datahub-autocomplete .material-symbols-outlined')

apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html

@@ -17,10 +17,13 @@
     <div class="flex flex-col gap-2">
       <span class="font-semibold" translate="">mel.dataset.categories</span>
       <div class="flex gap-1 gap-x-2 flex-row flex-wrap">
-        @for(topic of displayCategories; track $index) {
-        <span class="mel-badge-primary truncate">
-          {{ topic }}
-        </span>
+        @for(category of displayCategories; track $index) {
+        <button
+          class="mel-badge-primary truncate"
+          (click)="onCategoryKeywordClick(category)"
+        >
+          {{ category.label }}
+        </button>
         }
       </div>
     </div>

apps/datahub/src/app/dataset/dataset-information/dataset-information.component.ts

@@ -1,6 +1,15 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+} from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
-import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+import { RouterFacade } from 'geonetwork-ui'
+import {
+  CatalogRecord,
+  Keyword,
+} from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'mel-datahub-dataset-information',
@@ -12,7 +21,10 @@ export class DatasetInformationComponent {
   @Input() record: Partial<CatalogRecord>
   iconsUrl = 'assets/icons/'
 
-  constructor(public translateService: TranslateService) {}
+  constructor(
+    public translateService: TranslateService,
+    @Optional() protected routerFacade: RouterFacade
+  ) {}
 
   get lastUpdate() {
     return this.record?.resourceUpdated?.toLocaleDateString(
@@ -29,6 +41,10 @@ export class DatasetInformationComponent {
       (keyword) => keyword.thesaurus?.name === 'Catégories'
     )
 
-    return categoryKeywords?.map((keyword) => keyword.label)
+    return categoryKeywords
+  }
+
+  onCategoryKeywordClick(category: Keyword) {
+    this.routerFacade.updateSearch({ categoryKeyword: category.key })
   }
 }

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

@@ -22,7 +22,7 @@ export class SearchFiltersComponent {
   constructor(private routerFacade: RouterFacade) {}
   displayCount = 3
   searchConfig = [
-    'topic',
+    'categoryKeyword',
     'organization',
     'publicationYear',
     'license',

resources/styles.css

@@ -29,9 +29,6 @@
   .mel-badge {
     @apply inline-block bg-white py-1.5 px-2 rounded font-medium text-sm leading-none transition-colors;
   }
-  .mel-badge-primary {
-    @apply mel-badge text-primary border border-primary;
-  }
   .mel-badge-secondary {
     @apply mel-badge text-secondary border border-secondary;
   }