feat(me): sorting for catalog

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

@@ -1,7 +1,7 @@
 describe('dashboard', () => {
-  let originalList
-  let newList
   describe('pagination', () => {
+    let originalList
+    let newList
     it('should display different results on click on arrow', () => {
       cy.visit('/')
       cy.get('gn-ui-record-table')
@@ -36,4 +36,33 @@ describe('dashboard', () => {
         })
     })
   })
+
+  // NEEDS TO WAIT UNTIL STYLE IS DONE
+  describe('sorting', () => {
+    let originalList
+    let newList
+    it('should order the result list on click', () => {
+      cy.visit('/')
+      cy.get('gn-ui-record-table')
+        .find('.record-table-col')
+        .first()
+        .as('pageOne')
+
+      cy.get('@pageOne')
+        .invoke('text')
+        .then((list) => {
+          originalList = list.trim()
+          cy.get('.record-table-header').first().click()
+          cy.get('gn-ui-sort').find('gn-ui-button').first().click()
+          cy.get('gn-ui-record-table')
+            .find('.record-table-col')
+            .first()
+            .invoke('text')
+            .then((list) => {
+              newList = list.trim()
+              expect(newList).not.to.be(originalList)
+            })
+        })
+    })
+  })
 })

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

@@ -10,6 +10,8 @@ <h1 class="text-[56px] font-title grow">{{ title }}</h1>
       [records]="results"
       [totalHits]="searchFacade.resultsHits$ | async"
       (recordSelect)="editRecord($event)"
+      (sortByChange)="setSortBy($event)"
+      [sortBy]="searchFacade.sortBy$ | async"
     ></gn-ui-record-table>
     <div
       class="px-5 py-5 flex justify-center gap-8 items-baseline"

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

@@ -60,6 +60,7 @@ describe('RecordsListComponent', () => {
   let fixture: ComponentFixture<RecordsListComponent>
   let router: Router
   let searchService: SearchService
+  let searchFacade: SearchFacade
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -89,6 +90,7 @@ describe('RecordsListComponent', () => {
     })
     router = TestBed.inject(Router)
     searchService = TestBed.inject(SearchService)
+    searchFacade = TestBed.inject(SearchFacade)
     fixture = TestBed.createComponent(RecordsListComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -116,6 +118,12 @@ describe('RecordsListComponent', () => {
       expect(pagination.currentPage).toEqual(currentPage)
       expect(pagination.totalPages).toEqual(totalPages)
     })
+    it('orders the completion column', () => {
+      expect(searchFacade.setSortBy).toHaveBeenCalledWith([
+        'desc',
+        'changeDate',
+      ])
+    })
     describe('when click on a record', () => {
       beforeEach(() => {
         table.recordSelect.emit({ uniqueIdentifier: 123 })

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

@@ -6,6 +6,7 @@ import { CatalogRecord } from '@geonetwork-ui/common/domain/record'
 import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
+import { SortByField } from '@geonetwork-ui/common/domain/search'
 
 const includes = [
   'uuid',
@@ -49,4 +50,8 @@ export class RecordsListComponent {
   editRecord(record: CatalogRecord) {
     this.router.navigate(['/edit', record.uniqueIdentifier])
   }
+
+  setSortBy(newSortBy: SortByField) {
+    this.searchFacade.setSortBy(newSortBy)
+  }
 }

apps/metadata-editor/src/styles.css

@@ -21,3 +21,7 @@ body {
 .menu-title {
   @apply text-xl px-9 py-3;
 }
+
+.mat-mdc-button-base {
+  line-height: normal;
+}

libs/ui/search/src/lib/record-table/record-table.component.html

@@ -10,24 +10,97 @@
     >
       results.records.hits.displayedOn
     </div>
+
     <div
       class="grid grid-cols-[repeat(5,minmax(0,max-content))] gap-x-4 gap-y-1"
     >
       <div class="contents text-sm">
-        <div translate="" class="record-table-header text-gray-400">
-          record.metadata.title
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
+          >
+            <span translate>record.metadata.title</span>
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
         </div>
-        <div translate="" class="record-table-header text-gray-400">
+        <div translate="" class="record-table-header text-gray-400 flex gap-1">
           record.metadata.formats
         </div>
-        <div translate="" class="record-table-header text-gray-400">
-          record.metadata.author
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('recordOwner')"
+          >
+            <span translate>record.metadata.author</span>
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('recordOwner', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('recordOwner', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
         </div>
-        <div translate="" class="record-table-header text-gray-400">
-          record.metadata.completion
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('changeDate')"
+          >
+            <span translate>record.metadata.completion</span>
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('changeDate', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('changeDate', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
         </div>
-        <div translate="" class="record-table-header text-gray-400">
-          record.metadata.createdOn
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <gn-ui-button
+            type="light"
+            extraClass="px-3 py-2 space-x-1"
+            (buttonClick)="setSortBy('createDate')"
+          >
+            <span translate>record.metadata.createdOn</span>
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('createDate', 'desc')"
+            >
+              expand_more</mat-icon
+            >
+            <mat-icon
+              class="text-base leading-tight"
+              *ngIf="isSortedBy('createDate', 'asc')"
+            >
+              expand_less</mat-icon
+            >
+          </gn-ui-button>
         </div>
       </div>
       <div

libs/ui/search/src/lib/record-table/record-table.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
 
 import { RecordTableComponent } from './record-table.component'
+import { SortByField } from '@geonetwork-ui/common/domain/search'
 
 describe('RecordTableComponent', () => {
   let component: RecordTableComponent
@@ -39,4 +40,41 @@ describe('RecordTableComponent', () => {
       ).toEqual('#1e5180') // geojson
     })
   })
+
+  describe('sorting', () => {
+    describe('#setSortBy', () => {
+      let newSortBy: SortByField
+      beforeEach(() => {
+        newSortBy = null
+        component.sortByChange.subscribe((v) => (newSortBy = v))
+      })
+      it('initially sorts by ascending order', () => {
+        component.setSortBy('title')
+        expect(newSortBy).toEqual(['asc', 'title'])
+      })
+      it('changes the order if already sorted', () => {
+        component.sortBy = ['asc', 'title']
+        component.setSortBy('title')
+        expect(newSortBy).toEqual(['desc', 'title'])
+      })
+    })
+    describe('#isSortedBy', () => {
+      it('returns false if not sorted by this column', () => {
+        component.sortBy = ['desc', 'owner']
+        expect(component.isSortedBy('title', 'desc')).toBe(false)
+      })
+      it('returns true if the current sortBy is for this column', () => {
+        component.sortBy = ['desc', 'title']
+        expect(component.isSortedBy('title', 'desc')).toBe(true)
+      })
+      it('returns true if the current sortBy is for this column (multiple sorts)', () => {
+        component.sortBy = [
+          ['asc', 'score'],
+          ['desc', 'title'],
+        ]
+        expect(component.isSortedBy('title', 'desc')).toBe(true)
+        expect(component.isSortedBy('title', 'asc')).toBe(false)
+      })
+    })
+  })
 })

libs/ui/search/src/lib/record-table/record-table.component.ts

@@ -6,6 +6,7 @@ import {
   getFileFormat,
   getFormatPriority,
 } from '@geonetwork-ui/util/shared'
+import { SortByField } from '@geonetwork-ui/common/domain/search'
 
 @Component({
   selector: 'gn-ui-record-table',
@@ -15,7 +16,9 @@ import {
 export class RecordTableComponent {
   @Input() records: CatalogRecord[] = []
   @Input() totalHits?: number
+  @Input() sortBy?: SortByField
   @Output() recordSelect = new EventEmitter<CatalogRecord>()
+  @Output() sortByChange = new EventEmitter<SortByField>()
 
   dateToString(date: Date): string {
     return date?.toLocaleDateString(undefined, {
@@ -54,4 +57,36 @@ export class RecordTableComponent {
   getBadgeColor(format: FileFormat): string {
     return getBadgeColor(format)
   }
+
+  private getOrderForColumn(col: string): 'asc' | 'desc' | null {
+    if (!this.sortBy) {
+      return null
+    }
+    let order: 'asc' | 'desc' | null = null
+    const sortedArray = Array.isArray(this.sortBy[0])
+      ? this.sortBy
+      : [this.sortBy]
+    sortedArray.forEach((sortedCol) => {
+      if (sortedCol[1] === col) {
+        order = sortedCol[0]
+      }
+    })
+    return order
+  }
+
+  setSortBy(col: string): void {
+    const sortOrder = this.getOrderForColumn(col)
+    let newOrder
+    if (sortOrder) {
+      newOrder = sortOrder === 'asc' ? 'desc' : 'asc'
+    } else {
+      newOrder = 'asc'
+    }
+    this.sortByChange.emit([newOrder, col])
+  }
+
+  isSortedBy(col: string, order: 'asc' | 'desc'): boolean {
+    const sortOrder = this.getOrderForColumn(col)
+    return sortOrder === order
+  }
 }

libs/ui/search/src/lib/ui-search.module.ts

@@ -26,6 +26,7 @@ import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { RecordTableComponent } from './record-table/record-table.component'
 import { CommonModule } from '@angular/common'
+import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 
 @NgModule({
   declarations: [
@@ -52,6 +53,7 @@ import { CommonModule } from '@angular/common'
     TagInputModule,
     UtilSharedModule,
     UiWidgetsModule,
+    UiInputsModule,
     UiElementsModule,
     MatIconModule,
     RouterLink,

translations/en.json

@@ -175,7 +175,7 @@
   "record.metadata.catalog": "Catalog",
   "record.metadata.completion": "Completion",
   "record.metadata.contact": "Contact",
-  "record.metadata.createdOn": "created on",
+  "record.metadata.createdOn": "Created on",
   "record.metadata.details": "Details",
   "record.metadata.download": "Downloads",
   "record.metadata.formats": "Formats",
@@ -188,7 +188,7 @@
   "record.metadata.publications": "publications",
   "record.metadata.related": "Related records",
   "record.metadata.sheet": "Original metadata sheet",
-  "record.metadata.title": "title",
+  "record.metadata.title": "Title",
   "record.metadata.updateFrequency": "Update Frequency",
   "record.metadata.updateStatus": "Update Status",
   "record.metadata.updatedOn": "Updated On",

translations/fr.json

@@ -171,14 +171,14 @@
   "record.externalViewer.open": "Ouvrir dans le visualiseur externe",
   "record.metadata.about": "À propos",
   "record.metadata.api": "API",
-  "record.metadata.author": "",
+  "record.metadata.author": "Auteur",
   "record.metadata.catalog": "Catalogue",
-  "record.metadata.completion": "",
+  "record.metadata.completion": "Mis à jour",
   "record.metadata.contact": "Contact",
-  "record.metadata.createdOn": "",
+  "record.metadata.createdOn": "Créé le",
   "record.metadata.details": "Détails",
   "record.metadata.download": "Téléchargements",
-  "record.metadata.formats": "",
+  "record.metadata.formats": "Formats",
   "record.metadata.isOpenData": "Donnée Ouverte",
   "record.metadata.keywords": "Mots clés",
   "record.metadata.links": "Liens",
@@ -188,7 +188,7 @@
   "record.metadata.publications": "données",
   "record.metadata.related": "Voir aussi",
   "record.metadata.sheet": "Fiche de métadonnées d'origine",
-  "record.metadata.title": "titre",
+  "record.metadata.title": "Titre",
   "record.metadata.updateFrequency": "Fréquence de mise à jour",
   "record.metadata.updateStatus": "Statut de mise à jour",
   "record.metadata.updatedOn": "Dernière mise à jour",