feat(front) add column sorting to search-results-table

geonetwork-frontend/.prettierrc.json

@@ -8,5 +8,5 @@
   "trailingComma": "es5",
   "bracketSameLine": true,
   "printWidth": 80,
-  "endOfLine": "crlf"
+  "endOfLine": "lf"
 }

geonetwork-frontend/projects/gapp/cypress/downloads/downloads.html

@@ -1 +1 @@
-Cr24
+Cr24

geonetwork-frontend/projects/glib/src/lib/search/search-results-table/search-results-table.component.html

@@ -16,6 +16,10 @@
       [rowsPerPageOptions]="[10, 25, 50]"
       [selectionMode]="selectionMode()"
       [(selection)]="selectedRecords"
+      [customSort]="true"
+      (onSort)="sort($event)"
+      [sortField]="currentSortField"
+      [sortOrder]="currentSortOrder"
       metaKeySelection="true"
       exportFilename="search-results"
       [tableStyle]="{ 'min-width': '60rem' }"
@@ -56,13 +60,16 @@
           }
         </div>
       </ng-template>
-
       <ng-template pTemplate="header">
         <tr>
           @for (col of selectedColumns(); track $index) {
-            <th>
-              {{ col.header }}
-            </th>
+            @if (searchService.getSortableField(col.field) != undefined) {
+              <th pSortableColumn="{{ col.field }}">
+                {{ col.header }} <p-sortIcon field="{{ col.field }}" />
+              </th>
+            } @else {
+              <th>{{ col.header }}</th>
+            }
           }
         </tr>
       </ng-template>

geonetwork-frontend/projects/glib/src/lib/search/search-results-table/search-results-table.component.ts

@@ -55,6 +55,8 @@ export class SearchResultsTableComponent extends SearchBaseComponent {
   columns: Column[];
   selectedColumns = signal<Column[]>([]);
   labels = input<string[]>();
+  currentSortField: string;
+  currentSortOrder: number;
   selectionMode = input<'single' | 'multiple' | undefined>();
   scrollHeight = input('flex');
   landingPage = input<string>('');
@@ -137,5 +139,21 @@ export class SearchResultsTableComponent extends SearchBaseComponent {
     }
   }
 
+  sort(sortEvent: any) {
+    //Updated p-table sorting icons.
+    this.currentSortField = sortEvent.field;
+    this.currentSortOrder = sortEvent.order;
+    //Determine sorting order: 1 for ASCENDING , -1 for DESCENDING
+    const order = sortEvent.order > 0 ? 'asc' : 'desc';
+    //Build sort field name used in the query
+    const sortField = this.searchService.getSortableField(sortEvent.field);
+    //if undefined, this field is not suitable for sorting (should not occur if HTML template is correct)
+    if (sortField != undefined) {
+      let sort: any = {};
+      sort[sortField] = order;
+      this.search.setSort([sort]);
+    }
+  }
+
   protected readonly ResourceTypeLayout = ResourceTypeLayout;
 }

geonetwork-frontend/projects/glib/src/lib/search/search.service.ts

@@ -125,4 +125,21 @@ export class SearchService {
 
     return query;
   }
+
+  /**
+   * Check if field is sortable or not, if sortable: return the field name to used, otherwise return undefined;
+   */
+  getSortableField(field: string) {
+    const isNullOrIsExpression =
+      field == null || field.includes('[') || field.includes('(');
+    if (isNullOrIsExpression) {
+      return undefined;
+    } else {
+      const isMultilingual = field.includes('Object.');
+      if (isMultilingual) {
+        return field + '.sort';
+      }
+    }
+    return field;
+  }
 }

geonetwork-frontend/projects/gwebcomponents/src/app/components/g-webcomponents-doc/g-webcomponents-doc.component.ts

@@ -113,7 +113,7 @@ export class GWebcomponentsDocComponent implements OnInit {
       path: 'custodianOrgForResourceObject[*].default',
       order: 8,
     },
-    { label: 'Crédit', path: 'resourceCréditObject.default', order: 9 },
+    { label: 'Crédit', path: 'resourceCreditObject.default', order: 9 },
   ];
 
   listOfFieldsAsText = signal(

geonetwork-frontend/projects/gwebcomponents/src/app/components/gc-search-results-table/gc-search-results-table.component.ts

@@ -1,9 +1,4 @@
-import {
-  Component,
-  Input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
+import { Component, Input, signal, ViewEncapsulation } from '@angular/core';
 import { DefaultConfig } from 'gapi';
 import { API_CONFIGURATION, SearchAggLayout, SearchService } from 'glib';
 import { GcBaseSearchComponent } from '../gc-base-search-component';