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

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

@@ -4,7 +4,6 @@ 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 +20,7 @@ export const appRoutes: Route[] = [
     children: [
       {
         path: '',
-        redirectTo: 'all',
-        pathMatch: 'prefix',
-      },
-      {
-        path: 'all',
-        title: 'All Records',
-        component: AllRecordsComponent,
+        redirectTo: 'search',
         pathMatch: 'prefix',
       },
       {

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/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 '@geonetwork-ui/util/i18n'
+
+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')
+      })
+    })
+  })
+})

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

@@ -0,0 +1,44 @@
+import {
+  Component,
+  EventEmitter,
+  importProvidersFrom,
+  Output,
+} from '@angular/core'
+import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
+import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
+import {
+  InteractiveTableColumnComponent,
+  InteractiveTableComponent,
+} from '@geonetwork-ui/ui/layout'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import { SelectionService } from '@geonetwork-ui/api/repository'
+import { CommonModule } from '@angular/common'
+import { SearchFacade } from '@geonetwork-ui/feature/search'
+
+@Component({
+  selector: 'md-editor-records-count',
+  templateUrl: './records-count.component.html',
+  styleUrls: ['./records-count.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UiInputsModule,
+    InteractiveTableComponent,
+    InteractiveTableColumnComponent,
+    MatIconModule,
+    TranslateModule,
+  ],
+})
+export class RecordsCountComponent {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+
+  records$ = this.searchFacade.results$
+  recordCount$ = this.searchFacade.resultsHits$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private selectionService: SelectionService
+  ) {}
+}

apps/metadata-editor/src/app/records/search-records/search-records-list.component.html

@@ -1,9 +1,58 @@
-<md-editor-records-list
-  [title]="
-    (searchText$ | async)
-      ? ('dashboard.records.search'
-        | translate: { searchText: searchText$ | async })
-      : ('dashboard.records.all' | translate)
-  "
->
-</md-editor-records-list>
+<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
+    class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"
+  >
+    <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 (buttonClick)="createRecord()" type="primary">
+      <mat-icon class="material-symbols-outlined mr-2">edit_document</mat-icon>
+      <span translate>dashboard.createRecord</span>
+    </gn-ui-button>
+  </div>
+
+  <div
+    class="shadow-md shadow-gray-300 border-[1px] border-gray-200 overflow-hidden rounded bg-white grow mx-[32px] my-[16px]"
+  >
+    <gn-ui-results-table
+      class="text-[14px]"
+      (recordClick)="editRecord($event)"
+    ></gn-ui-results-table>
+
+    <div class="px-5 py-5 flex justify-center gap-8 items-baseline">
+      <div class="grow">
+        <gn-ui-pagination-buttons
+          [currentPage]="searchFacade.currentPage$ | async"
+          [totalPages]="searchFacade.totalPages$ | async"
+          (newCurrentPageEvent)="searchService.setPage($event)"
+        ></gn-ui-pagination-buttons>
+      </div>
+    </div>
+  </div>
+</main>