Editor: Add a date range search filter

apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts

@@ -296,16 +296,48 @@ describe('dashboard (authenticated)', () => {
     })
   })
   describe('search filters', () => {
+    function selectUser(index = 0, openDropdown = true) {
+      if (openDropdown) {
+        cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
+      }
+      cy.get('.cdk-overlay-container')
+        .find('input[type="checkbox"]')
+        .eq(index)
+        .check()
+    }
+    function selectDateRange() {
+      cy.get('mat-calendar-header').find('button').first().click()
+      cy.get('mat-multi-year-view').contains('button', '2024').click()
+      cy.get('mat-year-view').contains('button', 'AUG').click()
+      cy.get('mat-month-view').contains('button', '1').click()
+      cy.get('mat-month-view').contains('button', '30').click()
+    }
+    function closeDropDown() {
+      cy.get('body').click(0, 0)
+    }
+    function checkFilterByChangeDate() {
+      cy.get('gn-ui-interactive-table')
+        .find('[data-cy="table-row"]')
+        .should('have.length', '1')
+      cy.get('gn-ui-results-table')
+        .find('[data-cy="resultItemTitle"]')
+        .each(($resultItemTitle) => {
+          cy.wrap($resultItemTitle)
+            .invoke('text')
+            .should('eq', 'Accroches vélos MEL')
+        })
+    }
     describe('allRecords search filter', () => {
       beforeEach(() => {
         cy.visit('/catalog/search')
       })
-      it('should filter the record list by editor (Barbara Roberts)', () => {
-        cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
-        cy.get('.cdk-overlay-container')
-          .find('input[type="checkbox"]')
-          .eq(1)
-          .check()
+      it('should contain filter component with two search filters', () => {
+        cy.get('md-editor-search-filters')
+          .find('gn-ui-button')
+          .should('have.length', 2)
+      })
+      it('should filter the record list by user (Barbara Roberts)', () => {
+        selectUser(1)
         cy.get('gn-ui-interactive-table')
           .find('[data-cy="table-row"]')
           .should('have.length', '5')
@@ -315,15 +347,171 @@ describe('dashboard (authenticated)', () => {
             cy.wrap($ownerInfo).invoke('text').should('eq', 'Barbara Roberts')
           })
       })
+      it('should filter the record list by last update (changeDate)', () => {
+        cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+        selectDateRange()
+        checkFilterByChangeDate()
+      })
+      it('should display the expand icon for the date range dropdown correctly', () => {
+        cy.get('md-editor-search-filters')
+          .find('gn-ui-date-range-dropdown')
+          .find('ng-icon')
+          .should('have.attr', 'ng-reflect-name', 'matExpandMore')
+        cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+        cy.get('md-editor-search-filters')
+          .find('gn-ui-date-range-dropdown')
+          .find('ng-icon')
+          .should('have.attr', 'ng-reflect-name', 'matExpandLess')
+      })
     })
     describe('myRecords search filters', () => {
       beforeEach(() => {
         cy.visit('/my-space/my-records')
       })
-      it('should contain filter component with no search filter for now', () => {
+      it('should contain filter component with one search filter', () => {
         cy.get('md-editor-search-filters')
           .find('gn-ui-button')
-          .should('not.exist')
+          .should('have.length', 1)
+      })
+      it('should filter the record list by last update (changeDate)', () => {
+        cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
+        selectDateRange()
+        checkFilterByChangeDate()
+      })
+    })
+    describe('allRecord search filters summary', () => {
+      beforeEach(() => {
+        cy.visit('/catalog/search')
+      })
+      it('should not display anything without selected filters', () => {
+        cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+      })
+      describe('selecting users', () => {
+        beforeEach(() => {
+          selectUser(1)
+        })
+        it('should display a label for badges of selected users', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('[data-cy="filterSummaryLabel"]')
+            .invoke('text')
+            .should('eq', 'Modified by: ')
+        })
+        it('should display the badge for a selected user', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('have.length', 1)
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .invoke('text')
+            .should('eq', 'Barbara Roberts')
+        })
+        it('should display a second badge for a second selected user', () => {
+          selectUser(0, false)
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('have.length', 2)
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .eq(1)
+            .invoke('text')
+            .should('eq', 'admin admin')
+        })
+        it('should remove one of two badges when a badge cross is clicked', () => {
+          selectUser(0, false)
+          closeDropDown()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .eq(0)
+            .find('ng-icon')
+            .click()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('have.length', 1)
+        })
+      })
+      describe('selecting date range', () => {
+        beforeEach(() => {
+          cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+          selectDateRange()
+        })
+        it('should display a label for the date range', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('[data-cy="filterSummaryLabel"]')
+            .invoke('text')
+            .should('eq', 'Modified on: ')
+        })
+        it('should display the badge for the selected date range', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .invoke('text')
+            .should('eq', '01.08.2024 - 30.08.2024')
+        })
+        it('should remove the badge when the badge cross is clicked', () => {
+          closeDropDown()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .find('ng-icon')
+            .click()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('not.exist')
+        })
+      })
+      describe('selecting multiple filters (users and date range)', () => {
+        beforeEach(() => {
+          selectUser(0)
+          closeDropDown()
+          cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+          selectDateRange()
+        })
+        it('should display both badges', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('have.length', 2)
+        })
+        it('should clear all filters when the clear button is clicked', () => {
+          cy.get('gn-ui-search-filters-summary').find('button').last().click()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('have.length', 0)
+          cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+        })
+      })
+    })
+    describe('myRecords search filters summary', () => {
+      beforeEach(() => {
+        cy.visit('/my-space/my-records')
+      })
+      it('should not display anything without selected filters', () => {
+        cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+      })
+      describe('selecting date range', () => {
+        beforeEach(() => {
+          cy.get('md-editor-search-filters').find('gn-ui-button').eq(0).click()
+          selectDateRange()
+        })
+        it('should display a label for the date range', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('[data-cy="filterSummaryLabel"]')
+            .invoke('text')
+            .should('eq', 'Modified on: ')
+        })
+        it('should display the badge for the selected date range', () => {
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .invoke('text')
+            .should('eq', '01.08.2024 - 30.08.2024')
+        })
+        it('should remove the badge when the badge cross is clicked', () => {
+          closeDropDown()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .find('ng-icon')
+            .click()
+          cy.get('gn-ui-search-filters-summary')
+            .find('gn-ui-badge')
+            .should('not.exist')
+        })
       })
     })
   })

apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.html

@@ -1,13 +1,20 @@
 <div
-  class="flex flex-row py-3 px-4 gap-4 shadow-md shadow-gray-300 border-[1px] border-gray-200 overflow-hidden rounded bg-white grow mx-[32px] my-[16px] text-sm"
+  class="rounded bg-white shadow-md shadow-gray-300 border-[1px] border-gray-200 mx-[32px] my-[16px] text-sm"
 >
-  <ng-icon class="mt-0.5" name="iconoirFilterList"></ng-icon>
-  <gn-ui-filter-dropdown
-    *ngFor="let filter of searchConfig; let i = index"
-    [fieldName]="filter.fieldName"
-    [title]="filter.title | translate"
-    [style.--gn-ui-button-height]="'32px'"
-    [style.--gn-ui-multiselect-counter-text-color]="'var(--color-primary)'"
-    [style.--gn-ui-multiselect-counter-background-color]="'white'"
-  ></gn-ui-filter-dropdown>
+  <div
+    class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
+  >
+    <ng-icon class="mt-0.5" name="iconoirFilterList"></ng-icon>
+    <gn-ui-filter-dropdown
+      *ngFor="let filter of searchConfig; let i = index"
+      [fieldName]="filter.fieldName"
+      [title]="filter.title | translate"
+      [style.--gn-ui-button-height]="'32px'"
+      [style.--gn-ui-multiselect-counter-text-color]="'var(--color-primary)'"
+      [style.--gn-ui-multiselect-counter-background-color]="'white'"
+    ></gn-ui-filter-dropdown>
+  </div>
+  <gn-ui-search-filters-summary
+    [searchFields]="searchFields"
+  ></gn-ui-search-filters-summary>
 </div>

apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.spec.ts

@@ -2,13 +2,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { SearchFiltersComponent } from './search-filters.component'
 import { MockBuilder } from 'ng-mocks'
 import { TranslateModule } from '@ngx-translate/core'
+import { By } from '@angular/platform-browser'
+import { SearchFiltersSummaryComponent } from '@geonetwork-ui/feature/search'
 
 describe('SearchFiltersComponent', () => {
   let component: SearchFiltersComponent
   let fixture: ComponentFixture<SearchFiltersComponent>
 
   beforeEach(() => {
-    return MockBuilder(SearchFiltersComponent)
+    return MockBuilder(SearchFiltersComponent).mock(
+      SearchFiltersSummaryComponent
+    )
   })
 
   beforeEach(async () => {
@@ -40,5 +44,15 @@ describe('SearchFiltersComponent', () => {
       fixture.detectChanges()
       expect(component.searchConfig).toEqual([])
     })
+
+    it('should pass searchFields to SearchFiltersSummaryComponent', () => {
+      const searchFields = ['user', 'publisherOrg', 'format', 'isSpatial']
+      component.searchFields = searchFields
+      fixture.detectChanges()
+      const summaryComponent = fixture.debugElement.query(
+        By.directive(SearchFiltersSummaryComponent)
+      ).componentInstance
+      expect(summaryComponent.searchFields).toEqual(searchFields)
+    })
   })
 })

apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.ts

@@ -1,13 +1,16 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
-import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirFilterList } from '@ng-icons/iconoir'
+import {
+  FeatureSearchModule,
+  SearchFiltersSummaryComponent,
+} from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-search-filters',
@@ -17,6 +20,7 @@ import { iconoirFilterList } from '@ng-icons/iconoir'
     TranslateModule,
     FeatureSearchModule,
     NgIconComponent,
+    SearchFiltersSummaryComponent,
   ],
   providers: [
     provideIcons({

apps/metadata-editor/src/app/records/all-records/all-records.component.ts

@@ -77,7 +77,7 @@ export class AllRecordsComponent {
   importRecordButton!: ElementRef
   @ViewChild('template') template!: TemplateRef<any>
   private overlayRef!: OverlayRef
-  searchFields = ['user']
+  searchFields = ['user', 'changeDate']
   searchText$: Observable<string | null> =
     this.searchFacade.searchFilters$.pipe(
       map((filters) => ('any' in filters ? (filters['any'] as string) : null))

apps/metadata-editor/src/app/records/my-records/my-records.component.ts

@@ -13,7 +13,7 @@ import { RecordsListComponent } from '../records-list.component'
 import {
   FeatureSearchModule,
   FieldsService,
-  ResultsTableContainerComponent,
+  FILTER_SUMMARY_IGNORE_LIST,
   SearchFacade,
 } from '@geonetwork-ui/feature/search'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
@@ -38,6 +38,8 @@ import {
   iconoirPagePlus,
 } from '@ng-icons/iconoir'
 
+const FILTER_OWNER = 'owner'
+
 @Component({
   selector: 'md-editor-my-records',
   templateUrl: './my-records.component.html',
@@ -47,7 +49,6 @@ import {
     CommonModule,
     TranslateModule,
     RecordsListComponent,
-    ResultsTableContainerComponent,
     UiElementsModule,
     RecordsCountComponent,
     ButtonComponent,
@@ -66,14 +67,15 @@ import {
     provideNgIconsConfig({
       size: '1.5rem',
     }),
+    { provide: FILTER_SUMMARY_IGNORE_LIST, useValue: [FILTER_OWNER] },
   ],
 })
 export class MyRecordsComponent implements OnInit {
   @ViewChild('importRecordButton', { read: ElementRef })
   private importRecordButton!: ElementRef
   @ViewChild('template') template!: TemplateRef<any>
   private overlayRef!: OverlayRef
-  searchFields = []
+  searchFields = ['changeDate']
   searchText$: Observable<string | null>
 
   isImportMenuOpen = false
@@ -93,7 +95,7 @@ export class MyRecordsComponent implements OnInit {
 
     this.platformService.getMe().subscribe((user) => {
       this.fieldsService
-        .buildFiltersFromFieldValues({ owner: user.id })
+        .buildFiltersFromFieldValues({ [FILTER_OWNER]: user.id })
         .subscribe((filters) => {
           this.searchFacade.updateFilters(filters)
         })