refactor: relocate and redesign search bar in dataset and proposal pages

src/app/datasets/dashboard/dashboard.component.html

@@ -1,48 +1,47 @@
-<breadcrumb></breadcrumb>
-<full-text-search-bar
-  #searchBar
-  data-cy="dataset-text-search"
-  [placeholder]="'Type to search...'"
-  (textChange)="onTextChange($event)"
-  (searchAction)="onSearchAction()"
->
-</full-text-search-bar>
-<mat-sidenav-container [hasBackdrop]="false">
-  <mat-sidenav-content>
-    <div fxLayout="row" fxLayout.xs="column">
-      <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
-        <datasets-filter></datasets-filter>
-        <ng-template [ngIf]="this.loggedIn$ | async">
-          <mat-card
-            *ngIf="appConfig.addDatasetEnabled"
-            class="add-card"
-            (click)="openDialog()"
-          >
-            <mat-card-content>
-              <mat-icon> add_circle </mat-icon>
-              Create Dataset
-            </mat-card-content>
-          </mat-card>
+<div class="dashboard-main">
+  <mat-sidenav-container [hasBackdrop]="false">
+    <mat-sidenav-content>
 
-          <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
-            <batch-card></batch-card>
-          </div>
-        </ng-template>
+      <div fxLayout="row" fxLayout.xs="column" class="dashboard-header">
+        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
+          <breadcrumb></breadcrumb>
+        </div>
+        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+          <ng-template [ngIf]="this.loggedIn$ | async">
+            <dataset-table-actions
+              [selectedSets]="selectedSets$ | async"
+            ></dataset-table-actions>
+          </ng-template>
+        </div>
       </div>
 
-      <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
-        <ng-template [ngIf]="this.loggedIn$ | async">
-          <dataset-table-actions
+      <div fxLayout="row" fxLayout.xs="column">
+        <div class="action-column" fxFlex="14" fxFlex.lt-xl="20">
+          <datasets-filter></datasets-filter>
+          <ng-template [ngIf]="this.loggedIn$ | async">
+            <mat-card
+              *ngIf="appConfig.addDatasetEnabled"
+              class="add-card"
+              (click)="openDialog()"
+            >
+              <mat-card-content>
+                <mat-icon> add_circle </mat-icon>
+                Create Dataset
+              </mat-card-content>
+            </mat-card>
+            <div *ngIf="!appConfig.shoppingCartOnHeader && (nonEmpty$ | async)">
+              <batch-card></batch-card>
+            </div>
+          </ng-template>
+        </div>
+        <div class="table-column" fxFlex="85" fxFlex.lt-xl="80">
+          <dataset-table
             [selectedSets]="selectedSets$ | async"
-          ></dataset-table-actions>
-        </ng-template>
-
-        <dataset-table
-          [selectedSets]="selectedSets$ | async"
-          (rowClick)="onRowClick($event)"
-          (pageChange)="onPageChange($event)"
-        ></dataset-table>
+            (rowClick)="onRowClick($event)"
+            (pageChange)="onPageChange($event)"
+          ></dataset-table>
+        </div>
       </div>
-    </div>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>

src/app/datasets/dashboard/dashboard.component.scss

@@ -1,13 +1,20 @@
-
+.dashboard-main {
+  width: 100%;
+  max-width: 100%;
+}
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0; 
+}
 
 mat-sidenav-container {
   mat-sidenav-content {
     padding: 0.5rem;
     background-color: #ffffff;
 
-    :host-context(.anonymous-site) .action-column {
-      margin-top: 3.5rem;
-    }
     .action-column {
       margin-right: 0.5rem;
 
@@ -27,7 +34,6 @@ mat-sidenav-container {
     }
 
     .table-column {
-      margin-top: 0.5rem;
       padding-bottom: 1rem;
     }
   }

src/app/datasets/dataset-table/dataset-table.component.html

@@ -7,7 +7,10 @@
   [dataSource]="dataSource"
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
-  [showGlobalTextSearch]="showGlobalTextSearch"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  (globalTextSearchChange)="onTextSearchChange($event)"
+  (globalTextSearchApply)="onTextSearchAction()"
   [localization]="localization"
   [selectionIds]="selectionIds"
   (paginationChange)="onPageChange($event)"

src/app/datasets/dataset-table/dataset-table.component.ts

@@ -17,6 +17,10 @@ import {
   deselectDatasetAction,
   selectAllDatasetsAction,
   sortByColumnAction,
+  setSearchTermsAction,
+  setTextFilterAction,
+  fetchFacetCountsAction,
+  fetchDatasetsAction,
 } from "state-management/actions/datasets.actions";
 import { fetchInstrumentsAction } from "state-management/actions/instruments.actions";
 
@@ -103,6 +107,7 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
   instrumentMap: Map<string, Instrument> = new Map();
 
   @Output() rowClick = new EventEmitter<OutputDatasetObsoleteDto>();
+  @Output() textSearch = new EventEmitter<string>();
 
   tableDefaultSettingsConfig: ITableSetting = {
     visibleActionMenu: actionMenu,
@@ -147,6 +152,8 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
 
   tablesSettings: object;
 
+  globalTextSearch = "";
+
   constructor(
     public appConfigService: AppConfigService,
     private store: Store,
@@ -555,6 +562,24 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
         });
       }),
     );
+
+    this.subscriptions.push(
+      this.route.queryParams.subscribe((queryParams) => {
+        const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
+        this.globalTextSearch = searchQuery.text || "";
+      }),
+    );
+  }
+
+  onTextSearchChange(term: string) {
+    this.globalTextSearch = term;
+    this.store.dispatch(setSearchTermsAction({ terms: term }));
+    this.store.dispatch(setTextFilterAction({ text: term }));
+  }
+
+  onTextSearchAction() {
+    this.store.dispatch(fetchDatasetsAction());
+    this.store.dispatch(fetchFacetCountsAction());
   }
 
   ngOnDestroy() {

src/app/datasets/datasets-filter/datasets-filter.component.scss

@@ -1,5 +1,4 @@
 mat-card {
-  margin-top: 0.5rem;
 
   .mat-mdc-form-field {
     width: 100%;

src/app/proposals/proposal-dashboard/proposal-dashboard.component.html

@@ -1,6 +1,5 @@
 <breadcrumb></breadcrumb>
 
-<proposal-search-bar></proposal-search-bar>
 <mat-sidenav-container [hasBackdrop]="false">
   <mat-sidenav-content>
     <div fxLayout="row" fxLayout.xs="column">

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss

@@ -34,7 +34,7 @@ mat-card {
   position: absolute;
   z-index: 10;
   background: none;
-  top: 1.125rem;
+  top: 2.125rem;
   left: 0.625rem;
   scale: 0.9;
   background: rgba($color: #000000, $alpha: 0.05);

src/app/proposals/proposal-table/proposal-table.component.html

@@ -7,7 +7,10 @@
   [dataSource]="dataSource"
   [pagination]="pagination"
   [rowSelectionMode]="rowSelectionMode"
-  [showGlobalTextSearch]="showGlobalTextSearch"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  (globalTextSearchChange)="onTextSearchChange($event)"
+  (globalTextSearchApply)="onTextSearchAction()"
   [localization]="localization"
   (paginationChange)="onPageChange($event)"
   (onRowEvent)="onRowClick($event)"

src/app/proposals/proposal-table/proposal-table.component.ts

@@ -1,4 +1,11 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import {
+  Component,
+  Input,
+  Output,
+  OnDestroy,
+  OnInit,
+  EventEmitter,
+} from "@angular/core";
 import { BehaviorSubject, combineLatestWith, filter, Subscription } from "rxjs";
 import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model";
 import {
@@ -33,7 +40,7 @@ import { actionMenu } from "shared/modules/dynamic-material-table/utilizes/defau
 import { TableConfigService } from "shared/services/table-config.service";
 import { AppConfigService } from "app-config.service";
 import { TableColumn } from "state-management/models";
-
+import { addProposalFilterAction } from "state-management/actions/proposals.actions";
 @Component({
   selector: "proposal-table",
   templateUrl: "./proposal-table.component.html",
@@ -94,6 +101,9 @@ export class ProposalTableComponent implements OnInit, OnDestroy {
   @Input()
   defaultPageSize: number;
 
+  @Output() textSearch = new EventEmitter<string>();
+
+  globalTextSearch = "";
   constructor(
     private appConfigService: AppConfigService,
     private store: Store,
@@ -298,6 +308,39 @@ export class ProposalTableComponent implements OnInit, OnDestroy {
     }
   }
 
+  onTextSearchChange(term: string) {
+    this.globalTextSearch = term;
+  }
+
+  getTextSearchParam() {
+    const { queryParams } = this.route.snapshot;
+    const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
+
+    return searchQuery.text;
+  }
+
+  onTextSearchAction() {
+    const { queryParams } = this.route.snapshot;
+    const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
+    this.router.navigate([], {
+      queryParams: {
+        searchQuery: JSON.stringify({
+          ...searchQuery,
+          text: this.globalTextSearch || undefined,
+        }),
+        pageIndex: 0,
+      },
+      queryParamsHandling: "merge",
+    });
+    this.store.dispatch(
+      addProposalFilterAction({
+        key: "text",
+        value: this.globalTextSearch || undefined,
+        filterType: "text",
+      }),
+    );
+  }
+
   ngOnDestroy() {
     this.subscriptions.forEach((sub) => {
       sub.unsubscribe();

src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts

@@ -72,7 +72,7 @@ export class TableCoreDirective<T extends TableRow> {
   @Input() showGlobalTextSearch = true;
   @Input() localization: string;
   @Input() globalTextSearch = "";
-  @Input() globalTextSearchPlaceholder = "Search";
+  @Input() globalTextSearchPlaceholder = "Proposal id, Title, Abstract, Name...";
   @Input() selectionIds = [];
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() onTableEvent: EventEmitter<ITableEvent> = new EventEmitter();
@@ -85,6 +85,7 @@ export class TableCoreDirective<T extends TableRow> {
   @Output() paginationChange: EventEmitter<TablePagination> =
     new EventEmitter();
   @Output() globalTextSearchChange: EventEmitter<string> = new EventEmitter();
+  @Output() globalTextSearchApply: EventEmitter<string> = new EventEmitter();
 
   /*************************************** Expand Row *********************************/
   expandedElement: TableRow | null;