Merge pull request #1049 from geonetwork/improve-results-table

[Editor]: Enhance Results Table
geonetwork · Nov 27, 2024 · f396dd7 · f396dd7
2 parents 3126400 + a805719
commit f396dd7
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 30 deletions.
diff --git a/.../src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts b/.../src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts
@@ -22,6 +22,7 @@ export class InteractiveTableColumnComponent {
   @ContentChild('cell') cell: TemplateRef<unknown>
 
   @Input() grow = false
+  @Input() width: string
   @Input() sortable = false
   @Input() activeSort: 'asc' | 'desc' | null = null
   @Output() sortChange = new EventEmitter<'asc' | 'desc'>()

diff --git a/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts b/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts
@@ -36,7 +36,11 @@ export class InteractiveTableComponent {
     return {
       'grid-template-columns': this.columns
         .map((column) =>
-          column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`
+          column.width
+            ? column.width
+            : column.grow
+            ? `minmax(0px,1fr)`
+            : `minmax(0px,max-content)`
         )
         .join(' '),
     }

diff --git a/libs/ui/search/src/lib/results-table/results-table.component.html b/libs/ui/search/src/lib/results-table/results-table.component.html
@@ -3,7 +3,7 @@
   (itemClick)="handleRecordClick($event)"
 >
   <!-- SELECTED COLUMN -->
-  <gn-ui-interactive-table-column>
+  <gn-ui-interactive-table-column [width]="'3rem'">
     <ng-template #header>
       <gn-ui-checkbox
         [checked]="isAllSelected()"
@@ -52,7 +52,7 @@
   </gn-ui-interactive-table-column>
 
   <!-- FORMATS COLUMN -->
-  <gn-ui-interactive-table-column>
+  <gn-ui-interactive-table-column [width]="'9rem'">
     <ng-template #header>
       <span translate>record.metadata.formats</span>
     </ng-template>
@@ -63,14 +63,14 @@
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
@@ -86,6 +86,7 @@
 
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
+    [width]="'9rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"
@@ -94,15 +95,15 @@
       <span translate>record.metadata.author</span>
     </ng-template>
     <ng-template #cell let-item>
-      <ng-icon name="iconoirUser"></ng-icon>
+      <ng-icon name="iconoirUser" size="16px"></ng-icon>
       <span data-cy="ownerInfo" class="text-xs">{{
         formatUserInfo(item.extras?.ownerInfo)
       }}</span>
     </ng-template>
   </gn-ui-interactive-table-column>
 
   <!-- STATUS COLUMN -->
-  <gn-ui-interactive-table-column>
+  <gn-ui-interactive-table-column [width]="'6rem'">
     <ng-template #header>
       <span translate>record.metadata.status</span>
     </ng-template>
@@ -120,6 +121,7 @@
 
   <!-- UPDATE DATE COLUMN -->
   <gn-ui-interactive-table-column
+    [width]="'8rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('changeDate')"
     (sortChange)="setSortBy('changeDate', $event)"
@@ -128,7 +130,7 @@
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex justify-center w-full text-xs">
+      <div class="flex text-left w-full text-xs">
         {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
       </div>
     </ng-template>

diff --git a/libs/ui/search/src/lib/results-table/results-table.component.spec.ts b/libs/ui/search/src/lib/results-table/results-table.component.spec.ts
@@ -40,7 +40,7 @@ describe('ResultsTableComponent', () => {
             datasetRecordsFixture()[0] as CatalogRecord
           )[0]
         )
-      ).toEqual('#1e5180') // geojson
+      ).toEqual('#b3cde8') // geojson
     })
   })
 

diff --git a/libs/util/shared/src/lib/links/link-utils.spec.ts b/libs/util/shared/src/lib/links/link-utils.spec.ts
@@ -202,11 +202,11 @@ describe('link utils', () => {
   })
 
   describe('#getBadgeColor for format', () => {
-    it('returns #1e5180', () => {
-      expect(getBadgeColor('json')).toEqual('#1e5180')
+    it('returns #b3cde8', () => {
+      expect(getBadgeColor('json')).toEqual('#b3cde8')
     })
-    it('returns #559d7f', () => {
-      expect(getBadgeColor('csv')).toEqual('#559d7f')
+    it('returns #a6d6c0', () => {
+      expect(getBadgeColor('csv')).toEqual('#a6d6c0')
     })
   })
   describe('#sortPriority from formats object', () => {

diff --git a/libs/util/shared/src/lib/links/link-utils.ts b/libs/util/shared/src/lib/links/link-utils.ts
@@ -7,7 +7,7 @@ export const FORMATS = {
   csv: {
     extensions: ['csv'],
     priority: 1,
-    color: '#559d7f',
+    color: '#a6d6c0',
     mimeTypes: ['text/csv', 'application/csv'],
   },
   excel: {
@@ -19,7 +19,7 @@ export const FORMATS = {
       'openxmlformats-officedocument',
     ],
     priority: 2,
-    color: '#0f4395',
+    color: '#acc5e4',
     mimeTypes: [
       'application/vnd.ms-excel',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@@ -28,31 +28,31 @@ export const FORMATS = {
   geojson: {
     extensions: ['geojson'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/geo+json', 'application/vnd.geo+json'],
   },
   json: {
     extensions: ['json'],
     priority: 3,
-    color: '#1e5180',
+    color: '#b3cde8',
     mimeTypes: ['application/json'],
   },
   shp: {
     extensions: ['shp', 'shape', 'zipped-shapefile'],
     priority: 4,
-    color: '#328556',
+    color: '#b2d8ba',
     mimeTypes: ['x-gis/x-shapefile'],
   },
   gml: {
     extensions: ['gml'],
     priority: 5,
-    color: '#c92bce',
+    color: '#e3b3e5',
     mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
   },
   kml: {
     extensions: ['kml', 'kmz'],
     priority: 6,
-    color: '#348009',
+    color: '#c1e6a0',
     mimeTypes: [
       'application/vnd.google-earth.kml+xml',
       'application/vnd.google-earth.kmz',
@@ -61,55 +61,55 @@ export const FORMATS = {
   gpkg: {
     extensions: ['gpkg', 'geopackage'],
     priority: 7,
-    color: '#ea79ba',
+    color: '#f7cce6',
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
     extensions: ['zip', 'tar.gz'],
     priority: 8,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
     priority: 9,
-    color: '#db544a',
+    color: '#f5b2a3',
     mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
     priority: 9,
-    color: '#673ab7',
+    color: '#d1c1e9',
     mimeTypes: ['image/jpg'],
   },
   svg: {
     extensions: ['svg'],
     priority: 10,
-    color: '#d98294',
+    color: '#f3c1c9',
     mimeTypes: ['image/svg+xml'],
   },
   dxf: {
     extensions: ['dxf'],
     priority: 11,
-    color: '#de630b',
+    color: '#f6ceac',
     mimeTypes: ['application/x-dxf', 'image/x-dxf'],
   },
   html: {
     extensions: ['html', 'htm'],
     priority: 12,
-    color: '#f2bb3a',
+    color: '#FFF2CC',
     mimeTypes: ['text/html'],
   },
   fgb: {
     extensions: ['fgb', 'flatgeobuf'],
     priority: 13,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: ['application/flatgeobuf'],
   },
   jsonfg: {
     extensions: ['jsonfg', 'jsonfgc'],
     priority: 14,
-    color: '#f2bb3a',
+    color: '#ffe7a3',
     mimeTypes: [
       'application/vnd.ogc.fg+json',
       'application/vnd.ogc.fg+json;compatibility=geojson',

diff --git a/translations/fr.json b/translations/fr.json
@@ -461,7 +461,7 @@
   "record.metadata.temporalExtent.fromDateToDate": "Du { start } au { end }",
   "record.metadata.temporalExtent.sinceDate": "Depuis le { start }",
   "record.metadata.temporalExtent.untilDate": "Jusqu'au { end }",
-  "record.metadata.title": "Titre",
+  "record.metadata.title": "Intitulé",
   "record.metadata.topics": "Catégories",
   "record.metadata.type": "Donnée géographique",
   "record.metadata.uniqueId": "Identificateur de ressource unique",
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ describe('ResultsTableComponent', () => { @@
                 datasetRecordsFixture()[0] as CatalogRecord
               )[0]
             )
-          ).toEqual('#1e5180') // geojson
+          ).toEqual('#b3cde8') // geojson
         })
       })
@@ Expand Down @@