From 406f7b1fdd025b4e87273c2867ea6fdbc16bab3b Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 18 May 2023 13:42:15 +0300 Subject: [PATCH] RED-6412 - INC15516657: Performance issues --- .../filter-card/filter-card.component.ts | 44 ++++++++++++++++--- src/lib/filtering/filter-utils.ts | 23 ++++++++++ .../popup-filter/popup-filter.component.html | 1 + .../popup-filter/popup-filter.component.ts | 1 + 4 files changed, 62 insertions(+), 7 deletions(-) diff --git a/src/lib/filtering/filter-card/filter-card.component.ts b/src/lib/filtering/filter-card/filter-card.component.ts index 7927f4b..94d7030 100644 --- a/src/lib/filtering/filter-card/filter-card.component.ts +++ b/src/lib/filtering/filter-card/filter-card.component.ts @@ -3,7 +3,7 @@ import { combineLatest, Observable, pipe } from 'rxjs'; import { IFilter } from '../models/filter.model'; import { INestedFilter } from '../models/nested-filter.model'; import { IFilterGroup } from '../models/filter-group.model'; -import { handleCheckedValue } from '../filter-utils'; +import { extractFilterValues, handleCheckedValue } from '../filter-utils'; import { FilterService } from '../filter.service'; import { SearchService } from '../../search'; import { Filter } from '../models/filter'; @@ -18,6 +18,17 @@ const atLeastOneIsExpandable = pipe( shareDistinctLast(), ); +export interface LocalStorageFilter { + id: string; + checked: boolean; + children?: LocalStorageFilter[] | null; +} + +export interface LocalStorageFilters { + primaryFilters: LocalStorageFilter[] | null; + secondaryFilters: LocalStorageFilter[] | null; +} + @Component({ selector: 'iqser-filter-card [primaryFiltersSlug]', templateUrl: './filter-card.component.html', @@ -36,6 +47,7 @@ const atLeastOneIsExpandable = pipe( }) export class FilterCardComponent implements OnInit { @Input() primaryFiltersSlug!: string; + @Input() fileId?: string; @Input() actionsTemplate?: TemplateRef; @Input() secondaryFiltersSlug = ''; @Input() primaryFiltersLabel: string = _('filter-menu.filter-types'); @@ -54,7 +66,7 @@ export class FilterCardComponent implements OnInit { private readonly _elementRef: ElementRef, ) {} - private get _primaryFilters$(): Observable { + get #primaryFilters$(): Observable { return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe( map(([group]) => this.searchService.searchIn(group?.filters ?? [])), shareLast(), @@ -64,7 +76,7 @@ export class FilterCardComponent implements OnInit { ngOnInit() { this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareLast()); this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareLast()); - this.primaryFilters$ = this._primaryFilters$; + this.primaryFilters$ = this.#primaryFilters$; this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$); this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$); @@ -96,16 +108,17 @@ export class FilterCardComponent implements OnInit { } this.filterService.refresh(); + this.#updateFiltersInLocalStorage(); } activatePrimaryFilters(): void { - this._setFilters(this.primaryFiltersSlug, true); + this.#setFilters(this.primaryFiltersSlug, true); } deactivateFilters(exceptedFilterId?: string): void { - this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId); + this.#setFilters(this.primaryFiltersSlug, false, exceptedFilterId); if (this.secondaryFiltersSlug) { - this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId); + this.#setFilters(this.secondaryFiltersSlug, false, exceptedFilterId); } } @@ -116,7 +129,7 @@ export class FilterCardComponent implements OnInit { this.filterService.refresh(); } - private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) { + #setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) { const filters = this.filterService.getGroup(filterGroup)?.filters; filters?.forEach(f => { if (f.id !== exceptedFilterId) { @@ -130,4 +143,21 @@ export class FilterCardComponent implements OnInit { }); this.filterService.refresh(); } + + #updateFiltersInLocalStorage(): void { + if (this.fileId) { + const primaryFilters = this.filterService.getGroup('primaryFilters'); + const secondaryFilters = this.filterService.getGroup('secondaryFilters'); + + const filters: LocalStorageFilters = { + primaryFilters: extractFilterValues(primaryFilters?.filters), + secondaryFilters: extractFilterValues(secondaryFilters?.filters), + }; + + const workloadFiltersString = localStorage.getItem('workload-filters') ?? '{}'; + const workloadFilters = JSON.parse(workloadFiltersString); + workloadFilters[this.fileId] = filters; + localStorage.setItem('workload-filters', JSON.stringify(workloadFilters)); + } + } } diff --git a/src/lib/filtering/filter-utils.ts b/src/lib/filtering/filter-utils.ts index 0353ccf..cf9abe7 100644 --- a/src/lib/filtering/filter-utils.ts +++ b/src/lib/filtering/filter-utils.ts @@ -4,6 +4,7 @@ import { IFilterGroup } from './models/filter-group.model'; import { IFilter } from './models/filter.model'; import { NestedFilter } from './models/nested-filter'; import { Id, IListable } from '../listing'; +import { LocalStorageFilter } from './filter-card/filter-card.component'; function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) { if (!oldFilters || !newFilters) { @@ -102,3 +103,25 @@ export function flatChildren(filters: INestedFilter[]): IFilter[] { export function toFlatFilters(groups: IFilterGroup[], condition = (filters: IFilter[]) => filters): IFilter[] { return groups.reduce((acc: IFilter[], f) => [...acc, ...condition(f.filters), ...condition(flatChildren(f.filters))], []); } + +export function extractFilterValues(filters: INestedFilter[] | undefined): LocalStorageFilter[] | null { + const extractedValues: LocalStorageFilter[] = []; + filters?.forEach(filter => { + extractedValues.push({ + id: filter.id, + checked: filter.checked ?? false, + children: extractFilterValues(filter.children), + }); + }); + return extractedValues.length ? extractedValues : null; +} + +export function copyLocalStorageFiltersValues(primaryFilters: INestedFilter[], localStorageFilters: LocalStorageFilter[]) { + primaryFilters?.forEach(filter => { + const localStorageFilter = localStorageFilters.find(f => f.id === filter.id); + filter.checked = localStorageFilter?.checked; + if (filter.children && localStorageFilter?.children) { + copyLocalStorageFiltersValues(filter.children, localStorageFilter.children); + } + }); +} diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html index 7fc3e13..f03fd52 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.html +++ b/src/lib/filtering/popup-filter/popup-filter.component.html @@ -36,6 +36,7 @@ [primaryFiltersLabel]="primaryFiltersLabel" [primaryFiltersSlug]="primaryFiltersSlug" [secondaryFiltersSlug]="secondaryFiltersSlug" + [fileId]="fileId" > diff --git a/src/lib/filtering/popup-filter/popup-filter.component.ts b/src/lib/filtering/popup-filter/popup-filter.component.ts index f587751..f527107 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.ts +++ b/src/lib/filtering/popup-filter/popup-filter.component.ts @@ -14,6 +14,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; }) export class PopupFilterComponent implements OnInit { @Input() primaryFiltersSlug!: string; + @Input() fileId?: string; @Input() actionsTemplate?: TemplateRef; @Input() secondaryFiltersSlug = ''; @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');