From d436483c5ffa72aa53442f3b20953959a1822873 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 7 Sep 2023 16:01:21 +0200
Subject: [PATCH] feat(editor): Simplify logic of formats

---
 .../record-table/record-table.component.html  | 28 +++++++++++--------
 .../record-table.component.spec.ts            | 17 ++---------
 .../record-table/record-table.component.ts    |  9 ------
 3 files changed, 19 insertions(+), 35 deletions(-)

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 17d543b15c..c7c6a02366 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
@@ -38,21 +38,25 @@
         <div [title]="record.title" class="record-table-col text-16">
           {{ record.title }}
         </div>
-        <div class="flex items-center">
-          <div class="record-table-col text-16 basis-1/2">
+        <div
+          class="record-table-col flex items-center"
+          [title]="formats.join(', ')"
+          *ngIf="getRecordFormats(record) as formats"
+        >
+          <div class="text-16 basis-2/3">
             <span
-              class="flex badge-btn text-sm text-white"
-              [style.background-color]="getBadgeColor(firstFormat(record))"
-              *ngIf="firstFormat(record)"
-              >{{ firstFormat(record) }}</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="record-table-col text-16 basis-1/2">
-            <span
-              *ngIf="secondToLastFormat(record).length > 0"
-              [title]="secondToLastFormat(record).join(', ')"
-              >+ ({{ secondToLastFormat(record).length }})</span
-            >
+          <div
+            class="text-16 basis-1/3 flex-shrink-0"
+            *ngIf="formats.slice(1).length > 0"
+          >
+            <span>+ {{ formats.slice(1).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
index dab443d9ca..6c4573dd6c 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
@@ -30,23 +30,12 @@ describe('RecordTableComponent', () => {
       ])
     })
   })
-  describe('get the first format', () => {
-    it('returns the first format of the list', () => {
-      expect(component.firstFormat(DATASET_RECORDS[0])).toEqual('pdf')
-    })
-  })
-  describe('get the remaining formats', () => {
-    it('returns the first format of the list', () => {
-      expect(component.secondToLastFormat(DATASET_RECORDS[0])).toEqual([
-        'shp',
-        'geojson',
-      ])
-    })
-  })
   describe('get the badge color for given format', () => {
     it('returns the color for its format', () => {
       expect(
-        component.getBadgeColor(component.firstFormat(DATASET_RECORDS[0]))
+        component.getBadgeColor(
+          component.getRecordFormats(DATASET_RECORDS[0])[0]
+        )
       ).toEqual('#db544a')
     })
   })
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 aa62486a5b..da17a154fa 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
@@ -65,13 +65,4 @@ export class RecordTableComponent {
   getBadgeColor(format: FileFormat): string {
     return getBadgeColor(format)
   }
-
-  firstFormat(record: CatalogRecord): FileFormat {
-    return this.getRecordFormats(record)[0]
-  }
-
-  secondToLastFormat(record: CatalogRecord): FileFormat[] {
-    const formats = this.getRecordFormats(record)
-    return formats.slice(formats.length - 2)
-  }
 }