feat(editor): fix sort order for links, show 2 links & better badge w…

…idth
geonetwork · Sep 8, 2023 · dfb0f2b · dfb0f2b
1 parent d436483
commit dfb0f2b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 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
@@ -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
@@ -39,24 +39,26 @@
           {{ record.title }}
         </div>
         <div
-          class="record-table-col flex items-center"
+          class="record-table-col flex justify-start items-center gap-2 text-16"
           [title]="formats.join(', ')"
           *ngIf="getRecordFormats(record) as formats"
         >
-          <div class="text-16 basis-2/3">
-            <span
-              class="badge-btn text-sm text-white mr-2"
-              [style.background-color]="getBadgeColor(formats[0])"
-              *ngIf="formats[0]"
-            >
-              {{ formats[0] }}
-            </span>
-          </div>
-          <div
-            class="text-16 basis-1/3 flex-shrink-0"
-            *ngIf="formats.slice(1).length > 0"
+          <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]"
           >
-            <span>+ {{ formats.slice(1).length }}</span>
+            {{ 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">

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
@@ -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
@@ -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
@@ -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
@@ -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) {