From 2899383808378b1395d47bd376d533c990dd3d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laure-H=C3=A9l=C3=A8ne=20Bruneton?=
 <laure-helene.bruneton@camptocamp.com>
Date: Wed, 24 Jul 2024 09:17:23 +0200
Subject: [PATCH] feat(editor): revert click on record, use gn-ui-button for
 menu

---
 .../repository/src/lib/gn4/gn4-repository.ts  | 11 +++----
 .../action-menu/action-menu.component.css     |  0
 .../action-menu/action-menu.component.html    | 17 +++++++++++
 .../action-menu/action-menu.component.spec.ts | 22 ++++++++++++++
 .../action-menu/action-menu.component.ts      | 22 ++++++++++++++
 .../results-table.component.html              | 29 +++++--------------
 .../results-table.component.spec.ts           | 10 +++----
 .../results-table/results-table.component.ts  | 16 ++++++----
 8 files changed, 88 insertions(+), 39 deletions(-)
 create mode 100644 libs/ui/search/src/lib/results-table/action-menu/action-menu.component.css
 create mode 100644 libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html
 create mode 100644 libs/ui/search/src/lib/results-table/action-menu/action-menu.component.spec.ts
 create mode 100644 libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

diff --git a/libs/api/repository/src/lib/gn4/gn4-repository.ts b/libs/api/repository/src/lib/gn4/gn4-repository.ts
index 00e2015e2f..d16e72c14d 100644
--- a/libs/api/repository/src/lib/gn4/gn4-repository.ts
+++ b/libs/api/repository/src/lib/gn4/gn4-repository.ts
@@ -235,15 +235,12 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     uniqueIdentifier: string
   ): Observable<[CatalogRecord, string, false] | null> {
     return this.loadRecordAsXml(uniqueIdentifier).pipe(
-      switchMap(async (xml) => {
-        const converter = findConverterForDocument(xml)
-        const record = await converter.readRecord(xml)
-        return [record, converter] as [CatalogRecord, BaseConverter<string>]
-      }),
-      switchMap(async ([record, converter]) => {
+      switchMap(async (recordAsXml) => {
+        const converter = findConverterForDocument(recordAsXml)
+        const record = await converter.readRecord(recordAsXml)
         record.uniqueIdentifier = `TEMP-ID-${Date.now()}`
         record.title = `${record.title} (Copy)`
-        const xml = await converter.writeRecord(record)
+        const xml = await converter.writeRecord(record, recordAsXml)
         window.localStorage.setItem(
           this.getLocalStorageKeyForRecord(record.uniqueIdentifier),
           xml
diff --git a/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.css b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html
new file mode 100644
index 0000000000..f423d03193
--- /dev/null
+++ b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html
@@ -0,0 +1,17 @@
+<gn-ui-button
+  type="outline"
+  [matMenuTriggerFor]="menu"
+  (buttonClick)="openMenu()"
+  data-test="record-menu-button"
+>
+  <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
+</gn-ui-button>
+<mat-menu #menu="matMenu">
+  <button
+    mat-menu-item
+    (click)="duplicate.emit()"
+    data-test="record-menu-duplicate-button"
+  >
+    <span translate>record.action.duplicate</span>
+  </button>
+</mat-menu>
diff --git a/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.spec.ts b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.spec.ts
new file mode 100644
index 0000000000..0477818afe
--- /dev/null
+++ b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu.component'
+
+describe('ActionMenuComponent', () => {
+  let component: ActionMenuComponent
+  let fixture: ComponentFixture<ActionMenuComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ActionMenuComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts
new file mode 100644
index 0000000000..155692316e
--- /dev/null
+++ b/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-action-menu',
+  templateUrl: './action-menu.component.html',
+  styleUrls: ['./action-menu.component.css'],
+  standalone: true,
+  imports: [MatIconModule, ButtonComponent, MatMenuModule, TranslateModule],
+})
+export class ActionMenuComponent {
+  @Output() duplicate = new EventEmitter<void>()
+
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
+
+  openMenu() {
+    this.trigger.openMenu()
+  }
+}
diff --git a/libs/ui/search/src/lib/results-table/results-table.component.html b/libs/ui/search/src/lib/results-table/results-table.component.html
index 8ca4f64814..c062fd521c 100644
--- a/libs/ui/search/src/lib/results-table/results-table.component.html
+++ b/libs/ui/search/src/lib/results-table/results-table.component.html
@@ -1,4 +1,7 @@
-<gn-ui-interactive-table [items]="records">
+<gn-ui-interactive-table
+  [items]="records"
+  (itemClick)="handleRecordClick($event)"
+>
   <!-- SELECTED COLUMN -->
   <gn-ui-interactive-table-column>
     <ng-template #header>
@@ -31,11 +34,7 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div
-        class="flex flex-row items-center gap-2 max-w-full"
-        (click)="handleRecordClick(item)"
-        data-test="record-title-cell"
-      >
+      <div class="flex flex-row items-center gap-2 max-w-full">
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
           *ngIf="recordHasDraft(item)"
@@ -126,22 +125,8 @@
   <gn-ui-interactive-table-column>
     <ng-template #header> </ng-template>
     <ng-template #cell let-item>
-      <button
-        [matMenuTriggerFor]="menu"
-        (click)="$event.stopPropagation()"
-        data-test="record-menu-button"
-      >
-        <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <button
-          mat-menu-item
-          (click)="handleDuplicateClick($event, item)"
-          data-test="record-menu-duplicate-button"
-        >
-          <span translate>record.action.duplicate</span>
-        </button>
-      </mat-menu>
+      <gn-ui-action-menu (duplicate)="handleDuplicate(item)">
+      </gn-ui-action-menu>
     </ng-template>
   </gn-ui-interactive-table-column>
 </gn-ui-interactive-table>
diff --git a/libs/ui/search/src/lib/results-table/results-table.component.spec.ts b/libs/ui/search/src/lib/results-table/results-table.component.spec.ts
index d484cbd6e7..53b25e12c7 100644
--- a/libs/ui/search/src/lib/results-table/results-table.component.spec.ts
+++ b/libs/ui/search/src/lib/results-table/results-table.component.spec.ts
@@ -134,7 +134,7 @@ describe('ResultsTableComponent', () => {
     })
   })
 
-  describe('clicking on a title', () => {
+  describe('clicking on a dataset', () => {
     let clickedRecord: CatalogRecord
 
     beforeEach(() => {
@@ -143,10 +143,10 @@ describe('ResultsTableComponent', () => {
     })
 
     it('emits a recordClick event', () => {
-      const tableRow = fixture.debugElement.query(
-        By.css('[data-test="record-title-cell"]')
-      ).nativeElement as HTMLDivElement
-      tableRow.click()
+      const tableRow = fixture.debugElement.queryAll(
+        By.css('.table-row-cell')
+      )[1].nativeElement as HTMLDivElement
+      tableRow.parentElement.click()
       expect(clickedRecord).toEqual(DATASET_RECORDS[0])
     })
   })
diff --git a/libs/ui/search/src/lib/results-table/results-table.component.ts b/libs/ui/search/src/lib/results-table/results-table.component.ts
index ec3307df0c..3d7dba9f0a 100644
--- a/libs/ui/search/src/lib/results-table/results-table.component.ts
+++ b/libs/ui/search/src/lib/results-table/results-table.component.ts
@@ -1,7 +1,13 @@
 import { CommonModule } from '@angular/common'
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
-import { MatMenuModule } from '@angular/material/menu'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
 import {
   FieldSort,
@@ -19,6 +25,7 @@ import {
   getFormatPriority,
 } from '@geonetwork-ui/util/shared'
 import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -33,7 +40,7 @@ import { TranslateModule } from '@ngx-translate/core'
     MatIconModule,
     TranslateModule,
     BadgeComponent,
-    MatMenuModule,
+    ActionMenuComponent,
   ],
 })
 export class ResultsTableComponent {
@@ -92,8 +99,7 @@ export class ResultsTableComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
-  handleDuplicateClick(event: Event, item: unknown) {
-    event.stopPropagation()
+  handleDuplicate(item: unknown) {
     this.duplicateRecord.emit(item as CatalogRecord)
   }