From 4b0e386d92c0007e59a61d02e46dae77282d3598 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Sat, 9 Sep 2023 13:00:23 +0200
Subject: [PATCH] feat(editor): adjustements to the record table, add story

---
 .../pagination-buttons.component.stories.ts   |  9 ++---
 .../record-table/record-table.component.html  | 18 +++++-----
 .../record-table.component.stories.ts         | 34 +++++++++++++++++++
 .../record-table/record-table.component.ts    |  1 +
 4 files changed, 46 insertions(+), 16 deletions(-)
 create mode 100644 libs/ui/search/src/lib/record-table/record-table.component.stories.ts

diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.stories.ts b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.stories.ts
index 8a382eb52c..94d61ccaed 100644
--- a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.stories.ts
+++ b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.stories.ts
@@ -1,15 +1,10 @@
 import { TranslateModule } from '@ngx-translate/core'
-import {
-  componentWrapperDecorator,
-  Meta,
-  moduleMetadata,
-  StoryObj,
-} from '@storybook/angular'
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
 import {
   TRANSLATE_DEFAULT_CONFIG,
   UtilI18nModule,
 } from '@geonetwork-ui/util/i18n'
-import { UiInputsModule, ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 import { PaginationButtonsComponent } from './pagination-buttons.component'
 import { FormsModule } from '@angular/forms'
 import { action } from '@storybook/addon-actions'
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 7d5036d744..e93f1977c4 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
@@ -23,13 +23,13 @@
           >
             <span translate>record.metadata.title</span>
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'asc')"
             >
               expand_less</mat-icon
@@ -47,13 +47,13 @@
           >
             <span translate>record.metadata.author</span>
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('recordOwner', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('recordOwner', 'asc')"
             >
               expand_less</mat-icon
@@ -66,15 +66,15 @@
             extraClass="px-3 py-2 space-x-1"
             (buttonClick)="setSortBy('changeDate')"
           >
-            <span translate>record.metadata.completion</span>
+            <span translate>record.metadata.updatedOn</span>
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('changeDate', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('changeDate', 'asc')"
             >
               expand_less</mat-icon
@@ -89,13 +89,13 @@
           >
             <span translate>record.metadata.createdOn</span>
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('createDate', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="material-symbols-outlined text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('createDate', 'asc')"
             >
               expand_less</mat-icon
diff --git a/libs/ui/search/src/lib/record-table/record-table.component.stories.ts b/libs/ui/search/src/lib/record-table/record-table.component.stories.ts
new file mode 100644
index 0000000000..1126946651
--- /dev/null
+++ b/libs/ui/search/src/lib/record-table/record-table.component.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/angular'
+import { moduleMetadata } from '@storybook/angular'
+import { RecordTableComponent } from './record-table.component'
+import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { action } from '@storybook/addon-actions'
+import { MatIconModule } from '@angular/material/icon'
+import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
+
+const meta: Meta<RecordTableComponent> = {
+  component: RecordTableComponent,
+  title: 'Search/RecordTableComponent',
+  decorators: [
+    moduleMetadata({
+      declarations: [RecordTableComponent],
+      imports: [UiInputsModule, MatIconModule],
+    }),
+  ],
+  render: (args: RecordTableComponent) => ({
+    props: {
+      ...args,
+      recordSelect: action('recordSelect'),
+      sortByChange: action('sortByChange'),
+    },
+  }),
+}
+export default meta
+type Story = StoryObj<RecordTableComponent>
+
+export const Primary: Story = {
+  args: {
+    records: DATASET_RECORDS.concat(DATASET_RECORDS, DATASET_RECORDS),
+    totalHits: 1234,
+  },
+}
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 a64c25f8d8..e98926e42a 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
@@ -83,6 +83,7 @@ export class RecordTableComponent {
       newOrder = 'asc'
     }
     this.sortByChange.emit([newOrder, col])
+    this.sortBy = [newOrder, col]
   }
 
   isSortedBy(col: string, order: 'asc' | 'desc'): boolean {