Merge pull request #1003 from geonetwork/seperate-search-inputs

[ME]: Seperate search inputs for allRecord and myRecords

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

@@ -213,35 +213,17 @@ describe('dashboard', () => {
       cy.clearRecordDrafts()
     })
   })
+
   describe('navigation', () => {
-    function checkDashboardFiltered() {
-      cy.get('gn-ui-autocomplete').type('Mat')
-      cy.get('mat-option').first().click()
-      cy.get('gn-ui-interactive-table')
-        .find('[data-cy="table-row"]')
-        .should('have.length', '1')
-    }
     beforeEach(() => {
       cy.login('admin', 'admin', false)
       cy.visit('/catalog/search')
     })
-    describe('search input', () => {
-      it('should filter the dashboard based on the search input', () => {
-        checkDashboardFiltered()
-      })
-      it('should navigate to list of all records and filter the dashboard based on the search input when on different page', () => {
-        cy.visit('/my-space/my-records')
-        checkDashboardFiltered()
-      })
-      it('should clear the search input when navigating to my records', () => {
-        cy.get('gn-ui-autocomplete').type('Mat')
-        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
-        cy.get('gn-ui-autocomplete').should('have.value', '')
-      })
-      it('should clear the search input when navigating to my drafts', () => {
-        cy.get('gn-ui-autocomplete').type('Mat')
-        cy.get('md-editor-dashboard-menu').find('a').eq(6).click()
-        cy.get('gn-ui-autocomplete').should('have.value', '')
+    describe('all records', () => {
+      it('should display the correct amount of records', () => {
+        cy.get('gn-ui-results-table')
+          .find('[data-cy="table-row"]')
+          .should('have.length', '15')
       })
     })
     describe('my records', () => {
@@ -280,4 +262,56 @@ describe('dashboard', () => {
       })
     })
   })
+
+  describe('search', () => {
+    function checkDashboardFiltered() {
+      cy.get('gn-ui-autocomplete').type('velo{enter}')
+      cy.get('gn-ui-interactive-table')
+        .find('[data-cy="table-row"]')
+        .should('have.length', '1')
+    }
+    function checkAutocompleteSelected() {
+      cy.get('gn-ui-autocomplete').type('velo')
+      cy.get('mat-option').first().click()
+      cy.url().should('include', '/edit/accroche_velos')
+    }
+    describe('allRecords search input', () => {
+      beforeEach(() => {
+        cy.login('admin', 'admin', false)
+        cy.visit('/catalog/search')
+      })
+      it('should filter the dashboard based on the search input', () => {
+        checkDashboardFiltered()
+      })
+      it('should navigate to the record selected in the autocomplete', () => {
+        checkAutocompleteSelected()
+      })
+      it('should clear the search input when navigating to my records', () => {
+        cy.get('gn-ui-autocomplete').type('velo')
+        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
+        cy.get('gn-ui-autocomplete').should('have.value', '')
+      })
+      it('should hide the search input when navigating to my drafts', () => {
+        cy.get('md-editor-dashboard-menu').find('a').eq(6).click()
+        cy.get('gn-ui-autocomplete').should('not.exist')
+      })
+    })
+    describe('myRecords search input', () => {
+      beforeEach(() => {
+        cy.login('admin', 'admin', false)
+        cy.visit('/my-space/my-records')
+      })
+      it('should filter the dashboard based on the search input', () => {
+        checkDashboardFiltered()
+      })
+      it('should navigate to the record selected in the autocomplete', () => {
+        checkAutocompleteSelected()
+      })
+      it('should clear the search input when navigating to all records', () => {
+        cy.get('gn-ui-autocomplete').type('velo')
+        cy.get('md-editor-dashboard-menu').find('a').first().click()
+        cy.get('gn-ui-autocomplete').should('have.value', '')
+      })
+    })
+  })
 })

apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html

@@ -3,7 +3,6 @@
     <div class="menu-title" translate="">dashboard.labels.catalog</div>
     <a
       class="menu-item"
-      (click)="resetMainSearch()"
       routerLink="/catalog/search"
       routerLinkActive="btn-active"
       #rlaAll="routerLinkActive"

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

@@ -5,13 +5,11 @@ import { TranslateModule } from '@ngx-translate/core'
 import { cold, hot } from 'jasmine-marbles'
 import { MockBuilder, MockProviders } from 'ng-mocks'
 import { DashboardMenuComponent } from './dashboard-menu.component'
-import { SearchFacade } from '@geonetwork-ui/feature/search'
 
 describe('DashboardMenuComponent', () => {
   let component: DashboardMenuComponent
   let fixture: ComponentFixture<DashboardMenuComponent>
   let recordsRepository: RecordsRepositoryInterface
-  let searchFacade: SearchFacade
 
   beforeEach(() => {
     return MockBuilder(DashboardMenuComponent)
@@ -20,12 +18,9 @@ describe('DashboardMenuComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [DashboardMenuComponent, TranslateModule.forRoot()],
-      providers: [
-        MockProviders(ActivatedRoute, RecordsRepositoryInterface, SearchFacade),
-      ],
+      providers: [MockProviders(ActivatedRoute, RecordsRepositoryInterface)],
     }).compileComponents()
     recordsRepository = TestBed.inject(RecordsRepositoryInterface)
-    searchFacade = TestBed.inject(SearchFacade)
     fixture = TestBed.createComponent(DashboardMenuComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -50,10 +45,4 @@ describe('DashboardMenuComponent', () => {
     // Assert that draftsCount$ behaves as expected
     expect(component.draftsCount$).toBeObservable(expected)
   })
-
-  it('should reset filters in main search', () => {
-    searchFacade.setFilters = jest.fn()
-    component.resetMainSearch()
-    expect(searchFacade.setFilters).toHaveBeenCalledWith({})
-  })
 })

apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.ts

@@ -6,7 +6,6 @@ import { TranslateModule } from '@ngx-translate/core'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
 import { map, startWith, switchMap } from 'rxjs/operators'
 import { BadgeComponent } from '@geonetwork-ui/ui/inputs'
-import { SearchFacade } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-dashboard-menu',
@@ -30,12 +29,5 @@ export class DashboardMenuComponent {
   )
   activeLink = false
 
-  constructor(
-    private recordsRepository: RecordsRepositoryInterface,
-    private searchFacade: SearchFacade
-  ) {}
-
-  resetMainSearch() {
-    this.searchFacade.setFilters({})
-  }
+  constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }

apps/metadata-editor/src/app/dashboard/dashboard-page.component.html

@@ -4,15 +4,7 @@
       <md-editor-sidebar></md-editor-sidebar>
     </aside>
     <div class="grow flex flex-col">
-      <header class="shrink-0 border-b border-gray-300">
-        <md-editor-search-header></md-editor-search-header>
-      </header>
-      <div class="relative overflow-y-auto">
-        <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
-          <gn-ui-notifications-container></gn-ui-notifications-container>
-        </div>
-        <router-outlet></router-outlet>
-      </div>
+      <router-outlet></router-outlet>
     </div>
   </div>
 </div>

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

@@ -1,7 +1,5 @@
 <div class="py-3 px-12 w-full">
-  <!-- FIXME: (itemSelected) should not be required -->
   <gn-ui-fuzzy-search
-    #fuzzySearch
     (itemSelected)="handleItemSelection($event)"
     style="--gn-ui-text-input-border-size: 0px"
   ></gn-ui-fuzzy-search>

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

@@ -2,17 +2,12 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { LetDirective } from '@ngrx/component'
-import {
-  FeatureSearchModule,
-  FuzzySearchComponent,
-  SearchService,
-} from '@geonetwork-ui/feature/search'
+import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'
-import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 import { TranslateModule } from '@ngx-translate/core'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
-import { RouterFacade } from '@geonetwork-ui/feature/router'
+import { Router } from '@angular/router'
 
 @Component({
   selector: 'md-editor-search-header',
@@ -32,20 +27,13 @@ import { RouterFacade } from '@geonetwork-ui/feature/router'
 export class SearchHeaderComponent {
   public placeholder$ = this.avatarService.getPlaceholder()
   activeBtn = false
-  @ViewChild('fuzzySearch') fuzzySearch: FuzzySearchComponent
 
   constructor(
-    public platformService: PlatformServiceInterface,
     private avatarService: AvatarServiceInterface,
-    private searchService: SearchService,
-    private routerFacade: RouterFacade
-  ) {
-    this.routerFacade.currentRoute$.subscribe(() => {
-      this.fuzzySearch?.autocomplete?.clear()
-    })
-  }
+    private router: Router
+  ) {}
 
   handleItemSelection(item: CatalogRecord) {
-    this.searchService.updateFilters({ any: item.title })
+    this.router.navigate(['edit', item.uniqueIdentifier])
   }
 }

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

@@ -1,69 +1,79 @@
-<main class="bg-white">
-  <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
-    <ng-container *ngIf="searchText$ | async as searchText; else allRecords">
-      <h1
-        class="text-[16px] text-main font-title font-bold"
-        translate
-        [translateParams]="{ searchText: searchText }"
-      >
-        dashboard.records.search
-      </h1>
-      <div class="text-[12px]">
-        <md-editor-records-count></md-editor-records-count>
-      </div>
-    </ng-container>
-    <ng-template #allRecords>
-      <h1 class="text-[16px] text-main font-title font-bold" translate>
-        dashboard.records.all
-      </h1>
-      <div class="text-[12px]">
-        <md-editor-records-count></md-editor-records-count>
-      </div>
-    </ng-template>
+<header class="shrink-0 border-b border-gray-300">
+  <md-editor-search-header></md-editor-search-header>
+</header>
+<div class="relative overflow-y-auto">
+  <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+    <gn-ui-notifications-container></gn-ui-notifications-container>
   </div>
-  <div
-    class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"
-  >
-    <div>
-      <span class="uppercase" translate>dashboard.results.listMetadata</span>
+  <main class="bg-white">
+    <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
+      <ng-container *ngIf="searchText$ | async as searchText; else allRecords">
+        <h1
+          class="text-[16px] text-main font-title font-bold"
+          translate
+          [translateParams]="{ searchText: searchText }"
+        >
+          dashboard.records.search
+        </h1>
+        <div class="text-[12px]">
+          <md-editor-records-count></md-editor-records-count>
+        </div>
+      </ng-container>
+      <ng-template #allRecords>
+        <h1 class="text-[16px] text-main font-title font-bold" translate>
+          dashboard.records.all
+        </h1>
+        <div class="text-[12px]">
+          <md-editor-records-count></md-editor-records-count>
+        </div>
+      </ng-template>
     </div>
-    <div>
-      <span class="uppercase" translate>dashboard.results.listResources</span>
-    </div>
-    <div class="grow"></div>
-    <gn-ui-button
-      cdkOverlayOrigin
-      #importRecordButton
-      (buttonClick)="duplicateExternalRecord()"
-      type="gray"
-      data-test="import-record"
+    <div
+      class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"
     >
-      <span translate>dashboard.importRecord</span>
-      <mat-icon
-        *ngIf="!isImportMenuOpen"
-        class="material-symbols-outlined text-primary"
-        >keyboard_arrow_down</mat-icon
+      <div>
+        <span class="uppercase" translate>dashboard.results.listMetadata</span>
+      </div>
+      <div>
+        <span class="uppercase" translate>dashboard.results.listResources</span>
+      </div>
+      <div class="grow"></div>
+      <gn-ui-button
+        cdkOverlayOrigin
+        #importRecordButton
+        (buttonClick)="duplicateExternalRecord()"
+        type="gray"
+        data-test="import-record"
       >
-      <mat-icon
-        *ngIf="isImportMenuOpen"
-        class="material-symbols-outlined text-primary"
-        >keyboard_arrow_up</mat-icon
+        <span translate>dashboard.importRecord</span>
+        <mat-icon
+          *ngIf="!isImportMenuOpen"
+          class="material-symbols-outlined text-primary"
+          >keyboard_arrow_down</mat-icon
+        >
+        <mat-icon
+          *ngIf="isImportMenuOpen"
+          class="material-symbols-outlined text-primary"
+          >keyboard_arrow_up</mat-icon
+        >
+      </gn-ui-button>
+      <ng-template #template>
+        <gn-ui-import-record
+          (closeImportMenu)="closeImportMenu()"
+        ></gn-ui-import-record>
+      </ng-template>
+      <gn-ui-button
+        (buttonClick)="createRecord()"
+        type="primary"
+        data-cy="create-record"
       >
-    </gn-ui-button>
-    <ng-template #template>
-      <gn-ui-import-record
-        (closeImportMenu)="closeImportMenu()"
-      ></gn-ui-import-record>
-    </ng-template>
-    <gn-ui-button
-      (buttonClick)="createRecord()"
-      type="primary"
-      data-cy="create-record"
-    >
-      <mat-icon class="material-symbols-outlined mr-2">edit_document</mat-icon>
-      <span translate>dashboard.createRecord</span>
-    </gn-ui-button>
-  </div>
+        <mat-icon class="material-symbols-outlined mr-2"
+          >edit_document</mat-icon
+        >
+        <span translate>dashboard.createRecord</span>
+      </gn-ui-button>
+    </div>
 
-  <md-editor-records-list></md-editor-records-list>
-</main>
+    <md-editor-records-list></md-editor-records-list>
+  </main>
+</div>

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

@@ -29,6 +29,8 @@ import { TemplatePortal } from '@angular/cdk/portal'
 import { ImportRecordComponent } from '@geonetwork-ui/feature/editor'
 import { RecordsListComponent } from '../records-list.component'
 import { map } from 'rxjs/operators'
+import { SearchHeaderComponent } from '../../dashboard/search-header/search-header.component'
+import { NotificationsContainerComponent } from '@geonetwork-ui/feature/notifications'
 
 @Component({
   selector: 'md-editor-all-records',
@@ -47,6 +49,8 @@ import { map } from 'rxjs/operators'
     CdkOverlayOrigin,
     CdkConnectedOverlay,
     RecordsListComponent,
+    SearchHeaderComponent,
+    NotificationsContainerComponent,
   ],
 })
 export class AllRecordsComponent {