Merge pull request #1037 from geonetwork/me-search-filters-summary

Editor: Add a search filters summary component

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

@@ -296,12 +296,26 @@ describe('dashboard (authenticated)', () => {
     })
   })
   describe('search filters', () => {
-    function checkFilterByChangeDate() {
+    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')
@@ -322,12 +336,8 @@ describe('dashboard (authenticated)', () => {
           .find('gn-ui-button')
           .should('have.length', 2)
       })
-      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 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')
@@ -339,18 +349,19 @@ describe('dashboard (authenticated)', () => {
       })
       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('mat-icon')
-          .should('contain.text', 'expand_more')
+          .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('mat-icon')
-          .should('contain.text', 'expand_less')
+          .find('ng-icon')
+          .should('have.attr', 'ng-reflect-name', 'matExpandLess')
       })
     })
     describe('myRecords search filters', () => {
@@ -364,9 +375,145 @@ describe('dashboard (authenticated)', () => {
       })
       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')
+        })
+      })
+    })
   })
   describe('Account settings access', () => {
     it('should navigate to the account settings page', () => {

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/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,6 +67,7 @@ import {
     provideNgIconsConfig({
       size: '1.5rem',
     }),
+    { provide: FILTER_SUMMARY_IGNORE_LIST, useValue: [FILTER_OWNER] },
   ],
 })
 export class MyRecordsComponent implements OnInit {
@@ -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)
         })

libs/feature/router/src/lib/default/state/query-params.utils.spec.ts

@@ -37,11 +37,11 @@ describe('query params utilities', () => {
         [ROUTE_PARAMS.SORT]: 'createDate',
         publisher: ['john', 'barbie'],
         updateDate: {
-          start: new Date('2010-03-10'),
-          end: new Date('2014-01-01'),
+          start: new Date('2010-03-10T00:00:00'),
+          end: new Date('2014-01-01T00:00:00'),
         },
         changeDate: {
-          end: new Date('2008-08-14'),
+          end: new Date('2008-08-14T00:00:00'),
         },
       })
     })
@@ -51,7 +51,7 @@ describe('query params utilities', () => {
       })
       expect(params).toEqual({
         changeDate: {
-          end: new Date('2008-08-14'),
+          end: new Date('2008-08-14T00:00:00'),
         },
       })
     })