From 0199409c52673b732c505a21c57541e4f4f3888d Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 21 Jun 2024 15:27:29 +0200
Subject: [PATCH 1/9] feat: rework the filter area and add expanded section

---
 .../search-filters.component.html             | 71 +++++++++++++++++--
 .../search-filters.component.ts               | 26 ++++++-
 2 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html
index 053e41af..17eba687 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.html
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html
@@ -1,8 +1,65 @@
-<div class="flex flex-wrap xl:flex-nowrap gap-2">
-  @for(filter of searchConfig; track filter.fieldName) {
-  <mel-datahub-filter-dropdown
-    [fieldName]="filter.fieldName"
-    [title]="filter.title | translate"
-  ></mel-datahub-filter-dropdown>
-  }
+<div
+  class="flex flex-col"
+  [ngClass]="{ 'mel-filter-container': displayCount === searchConfig.length }"
+>
+  <div
+    class="flex flex-row justify-between mb-2 flex-wrap lg:flex-nowrap"
+    *ngIf="displayCount === searchConfig.length"
+  >
+    <div class="flex flex-row items-center gap-5">
+      <h4 class="mel-paragraph-title" translate>
+        mel.datahub.search.filters.refine
+      </h4>
+      <button data-cy="filterResetBtn" class="mel-simple-button" (click)="resetFilters()" translate>
+        mel.datahub.search.filters.reset
+      </button>
+    </div>
+    <div class="flex flex-row gap-2">
+      <gn-ui-sort-by></gn-ui-sort-by>
+    </div>
+  </div>
+  <div class="flex flex-row">
+    <div>
+      <div class="flex gap-2 flex-wrap lg:flex-nowrap" *ngIf="displayCount < searchConfig.length">
+        <ng-container
+          *ngFor="
+            let filter of searchConfig | slice : 0 : 3;
+            trackBy: trackByFn
+          "
+        >
+          <mel-datahub-filter-dropdown
+            [fieldName]="filter.fieldName"
+            [title]="filter.title | translate"
+          ></mel-datahub-filter-dropdown>
+        </ng-container>
+        <button data-cy="filterExpandBtn" class="mel-primary-button" (click)="showAll()">
+          <mat-icon class="material-symbols-outlined">more_verti</mat-icon>
+        </button>
+      </div>
+      <div
+        class="flex flex-wrap gap-2"
+        *ngIf="displayCount === searchConfig.length"
+      >
+        <ng-container *ngFor="let filter of searchConfig; trackBy: trackByFn">
+          <mel-datahub-filter-dropdown
+            [fieldName]="filter.fieldName"
+            [title]="filter.title | translate"
+          ></mel-datahub-filter-dropdown>
+        </ng-container>
+      </div>
+    </div>
+    <button
+      data-cy="filterCloseBtn"
+      type="button"
+      *ngIf="displayCount === searchConfig.length"
+      class="flex flex-row self-end mel-simple-button"
+      (click)="showAll()"
+      translate
+    >
+      mel.datahub.search.filters.reduce
+      <mat-icon class="material-symbols-outlined ml-1 align-middle leading-none"
+        >remove</mat-icon
+      >
+    </button>
+  </div>
 </div>
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.ts b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
index 75cd31b1..145d3b4a 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.ts
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { RouterFacade } from 'geonetwork-ui'
 
 marker('mel.datahub.search.filters.categoryKeyword')
 marker('mel.datahub.search.filters.publisher')
 marker('mel.datahub.search.filters.revisionYear')
 marker('mel.datahub.search.filters.license')
+marker('mel.datahub.search.filters.qualityScore')
+marker('mel.datahub.search.filters.keyword')
 
 @Component({
   selector: 'mel-datahub-search-filters',
@@ -13,13 +16,32 @@ marker('mel.datahub.search.filters.license')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchFiltersComponent {
+  constructor(private routerFacade: RouterFacade) {}
+  displayCount = 3
   searchConfig = [
-    'categoryKeyword',
+    'topic',
     'publisher',
-    'revisionYear',
+    'publicationYear',
     'license',
+    'qualityScore',
+    'keyword',
   ].map((filter) => ({
     fieldName: filter,
     title: `mel.datahub.search.filters.${filter}`,
   }))
+
+  showAll() {
+    this.displayCount =
+      this.displayCount === this.searchConfig.length
+        ? 3
+        : this.searchConfig.length
+  }
+
+  trackByFn(item) {
+    return item.fieldName
+  }
+
+  resetFilters() {
+    this.routerFacade.setSearch({})
+  }
 }

From d7f8beed483dba5d8c41218c6eb98424214f6bac Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 21 Jun 2024 15:28:53 +0200
Subject: [PATCH 2/9] feat: e2e testing

---
 apps/datahub-e2e/src/e2e/search.cy.ts         | 65 +++++++++++++++----
 apps/datahub-e2e/src/support/commands.ts      | 25 +++++++
 .../dataset-header.component.html             |  1 +
 .../results-card-search.component.html        |  2 +-
 4 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts
index 5f5a688a..a2822413 100644
--- a/apps/datahub-e2e/src/e2e/search.cy.ts
+++ b/apps/datahub-e2e/src/e2e/search.cy.ts
@@ -158,22 +158,15 @@ describe('search', () => {
     it('should display the search results in a grid', () => {
       cy.get('mel-datahub-results-list-grid').should('be.visible')
     })
-    it('should filter the results when selecting a filter value (licence)', () => {
-      cy.get('@filters').eq(3).click()
+    it('should filter the results when selecting a filter value (producer)', () => {
+      cy.get('@filters').eq(1).click()
       getFilterOptions()
       cy.get('@options').eq(1).click()
-      cy.get('@result-cards').should('have.length', 2)
+      cy.get('@result-cards').should('have.length', 1)
       cy.get('@result-cards')
         .first()
         .find('h1')
-        .should('have.text', ' Accroches vélos MEL ')
-      cy.get('@result-cards')
-        .eq(1)
-        .find('h1')
-        .should(
-          'have.text',
-          ' Mat éolien construit ou en projet dans les Hauts de France '
-        )
+        .should('have.text', ' Concentrations annuelles de polluants dans l\'air ambiant issues du réseau permanent de mesures en région Hauts-de-France ')
     })
     it('should filter the results when selecting multiple filter values (producer)', () => {
       cy.get('@filters').eq(1).click()
@@ -223,6 +216,56 @@ describe('search', () => {
         ' Aucune correspondance. '
       )
     })
+    describe('expanded search panel', () => {
+      beforeEach(() => {
+        cy.get('[data-cy="filterExpandBtn"]').as('expandBtn')
+      })
+      it('should expand the search panel and show more filters on click', () => {
+        cy.get('mel-datahub-filter-dropdown').should('have.length', 3)
+        cy.get('@expandBtn').click()
+        cy.get('mel-datahub-filter-dropdown').should('have.length', 6)
+      })
+      it('should show the reset button and reset the filters on click', () => {
+        cy.get('@expandBtn').click()
+        cy.get('@filters').eq(3).click()
+        getFilterOptions()
+        cy.get('@options').eq(1).click()
+        cy.get('@result-cards').should('have.length', 2)
+        cy.get('body').click()
+        cy.get('[data-cy=filterResetBtn]').click()
+        cy.get('@result-cards').should('have.length', 14)
+      })
+      describe('sort by date', () => {
+        beforeEach(() => {
+          // first sort by popularity
+          cy.get('@expandBtn').click()
+          cy.get('gn-ui-sort-by').selectDropdownOption('desc,_score')
+          cy.get('@result-cards')
+            .find('[data-cy="recordTitle"]')
+            .then(($titles) =>
+              $titles.toArray().map((title) => title.innerText.trim())
+            )
+            .as('initialResultTitles')
+          cy.get('gn-ui-sort-by').selectDropdownOption('desc,createDate')
+        })
+        it('changes the results order', function () {
+          cy.get('@result-cards')
+            .find('[data-cy="recordTitle"]')
+            .then(($titles) => {
+              const titles = $titles
+                .toArray()
+                .map((title) => title.innerText.trim())
+              assert.notEqual(titles, this["initialResultTitles"]) // @initialResultTitles
+            })
+        })
+      })
+      it('should show close button and show less filters on click', () => {
+        cy.get('@expandBtn').click()
+        cy.get('mel-datahub-filter-dropdown').should('have.length', 6)
+        cy.get('[data-cy=filterCloseBtn]').click()
+        cy.get('mel-datahub-filter-dropdown').should('have.length', 3)
+      })
+    })
   })
   describe('pagination', () => {
     beforeEach(() => {
diff --git a/apps/datahub-e2e/src/support/commands.ts b/apps/datahub-e2e/src/support/commands.ts
index 9b5b3891..63f7ed7d 100644
--- a/apps/datahub-e2e/src/support/commands.ts
+++ b/apps/datahub-e2e/src/support/commands.ts
@@ -17,6 +17,8 @@ declare namespace Cypress {
     login(username?: string, password?: string, redirect?: boolean)
     signOut(): void
     clearFavorites()
+    selectDropdownOption(value: string): void
+    openDropdown(): Chainable<JQuery<HTMLElement>>
   }
 }
 
@@ -68,6 +70,29 @@ Cypress.Commands.add('signOut', () => {
   cy.get('a[title="Sign out"]').click()
 })
 
+// previous value should be a <gn-ui-dropdown-selector> component
+Cypress.Commands.add(
+  'openDropdown',
+  { prevSubject: true },
+  (dropdownElement) => {
+    cy.get('body').click('bottomLeft') // first click on the document to close other dropdowns
+    cy.wrap(dropdownElement).find('button').click()
+    return cy.get('.cdk-overlay-container').find('[role=listbox]')
+  }
+)
+
+// previous value should be a <gn-ui-dropdown-selector> component
+Cypress.Commands.add(
+  'selectDropdownOption',
+  { prevSubject: true },
+  (dropdownElement, value: string) => {
+    cy.wrap(dropdownElement)
+      .openDropdown()
+      .find(`[data-cy-value="${value}"]`)
+      .click()
+  }
+)
+
 /**
  * This will most likely fail if the user is not logged in!
  */
diff --git a/apps/datahub/src/app/dataset/dataset-header/dataset-header.component.html b/apps/datahub/src/app/dataset/dataset-header/dataset-header.component.html
index c2dd70e5..f4022360 100644
--- a/apps/datahub/src/app/dataset/dataset-header/dataset-header.component.html
+++ b/apps/datahub/src/app/dataset/dataset-header/dataset-header.component.html
@@ -30,6 +30,7 @@
     </div>
     <h1
       class="mel-page-title sm:block my-10 sm:-ml-20 sm:mr-10 md:mr-20 lg:mr-44"
+      data-cy="recordTitle"
     >
       {{ record.title }}
     </h1>
diff --git a/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html b/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
index a145ec49..81f74e4a 100644
--- a/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
+++ b/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
@@ -5,7 +5,7 @@
   class="mel-card gap-3 h-[242px] p-4"
 >
   <div class="flex flex-col h-[78px] justify-between shrink-0">
-    <h1 class="font-extrabold text-[17px] line-clamp-2 leading-5">
+    <h1 class="font-extrabold text-[17px] line-clamp-2 leading-5" data-cy="recordTitle">
       {{ record.title }}
     </h1>
 

From 40852e84dbeee4271ed32957997c042a12725acd Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 21 Jun 2024 15:29:05 +0200
Subject: [PATCH 3/9] feat: translations and styling

---
 apps/datahub-e2e/src/e2e/search.cy.ts         |  7 +++--
 .../search-filters.component.html             | 18 +++++++++--
 .../results-card-search.component.html        |  5 +++-
 resources/styles.css                          | 30 +++++++++++++++++++
 resources/translations/en_MEL.json            |  7 +++++
 resources/translations/fr_MEL.json            |  8 ++++-
 6 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts
index a2822413..fd8c0941 100644
--- a/apps/datahub-e2e/src/e2e/search.cy.ts
+++ b/apps/datahub-e2e/src/e2e/search.cy.ts
@@ -166,7 +166,10 @@ describe('search', () => {
       cy.get('@result-cards')
         .first()
         .find('h1')
-        .should('have.text', ' Concentrations annuelles de polluants dans l\'air ambiant issues du réseau permanent de mesures en région Hauts-de-France ')
+        .should(
+          'have.text',
+          " Concentrations annuelles de polluants dans l'air ambiant issues du réseau permanent de mesures en région Hauts-de-France "
+        )
     })
     it('should filter the results when selecting multiple filter values (producer)', () => {
       cy.get('@filters').eq(1).click()
@@ -255,7 +258,7 @@ describe('search', () => {
               const titles = $titles
                 .toArray()
                 .map((title) => title.innerText.trim())
-              assert.notEqual(titles, this["initialResultTitles"]) // @initialResultTitles
+              assert.notEqual(titles, this['initialResultTitles']) // @initialResultTitles
             })
         })
       })
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html
index 17eba687..e394e1c8 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.html
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html
@@ -10,7 +10,12 @@
       <h4 class="mel-paragraph-title" translate>
         mel.datahub.search.filters.refine
       </h4>
-      <button data-cy="filterResetBtn" class="mel-simple-button" (click)="resetFilters()" translate>
+      <button
+        data-cy="filterResetBtn"
+        class="mel-simple-button"
+        (click)="resetFilters()"
+        translate
+      >
         mel.datahub.search.filters.reset
       </button>
     </div>
@@ -20,7 +25,10 @@ <h4 class="mel-paragraph-title" translate>
   </div>
   <div class="flex flex-row">
     <div>
-      <div class="flex gap-2 flex-wrap lg:flex-nowrap" *ngIf="displayCount < searchConfig.length">
+      <div
+        class="flex gap-2 flex-wrap lg:flex-nowrap"
+        *ngIf="displayCount < searchConfig.length"
+      >
         <ng-container
           *ngFor="
             let filter of searchConfig | slice : 0 : 3;
@@ -32,7 +40,11 @@ <h4 class="mel-paragraph-title" translate>
             [title]="filter.title | translate"
           ></mel-datahub-filter-dropdown>
         </ng-container>
-        <button data-cy="filterExpandBtn" class="mel-primary-button" (click)="showAll()">
+        <button
+          data-cy="filterExpandBtn"
+          class="mel-primary-button"
+          (click)="showAll()"
+        >
           <mat-icon class="material-symbols-outlined">more_verti</mat-icon>
         </button>
       </div>
diff --git a/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html b/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
index 81f74e4a..a31c1803 100644
--- a/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
+++ b/libs/mel/src/lib/results-list-item/results-card-search/results-card-search.component.html
@@ -5,7 +5,10 @@
   class="mel-card gap-3 h-[242px] p-4"
 >
   <div class="flex flex-col h-[78px] justify-between shrink-0">
-    <h1 class="font-extrabold text-[17px] line-clamp-2 leading-5" data-cy="recordTitle">
+    <h1
+      class="font-extrabold text-[17px] line-clamp-2 leading-5"
+      data-cy="recordTitle"
+    >
       {{ record.title }}
     </h1>
 
diff --git a/resources/styles.css b/resources/styles.css
index 13759634..5fda3c7b 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -23,6 +23,9 @@
   .mel-section-title {
     @apply text-[28px] font-bold text-title text-center sm:text-left;
   }
+  .mel-paragraph-title {
+    @apply text-[18px] font-bold text-title sm:text-left;
+  }
   .mel-badge {
     @apply inline-block bg-white py-1.5 px-2 rounded font-medium text-sm leading-none transition-colors;
   }
@@ -101,6 +104,12 @@
   .pagination-btn-arrow {
     @apply scale-[2] font-extralight;
   }
+  .mel-filter-container {
+    @apply rounded border border-primary p-4 sm:flex-wrap;
+  }
+  .mel-simple-button:hover {
+    @apply text-primary-dark;
+  }
 }
 html,
 body {
@@ -170,3 +179,24 @@ input[type='checkbox'] {
 .mat-mdc-tab:not(.mdc-tab--stacked) {
   @apply h-9 !important;
 }
+
+gn-ui-sort-by button {
+  @apply bg-primary text-white rounded-none !important;
+}
+
+gn-ui-sort-by button div {
+  @apply font-bold !important;
+}
+
+gn-ui-sort-by button:hover {
+  @apply bg-primary-dark !important;
+}
+
+/* In your global styles.css or styles.scss file */
+gn-ui-sort-by button mat-icon {
+  @apply fill-white opacity-100 !important;
+}
+
+gn-ui-sort-by gn-ui-dropdown-selector span {
+  @apply text-[16px] !important;
+}
diff --git a/resources/translations/en_MEL.json b/resources/translations/en_MEL.json
index 8ca0245d..525ab9e0 100644
--- a/resources/translations/en_MEL.json
+++ b/resources/translations/en_MEL.json
@@ -11,9 +11,16 @@
   "mel.datahub.multiselect.filter.placeholder": "",
   "mel.datahub.search.clear": "",
   "mel.datahub.search.filters.categoryKeyword": "",
+  "mel.datahub.search.filters.keyword": "",
   "mel.datahub.search.filters.license": "",
+  "mel.datahub.search.filters.publicationYear": "",
   "mel.datahub.search.filters.publisher": "",
   "mel.datahub.search.filters.revisionYear": "",
+  "mel.datahub.search.filters.qualityScore": "",
+  "mel.datahub.search.filters.reduce": "",
+  "mel.datahub.search.filters.refine": "",
+  "mel.datahub.search.filters.reset": "",
+  "mel.datahub.search.filters.topic": "",
   "mel.datahub.search.form.description": "",
   "mel.datahub.search.form.title": "",
   "mel.datahub.search.hits.found": "",
diff --git a/resources/translations/fr_MEL.json b/resources/translations/fr_MEL.json
index d051a6cb..1c8affbd 100644
--- a/resources/translations/fr_MEL.json
+++ b/resources/translations/fr_MEL.json
@@ -11,9 +11,15 @@
   "mel.datahub.multiselect.filter.placeholder": "Rechercher",
   "mel.datahub.search.clear": "Effacer",
   "mel.datahub.search.filters.categoryKeyword": "Thématique",
+  "mel.datahub.search.filters.keyword": "Territoires",
   "mel.datahub.search.filters.license": "Licence",
+  "mel.datahub.search.filters.publicationYear": "Date",
   "mel.datahub.search.filters.publisher": "Producteur",
-  "mel.datahub.search.filters.revisionYear": "Date",
+  "mel.datahub.search.filters.qualityScore": "Score de qualité",
+  "mel.datahub.search.filters.reduce": "Réduire",
+  "mel.datahub.search.filters.refine": "Affiner votre recherche",
+  "mel.datahub.search.filters.reset": "Réinitialiser",
+  "mel.datahub.search.filters.topic": "Catégorie",
   "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche ou les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.",
   "mel.datahub.search.form.title": "Trouver un jeu de données",
   "mel.datahub.search.hits.found": "{hits, plural, =0{Aucune correspondance.} one{1 enregistrement trouvé.} other{Ensemble des données: {hits}}}",

From b52a520ad2c5ffbc933f6f53543248beaf62974d Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Mon, 1 Jul 2024 15:13:57 +0200
Subject: [PATCH 4/9] feat: add two new filters

---
 .../app/search/search-filters/search-filters.component.ts    | 4 ++--
 apps/datahub/src/app/search/service/fields.service.ts        | 4 ++++
 resources/translations/en_MEL.json                           | 5 ++++-
 resources/translations/fr_MEL.json                           | 5 ++++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.ts b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
index 145d3b4a..1731d8e9 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.ts
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
@@ -7,7 +7,7 @@ marker('mel.datahub.search.filters.publisher')
 marker('mel.datahub.search.filters.revisionYear')
 marker('mel.datahub.search.filters.license')
 marker('mel.datahub.search.filters.qualityScore')
-marker('mel.datahub.search.filters.keyword')
+marker('mel.datahub.search.filters.territories')
 
 @Component({
   selector: 'mel-datahub-search-filters',
@@ -24,7 +24,7 @@ export class SearchFiltersComponent {
     'publicationYear',
     'license',
     'qualityScore',
-    'keyword',
+    'territories',
   ].map((filter) => ({
     fieldName: filter,
     title: `mel.datahub.search.filters.${filter}`,
diff --git a/apps/datahub/src/app/search/service/fields.service.ts b/apps/datahub/src/app/search/service/fields.service.ts
index ec9b69d0..e5287f1f 100644
--- a/apps/datahub/src/app/search/service/fields.service.ts
+++ b/apps/datahub/src/app/search/service/fields.service.ts
@@ -4,6 +4,8 @@ import { FieldsService, SimpleSearchField } from 'geonetwork-ui'
 import { TranslatedSearchField } from 'geonetwork-ui'
 
 marker('search.filters.categoryKeyword')
+marker('search.filters.qualityScore')
+marker('search.filters.territories')
 @Injectable({
   providedIn: 'root',
 })
@@ -20,6 +22,8 @@ export class MelFieldsService extends FieldsService {
       this.injector,
       'desc'
     ),
+    qualityScore: new SimpleSearchField('qualityScore', this.injector, 'desc'),
+    territories: new TranslatedSearchField('th_mel.link', this.injector, 'asc'),
   }
 
   constructor(override injector: Injector) {
diff --git a/resources/translations/en_MEL.json b/resources/translations/en_MEL.json
index 525ab9e0..2f24f23a 100644
--- a/resources/translations/en_MEL.json
+++ b/resources/translations/en_MEL.json
@@ -20,6 +20,7 @@
   "mel.datahub.search.filters.reduce": "",
   "mel.datahub.search.filters.refine": "",
   "mel.datahub.search.filters.reset": "",
+  "mel.datahub.search.filters.territories": "",
   "mel.datahub.search.filters.topic": "",
   "mel.datahub.search.form.description": "",
   "mel.datahub.search.form.title": "",
@@ -82,5 +83,7 @@
   "mel.search.filter.generatedByWfs": "",
   "mel.searchpage.subtitle.favorites": "",
   "mel.tooltip.url.copy": "",
-  "search.filters.categoryKeyword": ""
+  "search.filters.categoryKeyword": "",
+  "search.filters.qualityScore": "",
+  "search.filters.territories": ""
 }
diff --git a/resources/translations/fr_MEL.json b/resources/translations/fr_MEL.json
index 1c8affbd..3c309f1b 100644
--- a/resources/translations/fr_MEL.json
+++ b/resources/translations/fr_MEL.json
@@ -19,6 +19,7 @@
   "mel.datahub.search.filters.reduce": "Réduire",
   "mel.datahub.search.filters.refine": "Affiner votre recherche",
   "mel.datahub.search.filters.reset": "Réinitialiser",
+  "mel.datahub.search.filters.territories": "Territoires",
   "mel.datahub.search.filters.topic": "Catégorie",
   "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche ou les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.",
   "mel.datahub.search.form.title": "Trouver un jeu de données",
@@ -81,5 +82,7 @@
   "mel.search.filter.generatedByWfs": "généré par une API",
   "mel.searchpage.subtitle.favorites": "Jeux de données suivis",
   "mel.tooltip.url.copy": "Copier l'URL racine",
-  "search.filters.categoryKeyword": "Mot clé"
+  "search.filters.categoryKeyword": "Mot clé",
+  "search.filters.qualityScore": "",
+  "search.filters.territories": ""
 }

From 7c6b7163b3d809c387af1cb8c78f559d8fd41322 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Tue, 9 Jul 2024 14:18:19 +0200
Subject: [PATCH 5/9] feat: adapt to new design

---
 .../search-filters.component.html             | 109 ++++++++----------
 .../search-filters.component.ts               |   3 +-
 .../search-form/search-form.component.html    |   2 +-
 resources/styles.css                          |   6 +-
 4 files changed, 53 insertions(+), 67 deletions(-)

diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html
index e394e1c8..ad744617 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.html
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html
@@ -1,77 +1,62 @@
-<div
-  class="flex flex-col"
-  [ngClass]="{ 'mel-filter-container': displayCount === searchConfig.length }"
->
-  <div
-    class="flex flex-row justify-between mb-2 flex-wrap lg:flex-nowrap"
-    *ngIf="displayCount === searchConfig.length"
-  >
-    <div class="flex flex-row items-center gap-5">
-      <h4 class="mel-paragraph-title" translate>
-        mel.datahub.search.filters.refine
-      </h4>
-      <button
-        data-cy="filterResetBtn"
-        class="mel-simple-button"
-        (click)="resetFilters()"
-        translate
-      >
-        mel.datahub.search.filters.reset
-      </button>
+<div class="flex flex-row gap-5">
+  <div class="flex flex-row">
+    @if(displayCount < searchConfig.length) {
+    <div class="flex gap-2 flex-wrap lg:flex-nowrap">
+      @for(filter of searchConfig | slice : 0 : 3; track filter.fieldName) {
+      <mel-datahub-filter-dropdown
+        [fieldName]="filter.fieldName"
+        [title]="filter.title | translate"
+      ></mel-datahub-filter-dropdown>
+      }
     </div>
-    <div class="flex flex-row gap-2">
-      <gn-ui-sort-by></gn-ui-sort-by>
+    } @else {
+    <div class="flex flex-wrap gap-2 w-[640px]">
+      @for(filter of searchConfig; track filter.fieldName) {
+      <mel-datahub-filter-dropdown
+        [fieldName]="filter.fieldName"
+        [title]="filter.title | translate"
+      ></mel-datahub-filter-dropdown>
+      }
     </div>
+    }
   </div>
-  <div class="flex flex-row">
-    <div>
-      <div
-        class="flex gap-2 flex-wrap lg:flex-nowrap"
-        *ngIf="displayCount < searchConfig.length"
-      >
-        <ng-container
-          *ngFor="
-            let filter of searchConfig | slice : 0 : 3;
-            trackBy: trackByFn
-          "
-        >
-          <mel-datahub-filter-dropdown
-            [fieldName]="filter.fieldName"
-            [title]="filter.title | translate"
-          ></mel-datahub-filter-dropdown>
-        </ng-container>
-        <button
-          data-cy="filterExpandBtn"
-          class="mel-primary-button"
-          (click)="showAll()"
-        >
-          <mat-icon class="material-symbols-outlined">more_verti</mat-icon>
-        </button>
-      </div>
-      <div
-        class="flex flex-wrap gap-2"
-        *ngIf="displayCount === searchConfig.length"
+  <div class="flex flex-row items-start gap-4 -ml-[2px] mt-2">
+    @if(displayCount !== searchConfig.length) {
+    <button
+      data-cy="filterExpandBtn"
+      type="button"
+      class="flex flex-row mel-simple-button"
+      (click)="showAll()"
+      translate
+    >
+      mel.datahub.search.filters.more
+      <mat-icon
+        class="material-symbols-outlined ml-1 align-middle leading-none mt-0.5"
+        >keyboard_arrow_down</mat-icon
       >
-        <ng-container *ngFor="let filter of searchConfig; trackBy: trackByFn">
-          <mel-datahub-filter-dropdown
-            [fieldName]="filter.fieldName"
-            [title]="filter.title | translate"
-          ></mel-datahub-filter-dropdown>
-        </ng-container>
-      </div>
-    </div>
+    </button>
+    } @else {
     <button
       data-cy="filterCloseBtn"
       type="button"
-      *ngIf="displayCount === searchConfig.length"
-      class="flex flex-row self-end mel-simple-button"
+      class="flex flex-row mel-simple-button"
       (click)="showAll()"
       translate
     >
       mel.datahub.search.filters.reduce
-      <mat-icon class="material-symbols-outlined ml-1 align-middle leading-none"
-        >remove</mat-icon
+      <mat-icon
+        class="material-symbols-outlined ml-1 align-middle leading-none mt-0.5"
+        >keyboard_arrow_up</mat-icon
       >
     </button>
+    }
+    <button
+      data-cy="filterResetBtn"
+      class="mel-simple-button"
+      (click)="resetFilters()"
+      translate
+    >
+      mel.datahub.search.filters.reset
+    </button>
   </div>
 </div>
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.ts b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
index 1731d8e9..c9646f2a 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.ts
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.ts
@@ -2,9 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { RouterFacade } from 'geonetwork-ui'
 
+marker('mel.datahub.search.filters.topic')
 marker('mel.datahub.search.filters.categoryKeyword')
 marker('mel.datahub.search.filters.publisher')
-marker('mel.datahub.search.filters.revisionYear')
+marker('mel.datahub.search.filters.publicationYear')
 marker('mel.datahub.search.filters.license')
 marker('mel.datahub.search.filters.qualityScore')
 marker('mel.datahub.search.filters.territories')
diff --git a/apps/datahub/src/app/search/search-form/search-form.component.html b/apps/datahub/src/app/search/search-form/search-form.component.html
index d4b78d0f..791b0de7 100644
--- a/apps/datahub/src/app/search/search-form/search-form.component.html
+++ b/apps/datahub/src/app/search/search-form/search-form.component.html
@@ -6,7 +6,7 @@ <h2 class="mel-section-title mb-3" translate="">
     </h2>
     <p class="text-[17px]" translate="">mel.datahub.search.form.description</p>
   </div>
-  <div class="flex justify-between gap-10 flex-wrap lg:flex-nowrap">
+  <div class="flex flex-row justify-between gap-10 flex-wrap lg:flex-nowrap">
     <mel-datahub-search-filters></mel-datahub-search-filters>
     <mel-datahub-fuzzy-search
       class="mel-fuzzy-search"
diff --git a/resources/styles.css b/resources/styles.css
index 5fda3c7b..e1f31460 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -81,7 +81,7 @@
     @apply inline-flex items-center justify-center w-10 h-10 bg-primary rounded-full cursor-pointer hover:bg-primary-dark;
   }
   .mel-fuzzy-search {
-    @apply w-[645px] text-[17px] pointer-events-auto;
+    @apply w-[309px] text-[17px] pointer-events-auto;
   }
   .card-icon {
     @apply text-primary group-hover:text-primary-dark transition-colors transition-opacity;
@@ -104,8 +104,8 @@
   .pagination-btn-arrow {
     @apply scale-[2] font-extralight;
   }
-  .mel-filter-container {
-    @apply rounded border border-primary p-4 sm:flex-wrap;
+  .mel-simple-button {
+    @apply font-semibold;
   }
   .mel-simple-button:hover {
     @apply text-primary-dark;

From dacdb4ad3f5848eaa74133d1fee8e28ad0f30912 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Tue, 9 Jul 2024 14:18:43 +0200
Subject: [PATCH 6/9] feat: introduce new dropdown selector

---
 apps/datahub/src/app/app.module.ts            |  3 +
 .../dropdown-multiselect.component.html       |  6 +-
 .../filter-dropdown.component.html            | 12 ++-
 .../mel-datahub-dropdown-range.component.html | 92 +++++++++++++++++
 .../mel-datahub-dropdown-range.component.ts   | 98 +++++++++++++++++++
 5 files changed, 206 insertions(+), 5 deletions(-)
 create mode 100644 apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
 create mode 100644 apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts

diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts
index 63e1fa30..fb9ecf73 100644
--- a/apps/datahub/src/app/app.module.ts
+++ b/apps/datahub/src/app/app.module.ts
@@ -63,6 +63,7 @@ import { MelDataViewComponent } from './dataset/dataset-visualisation/data-view/
 import { environment } from '../environments/environnment'
 import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 import { MelFieldsService } from './search/service/fields.service'
+import { MelDatahubDropdownRangeComponent } from './search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component'
 
 @NgModule({
   declarations: [
@@ -86,6 +87,8 @@ import { MelFieldsService } from './search/service/fields.service'
     DatasetVisualisationComponent,
     MelMapViewComponent,
     MelDataViewComponent,
+    MelDatahubDropdownRangeComponent,
+    MelDatahubDropdownRangeComponent,
   ],
   imports: [
     MelModule,
diff --git a/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html
index a3494706..ffde1e08 100644
--- a/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html
+++ b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html
@@ -1,16 +1,16 @@
 <button
-  class="mel-primary-button rounded-none"
+  class="mel-primary-button gap-0 rounded-none w-52"
   [attr.aria-owns]="id"
   (click)="openOverlay()"
   (keydown)="handleTriggerKeydown($event)"
   cdkOverlayOrigin
   #overlayOrigin="cdkOverlayOrigin"
 >
-  {{ title }}
+  <span>{{ title }}</span>
   <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
     @if(hasSelectedChoices){
     <div
-      class="shrink-0 rounded-full text-primary bg-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
+      class="shrink-0 rounded-full text-primary bg-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count ml-2"
     >
       {{ selected['length'] }}
     </div>
diff --git a/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html
index 7b6c6477..a15a43c9 100644
--- a/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html
+++ b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html
@@ -1,11 +1,19 @@
+@if (fieldName === 'qualityScore'){
+<mel-datahub-dropdown-range
+  class="w-full"
+  [title]="title"
+  [choices]="choices$ | async"
+  (selectValues)="onSelectedValues($event)"
+  [attr.data-cy-field]="fieldName"
+></mel-datahub-dropdown-range>
+} @else {
 <mel-datahub-dropdown-multiselect
   class="w-full"
   [title]="title"
-  [maxRows]="6"
   [choices]="choices$ | async"
   [selected]="selected$ | async"
-  [allowSearch]="true"
   (selectValues)="onSelectedValues($event)"
   [attr.data-cy-field]="fieldName"
 >
 </mel-datahub-dropdown-multiselect>
+}
diff --git a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
new file mode 100644
index 00000000..2860cefa
--- /dev/null
+++ b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
@@ -0,0 +1,92 @@
+<button
+  class="mel-primary-button gap-0 rounded-none w-52"
+  [attr.aria-owns]="id"
+  (click)="openOverlay()"
+  cdkOverlayOrigin
+  #overlayOrigin="cdkOverlayOrigin"
+>
+  <span>{{ title }}</span>
+  <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
+    @if(hasSelectedChoices){
+    <div
+      class="shrink-0 rounded-full text-primary bg-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count ml-2"
+    >
+      {{ selected['length'] }}
+    </div>
+    }
+  </div>
+  <button class="h-6 w-6" data-cy="clearSelection">
+    @if(hasSelectedChoices && !overlayOpen){
+    <mat-icon
+      class="material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+      (click)="clearSelection($event)"
+    >
+      close
+    </mat-icon>
+    }
+  </button>
+  <mat-icon class="material-symbols-outlined shrink-0">
+    @if(overlayOpen){
+    <ng-container>expand_less</ng-container>
+    } @else {
+    <ng-container>expand_more</ng-container>
+    }
+  </mat-icon>
+</button>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="bg-white border border-gray-300 shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container"
+    [style.max-height]="overlayMaxHeight"
+    [style.width]="'300px'"
+    role="listbox"
+    tabindex="-1"
+    [attr.id]="id"
+    [attr.aria-multiselectable]="true"
+    [attr.aria-label]="title"
+    #overlayContainer
+  >
+    <div class="flex flex-col ml-3 gap-3">
+      <div class="mr-3">
+        <div class="text-primary" translate>
+          mel.datahub.search.filters.range.from
+        </div>
+        <gn-ui-text-input
+          class="w-64"
+          (valueChange)="lowValue = $event"
+          [value]="lowValue"
+          [hint]="'mel.datahub.search.filters.minValue' | translate"
+        ></gn-ui-text-input>
+      </div>
+      <div class="mr-3">
+        <div class="text-primary" translate>
+          mel.datahub.search.filters.range.to
+        </div>
+        <gn-ui-text-input
+          class="w-64"
+          (valueChange)="highValue = $event"
+          [value]="highValue"
+          [hint]="'mel.datahub.search.filters.maxValue' | translate"
+        ></gn-ui-text-input>
+      </div>
+      <mel-datahub-button
+        [disabled]="!lowValue || !highValue"
+        class="self-end mr-3"
+        [label]="'mel.datahub.search.filters.validate' | translate"
+        [icon]="'arrow'"
+        (click)="onValidate()"
+      ></mel-datahub-button>
+    </div>
+  </div>
+</ng-template>
diff --git a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
new file mode 100644
index 00000000..dacd88d3
--- /dev/null
+++ b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
@@ -0,0 +1,98 @@
+import {
+  CdkOverlayOrigin,
+  ConnectedPosition,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { Choice, propagateToDocumentOnly } from 'geonetwork-ui'
+
+@Component({
+  selector: 'mel-datahub-dropdown-range',
+  templateUrl: './mel-datahub-dropdown-range.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MelDatahubDropdownRangeComponent {
+  lowValue = ''
+  highValue = ''
+  @Input() choices: Choice[]
+  @Input() title: string
+  @Input() selected: unknown[] = []
+  @Output() selectValues = new EventEmitter<unknown[]>()
+  @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
+  @ViewChild('overlayContainer', { read: ElementRef })
+  overlayContainer: ElementRef
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 8,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -8,
+    },
+  ]
+  scrollStrategy = this.scrollStrategies.reposition()
+  overlayOpen = false
+  overlayWidth = 'auto'
+  overlayMaxHeight = 'none'
+  id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`
+
+  get hasSelectedChoices() {
+    return this.selected.length > 0
+  }
+
+  constructor(private scrollStrategies: ScrollStrategyOptions) {}
+
+  openOverlay() {
+    this.overlayWidth =
+      this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
+        .width + 'px'
+    this.overlayOpen = true
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+
+  clearSelection(event: Event) {
+    this.selectValues.emit([])
+    this.highValue = ''
+    this.lowValue = ''
+    this.selected = []
+    propagateToDocumentOnly(event)
+  }
+
+  onValidate() {
+    const lowValue = Number(this.lowValue)
+    const highValue = Number(this.highValue)
+    this.selected = this.choices
+      .filter((choice) => {
+        const choiceNb = Number(choice.value)
+        if (lowValue && highValue) {
+          return choiceNb >= lowValue && choiceNb <= highValue
+        } else if (lowValue) {
+          return choiceNb >= lowValue
+        } else if (highValue) {
+          return choiceNb <= highValue
+        }
+        return true
+      })
+      .map((choice) => choice.value)
+    this.selectValues.emit(this.selected)
+  }
+}

From 4745f7c394c55cc0c0a3b5aecffbc7114c69373d Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Tue, 9 Jul 2024 14:18:55 +0200
Subject: [PATCH 7/9] feat: translations and e2e

---
 apps/datahub-e2e/src/e2e/search.cy.ts | 26 +-------------------------
 resources/translations/en_MEL.json    |  9 ++++++---
 resources/translations/fr_MEL.json    | 16 ++++++++++------
 3 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts
index fd8c0941..67d9709e 100644
--- a/apps/datahub-e2e/src/e2e/search.cy.ts
+++ b/apps/datahub-e2e/src/e2e/search.cy.ts
@@ -219,7 +219,7 @@ describe('search', () => {
         ' Aucune correspondance. '
       )
     })
-    describe('expanded search panel', () => {
+    describe.only('expanded search panel', () => {
       beforeEach(() => {
         cy.get('[data-cy="filterExpandBtn"]').as('expandBtn')
       })
@@ -238,30 +238,6 @@ describe('search', () => {
         cy.get('[data-cy=filterResetBtn]').click()
         cy.get('@result-cards').should('have.length', 14)
       })
-      describe('sort by date', () => {
-        beforeEach(() => {
-          // first sort by popularity
-          cy.get('@expandBtn').click()
-          cy.get('gn-ui-sort-by').selectDropdownOption('desc,_score')
-          cy.get('@result-cards')
-            .find('[data-cy="recordTitle"]')
-            .then(($titles) =>
-              $titles.toArray().map((title) => title.innerText.trim())
-            )
-            .as('initialResultTitles')
-          cy.get('gn-ui-sort-by').selectDropdownOption('desc,createDate')
-        })
-        it('changes the results order', function () {
-          cy.get('@result-cards')
-            .find('[data-cy="recordTitle"]')
-            .then(($titles) => {
-              const titles = $titles
-                .toArray()
-                .map((title) => title.innerText.trim())
-              assert.notEqual(titles, this['initialResultTitles']) // @initialResultTitles
-            })
-        })
-      })
       it('should show close button and show less filters on click', () => {
         cy.get('@expandBtn').click()
         cy.get('mel-datahub-filter-dropdown').should('have.length', 6)
diff --git a/resources/translations/en_MEL.json b/resources/translations/en_MEL.json
index 2f24f23a..2bb51b13 100644
--- a/resources/translations/en_MEL.json
+++ b/resources/translations/en_MEL.json
@@ -11,17 +11,20 @@
   "mel.datahub.multiselect.filter.placeholder": "",
   "mel.datahub.search.clear": "",
   "mel.datahub.search.filters.categoryKeyword": "",
-  "mel.datahub.search.filters.keyword": "",
   "mel.datahub.search.filters.license": "",
+  "mel.datahub.search.filters.maxValue": "",
+  "mel.datahub.search.filters.minValue": "",
+  "mel.datahub.search.filters.more": "",
   "mel.datahub.search.filters.publicationYear": "",
   "mel.datahub.search.filters.publisher": "",
-  "mel.datahub.search.filters.revisionYear": "",
   "mel.datahub.search.filters.qualityScore": "",
+  "mel.datahub.search.filters.range.from": "",
+  "mel.datahub.search.filters.range.to": "",
   "mel.datahub.search.filters.reduce": "",
-  "mel.datahub.search.filters.refine": "",
   "mel.datahub.search.filters.reset": "",
   "mel.datahub.search.filters.territories": "",
   "mel.datahub.search.filters.topic": "",
+  "mel.datahub.search.filters.validate": "",
   "mel.datahub.search.form.description": "",
   "mel.datahub.search.form.title": "",
   "mel.datahub.search.hits.found": "",
diff --git a/resources/translations/fr_MEL.json b/resources/translations/fr_MEL.json
index 3c309f1b..2d841f72 100644
--- a/resources/translations/fr_MEL.json
+++ b/resources/translations/fr_MEL.json
@@ -11,16 +11,20 @@
   "mel.datahub.multiselect.filter.placeholder": "Rechercher",
   "mel.datahub.search.clear": "Effacer",
   "mel.datahub.search.filters.categoryKeyword": "Thématique",
-  "mel.datahub.search.filters.keyword": "Territoires",
   "mel.datahub.search.filters.license": "Licence",
+  "mel.datahub.search.filters.maxValue": "Valeur maximale",
+  "mel.datahub.search.filters.minValue": "Valeur minimale",
+  "mel.datahub.search.filters.more": "Plus de filtres",
   "mel.datahub.search.filters.publicationYear": "Date",
   "mel.datahub.search.filters.publisher": "Producteur",
   "mel.datahub.search.filters.qualityScore": "Score de qualité",
-  "mel.datahub.search.filters.reduce": "Réduire",
-  "mel.datahub.search.filters.refine": "Affiner votre recherche",
+  "mel.datahub.search.filters.range.from": "De :",
+  "mel.datahub.search.filters.range.to": "Jusqu'à :",
+  "mel.datahub.search.filters.reduce": "Moins de filtres",
   "mel.datahub.search.filters.reset": "Réinitialiser",
   "mel.datahub.search.filters.territories": "Territoires",
-  "mel.datahub.search.filters.topic": "Catégorie",
+  "mel.datahub.search.filters.topic": "Catégories",
+  "mel.datahub.search.filters.validate": "Valider",
   "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche ou les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.",
   "mel.datahub.search.form.title": "Trouver un jeu de données",
   "mel.datahub.search.hits.found": "{hits, plural, =0{Aucune correspondance.} one{1 enregistrement trouvé.} other{Ensemble des données: {hits}}}",
@@ -83,6 +87,6 @@
   "mel.searchpage.subtitle.favorites": "Jeux de données suivis",
   "mel.tooltip.url.copy": "Copier l'URL racine",
   "search.filters.categoryKeyword": "Mot clé",
-  "search.filters.qualityScore": "",
-  "search.filters.territories": ""
+  "search.filters.qualityScore": "Score de qualité",
+  "search.filters.territories": "Territoires"
 }

From e52e0b07310c4ab33372fa255b7b2c46c59cb1a1 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Thu, 11 Jul 2024 11:24:51 +0200
Subject: [PATCH 8/9] feat: multiply by 10 and various changes from review

---
 apps/datahub-e2e/src/e2e/search.cy.ts         |  2 +-
 apps/datahub/src/app/app.module.ts            |  1 -
 .../mel-datahub-dropdown-range.component.ts   |  6 +++---
 .../search-filters.component.html             |  4 +++-
 resources/styles.css                          | 21 -------------------
 5 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts
index 67d9709e..efcf1fba 100644
--- a/apps/datahub-e2e/src/e2e/search.cy.ts
+++ b/apps/datahub-e2e/src/e2e/search.cy.ts
@@ -219,7 +219,7 @@ describe('search', () => {
         ' Aucune correspondance. '
       )
     })
-    describe.only('expanded search panel', () => {
+    describe('expanded search panel', () => {
       beforeEach(() => {
         cy.get('[data-cy="filterExpandBtn"]').as('expandBtn')
       })
diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts
index fb9ecf73..a0bc69bf 100644
--- a/apps/datahub/src/app/app.module.ts
+++ b/apps/datahub/src/app/app.module.ts
@@ -88,7 +88,6 @@ import { MelDatahubDropdownRangeComponent } from './search/search-filters/mel-da
     MelMapViewComponent,
     MelDataViewComponent,
     MelDatahubDropdownRangeComponent,
-    MelDatahubDropdownRangeComponent,
   ],
   imports: [
     MelModule,
diff --git a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
index dacd88d3..2b871565 100644
--- a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
+++ b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
@@ -50,7 +50,7 @@ export class MelDatahubDropdownRangeComponent {
   overlayOpen = false
   overlayWidth = 'auto'
   overlayMaxHeight = 'none'
-  id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`
+  id = `dropdown-range-${Math.floor(Math.random() * 10000)}`
 
   get hasSelectedChoices() {
     return this.selected.length > 0
@@ -78,8 +78,8 @@ export class MelDatahubDropdownRangeComponent {
   }
 
   onValidate() {
-    const lowValue = Number(this.lowValue)
-    const highValue = Number(this.highValue)
+    const lowValue = Number(this.lowValue) * 10
+    const highValue = Number(this.highValue) * 10
     this.selected = this.choices
       .filter((choice) => {
         const choiceNb = Number(choice.value)
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html
index ad744617..9b4c2559 100644
--- a/apps/datahub/src/app/search/search-filters/search-filters.component.html
+++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html
@@ -20,7 +20,9 @@
     </div>
     }
   </div>
-  <div class="flex flex-row items-start gap-4 -ml-[2px] mt-2">
+  <div
+    class="flex flex-row items-start gap-4 -ml-[2px] mt-2 justify-betwwen w-56"
+  >
     @if(displayCount !== searchConfig.length) {
     <button
       data-cy="filterExpandBtn"
diff --git a/resources/styles.css b/resources/styles.css
index e1f31460..67df2c9f 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -179,24 +179,3 @@ input[type='checkbox'] {
 .mat-mdc-tab:not(.mdc-tab--stacked) {
   @apply h-9 !important;
 }
-
-gn-ui-sort-by button {
-  @apply bg-primary text-white rounded-none !important;
-}
-
-gn-ui-sort-by button div {
-  @apply font-bold !important;
-}
-
-gn-ui-sort-by button:hover {
-  @apply bg-primary-dark !important;
-}
-
-/* In your global styles.css or styles.scss file */
-gn-ui-sort-by button mat-icon {
-  @apply fill-white opacity-100 !important;
-}
-
-gn-ui-sort-by gn-ui-dropdown-selector span {
-  @apply text-[16px] !important;
-}

From 56c2536ed230e39f28d21b990608b422369ff962 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 12 Jul 2024 16:46:38 +0200
Subject: [PATCH 9/9] feat: changes on range dropdown

---
 .../mel-datahub-dropdown-range.component.html        | 12 ++----------
 .../mel-datahub-dropdown-range.component.ts          |  4 ++++
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
index 2860cefa..f1eda0a8 100644
--- a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
+++ b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html
@@ -1,20 +1,11 @@
 <button
-  class="mel-primary-button gap-0 rounded-none w-52"
+  class="mel-primary-button gap-0 rounded-none w-52 justify-between"
   [attr.aria-owns]="id"
   (click)="openOverlay()"
   cdkOverlayOrigin
   #overlayOrigin="cdkOverlayOrigin"
 >
   <span>{{ title }}</span>
-  <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
-    @if(hasSelectedChoices){
-    <div
-      class="shrink-0 rounded-full text-primary bg-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count ml-2"
-    >
-      {{ selected['length'] }}
-    </div>
-    }
-  </div>
   <button class="h-6 w-6" data-cy="clearSelection">
     @if(hasSelectedChoices && !overlayOpen){
     <mat-icon
@@ -78,6 +69,7 @@
           (valueChange)="highValue = $event"
           [value]="highValue"
           [hint]="'mel.datahub.search.filters.maxValue' | translate"
+          (keyup.enter)="onValidate()"
         ></gn-ui-text-input>
       </div>
       <mel-datahub-button
diff --git a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
index 2b871565..04f6475f 100644
--- a/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
+++ b/apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.ts
@@ -93,6 +93,10 @@ export class MelDatahubDropdownRangeComponent {
         return true
       })
       .map((choice) => choice.value)
+    if (this.selected.length === 0) {
+      // If no value is selected, we keep the low and high values to display nothing
+      this.selected.push(lowValue, highValue)
+    }
     this.selectValues.emit(this.selected)
   }
 }