Merge pull request #805 from geonetwork/ME/rework-layout

Metadata Editor: rework search results layout, add "create record" button

apps/datahub/src/app/home/news-page/news-page.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NewsPageComponent } from './news-page.component'
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
-import { TranslateTestingModule } from '@geonetwork-ui/util/i18n'
+import { TranslateTestingModule } from 'ngx-translate-testing'
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
 
 jest.mock('@geonetwork-ui/util/app-config', () => ({

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

@@ -2,7 +2,7 @@ describe('dashboard', () => {
   let pageOne
   describe('pagination', () => {
     it('should display different results on click on arrow', () => {
-      cy.visit('/records/all')
+      cy.visit('/records/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .first()
@@ -39,7 +39,7 @@ describe('dashboard', () => {
     let originalFirstItem
     let newFirstItem
     it('should order the result list on click', () => {
-      cy.visit('/records/all')
+      cy.visit('/records/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .eq(1)
@@ -68,35 +68,35 @@ describe('dashboard', () => {
 
   describe('checkboxes', () => {
     it('should show the correct amount of selected records when they are selected', () => {
-      cy.visit('/records/all')
+      cy.visit('/records/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')
         .eq(2)
         .click()
-      cy.get('.selected-records').contains('1 selected')
+      cy.get('[data-test=selected-count]').contains('1 selected')
     })
 
     it('should show nothing when none are selected', () => {
-      cy.visit('/records/all')
+      cy.visit('/records/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')
         .each(($checkbox) => cy.wrap($checkbox).click())
       cy.get('[data-cy=records-information]').should(
         'not.have.descendants',
-        '.selected-records'
+        '[data-test=selected-count]'
       )
     })
 
     it('should select all records when the "select all" checkbox is checked', () => {
-      cy.visit('/records/all')
+      cy.visit('/records/search')
       cy.get('gn-ui-results-table')
         .find('.table-row-cell')
         .get('gn-ui-checkbox')
         .first()
         .click()
-      cy.get('.selected-records').contains('14 selected')
+      cy.get('[data-test=selected-count]').contains('14 selected')
     })
   })
 })

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

@@ -68,7 +68,7 @@ export class AppModule {
     ThemeService.applyCssVariables(
       getThemeConfig().PRIMARY_COLOR,
       getThemeConfig().SECONDARY_COLOR,
-      getThemeConfig().MAIN_COLOR || '#555',
+      getThemeConfig().MAIN_COLOR,
       getThemeConfig().BACKGROUND_COLOR,
       getThemeConfig().MAIN_FONT || "'Rubik', sans-serif",
       getThemeConfig().TITLE_FONT || "'Readex Pro', sans-serif",

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

@@ -1,10 +1,8 @@
 import { Route } from '@angular/router'
 import { DashboardPageComponent } from './dashboard/dashboard-page.component'
 import { SignInPageComponent } from './sign-in/sign-in-page.component'
-import { CreatePageComponent } from './create/create-page.component'
 import { EditPageComponent } from './edit/edit-page.component'
 import { EditRecordResolver } from './edit-record.resolver'
-import { AllRecordsComponent } from './records/all-records/all-records-list.component'
 import { MyOrgRecordsComponent } from './records/my-org-records/my-org-records.component'
 import { MyRecordsComponent } from './records/my-records/my-records.component'
 import { MyDraftComponent } from './records/my-draft/my-draft.component'
@@ -21,13 +19,7 @@ export const appRoutes: Route[] = [
     children: [
       {
         path: '',
-        redirectTo: 'all',
-        pathMatch: 'prefix',
-      },
-      {
-        path: 'all',
-        title: 'All Records',
-        component: AllRecordsComponent,
+        redirectTo: 'search',
         pathMatch: 'prefix',
       },
       {
@@ -76,7 +68,7 @@ export const appRoutes: Route[] = [
     ],
   },
   { path: 'sign-in', component: SignInPageComponent },
-  { path: 'create', component: CreatePageComponent },
+  { path: 'create', component: EditPageComponent },
   {
     path: 'edit/:uuid',
     component: EditPageComponent,

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

@@ -11,7 +11,7 @@
 
   <a
     class="menu-item"
-    routerLink="/records/all"
+    routerLink="/records/search"
     routerLinkActive="btn-active"
     #rlaAll="routerLinkActive"
   >

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

@@ -6,7 +6,6 @@ import { TranslateModule } from '@ngx-translate/core'
 import { RecordsListComponent } from '../records-list.component'
 
 @Component({
-  // eslint-disable-next-line
   selector: 'md-editor-records-list',
   template: '',
   standalone: true,

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

@@ -6,7 +6,6 @@ import { TranslateModule } from '@ngx-translate/core'
 import { RecordsListComponent } from '../records-list.component'
 
 @Component({
-  // eslint-disable-next-line
   selector: 'md-editor-records-list',
   template: '',
   standalone: true,

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

@@ -11,7 +11,6 @@ import { EditorRouterService } from '../../router.service'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 
 @Component({
-  // eslint-disable-next-line
   selector: 'md-editor-records-list',
   template: '',
   standalone: true,

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

@@ -0,0 +1,22 @@
+<div data-cy="records-information" class="flex flex-row">
+  <div
+    class="text-gray-800"
+    data-test="records-count"
+    translate
+    [translateParams]="{
+      displayed: (records$ | async).length,
+      hits: (recordCount$ | async)
+    }"
+  >
+    results.records.hits.displayedOn
+  </div>
+  <div
+    *ngIf="(selectedRecords$ | async).length as selectedRecordCount"
+    class="ml-2 text-gray-600"
+    data-test="selected-count"
+    translate
+    [translateParams]="{ amount: selectedRecordCount }"
+  >
+    results.records.hits.selected
+  </div>
+</div>

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

@@ -0,0 +1,92 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { RecordsCountComponent } from './records-count.component'
+import { By } from '@angular/platform-browser'
+import { BehaviorSubject } from 'rxjs'
+import { SearchFacade } from '@geonetwork-ui/feature/search'
+import { SelectionService } from '@geonetwork-ui/api/repository'
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+
+class SearchFacadeMock {
+  results$ = new BehaviorSubject(DATASET_RECORDS)
+  resultsHits$ = new BehaviorSubject(1000)
+}
+class SelectionServiceMock {
+  selectedRecordsIdentifiers$ = new BehaviorSubject([])
+}
+
+describe('RecordsCountComponent', () => {
+  let component: RecordsCountComponent
+  let selectionService: SelectionServiceMock
+  let fixture: ComponentFixture<RecordsCountComponent>
+
+  beforeEach(() => {
+    const testingModule = TranslateTestingModule.withTranslations({
+      en: {
+        'results.records.hits.displayedOn':
+          '{displayed, plural, =0{No record.} one{1 record} other{{displayed} records}} {hits, plural, other{displayed on {hits} total.}}',
+        'results.records.hits.selected': '{ amount } selected',
+      },
+    })
+      .withDefaultLanguage('en')
+      .withCompiler(new TranslateMessageFormatCompiler())
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: SearchFacade,
+          useClass: SearchFacadeMock,
+        },
+        {
+          provide: SelectionService,
+          useClass: SelectionServiceMock,
+        },
+      ],
+    }).overrideComponent(RecordsCountComponent, {
+      add: {
+        providers: [...testingModule.providers],
+      },
+    })
+
+    fixture = TestBed.createComponent(RecordsCountComponent)
+    selectionService = TestBed.inject(SelectionService) as any
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  describe('records count', () => {
+    it('shows both visible and total counts', () => {
+      const el = fixture.debugElement.query(
+        By.css('[data-test=records-count]')
+      ).nativeElement
+      expect(el.textContent).toContain('2 records displayed on 1000 total.')
+    })
+  })
+
+  describe('selected count', () => {
+    describe('if none selected', () => {
+      it('does not show anything', () => {
+        const el = fixture.debugElement.query(
+          By.css('[data-test=selected-count]')
+        )
+        expect(el).toBeFalsy()
+      })
+    })
+    describe('if some selected', () => {
+      beforeEach(() => {
+        selectionService.selectedRecordsIdentifiers$.next(['1', '2'])
+        fixture.detectChanges()
+      })
+      it('shows the count', () => {
+        const el = fixture.debugElement.query(
+          By.css('[data-test=selected-count]')
+        ).nativeElement
+        expect(el.textContent).toContain('2 selected')
+      })
+    })
+  })
+})