Merge pull request #997 from geonetwork/me-fix-misc-issues-with-dashb…

…oard-views-myrecord-state-rebased

ME: Add separate search state for myRecords

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

@@ -214,17 +214,34 @@ describe('dashboard', () => {
     })
   })
   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('mat-option').first().click()
-        cy.get('gn-ui-interactive-table')
-          .find('[data-cy="table-row"]')
-          .should('have.length', '1')
+        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('my records', () => {
@@ -236,6 +253,31 @@ describe('dashboard', () => {
           .next()
           .should('contain', 'admin admin')
       })
+      it('should display the correct amount of records', () => {
+        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
+        cy.get('gn-ui-results-table')
+          .find('[data-cy="table-row"]')
+          .should('have.length', '10')
+      })
+      it('should sort the records by title', () => {
+        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
+        cy.get('gn-ui-results-table')
+          .find('[data-cy="table-row"]')
+          .first()
+          .invoke('text')
+          .then((firstRecord) => {
+            console.log(firstRecord)
+            cy.get('gn-ui-results-table')
+              .find('.table-header-cell')
+              .eq(1)
+              .click()
+            cy.get('gn-ui-results-table')
+              .find('[data-cy="table-row"]')
+              .first()
+              .invoke('text')
+              .should('not.eq', firstRecord)
+          })
+      })
     })
   })
 })

apps/metadata-editor/src/app/app.routes.ts

@@ -3,13 +3,13 @@ import { DashboardPageComponent } from './dashboard/dashboard-page.component'
 import { SignInPageComponent } from './sign-in/sign-in-page.component'
 import { EditPageComponent } from './edit/edit-page.component'
 import { EditRecordResolver } from './edit-record.resolver'
-import { MyRecordsComponent } from './records/my-records/my-records.component'
 import { MyDraftComponent } from './records/my-draft/my-draft.component'
 import { TemplatesComponent } from './records/templates/templates.component'
 import { MyOrgUsersComponent } from './my-org-users/my-org-users.component'
 import { NewRecordResolver } from './new-record.resolver'
 import { DuplicateRecordResolver } from './duplicate-record.resolver'
 import { AllRecordsComponent } from './records/all-records/all-records.component'
+import { MyRecordsStateWrapperComponent } from './records/my-records/my-records-state-wrapper.component'
 
 export const appRoutes: Route[] = [
   { path: '', redirectTo: 'catalog/search', pathMatch: 'prefix' },
@@ -60,7 +60,7 @@ export const appRoutes: Route[] = [
       {
         path: 'my-records',
         title: 'My Records',
-        component: MyRecordsComponent,
+        component: MyRecordsStateWrapperComponent,
         pathMatch: 'prefix',
       },
       {

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

@@ -56,6 +56,7 @@
     <div class="menu-title" translate="">dashboard.labels.mySpace</div>
     <a
       class="menu-item"
+      (click)="resetMainSearch()"
       routerLink="/my-space/my-records"
       routerLinkActive="btn-active"
       #rlaMyRecords="routerLinkActive"
@@ -65,6 +66,7 @@
     </a>
     <a
       class="menu-item"
+      (click)="resetMainSearch()"
       routerLink="/my-space/my-draft"
       routerLinkActive="btn-active"
       #rlaMyDraft="routerLinkActive"

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

@@ -5,11 +5,13 @@ 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)
@@ -18,9 +20,12 @@ describe('DashboardMenuComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [DashboardMenuComponent, TranslateModule.forRoot()],
-      providers: [MockProviders(ActivatedRoute, RecordsRepositoryInterface)],
+      providers: [
+        MockProviders(ActivatedRoute, RecordsRepositoryInterface, SearchFacade),
+      ],
     }).compileComponents()
     recordsRepository = TestBed.inject(RecordsRepositoryInterface)
+    searchFacade = TestBed.inject(SearchFacade)
     fixture = TestBed.createComponent(DashboardMenuComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -45,4 +50,10 @@ 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,6 +6,7 @@ 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',
@@ -29,5 +30,12 @@ export class DashboardMenuComponent {
   )
   activeLink = false
 
-  constructor(private recordsRepository: RecordsRepositoryInterface) {}
+  constructor(
+    private recordsRepository: RecordsRepositoryInterface,
+    private searchFacade: SearchFacade
+  ) {}
+
+  resetMainSearch() {
+    this.searchFacade.setFilters({})
+  }
 }

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

@@ -1,6 +1,7 @@
 <div class="py-3 px-12 flex justify-between w-full">
   <div class="w-2/3">
     <gn-ui-fuzzy-search
+      (itemSelected)="handleItemSelection($event)"
       style="--gn-ui-text-input-border-size: 0px"
     ></gn-ui-fuzzy-search>
   </div>

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

@@ -7,9 +7,9 @@ import { barbieUserFixture } from '@geonetwork-ui/common/fixtures'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { TranslateModule } from '@ngx-translate/core'
-import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 import { AvatarServiceInterface } from '@geonetwork-ui/api/repository'
+import { SearchService } from '@geonetwork-ui/feature/search'
 
 class AvatarServiceInterfaceMock {
   getPlaceholder = () => of('http://placeholder.com')
@@ -21,6 +21,10 @@ class PlatformServiceMock {
   getMe = jest.fn(() => me$)
 }
 
+class SearchServiceMock {
+  updateFilters = jest.fn()
+}
+
 describe('SearchHeaderComponent', () => {
   let component: SearchHeaderComponent
   let fixture: ComponentFixture<SearchHeaderComponent>
@@ -42,6 +46,10 @@ describe('SearchHeaderComponent', () => {
           provide: PlatformServiceInterface,
           useClass: PlatformServiceMock,
         },
+        {
+          provide: SearchService,
+          useClass: SearchServiceMock,
+        },
       ],
     })
       .overrideComponent(SearchHeaderComponent, {

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

@@ -2,11 +2,15 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { LetDirective } from '@ngrx/component'
-import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
+import {
+  FeatureSearchModule,
+  SearchService,
+} 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'
 
 @Component({
   selector: 'md-editor-search-header',
@@ -29,6 +33,11 @@ export class SearchHeaderComponent {
 
   constructor(
     public platformService: PlatformServiceInterface,
-    private avatarService: AvatarServiceInterface
+    private avatarService: AvatarServiceInterface,
+    private searchService: SearchService
   ) {}
+
+  handleItemSelection(item: CatalogRecord) {
+    this.searchService.updateFilters({ any: item.title })
+  }
 }

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

@@ -16,7 +16,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RecordsCountComponent } from '../records-count/records-count.component'
-import { Observable, of } from 'rxjs'
+import { Observable } from 'rxjs'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 import { MatIconModule } from '@angular/material/icon'
@@ -68,7 +68,10 @@ export class AllRecordsComponent implements OnInit {
   @ViewChild('template') template!: TemplateRef<any>
   private overlayRef!: OverlayRef
 
-  searchText$: Observable<string | null> = of(null)
+  searchText$: Observable<string | null> =
+    this.searchFacade.searchFilters$.pipe(
+      map((filters) => ('any' in filters ? (filters['any'] as string) : null))
+    )
 
   isImportMenuOpen = false
 
@@ -83,34 +86,8 @@ export class AllRecordsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.searchText$ = this.searchFacade.searchFilters$.pipe(
-      map((filters) => ('any' in filters ? (filters['any'] as string) : null))
-    )
-
-    this.searchFacade.resetSearch()
-
-    const searchTerms = this.activedRoute.snapshot.queryParams['q'] ?? ''
-
-    if (searchTerms) {
-      this.searchFacade.setFilters({ any: searchTerms })
-    }
-
-    let sort = (this.activedRoute.snapshot.queryParams['_sort'] as string) ?? ''
-
-    if (sort) {
-      let ascDesc = ''
-
-      if (sort?.charAt(0) === '-') {
-        ascDesc = 'desc'
-        sort = sort.slice(1, sort.length)
-      } else {
-        ascDesc = 'asc'
-      }
-      this.searchFacade.setSortBy([ascDesc as 'asc' | 'desc', sort])
-    }
-
-    this.searchFacade.setPageSize(15)
     this.searchFacade.setConfigRequestFields(allSearchFields)
+    this.searchFacade.setPageSize(15)
   }
 
   createRecord() {

apps/metadata-editor/src/app/records/my-records/my-records-state-wrapper.component.html

@@ -0,0 +1,3 @@
+<div gnUiSearchStateContainer="myRecords">
+  <md-editor-my-records></md-editor-my-records>
+</div>

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { MyRecordsComponent } from './my-records.component'
+import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'md-editor-my-records-state-wrapper',
+  templateUrl: './my-records-state-wrapper.component.html',
+  styles: [],
+  standalone: true,
+  imports: [CommonModule, FeatureSearchModule, MyRecordsComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyRecordsStateWrapperComponent {}

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

@@ -1,25 +1,13 @@
 <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>
+    <ng-container *ngIf="searchFacade.results$ | async">
       <h1 class="text-[16px] text-main font-title font-bold" translate>
         dashboard.records.myRecords
       </h1>
       <div class="text-[12px]">
         <md-editor-records-count></md-editor-records-count>
       </div>
-    </ng-template>
+    </ng-container>
   </div>
   <div
     class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"

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

@@ -13,6 +13,7 @@ import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.
 import { MockBuilder, MockInstance, MockProviders } from 'ng-mocks'
 import { ActivatedRoute, Router } from '@angular/router'
 import { TranslateModule } from '@ngx-translate/core'
+import { allSearchFields } from '../all-records/all-records.component'
 
 describe('MyRecordsComponent', () => {
   MockInstance.scope()
@@ -106,11 +107,16 @@ describe('MyRecordsComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('filters', () => {
-    it('clears filters on init', () => {
-      expect(searchFacade.resetSearch).toHaveBeenCalled()
+  describe('filters on init', () => {
+    it('sets search fields', () => {
+      expect(searchFacade.setConfigRequestFields).toHaveBeenCalledWith(
+        allSearchFields
+      )
+    })
+    it('sets page size', () => {
+      expect(searchFacade.setPageSize).toHaveBeenCalledWith(15)
     })
-    it('Update filters on init', () => {
+    it('updates filters with owner', () => {
       expect(searchFacade.updateFilters).toHaveBeenCalledWith({
         owner: user.id,
       })