From dfb0f2be9b7da6c025e8ae9d7157ce27d9e0d5cd Mon Sep 17 00:00:00 2001 From: Olivia Guyot Date: Fri, 8 Sep 2023 11:50:28 +0200 Subject: [PATCH] feat(editor): fix sort order for links, show 2 links & better badge width --- .../data-downloads.component.ts | 4 +-- .../record-table/record-table.component.html | 30 +++++++++--------- .../record-table.component.spec.ts | 6 ++-- .../record-table/record-table.component.ts | 31 ++++++------------- .../shared/src/lib/links/link-utils.spec.ts | 6 ++-- libs/util/shared/src/lib/links/link-utils.ts | 7 +++-- 6 files changed, 39 insertions(+), 45 deletions(-) diff --git a/libs/feature/record/src/lib/data-downloads/data-downloads.component.ts b/libs/feature/record/src/lib/data-downloads/data-downloads.component.ts index c2af94335f..890e4ea6fe 100644 --- a/libs/feature/record/src/lib/data-downloads/data-downloads.component.ts +++ b/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) }) diff --git a/libs/ui/search/src/lib/record-table/record-table.component.html b/libs/ui/search/src/lib/record-table/record-table.component.html index c7c6a02366..53365b9bb3 100644 --- a/libs/ui/search/src/lib/record-table/record-table.component.html +++ b/libs/ui/search/src/lib/record-table/record-table.component.html @@ -39,24 +39,26 @@ {{ record.title }}
-
- - {{ formats[0] }} - -
-
+ {{ formats[0] }} + + - + {{ formats.slice(1).length }} + {{ formats[1] }} + +
+ +{{ formats.slice(2).length }}
diff --git a/libs/ui/search/src/lib/record-table/record-table.component.spec.ts b/libs/ui/search/src/lib/record-table/record-table.component.spec.ts index 6c4573dd6c..195690ea21 100644 --- a/libs/ui/search/src/lib/record-table/record-table.component.spec.ts +++ b/libs/ui/search/src/lib/record-table/record-table.component.spec.ts @@ -24,9 +24,9 @@ describe('RecordTableComponent', () => { 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([ - 'pdf', - 'shp', 'geojson', + 'shp', + 'pdf', ]) }) }) @@ -36,7 +36,7 @@ describe('RecordTableComponent', () => { component.getBadgeColor( component.getRecordFormats(DATASET_RECORDS[0])[0] ) - ).toEqual('#db544a') + ).toEqual('#1e5180') // geojson }) }) }) diff --git a/libs/ui/search/src/lib/record-table/record-table.component.ts b/libs/ui/search/src/lib/record-table/record-table.component.ts index da17a154fa..cf71e88ff5 100644 --- a/libs/ui/search/src/lib/record-table/record-table.component.ts +++ b/libs/ui/search/src/lib/record-table/record-table.component.ts @@ -1,13 +1,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core' -import { - CatalogRecord, - DatasetDistribution, -} from '@geonetwork-ui/common/domain/record' +import { CatalogRecord } from '@geonetwork-ui/common/domain/record' import { FileFormat, getBadgeColor, getFileFormat, - sortPriority, + getFormatPriority, } from '@geonetwork-ui/util/shared' @Component({ @@ -42,24 +39,16 @@ export class RecordTableComponent { } getRecordFormats(record: CatalogRecord): FileFormat[] { - if (record.kind === 'service') { + if (record.kind === 'service' || !('distributions' in record)) { return [] } - const formatsAndPrio = record.distributions.map( - (distribution: DatasetDistribution) => { - return { - format: getFileFormat(distribution), - priority: sortPriority(distribution), - } - } - ) - - const sortedFormats = formatsAndPrio - .sort((a, b) => a.priority - b.priority) - .map((element) => element.format) - - const types = new Set(sortedFormats) - return Array.from(types).filter((elm) => elm) + 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 { diff --git a/libs/util/shared/src/lib/links/link-utils.spec.ts b/libs/util/shared/src/lib/links/link-utils.spec.ts index 96cd1f001b..cebd11e3e9 100644 --- a/libs/util/shared/src/lib/links/link-utils.spec.ts +++ b/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'), diff --git a/libs/util/shared/src/lib/links/link-utils.ts b/libs/util/shared/src/lib/links/link-utils.ts index 3fbc7e1331..de8015953d 100644 --- a/libs/util/shared/src/lib/links/link-utils.ts +++ b/libs/util/shared/src/lib/links/link-utils.ts @@ -86,8 +86,7 @@ export const 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) {