Merge pull request #609 from geonetwork/add-format-to-table

[editor]: Add formats to table

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

@@ -15,6 +15,7 @@ const includes = [
   'userinfo',
   'cl_status',
   'isPublishedToAll',
+  'link',
 ]
 
 @Component({

libs/feature/record/src/lib/data-downloads/data-downloads.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { DataService } from '@geonetwork-ui/feature/dataviz'
-import { getFileFormat, sortPriority } from '@geonetwork-ui/util/shared'
+import { getFileFormat, getLinkPriority } from '@geonetwork-ui/util/shared'
 import { combineLatest, of } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
@@ -92,5 +92,5 @@ const removeDuplicateLinks = (wfsDownloadLinks) =>
 
 const sortLinks = (allLinks) =>
   allLinks.sort((a: DatasetDistribution, b: DatasetDistribution): number => {
-    return sortPriority(b) - sortPriority(a)
+    return getLinkPriority(b) - getLinkPriority(a)
   })

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

@@ -38,10 +38,28 @@
         <div [title]="record.title" class="record-table-col text-16">
           {{ record.title }}
         </div>
-        <div class="record-table-col text-16">
-          <span class="badge-btn btn-active text-sm">{{
-            getStatus(record.extras?.isPublishedToAll)
-          }}</span>
+        <div
+          class="record-table-col flex justify-start items-center gap-2 text-16"
+          [title]="formats.join(', ')"
+          *ngIf="getRecordFormats(record) as formats"
+        >
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[0])"
+            *ngIf="formats[0]"
+          >
+            {{ formats[0] }}
+          </span>
+          <span
+            class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+            [style.background-color]="getBadgeColor(formats[1])"
+            *ngIf="formats[1]"
+          >
+            {{ formats[1] }}
+          </span>
+          <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+            <span>+{{ formats.slice(2).length }}</span>
+          </div>
         </div>
         <div class="record-table-col flex items-center gap-2 text-16">
           <mat-icon class="material-icons-outlined"> person </mat-icon>

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

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
 
 import { RecordTableComponent } from './record-table.component'
 
@@ -19,4 +20,23 @@ describe('RecordTableComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  describe('get a list of formats and sorts them depending on priority', () => {
+    it('returns a list of unique formats', () => {
+      expect(component.getRecordFormats(DATASET_RECORDS[0])).toEqual([
+        'geojson',
+        'shp',
+        'pdf',
+      ])
+    })
+  })
+  describe('get the badge color for given format', () => {
+    it('returns the color for its format', () => {
+      expect(
+        component.getBadgeColor(
+          component.getRecordFormats(DATASET_RECORDS[0])[0]
+        )
+      ).toEqual('#1e5180') // geojson
+    })
+  })
 })

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

@@ -1,14 +1,19 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
-import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/record'
+import {
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '@geonetwork-ui/util/shared'
 
 @Component({
   selector: 'gn-ui-record-table',
   templateUrl: './record-table.component.html',
   styleUrls: ['./record-table.component.css'],
 })
 export class RecordTableComponent {
-  @Input() records: CatalogRecord[] = DATASET_RECORDS
+  @Input() records: CatalogRecord[] = []
   @Input() totalHits?: number
   @Output() recordSelect = new EventEmitter<CatalogRecord>()
 
@@ -32,4 +37,21 @@ export class RecordTableComponent {
     }
     return undefined
   }
+
+  getRecordFormats(record: CatalogRecord): FileFormat[] {
+    if (record.kind === 'service' || !('distributions' in record)) {
+      return []
+    }
+    const formats = Array.from(
+      new Set(
+        record.distributions.map((distribution) => getFileFormat(distribution))
+      )
+    ).filter((format) => !!format)
+    formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))
+    return formats
+  }
+
+  getBadgeColor(format: FileFormat): string {
+    return getBadgeColor(format)
+  }
 }

libs/util/shared/src/lib/links/link-utils.spec.ts

@@ -7,7 +7,7 @@ import {
   getFileFormat,
   getLinkLabel,
   mimeTypeToFormat,
-  sortPriority,
+  getLinkPriority,
 } from './link-utils'
 
 describe('link utils', () => {
@@ -171,7 +171,7 @@ describe('link utils', () => {
     const nFormats = Object.keys(FORMATS).length
     it(`returns ${nFormats - 1}`, () => {
       expect(
-        sortPriority({
+        getLinkPriority({
           description: 'Data in CSV format',
           name: 'abc.csv',
           url: new URL('https://my.server/files/abc.csv'),
@@ -181,7 +181,7 @@ describe('link utils', () => {
     })
     it(`returns ${nFormats - 5}`, () => {
       expect(
-        sortPriority({
+        getLinkPriority({
           description: 'Data in KML format',
           name: 'abc.kml',
           url: new URL('https://my.server/files/abc.kml'),

libs/util/shared/src/lib/links/link-utils.ts

@@ -84,10 +84,9 @@ export const FORMATS = {
   },
 } as const
 
-type FileFormat = keyof typeof FORMATS
+export type FileFormat = keyof typeof FORMATS
 
-export function sortPriority(link: DatasetDistribution): number {
-  const linkFormat = getFileFormat(link)
+export function getFormatPriority(linkFormat: FileFormat): number {
   for (const format in FORMATS) {
     for (const ext of FORMATS[format].extensions) {
       if (new RegExp(`${ext}`, 'i').test(linkFormat)) {
@@ -99,6 +98,10 @@ export function sortPriority(link: DatasetDistribution): number {
   return 0
 }
 
+export function getLinkPriority(link: DatasetDistribution): number {
+  return getFormatPriority(getFileFormat(link))
+}
+
 export function extensionToFormat(extension: string): FileFormat {
   for (const format in FORMATS) {
     for (const alias of FORMATS[format].extensions) {