feat(editor): adjustements to the record table, add story

geonetwork · Sep 10, 2023 · 19a5b34 · 19a5b34
1 parent 4d7654a
commit 19a5b34
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 25 deletions.
diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css
@@ -1,3 +0,0 @@
-mat-icon {
-  font-variation-settings: 'FILL' 1;
-}

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
@@ -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/inputs/src/lib/star-toggle/star-toggle.component.css b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css
@@ -9,12 +9,6 @@ mat-icon {
   width: 1em;
   height: 1em;
   font-size: 1.5em;
-  margin-top: -0.1em;
-  font-variation-settings: 'opsz' 40;
-}
-
-.star-filled {
-  font-variation-settings: 'FILL' 1;
 }
 
 .star-toggle-overlay {

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
@@ -23,13 +23,13 @@
           >
             <span translate>record.metadata.title</span>
             <mat-icon
-              class="text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('resourceTitleObject.default.keyword', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="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="text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('recordOwner', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="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="text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('changeDate', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="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="text-base leading-tight"
+              class="material-symbols-outlined"
               *ngIf="isSortedBy('createDate', 'desc')"
             >
               expand_more</mat-icon
             >
             <mat-icon
-              class="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
@@ -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
@@ -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 {