From 6084657e2999850352b588cca1d39c588c38ec6f Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Wed, 12 Nov 2025 14:57:55 +0100 Subject: [PATCH 01/11] relocate and redesign search bar in dataset and proposal pages --- .../dashboard/dashboard.component.html | 85 +++++++++---------- .../dashboard/dashboard.component.scss | 16 ++-- .../dataset-table.component.html | 5 +- .../dataset-table/dataset-table.component.ts | 25 ++++++ .../datasets-filter.component.scss | 1 - .../proposal-dashboard.component.html | 1 - .../proposal-side-filter.component.scss | 2 +- .../proposal-table.component.html | 5 +- .../proposal-table.component.ts | 47 +++++++++- .../cores/table.core.directive.ts | 3 +- .../table/dynamic-mat-table.component.html | 80 +++++++++-------- .../table/dynamic-mat-table.component.scss | 58 +++++++++++++ .../table/dynamic-mat-table.component.ts | 11 +++ 13 files changed, 248 insertions(+), 91 deletions(-) diff --git a/src/app/datasets/dashboard/dashboard.component.html b/src/app/datasets/dashboard/dashboard.component.html index 446ec7c74..784758188 100644 --- a/src/app/datasets/dashboard/dashboard.component.html +++ b/src/app/datasets/dashboard/dashboard.component.html @@ -1,48 +1,47 @@ - - - - - -
-
- - - - - add_circle - Create Dataset - - +
+ + -
- -
- +
+
+ +
+
+ + + +
-
- - +
+ + + + + add_circle + Create Dataset + + +
+ +
+ +
+
+ - - - + (rowClick)="onRowClick($event)" + (pageChange)="onPageChange($event)" + > +
-
- - + + +
\ No newline at end of file diff --git a/src/app/datasets/dashboard/dashboard.component.scss b/src/app/datasets/dashboard/dashboard.component.scss index 934353d5d..0700672a9 100644 --- a/src/app/datasets/dashboard/dashboard.component.scss +++ b/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; } } diff --git a/src/app/datasets/dataset-table/dataset-table.component.html b/src/app/datasets/dataset-table/dataset-table.component.html index 8e82f6098..8a4c9ff2d 100644 --- a/src/app/datasets/dataset-table/dataset-table.component.html +++ b/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)" diff --git a/src/app/datasets/dataset-table/dataset-table.component.ts b/src/app/datasets/dataset-table/dataset-table.component.ts index 211db2d54..7b36dd3d3 100644 --- a/src/app/datasets/dataset-table/dataset-table.component.ts +++ b/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 = new Map(); @Output() rowClick = new EventEmitter(); + @Output() textSearch = new EventEmitter(); 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() { diff --git a/src/app/datasets/datasets-filter/datasets-filter.component.scss b/src/app/datasets/datasets-filter/datasets-filter.component.scss index 8369fb181..881dd3b4c 100644 --- a/src/app/datasets/datasets-filter/datasets-filter.component.scss +++ b/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%; diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html index 6cca82aa0..32b106386 100644 --- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html +++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html @@ -1,6 +1,5 @@ -
diff --git a/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss b/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss index f5bfeb877..649442028 100644 --- a/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss +++ b/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); diff --git a/src/app/proposals/proposal-table/proposal-table.component.html b/src/app/proposals/proposal-table/proposal-table.component.html index a3e11cfa9..842e7e15b 100644 --- a/src/app/proposals/proposal-table/proposal-table.component.html +++ b/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)" diff --git a/src/app/proposals/proposal-table/proposal-table.component.ts b/src/app/proposals/proposal-table/proposal-table.component.ts index d7e3b4166..c84f8fb60 100644 --- a/src/app/proposals/proposal-table/proposal-table.component.ts +++ b/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(); + + 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(); diff --git a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts index ca26e4dea..9f3a9c067 100644 --- a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts +++ b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts @@ -72,7 +72,7 @@ export class TableCoreDirective { @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 = new EventEmitter(); @@ -85,6 +85,7 @@ export class TableCoreDirective { @Output() paginationChange: EventEmitter = new EventEmitter(); @Output() globalTextSearchChange: EventEmitter = new EventEmitter(); + @Output() globalTextSearchApply: EventEmitter = new EventEmitter(); /*************************************** Expand Row *********************************/ expandedElement: TableRow | null; diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html index efea0e886..18b1e11ff 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html @@ -1,12 +1,48 @@ - - +
+
+ + search + + + + +
+ + +
- - - -
- - search - - -
- - - @@ -353,14 +371,6 @@ class="detail-row" > - - - - } } + onGlobalTextSearchApply() { + this.globalTextSearchApply.emit(this.globalTextSearch); + } + + onGlobalTextSearchClear() { + this.globalTextSearch = ""; + this.globalSearchUpdate.next(""); + this.globalTextSearchChange.emit(""); + this.globalTextSearchApply.emit(""); + } + autoHeight() { const minHeight = this.headerHeight + From 7cceea2679e4f6611b5dc9f2804ceeb5b0e7ea16 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Wed, 12 Nov 2025 15:36:26 +0100 Subject: [PATCH 02/11] eslint fix and removed unused css --- .../cores/table.core.directive.ts | 3 +- .../table/dynamic-mat-table.component.scss | 37 ------------------- 2 files changed, 2 insertions(+), 38 deletions(-) diff --git a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts index 9f3a9c067..9fc60c566 100644 --- a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts +++ b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts @@ -72,7 +72,8 @@ export class TableCoreDirective { @Input() showGlobalTextSearch = true; @Input() localization: string; @Input() globalTextSearch = ""; - @Input() globalTextSearchPlaceholder = "Proposal id, Title, Abstract, Name..."; + @Input() globalTextSearchPlaceholder = + "Proposal id, Title, Abstract, Name..."; @Input() selectionIds = []; // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onTableEvent: EventEmitter = new EventEmitter(); diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss index 729e4c28e..b383135b9 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss @@ -153,17 +153,6 @@ cdk-virtual-scroll-viewport { } } -// table action menu -.table-global-search { - max-width: 300px; - min-width: initial; - padding: 0 !important; - background-color: inherit; - - .global-search-wrapper { - width: 100%; - } -} .table-menu { max-width: 42px; @@ -266,32 +255,6 @@ cdk-virtual-scroll-viewport { margin-right: -20px; } -/* Custom Tooltip */ -.tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; -} - -.tooltip .tooltiptext { - visibility: hidden; - min-width: 120px; - background-color: #e91e63; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 0; - position: absolute; - z-index: 1; - left: 0; - top: 43px; - margin-left: -86%; -} - -.tooltip:hover .tooltiptext { - visibility: visible; - white-space: pre; -} ::ng-deep .mat-mdc-footer-cell { flex-direction: column !important; } From 7ee3fa85b06432a89972057bc190b523b4a60665 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Wed, 19 Nov 2025 13:15:06 +0100 Subject: [PATCH 03/11] increased the maximum budget for single scss file --- angular.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular.json b/angular.json index faf13bc3a..eb6164b91 100644 --- a/angular.json +++ b/angular.json @@ -61,7 +61,7 @@ { "type": "anyComponentStyle", "maximumWarning": "8kb", - "maximumError": "8kb" + "maximumError": "10kb" } ], "fileReplacements": [ From 19890d75080cc05227c29c1ac414e29f3f4d7a51 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Wed, 19 Nov 2025 13:42:24 +0100 Subject: [PATCH 04/11] fixed cypress tests --- .../table/dynamic-mat-table.component.html | 12 ++++++++++-- .../full-text-search-bar.component.html | 3 --- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html index 18b1e11ff..8aa19325c 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html @@ -1,7 +1,12 @@ -
+
- search + search @@ -28,6 +35,7 @@ (click)="onGlobalTextSearchApply()" type="button" matTooltip="Apply search" + data-cy="search-button" > search diff --git a/src/app/shared/modules/full-text-search-bar/full-text-search-bar.component.html b/src/app/shared/modules/full-text-search-bar/full-text-search-bar.component.html index 90ccac851..4fdd23fa5 100644 --- a/src/app/shared/modules/full-text-search-bar/full-text-search-bar.component.html +++ b/src/app/shared/modules/full-text-search-bar/full-text-search-bar.component.html @@ -9,7 +9,6 @@ undo @@ -33,7 +31,6 @@ mat-raised-button color="primary" class="full-text-search-button" - data-cy="search-button" (click)="onSearch()" > search From bc6464ff82c34c25b6166f03b3660bbc696d9b25 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Wed, 19 Nov 2025 15:21:16 +0100 Subject: [PATCH 05/11] fixed a race condition bug and some other e2e tests --- cypress/e2e/datasets/datasets-general.cy.js | 4 ++-- cypress/e2e/other/elastic-search.cy.js | 3 +++ .../table/dynamic-mat-table.component.ts | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/datasets/datasets-general.cy.js b/cypress/e2e/datasets/datasets-general.cy.js index 87e683bc6..0b393380e 100644 --- a/cypress/e2e/datasets/datasets-general.cy.js +++ b/cypress/e2e/datasets/datasets-general.cy.js @@ -280,7 +280,7 @@ describe("Datasets general", () => { cy.get("mat-slide-toggle").click(); - cy.get('[data-cy="search-button"]').click(); + cy.get('[data-cy="filter-search-button"]').click(); cy.get(".condition-panel").first().click(); @@ -458,7 +458,7 @@ describe("Datasets general", () => { cy.get("input[matInput]").eq(0).clear().type("3.1e4"); }); - cy.get('[data-cy="search-button"]').click(); + cy.get('[data-cy="filter-search-button"]').click(); cy.get(".dataset-table mat-table").should("exist"); diff --git a/cypress/e2e/other/elastic-search.cy.js b/cypress/e2e/other/elastic-search.cy.js index e34213787..062eb4925 100644 --- a/cypress/e2e/other/elastic-search.cy.js +++ b/cypress/e2e/other/elastic-search.cy.js @@ -29,6 +29,7 @@ describe("Elastic search", () => { cy.finishedLoading(); + cy.get('[data-cy="text-search"]').type(searchQuery1); cy.get('[data-cy="search-clear-button"]').click(); cy.get('[data-cy="text-search"]').type(searchQuery1); @@ -44,6 +45,7 @@ describe("Elastic search", () => { cy.finishedLoading(); + cy.get('[data-cy="text-search"]').type(searchQuery2); cy.get('[data-cy="search-clear-button"]').click(); cy.get('[data-cy="text-search"]').type(searchQuery2); @@ -64,6 +66,7 @@ describe("Elastic search", () => { cy.finishedLoading(); + cy.get('[data-cy="text-search"]').type(searchQueryIrrelevant); cy.get('[data-cy="search-clear-button"]').click(); cy.get('[data-cy="text-search"]').type(searchQueryIrrelevant); diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts index 54dcdcb2e..9c848b299 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts @@ -853,6 +853,7 @@ export class DynamicMatTableComponent } onGlobalTextSearchApply() { + this.globalTextSearch_onChange(this.globalTextSearch); this.globalTextSearchApply.emit(this.globalTextSearch); } From 43495dad57b019462ad686b37461a4367ed9dbd9 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 11:37:00 +0100 Subject: [PATCH 06/11] showing correct placeholder text for dataset and proposal table while other tables has default text --- src/app/datasets/dataset-table/dataset-table.component.html | 1 + src/app/proposals/proposal-table/proposal-table.component.html | 1 + .../dynamic-material-table/cores/table.core.directive.ts | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/datasets/dataset-table/dataset-table.component.html b/src/app/datasets/dataset-table/dataset-table.component.html index 8a4c9ff2d..231f03845 100644 --- a/src/app/datasets/dataset-table/dataset-table.component.html +++ b/src/app/datasets/dataset-table/dataset-table.component.html @@ -11,6 +11,7 @@ [globalTextSearch]="globalTextSearch" (globalTextSearchChange)="onTextSearchChange($event)" (globalTextSearchApply)="onTextSearchAction()" + [globalTextSearchPlaceholder]="'Dataset name, Run number...'" [localization]="localization" [selectionIds]="selectionIds" (paginationChange)="onPageChange($event)" diff --git a/src/app/proposals/proposal-table/proposal-table.component.html b/src/app/proposals/proposal-table/proposal-table.component.html index 842e7e15b..b0f6d6046 100644 --- a/src/app/proposals/proposal-table/proposal-table.component.html +++ b/src/app/proposals/proposal-table/proposal-table.component.html @@ -11,6 +11,7 @@ [globalTextSearch]="globalTextSearch" (globalTextSearchChange)="onTextSearchChange($event)" (globalTextSearchApply)="onTextSearchAction()" + [globalTextSearchPlaceholder]="'Proposal id, Title, Abstract...'" [localization]="localization" (paginationChange)="onPageChange($event)" (onRowEvent)="onRowClick($event)" diff --git a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts index 9fc60c566..53fb2f854 100644 --- a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts +++ b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts @@ -73,7 +73,7 @@ export class TableCoreDirective { @Input() localization: string; @Input() globalTextSearch = ""; @Input() globalTextSearchPlaceholder = - "Proposal id, Title, Abstract, Name..."; + "Search..."; @Input() selectionIds = []; // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onTableEvent: EventEmitter = new EventEmitter(); From d4271a92adb49b351a91a080e9d0cc92902b037d Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 11:59:35 +0100 Subject: [PATCH 07/11] removed empty space before search box in proposals table when side filter is expanded --- .../proposal-dashboard/proposal-dashboard.component.html | 5 ++++- .../proposal-dashboard/proposal-dashboard.component.ts | 5 +++++ .../side-bar-filter/proposal-side-filter.component.ts | 2 ++ .../proposals/proposal-table/proposal-table.component.html | 1 + .../proposals/proposal-table/proposal-table.component.ts | 6 ++++++ .../table/dynamic-mat-table.component.html | 2 +- .../table/dynamic-mat-table.component.ts | 1 + 7 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html index 32b106386..95f50d560 100644 --- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html +++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html @@ -4,13 +4,16 @@
- +
diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts index f7b72c512..289919e41 100644 --- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts +++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts @@ -21,6 +21,7 @@ export class ProposalDashboardComponent implements OnInit, OnDestroy { dataSource$ = new BehaviorSubject([]); params$ = this.route.queryParams; defaultPageSize = 10; + sideFilterCollapsed = false; constructor( private store: Store, @@ -55,6 +56,10 @@ export class ProposalDashboardComponent implements OnInit, OnDestroy { ); } + onSideFilterCollapsedChange(collapsed: boolean) { + this.sideFilterCollapsed = collapsed; + } + ngOnDestroy() { this.subscriptions.forEach((sub) => { sub.unsubscribe(); diff --git a/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts b/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts index ca209c10b..dd38543a0 100644 --- a/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts +++ b/src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts @@ -32,6 +32,7 @@ export class ProposalSideFilterComponent implements OnInit { appConfig = this.appConfigService.getConfig(); activeFilters: Record = {}; collapsed = false; + @Output() collapsedChange = new EventEmitter(); filterLists: FilterConfig[] = []; @@ -235,6 +236,7 @@ export class ProposalSideFilterComponent implements OnInit { toggleCollapse() { this.collapsed = !this.collapsed; + this.collapsedChange.emit(this.collapsed); } reset() { diff --git a/src/app/proposals/proposal-table/proposal-table.component.html b/src/app/proposals/proposal-table/proposal-table.component.html index b0f6d6046..4aad97ea2 100644 --- a/src/app/proposals/proposal-table/proposal-table.component.html +++ b/src/app/proposals/proposal-table/proposal-table.component.html @@ -13,6 +13,7 @@ (globalTextSearchApply)="onTextSearchAction()" [globalTextSearchPlaceholder]="'Proposal id, Title, Abstract...'" [localization]="localization" + [sideFilterCollapsed] = "sideFilterCollapsed" (paginationChange)="onPageChange($event)" (onRowEvent)="onRowClick($event)" (settingChange)="onSettingChange($event)" diff --git a/src/app/proposals/proposal-table/proposal-table.component.ts b/src/app/proposals/proposal-table/proposal-table.component.ts index c84f8fb60..82f76339e 100644 --- a/src/app/proposals/proposal-table/proposal-table.component.ts +++ b/src/app/proposals/proposal-table/proposal-table.component.ts @@ -95,6 +95,8 @@ export class ProposalTableComponent implements OnInit, OnDestroy { datasets: OutputDatasetObsoleteDto[] = []; + @Input() sideFilterCollapsed = false; + @Input() dataSource!: BehaviorSubject; @@ -341,6 +343,10 @@ export class ProposalTableComponent implements OnInit, OnDestroy { ); } + onSideFilterCollapsedChange(collapsed: boolean) { + this.sideFilterCollapsed = collapsed; + } + ngOnDestroy() { this.subscriptions.forEach((sub) => { sub.unsubscribe(); diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html index 8aa19325c..d0a1f1d1f 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.html @@ -1,6 +1,6 @@
diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts index 9c848b299..9c5063600 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts @@ -302,6 +302,7 @@ export class DynamicMatTableComponent @Input() emptyMessage = "No data available"; @Input() emptyIcon = "info"; + @Input() sideFilterCollapsed = false; constructor( public dialog: MatDialog, From 3ca18f39db430627c32d2bd7e56462d3fe68799c Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 12:16:14 +0100 Subject: [PATCH 08/11] limit search bar width and prevent pagination wrapping --- .../table/dynamic-mat-table.component.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss index b383135b9..ee7aab8f0 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss @@ -327,6 +327,7 @@ cdk-virtual-scroll-viewport { align-items: center; gap: 1rem; margin: 1rem 0; + flex-wrap: nowrap; &.with-side-filter { margin-left: 3rem; @@ -335,7 +336,8 @@ cdk-virtual-scroll-viewport { .global-search-wrapper { flex: 1 1 auto; width: 100%; - max-width: 1000px; + max-width: 500px; + //min-width: 0; mat-form-field { width: 100%; @@ -348,13 +350,11 @@ cdk-virtual-scroll-viewport { padding: 0 8px; &:hover { - box-shadow: 0 1px 6px var(--theme-hover-darker); border-color: var(--theme-primary-default); } } ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--focused { - box-shadow: 0 1px 6px var(--theme-hover-darker); border-color: var(--theme-primary-default); } @@ -377,5 +377,6 @@ cdk-virtual-scroll-viewport { mat-paginator { flex: 1 1 auto; white-space: nowrap; + min-width: fit-content; } } From 7b69e1b802b870a999b13fef20ace08d668c633f Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 12:45:41 +0100 Subject: [PATCH 09/11] add padding to breadcrumb to show bottom line --- src/app/shared/modules/breadcrumb/breadcrumb.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/shared/modules/breadcrumb/breadcrumb.component.scss b/src/app/shared/modules/breadcrumb/breadcrumb.component.scss index 6868502e7..4afe7c4f9 100644 --- a/src/app/shared/modules/breadcrumb/breadcrumb.component.scss +++ b/src/app/shared/modules/breadcrumb/breadcrumb.component.scss @@ -1,6 +1,6 @@ .breadcrumb { margin: 0.1rem 0; - padding-left: 1rem; + padding: 0.5rem 0 0.5rem 1rem; .container { border-top: 1px solid; @@ -11,4 +11,4 @@ font-weight: bold; } } -} +} \ No newline at end of file From a28c0abb40c6aed5ab2452246ee74cc6c00a034d Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 12:48:23 +0100 Subject: [PATCH 10/11] eslint fix --- .../dynamic-material-table/cores/table.core.directive.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts index 53fb2f854..e7a57c6a1 100644 --- a/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts +++ b/src/app/shared/modules/dynamic-material-table/cores/table.core.directive.ts @@ -72,8 +72,7 @@ export class TableCoreDirective { @Input() showGlobalTextSearch = true; @Input() localization: string; @Input() globalTextSearch = ""; - @Input() globalTextSearchPlaceholder = - "Search..."; + @Input() globalTextSearchPlaceholder = "Search..."; @Input() selectionIds = []; // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onTableEvent: EventEmitter = new EventEmitter(); From 78f66bcab5664f7d7929c9ddd0d2f0be7795b9c6 Mon Sep 17 00:00:00 2001 From: Abdi Abdulle Date: Mon, 24 Nov 2025 12:53:05 +0100 Subject: [PATCH 11/11] removed commented out code --- .../table/dynamic-mat-table.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss index 0f652f757..3a4b8e799 100644 --- a/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss +++ b/src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.scss @@ -360,7 +360,6 @@ cdk-virtual-scroll-viewport { flex: 1 1 auto; width: 100%; max-width: 500px; - //min-width: 0; mat-form-field { width: 100%;