From 204cdc7787a08462bcc10a0bf50c8e4afe5fa373 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Mon, 12 Jul 2021 00:29:05 +0300 Subject: [PATCH] update filter, sorting and search services --- .../default-colors-screen.component.ts | 4 +-- .../dictionary-listing-screen.component.ts | 4 +-- ...sier-templates-listing-screen.component.ts | 4 +-- ...ile-attributes-listing-screen.component.ts | 4 +-- .../screens/trash/trash-screen.component.ts | 10 +++++-- .../dossier-listing-screen.component.ts | 11 +++---- .../dossier-overview-screen.component.ts | 4 +-- .../modules/shared/services/filter.service.ts | 29 ++++++++++++++----- .../shared/services/screen-state.service.ts | 12 ++++---- .../modules/shared/services/search.service.ts | 10 +++---- .../src/app/services/sorting.service.ts | 6 ++-- 11 files changed, 59 insertions(+), 39 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts index 72fea0328..a6ecb91dc 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts @@ -9,7 +9,7 @@ import { LoadingService } from '../../../../services/loading.service'; import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '../../../../services/sorting.service'; @Component({ templateUrl: './default-colors-screen.component.html', @@ -35,7 +35,7 @@ export class DefaultColorsScreenComponent protected readonly _injector: Injector ) { super(_injector); - this._sortingService.screenName = 'default-colors'; + this._sortingService.setScreenName(ScreenNames.DEFAULT_COLORS); _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId); } diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts index 8a6d24c09..1c22df244 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts @@ -14,7 +14,7 @@ import { LoadingService } from '../../../../services/loading.service'; import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '../../../../services/sorting.service'; const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({ value: dict.entries ? dict.entries.length : 0, @@ -48,7 +48,7 @@ export class DictionaryListingScreenComponent ) { super(_injector); _loadingService.start(); - this._sortingService.screenName = 'dictionary-listing'; + this._sortingService.setScreenName(ScreenNames.DOSSIER_LISTING); _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId); } diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts index d30f94d17..1b0a67993 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts @@ -10,7 +10,7 @@ import { DossierTemplateControllerService } from '@redaction/red-ui-http'; import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '../../../../services/sorting.service'; @Component({ templateUrl: './dossier-templates-listing-screen.component.html', @@ -34,7 +34,7 @@ export class DossierTemplatesListingScreenComponent readonly userPreferenceService: UserPreferenceService ) { super(_injector); - this._sortingService.screenName = 'dossier-templates-listing'; + this._sortingService.setScreenName(ScreenNames.DOSSIER_TEMPLATES_LISTING); } ngOnInit(): void { diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index 6f1c32839..5b43c6f99 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -9,7 +9,7 @@ import { LoadingService } from '../../../../services/loading.service'; import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '../../../../services/sorting.service'; @Component({ templateUrl: './file-attributes-listing-screen.component.html', @@ -33,7 +33,7 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent implemen private readonly _translateService: TranslateService ) { super(_injector); - this._sortingService.screenName = 'dossier-listing'; + this._sortingService.setScreenName(ScreenNames.DOSSIER_LISTING); + this._searchService.setSearchKey('dossierName'); + this._screenStateService.setSelectionKey('dossierId'); } async ngOnInit(): Promise { this._loadingService.start(); + await this.loadDossierTemplatesData(); + this._filterService.setFilters(this._filters); + this._filterService.filterEntities(); + this._loadingService.stop(); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts index ad1d502fb..d4aefdd9c 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts @@ -83,14 +83,13 @@ export class DossierListingScreenComponent protected readonly _injector: Injector ) { super(_injector); - this._sortingService.screenName = ScreenNames.DOSSIER_LISTING; + this._sortingService.setScreenName(ScreenNames.DOSSIER_LISTING); + this._searchService.setSearchKey('name'); this._appStateService.reset(); - this._searchService.searchKey = 'name'; this._loadEntitiesFromState(); } get activeDossiersCount(): number { - console.log('active dossiers'); return this._screenStateService.entities.filter( p => p.dossier.status === Dossier.StatusEnum.ACTIVE ).length; @@ -216,9 +215,11 @@ export class DossierListingScreenComponent private _calculateData() { this._computeAllFilters(); - this._filterService.filters = this._filters; - this._filterService.preFilter = () => this._preFilter(); + + this._filterService.setFilters(this._filters); + this._filterService.setPreFilters(() => this._preFilter()); this._filterService.filterEntities(); + this.dossiersChartData = [ { value: this.activeDossiersCount, color: 'ACTIVE', label: 'active' }, { value: this.inactiveDossiersCount, color: 'DELETED', label: 'archived' } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts index a1c2d01aa..d64614254 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts @@ -43,7 +43,7 @@ import { ActionConfig } from '@shared/components/page-header/models/action-confi import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '../../../../services/sorting.service'; @Component({ templateUrl: './dossier-overview-screen.component.html', @@ -98,7 +98,7 @@ export class DossierOverviewScreenComponent protected readonly _injector: Injector ) { super(_injector); - this._sortingService.screenName = 'dossier-overview'; + this._sortingService.setScreenName(ScreenNames.DOSSIER_OVERVIEW); this._loadEntitiesFromState(); } diff --git a/apps/red-ui/src/app/modules/shared/services/filter.service.ts b/apps/red-ui/src/app/modules/shared/services/filter.service.ts index ef99f938a..e8439ef09 100644 --- a/apps/red-ui/src/app/modules/shared/services/filter.service.ts +++ b/apps/red-ui/src/app/modules/shared/services/filter.service.ts @@ -8,8 +8,8 @@ import { SearchService } from '@shared/services/search.service'; @Injectable() export class FilterService { showResetFilters = false; - preFilter: () => void; - filters: FilterWrapper[]; + _preFilter: () => void; + _filters: FilterWrapper[]; constructor( private readonly _screenStateService: ScreenStateService, @@ -17,8 +17,21 @@ export class FilterService { private readonly _changeDetector: ChangeDetectorRef ) {} + setFilters(value: FilterWrapper[]) { + this._filters = value; + } + + setPreFilters(value: () => void) { + this._preFilter = value; + } + + get filters(): FilterWrapper[] { + if (this._filters === undefined || this._filters === null) throw new Error('Unset filters'); + + return this._filters; + } + filtersChanged(filters?: { [key: string]: FilterModel[] } | FilterModel[]): void { - console.log(filters); if (filters instanceof Array) this.showResetFilters = !!filters.find(f => f.checked); else for (const key of Object.keys(filters ?? {})) { @@ -31,16 +44,16 @@ export class FilterService { } filterEntities(): void { - if (this.preFilter) this.preFilter(); - this._screenStateService.setFilteredEntities( - getFilteredEntities(this._screenStateService.entities, this.filters) - ); + if (this._preFilter) this._preFilter(); + + const filtered = getFilteredEntities(this._screenStateService.entities, this.filters); + this._screenStateService.setFilteredEntities(filtered); this._searchService.executeSearchImmediately(); + this._changeDetector.detectChanges(); } reset(): void { - // this._quickFilters.deactivateFilters(); this.showResetFilters = false; this.filtersChanged(); } diff --git a/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts b/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts index 8c7965292..70ea4382b 100644 --- a/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts +++ b/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts @@ -8,7 +8,7 @@ export class ScreenStateService { displayedEntities$ = new BehaviorSubject([]); selectedEntitiesIds: string[] = []; - private _selectionKey: string; + private _setSelectionKey: string; get entities(): T[] { return Object.values(this.entities$.getValue()); } @@ -40,8 +40,8 @@ export class ScreenStateService { this.displayedEntities$.next(newEntities); } - set selectionKey(value: string) { - this._selectionKey = value; + setSelectionKey(value: string) { + this._setSelectionKey = value; } get areAllEntitiesSelected() { @@ -79,7 +79,7 @@ export class ScreenStateService { } updateSelection() { - if (this._selectionKey) { + if (this._setSelectionKey) { this.selectedEntitiesIds = this.displayedEntities .map(entity => entity[this._getSelectionKey]) .filter(id => this.selectedEntitiesIds.includes(id)); @@ -94,8 +94,8 @@ export class ScreenStateService { } private get _getSelectionKey(): string { - if (!this._selectionKey) throw new Error('Not implemented'); + if (!this._setSelectionKey) throw new Error('Not implemented'); - return this._selectionKey; + return this._setSelectionKey; } } diff --git a/apps/red-ui/src/app/modules/shared/services/search.service.ts b/apps/red-ui/src/app/modules/shared/services/search.service.ts index f2e4e94c2..4c75ebc54 100644 --- a/apps/red-ui/src/app/modules/shared/services/search.service.ts +++ b/apps/red-ui/src/app/modules/shared/services/search.service.ts @@ -6,7 +6,7 @@ import { FormBuilder } from '@angular/forms'; @Injectable() export class SearchService { private _searchValue = ''; - private _searchKey: string; + private _setSearchKey: string; readonly searchForm = this._formBuilder.group({ query: [''] @@ -36,8 +36,8 @@ export class SearchService { this._screenStateService.updateSelection(); } - set searchKey(value: string) { - this._searchKey = value; + setSearchKey(value: string) { + this._setSearchKey = value; } get searchValue(): string { @@ -49,9 +49,9 @@ export class SearchService { } private get _getSearchKey(): string { - if (!this._searchKey) throw new Error('Not implemented'); + if (!this._setSearchKey) throw new Error('Not implemented'); - return this._searchKey; + return this._setSearchKey; } protected _searchField(entity: T): string { diff --git a/apps/red-ui/src/app/services/sorting.service.ts b/apps/red-ui/src/app/services/sorting.service.ts index 9ce7f18cb..b2a07b5db 100644 --- a/apps/red-ui/src/app/services/sorting.service.ts +++ b/apps/red-ui/src/app/services/sorting.service.ts @@ -25,7 +25,7 @@ export enum ScreenNames { DOSSIER_LISTING = 'dossier-listing', DOSSIER_OVERVIEW = 'dossier-overview', DICTIONARY_LISTING = 'dictionary-listing', - DICTIONARY_TEMPLATES_LISTING = 'dossier-templates-listing', + DOSSIER_TEMPLATES_LISTING = 'dossier-templates-listing', DEFAULT_COLORS = 'default-colors', FILE_ATTRIBUTES_LISTING = 'file-attributes-listing', DOSSIER_ATTRIBUTES_LISTING = 'dossier-attributes-listing' @@ -38,13 +38,13 @@ export class SortingService { [ScreenNames.DOSSIER_LISTING]: { column: 'dossier.dossierName', order: SortingOrders.ASC }, [ScreenNames.DOSSIER_OVERVIEW]: { column: 'filename', order: SortingOrders.ASC }, [ScreenNames.DICTIONARY_LISTING]: { column: 'label', order: SortingOrders.ASC }, - [ScreenNames.DICTIONARY_TEMPLATES_LISTING]: { column: 'name', order: SortingOrders.ASC }, + [ScreenNames.DOSSIER_TEMPLATES_LISTING]: { column: 'name', order: SortingOrders.ASC }, [ScreenNames.DEFAULT_COLORS]: { column: 'key', order: SortingOrders.ASC }, [ScreenNames.FILE_ATTRIBUTES_LISTING]: { column: 'label', order: SortingOrders.ASC }, [ScreenNames.DOSSIER_ATTRIBUTES_LISTING]: { column: 'label', order: 'asc' } }; - set screenName(value: string) { + setScreenName(value: string) { this._currentScreenName = value; }