feat(search): separate search inputs for allRecords and myRecords

hide search for drafts for now
geonetwork · Sep 24, 2024 · 5eb5f9f · 5eb5f9f
1 parent 25d27d4
commit 5eb5f9f
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 163 deletions.
diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
@@ -3,7 +3,6 @@
     <div class="menu-title" translate="">dashboard.labels.catalog</div>
     <a
       class="menu-item"
-      (click)="resetMainSearch()"
       routerLink="/catalog/search"
       routerLinkActive="btn-active"
       #rlaAll="routerLinkActive"

diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.ts b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.ts
@@ -6,7 +6,6 @@ import { TranslateModule } from '@ngx-translate/core'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/repository/records-repository.interface'
 import { map, startWith, switchMap } from 'rxjs/operators'
 import { BadgeComponent } from '@geonetwork-ui/ui/inputs'
-import { SearchFacade } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-dashboard-menu',
@@ -30,12 +29,5 @@ export class DashboardMenuComponent {
   )
   activeLink = false
 
-  constructor(
-    private recordsRepository: RecordsRepositoryInterface,
-    private searchFacade: SearchFacade
-  ) {}
-
-  resetMainSearch() {
-    this.searchFacade.setFilters({})
-  }
+  constructor(private recordsRepository: RecordsRepositoryInterface) {}
 }
diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-page.component.html b/apps/metadata-editor/src/app/dashboard/dashboard-page.component.html
@@ -4,15 +4,7 @@
       <md-editor-sidebar></md-editor-sidebar>
     </aside>
     <div class="grow flex flex-col">
-      <header class="shrink-0 border-b border-gray-300">
-        <md-editor-search-header></md-editor-search-header>
-      </header>
-      <div class="relative overflow-y-auto">
-        <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
-          <gn-ui-notifications-container></gn-ui-notifications-container>
-        </div>
-        <router-outlet></router-outlet>
-      </div>
+      <router-outlet></router-outlet>
     </div>
   </div>
 </div>
diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.ts b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.ts
@@ -4,7 +4,6 @@ import { MatIconModule } from '@angular/material/icon'
 import { LetDirective } from '@ngrx/component'
 import {
   FeatureSearchModule,
-  FuzzySearchComponent,
   SearchService,
 } from '@geonetwork-ui/feature/search'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
@@ -32,18 +31,13 @@ import { RouterFacade } from '@geonetwork-ui/feature/router'
 export class SearchHeaderComponent {
   public placeholder$ = this.avatarService.getPlaceholder()
   activeBtn = false
-  @ViewChild('fuzzySearch') fuzzySearch: FuzzySearchComponent
 
   constructor(
     public platformService: PlatformServiceInterface,
     private avatarService: AvatarServiceInterface,
     private searchService: SearchService,
     private routerFacade: RouterFacade
-  ) {
-    this.routerFacade.currentRoute$.subscribe(() => {
-      this.fuzzySearch?.autocomplete?.clear()
-    })
-  }
+  ) {}
 
   handleItemSelection(item: CatalogRecord) {
     this.searchService.updateFilters({ any: item.title })

diff --git a/apps/metadata-editor/src/app/records/all-records/all-records.component.html b/apps/metadata-editor/src/app/records/all-records/all-records.component.html
@@ -1,69 +1,79 @@
-<main class="bg-white">
-  <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
-    <ng-container *ngIf="searchText$ | async as searchText; else allRecords">
-      <h1
-        class="text-[16px] text-main font-title font-bold"
-        translate
-        [translateParams]="{ searchText: searchText }"
-      >
-        dashboard.records.search
-      </h1>
-      <div class="text-[12px]">
-        <md-editor-records-count></md-editor-records-count>
-      </div>
-    </ng-container>
-    <ng-template #allRecords>
-      <h1 class="text-[16px] text-main font-title font-bold" translate>
-        dashboard.records.all
-      </h1>
-      <div class="text-[12px]">
-        <md-editor-records-count></md-editor-records-count>
-      </div>
-    </ng-template>
+<header class="shrink-0 border-b border-gray-300">
+  <md-editor-search-header></md-editor-search-header>
+</header>
+<div class="relative overflow-y-auto">
+  <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+    <gn-ui-notifications-container></gn-ui-notifications-container>
   </div>
-  <div
-    class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"
-  >
-    <div>
-      <span class="uppercase" translate>dashboard.results.listMetadata</span>
+  <main class="bg-white">
+    <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
+      <ng-container *ngIf="searchText$ | async as searchText; else allRecords">
+        <h1
+          class="text-[16px] text-main font-title font-bold"
+          translate
+          [translateParams]="{ searchText: searchText }"
+        >
+          dashboard.records.search
+        </h1>
+        <div class="text-[12px]">
+          <md-editor-records-count></md-editor-records-count>
+        </div>
+      </ng-container>
+      <ng-template #allRecords>
+        <h1 class="text-[16px] text-main font-title font-bold" translate>
+          dashboard.records.all
+        </h1>
+        <div class="text-[12px]">
+          <md-editor-records-count></md-editor-records-count>
+        </div>
+      </ng-template>
     </div>
-    <div>
-      <span class="uppercase" translate>dashboard.results.listResources</span>
-    </div>
-    <div class="grow"></div>
-    <gn-ui-button
-      cdkOverlayOrigin
-      #importRecordButton
-      (buttonClick)="duplicateExternalRecord()"
-      type="gray"
-      data-test="import-record"
+    <div
+      class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"
     >
-      <span translate>dashboard.importRecord</span>
-      <mat-icon
-        *ngIf="!isImportMenuOpen"
-        class="material-symbols-outlined text-primary"
-        >keyboard_arrow_down</mat-icon
+      <div>
+        <span class="uppercase" translate>dashboard.results.listMetadata</span>
+      </div>
+      <div>
+        <span class="uppercase" translate>dashboard.results.listResources</span>
+      </div>
+      <div class="grow"></div>
+      <gn-ui-button
+        cdkOverlayOrigin
+        #importRecordButton
+        (buttonClick)="duplicateExternalRecord()"
+        type="gray"
+        data-test="import-record"
       >
-      <mat-icon
-        *ngIf="isImportMenuOpen"
-        class="material-symbols-outlined text-primary"
-        >keyboard_arrow_up</mat-icon
+        <span translate>dashboard.importRecord</span>
+        <mat-icon
+          *ngIf="!isImportMenuOpen"
+          class="material-symbols-outlined text-primary"
+          >keyboard_arrow_down</mat-icon
+        >
+        <mat-icon
+          *ngIf="isImportMenuOpen"
+          class="material-symbols-outlined text-primary"
+          >keyboard_arrow_up</mat-icon
+        >
+      </gn-ui-button>
+      <ng-template #template>
+        <gn-ui-import-record
+          (closeImportMenu)="closeImportMenu()"
+        ></gn-ui-import-record>
+      </ng-template>
+      <gn-ui-button
+        (buttonClick)="createRecord()"
+        type="primary"
+        data-cy="create-record"
       >
-    </gn-ui-button>
-    <ng-template #template>
-      <gn-ui-import-record
-        (closeImportMenu)="closeImportMenu()"
-      ></gn-ui-import-record>
-    </ng-template>
-    <gn-ui-button
-      (buttonClick)="createRecord()"
-      type="primary"
-      data-cy="create-record"
-    >
-      <mat-icon class="material-symbols-outlined mr-2">edit_document</mat-icon>
-      <span translate>dashboard.createRecord</span>
-    </gn-ui-button>
-  </div>
+        <mat-icon class="material-symbols-outlined mr-2"
+          >edit_document</mat-icon
+        >
+        <span translate>dashboard.createRecord</span>
+      </gn-ui-button>
+    </div>
 
-  <md-editor-records-list></md-editor-records-list>
-</main>
+    <md-editor-records-list></md-editor-records-list>
+  </main>
+</div>
diff --git a/apps/metadata-editor/src/app/records/all-records/all-records.component.ts b/apps/metadata-editor/src/app/records/all-records/all-records.component.ts
@@ -29,6 +29,8 @@ import { TemplatePortal } from '@angular/cdk/portal'
 import { ImportRecordComponent } from '@geonetwork-ui/feature/editor'
 import { RecordsListComponent } from '../records-list.component'
 import { map } from 'rxjs/operators'
+import { SearchHeaderComponent } from '../../dashboard/search-header/search-header.component'
+import { NotificationsContainerComponent } from '@geonetwork-ui/feature/notifications'
 
 @Component({
   selector: 'md-editor-all-records',
@@ -47,6 +49,8 @@ import { map } from 'rxjs/operators'
     CdkOverlayOrigin,
     CdkConnectedOverlay,
     RecordsListComponent,
+    SearchHeaderComponent,
+    NotificationsContainerComponent,
   ],
 })
 export class AllRecordsComponent {

diff --git a/apps/metadata-editor/src/app/records/my-draft/my-draft.component.html b/apps/metadata-editor/src/app/records/my-draft/my-draft.component.html
@@ -1,20 +1,25 @@
-<main class="bg-white">
-  <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
-    <h1 class="text-[16px] text-main font-title font-bold" translate>
-      dashboard.records.myDraft
-    </h1>
+<div class="relative overflow-y-auto">
+  <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+    <gn-ui-notifications-container></gn-ui-notifications-container>
   </div>
+  <main class="bg-white">
+    <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
+      <h1 class="text-[16px] text-main font-title font-bold" translate>
+        dashboard.records.myDraft
+      </h1>
+    </div>
 
-  <div
-    class="shadow-md shadow-gray-300 border-[1px] border-gray-200 overflow-hidden rounded bg-white grow mx-[32px] my-[16px]"
-  >
-    <gn-ui-results-table
-      [records]="records$ | async"
-      [canDuplicate]="canDuplicate"
-      [isUnsavedDraft]="isUnsavedDraft"
-      [canDelete]="isUnsavedDraft"
-      (recordClick)="editRecord($event)"
-      (deleteRecord)="deleteDraft($event)"
-    ></gn-ui-results-table>
-  </div>
-</main>
+    <div
+      class="shadow-md shadow-gray-300 border-[1px] border-gray-200 overflow-hidden rounded bg-white grow mx-[32px] my-[16px]"
+    >
+      <gn-ui-results-table
+        [records]="records$ | async"
+        [canDuplicate]="canDuplicate"
+        [isUnsavedDraft]="isUnsavedDraft"
+        [canDelete]="isUnsavedDraft"
+        (recordClick)="editRecord($event)"
+        (deleteRecord)="deleteDraft($event)"
+      ></gn-ui-results-table>
+    </div>
+  </main>
+</div>
diff --git a/apps/metadata-editor/src/app/records/my-draft/my-draft.component.ts b/apps/metadata-editor/src/app/records/my-draft/my-draft.component.ts
@@ -12,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { startWith, switchMap } from 'rxjs'
 import { RecordsCountComponent } from '../records-count/records-count.component'
 import { RecordsListComponent } from '../records-list.component'
+import { NotificationsContainerComponent } from '@geonetwork-ui/feature/notifications'
 @Component({
   selector: 'md-editor-my-my-draft',
   templateUrl: './my-draft.component.html',
@@ -27,6 +28,7 @@ import { RecordsListComponent } from '../records-list.component'
     ResultsTableContainerComponent,
     UiElementsModule,
     ResultsTableComponent,
+    NotificationsContainerComponent,
   ],
 })
 export class MyDraftComponent {