From bb53a1a6dc4f1a39a5c216eaa3bf543848dfa9ca Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Wed, 14 Jul 2021 15:30:06 +0300 Subject: [PATCH] change base listing component --- .../active-fields-listing.component.html | 26 +-- .../active-fields-listing.component.ts | 26 +-- ...ttributes-csv-import-dialog.component.html | 4 +- ...-attributes-csv-import-dialog.component.ts | 15 +- .../default-colors-screen.component.html | 9 +- .../default-colors-screen.component.ts | 12 +- .../dictionary-listing-screen.component.ts | 5 +- ...sier-templates-listing-screen.component.ts | 4 +- ...e-attributes-listing-screen.component.html | 27 ++- ...ile-attributes-listing-screen.component.ts | 39 ++-- .../screens/trash/trash-screen.component.html | 8 +- .../screens/trash/trash-screen.component.scss | 2 +- .../screens/trash/trash-screen.component.ts | 12 +- .../user-listing-screen.component.ts | 4 +- .../dossier-listing-screen.component.ts | 4 +- .../dossier-overview-screen.component.ts | 4 +- .../shared/base/base-listing.component.ts | 174 ++++-------------- .../shared/base/new-base-listing.component.ts | 83 --------- 18 files changed, 147 insertions(+), 311 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/shared/base/new-base-listing.component.ts diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html index f97c75234..b58783552 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html @@ -3,7 +3,7 @@ @@ -13,22 +13,20 @@ }} - + - + > - + >
@@ -92,7 +90,7 @@ @@ -102,7 +100,7 @@
@@ -127,23 +125,20 @@ icon="red:edit" tooltip="file-attributes-csv-import.action.edit-name" type="dark-bg" - > - + > - + > - + >
@@ -174,8 +169,7 @@ icon="red:trash" tooltip="file-attributes-csv-import.action.remove" type="dark-bg" - > - + >
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts index 6247c151d..e7935b5c6 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts @@ -7,13 +7,13 @@ import { Output, SimpleChanges } from '@angular/core'; -import { BaseListingComponent } from '@shared/base/base-listing.component'; import { Field } from '../file-attributes-csv-import-dialog.component'; import { FileAttributeConfig } 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 { BaseListingComponent } from '../../../../shared/base/base-listing.component'; @Component({ selector: 'redaction-active-fields-listing', @@ -22,8 +22,8 @@ import { SortingService } from '../../../../../services/sorting.service'; providers: [FilterService, SearchService, ScreenStateService, SortingService] }) export class ActiveFieldsListingComponent extends BaseListingComponent implements OnChanges { - @Input() allEntities: Field[]; - @Output() allEntitiesChange = new EventEmitter(); + @Input() entities: Field[]; + @Output() entitiesChange = new EventEmitter(); @Output() setHoveredColumn = new EventEmitter(); @Output() toggleFieldActive = new EventEmitter(); @@ -33,16 +33,16 @@ export class ActiveFieldsListingComponent extends BaseListingComponent im FileAttributeConfig.TypeEnum.DATE ]; - protected readonly _selectionKey = 'csvColumn'; - constructor(protected readonly _injector: Injector) { super(_injector); + this._screenStateService.setIdKey('csvColumn'); } ngOnChanges(changes: SimpleChanges): void { - if (changes.allEntities) { - this.displayedEntities = this.allEntities; - this._updateSelection(); + if (changes.entities) { + this._screenStateService.setEntities(this.entities); + this._screenStateService.setDisplayedEntities(this.entities); + this._screenStateService.updateSelection(); } } @@ -50,13 +50,15 @@ export class ActiveFieldsListingComponent extends BaseListingComponent im this.allEntities .filter(field => this.isSelected(field)) .forEach(field => (field.primaryAttribute = false)); - this.allEntities = [...this.allEntities.filter(field => !this.isSelected(field))]; - this.allEntitiesChange.emit(this.allEntities); - this.selectedEntitiesIds = []; + this._screenStateService.setEntities([ + ...this.allEntities.filter(field => !this.isSelected(field)) + ]); + this.entitiesChange.emit(this.allEntities); + this._screenStateService.setSelectedEntitiesIds([]); } setAttributeForSelection(attribute: string, value: any) { - for (const csvColumn of this.selectedEntitiesIds) { + for (const csvColumn of this._screenStateService.selectedEntitiesIds) { this.allEntities.find(f => f.csvColumn === csvColumn)[attribute] = value; } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html index 5e74a7b1c..71d54c5c2 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html @@ -119,7 +119,7 @@ (click)="toggleFieldActive(field)" (mouseenter)="setHoveredColumn(field.csvColumn)" (mouseleave)="setHoveredColumn()" - *ngFor="let field of displayedEntities" + *ngFor="let field of displayedEntities$ | async" class="csv-header-pill-wrapper" >
@@ -177,7 +177,7 @@
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index 62989ad87..72181f89b 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, Injector } from '@angular/core'; -import { AbstractControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { AppStateService } from '@state/app-state.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import * as Papa from 'papaparse'; @@ -10,13 +10,13 @@ import { } from '@redaction/red-ui-http'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; -import { BaseListingComponent } from '@shared/base/base-listing.component'; import { NotificationService, NotificationType } from '@services/notification.service'; import { TranslateService } from '@ngx-translate/core'; 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 { BaseListingComponent } from '../../../shared/base/base-listing.component'; export interface Field { id?: string; @@ -55,6 +55,7 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent private readonly _fileAttributesControllerService: FileAttributesControllerService, private readonly _translateService: TranslateService, private readonly _notificationService: NotificationService, + private readonly _formBuilder: FormBuilder, public dialogRef: MatDialogRef, protected readonly _injector: Injector, @Inject(MAT_DIALOG_DATA) @@ -102,10 +103,10 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent this.parseResult.meta.fields = Object.keys(this.parseResult.data[0]); } - this.allEntities = this.parseResult.meta.fields.map(field => - this._buildAttribute(field) + this._screenStateService.setEntities( + this.parseResult.meta.fields.map(field => this._buildAttribute(field)) ); - this.displayedEntities = [...this.allEntities]; + this._screenStateService.setDisplayedEntities(this.allEntities); this.activeFields = []; for (const entity of this.allEntities) { @@ -175,9 +176,9 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent } } return count; - } else { - return 0; } + + return 0; } isActive(field: Field): boolean { diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html index 65e70fe5a..a2c268aa8 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html @@ -24,7 +24,7 @@ {{ 'default-colors-screen.table-header.title' - | translate: { length: allEntities.length } + | translate: { length: (allEntities$ | async).length } }} @@ -51,7 +51,9 @@
@@ -77,8 +79,7 @@ icon="red:edit" tooltip="default-colors-screen.action.edit" type="dark-bg" - > - + >
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 a6ecb91dc..3efc174f2 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 @@ -4,12 +4,12 @@ import { Colors, DictionaryControllerService } from '@redaction/red-ui-http'; import { ActivatedRoute } from '@angular/router'; import { PermissionsService } from '@services/permissions.service'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { BaseListingComponent } from '@shared/base/base-listing.component'; 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 { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; @Component({ templateUrl: './default-colors-screen.component.html', @@ -64,10 +64,12 @@ export class DefaultColorsScreenComponent .getColors(this._appStateService.activeDossierTemplateId) .toPromise(); this._colorsObj = data; - this.allEntities = Object.keys(data).map(key => ({ - key, - value: data[key] - })); + this._screenStateService.setEntities( + Object.keys(data).map(key => ({ + key, + value: data[key] + })) + ); this._loadingService.stop(); } } 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 81728f154..eed797e3d 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 @@ -7,7 +7,6 @@ import { forkJoin, of } from 'rxjs'; import { PermissionsService } from '@services/permissions.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { BaseListingComponent } from '@shared/base/base-listing.component'; import { TypeValueWrapper } from '../../../../models/file/type-value.wrapper'; import { TranslateService } from '@ngx-translate/core'; import { LoadingService } from '../../../../services/loading.service'; @@ -15,7 +14,7 @@ import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; import { ScreenNames, SortingService } from '../../../../services/sorting.service'; -import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({ value: dict.entries ? dict.entries.length : 0, @@ -30,7 +29,7 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({ providers: [FilterService, SearchService, ScreenStateService, SortingService] }) export class DictionaryListingScreenComponent - extends NewBaseListingComponent + extends BaseListingComponent implements OnInit { chartData: DoughnutChartConfig[] = []; 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 e83850464..55609f194 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 { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; import { ScreenNames, SortingService } from '../../../../services/sorting.service'; -import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; @Component({ templateUrl: './dossier-templates-listing-screen.component.html', @@ -19,7 +19,7 @@ import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.c providers: [FilterService, SearchService, ScreenStateService, SortingService] }) export class DossierTemplatesListingScreenComponent - extends NewBaseListingComponent + extends BaseListingComponent implements OnInit { constructor( diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index f81bc3c38..56268135d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -25,17 +25,22 @@ - {{ 'file-attributes-listing.table-header.title' | translate: { length: displayedEntities.length } }} + {{ + 'file-attributes-listing.table-header.title' + | translate: { length: (displayedEntities$ | async)?.length } + }} -
+
@@ -124,7 +133,11 @@
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 5b43c6f99..1eb517a8a 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 @@ -1,26 +1,34 @@ -import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Injector, + OnInit, + ViewChild +} from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { AppStateService } from '@state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { BaseListingComponent } from '@shared/base/base-listing.component'; 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 { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; @Component({ templateUrl: './file-attributes-listing-screen.component.html', styleUrls: ['./file-attributes-listing-screen.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterService, SearchService, ScreenStateService, SortingService] }) -export class FileAttributesListingScreenComponent extends BaseListingComponent implements OnInit { - protected readonly _searchKey = 'label'; - protected readonly _selectionKey = 'id'; +export class FileAttributesListingScreenComponent + extends BaseListingComponent + implements OnInit +{ private _existingConfiguration: FileAttributesConfig; - @ViewChild('fileInput') private _fileInput: ElementRef; constructor( @@ -34,9 +42,9 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent { - await this._loadData(); - } + async () => await this._loadData() ); } @@ -99,10 +108,10 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent {{ entity.dossierName }}
-
-
- - {{ getDossierTemplate(entity.dossierTemplateId).name }} -
-
@@ -144,7 +138,7 @@
- {{ entity.softDeletedTime | date: 'd MMM. yyyy hh:mm' }} + {{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss index bfedd995b..e22f1dd07 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss @@ -30,7 +30,7 @@ redaction-table-col-name::ng-deep { } > div { - height: 90px; + height: 80px; padding: 0 24px; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts index aeb085557..db6347230 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core'; import { AppStateService } from '@state/app-state.service'; import { PermissionsService } from '@services/permissions.service'; -import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http'; +import { Dossier, DossierTemplateModel, StatusControllerService } from '@redaction/red-ui-http'; import { LoadingService } from '../../../../services/loading.service'; import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service'; import * as moment from 'moment'; @@ -9,8 +9,9 @@ import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; import { ScreenNames, SortingService } from '../../../../services/sorting.service'; -import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; import { DossiersService } from '../../../dossier/services/dossiers.service'; +import { tap } from 'rxjs/operators'; @Component({ templateUrl: './trash-screen.component.html', @@ -18,7 +19,7 @@ import { DossiersService } from '../../../dossier/services/dossiers.service'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService] }) -export class TrashScreenComponent extends NewBaseListingComponent implements OnInit { +export class TrashScreenComponent extends BaseListingComponent implements OnInit { readonly itemSize = 85; private readonly _deleteRetentionHours = this._appConfigService.getConfig( AppConfigKey.DELETE_RETENTION_HOURS @@ -26,6 +27,7 @@ export class TrashScreenComponent extends NewBaseListingComponent imple constructor( private readonly _appStateService: AppStateService, + private readonly _statusControllerService: StatusControllerService, readonly permissionsService: PermissionsService, protected readonly _injector: Injector, private readonly _dossiersService: DossiersService, @@ -50,10 +52,6 @@ export class TrashScreenComponent extends NewBaseListingComponent imple this._screenStateService.setEntities(await this._dossiersService.getDeletedDossiers()); } - getDossierTemplate(dossierTemplateId: string): DossierTemplateModel { - return this._appStateService.getDossierTemplateById(dossierTemplateId); - } - getRestoreDate(softDeletedTime: string): string { return moment(softDeletedTime).add(this._deleteRetentionHours, 'hours').toISOString(); } diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index adb0bf99e..c4e77ab2d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -19,7 +19,7 @@ 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 { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -29,7 +29,7 @@ import { map } from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterService, SearchService, ScreenStateService, SortingService] }) -export class UserListingScreenComponent extends NewBaseListingComponent implements OnInit { +export class UserListingScreenComponent extends BaseListingComponent implements OnInit { collapsedDetails = false; chartData: DoughnutChartConfig[] = []; @ViewChildren(InitialsAvatarComponent) 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 0d8a7354d..92435d943 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 @@ -35,7 +35,7 @@ import { ButtonConfig } from '../../../shared/components/page-header/models/butt import { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; -import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; import { ScreenNames, SortingService } from '../../../../services/sorting.service'; @Component({ @@ -45,7 +45,7 @@ import { ScreenNames, SortingService } from '../../../../services/sorting.servic providers: [FilterService, SearchService, ScreenStateService, SortingService] }) export class DossierListingScreenComponent - extends NewBaseListingComponent + extends BaseListingComponent implements OnInit, OnDestroy, OnAttach, OnDetach { dossiersChartData: DoughnutChartConfig[] = []; 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 1f6d1a578..75b01f444 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 { FilterService } from '../../../shared/services/filter.service'; import { SearchService } from '../../../shared/services/search.service'; import { ScreenStateService } from '../../../shared/services/screen-state.service'; import { ScreenNames, SortingService } from '../../../../services/sorting.service'; -import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.component'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; @Component({ templateUrl: './dossier-overview-screen.component.html', @@ -51,7 +51,7 @@ import { NewBaseListingComponent } from '../../../shared/base/new-base-listing.c providers: [FilterService, SearchService, ScreenStateService, SortingService] }) export class DossierOverviewScreenComponent - extends NewBaseListingComponent + extends BaseListingComponent implements OnInit, OnDestroy, OnDetach, OnAttach { collapsedDetails = false; diff --git a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts index 4592e307b..a6fc8549d 100644 --- a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts +++ b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts @@ -1,177 +1,83 @@ -import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { Component, Injector, ViewChild } from '@angular/core'; import { SortingOption, SortingService } from '@services/sorting.service'; -import { FilterModel } from '../components/filters/popup-filter/model/filter.model'; -import { QuickFiltersComponent } from '../components/filters/quick-filters/quick-filters.component'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { FilterService } from '../services/filter.service'; import { SearchService } from '../services/search.service'; import { ScreenStateService } from '../services/screen-state.service'; -import { getFilteredEntities } from '../components/filters/popup-filter/utils/filter-utils'; -import { debounce } from '../../../utils/debounce'; -import { FilterWrapper } from '../components/filters/popup-filter/model/filter-wrapper.model'; - -// Functionalities: Filter, search, select, sort - -// Usage: overwrite necessary methods/members in your component +import { Observable } from 'rxjs'; +import { FilterModel } from '../components/filters/popup-filter/model/filter.model'; @Component({ template: '' }) -export abstract class BaseListingComponent { - allEntities: T[] = []; - filteredEntities: T[] = []; - displayedEntities: T[] = []; - selectedEntitiesIds: string[] = []; - searchForm: FormGroup; - showResetFilters = false; - @ViewChild(CdkVirtualScrollViewport) scrollViewport: CdkVirtualScrollViewport; +export abstract class BaseListingComponent { + @ViewChild(CdkVirtualScrollViewport) + readonly scrollViewport: CdkVirtualScrollViewport; - protected readonly _formBuilder: FormBuilder; - protected readonly _changeDetectorRef: ChangeDetectorRef; + readonly filterService: FilterService; protected readonly _sortingService: SortingService; - protected readonly _filterService: FilterService; protected readonly _searchService: SearchService; protected readonly _screenStateService: ScreenStateService; - // ---- - // Overwrite in child class: - protected readonly _searchKey: string; - protected readonly _selectionKey: string; - // Overwrite this in ngOnInit - @ViewChild(QuickFiltersComponent) - protected _quickFilters: QuickFiltersComponent; - - private _searchValue = ''; - protected constructor(protected readonly _injector: Injector) { - this._formBuilder = this._injector.get(FormBuilder); - this._changeDetectorRef = this._injector.get(ChangeDetectorRef); + this.filterService = this._injector.get>(FilterService); this._sortingService = this._injector.get(SortingService); - this._filterService = this._injector.get>(FilterService); this._searchService = this._injector.get>(SearchService); this._screenStateService = this._injector.get>(ScreenStateService); } - get areAllEntitiesSelected() { - return ( - this.displayedEntities.length !== 0 && - this.selectedEntitiesIds.length === this.displayedEntities.length - ); + get selectedEntitiesIds$(): Observable { + return this._screenStateService.selectedEntitiesIds$; } - get areSomeEntitiesSelected() { - return this.selectedEntitiesIds.length > 0; + get displayedEntities$(): Observable { + return this._screenStateService.displayedEntities$; + } + + get allEntities$(): Observable { + return this._screenStateService.entities$; + } + + get allEntities(): T[] { + return this._screenStateService.entities; + } + + get areAllEntitiesSelected() { + return this._screenStateService.areAllEntitiesSelected; + } + + get areSomeEntitiesSelected$() { + return this._screenStateService.areSomeEntitiesSelected$; } get sortingOption(): SortingOption { return this._sortingService.getSortingOption(); } - protected get _filters(): FilterWrapper[] { - return []; + getFilter$(slug: string): Observable { + return this.filterService.getFilter$(slug); } - // ---- - - private get _getSearchKey(): string { - if (!this._searchKey) throw new Error('Not implemented'); - - return this._searchKey; - } - - // Search - - private get _getSelectionKey(): string { - if (!this._selectionKey) throw new Error('Not implemented'); - - return this._selectionKey; - } - - filtersChanged(filters?: { [key: string]: FilterModel[] } | FilterModel[]): void { - if (filters instanceof Array) this.showResetFilters = !!filters.find(f => f.checked); - else - for (const key of Object.keys(filters ?? {})) { - for (let idx = 0; idx < this[key]?.length; ++idx) { - this[key][idx] = filters[key][idx]; - } - } - - this._filterEntities(); + get searchForm() { + return this._searchService.searchForm; } resetFilters() { - this.showResetFilters = false; - this.filtersChanged(); - } - - // Filter - toggleEntitySelected($event: MouseEvent, entity: T) { - $event.stopPropagation(); - const idx = this.selectedEntitiesIds.indexOf(entity[this._getSelectionKey]); - if (idx === -1) { - this.selectedEntitiesIds.push(entity[this._getSelectionKey]); - } else { - this.selectedEntitiesIds.splice(idx, 1); - } - } - - toggleSelectAll() { - if (this.areSomeEntitiesSelected) { - this.selectedEntitiesIds = []; - } else { - this.selectedEntitiesIds = this.displayedEntities.map( - entity => entity[this._getSelectionKey] - ); - } - } - - isSelected(entity: T) { - return this.selectedEntitiesIds.indexOf(entity[this._getSelectionKey]) !== -1; + this.filterService.reset(); } toggleSort($event) { this._sortingService.toggleSort($event); } - // Selection - - protected _preFilter() { - return; + toggleSelectAll() { + return this._screenStateService.toggleSelectAll(); } - protected _searchField(entity: T): string { - return entity[this._getSearchKey]; + toggleEntitySelected(event: MouseEvent, entity: T) { + event.stopPropagation(); + return this._screenStateService.toggleEntitySelected(entity); } - @debounce(200) - executeSearch(value: string) { - this._searchValue = value; - this._executeSearchImmediately(); - } - - protected _executeSearchImmediately() { - this.displayedEntities = ( - this._filters.length ? this.filteredEntities : this.allEntities - ).filter(entity => - this._searchField(entity).toLowerCase().includes(this._searchValue.toLowerCase()) - ); - - this._updateSelection(); - } - - protected _updateSelection() { - if (this._selectionKey) { - this.selectedEntitiesIds = this.displayedEntities - .map(entity => entity[this._getSelectionKey]) - .filter(id => this.selectedEntitiesIds.includes(id)); - } - } - - // Sort - - protected _filterEntities() { - this._preFilter(); - this.filteredEntities = getFilteredEntities(this.allEntities, this._filters); - this.executeSearch(this._searchValue); - this._changeDetectorRef.detectChanges(); + isSelected(entity: T) { + return this._screenStateService.isSelected(entity); } } diff --git a/apps/red-ui/src/app/modules/shared/base/new-base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/new-base-listing.component.ts deleted file mode 100644 index 0b933067b..000000000 --- a/apps/red-ui/src/app/modules/shared/base/new-base-listing.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { Component, Injector, ViewChild } from '@angular/core'; -import { SortingOption, SortingService } from '@services/sorting.service'; -import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { FilterService } from '../services/filter.service'; -import { SearchService } from '../services/search.service'; -import { ScreenStateService } from '../services/screen-state.service'; -import { Observable } from 'rxjs'; -import { FilterModel } from '../components/filters/popup-filter/model/filter.model'; - -@Component({ template: '' }) -export abstract class NewBaseListingComponent { - @ViewChild(CdkVirtualScrollViewport) - readonly scrollViewport: CdkVirtualScrollViewport; - - readonly filterService: FilterService; - protected readonly _sortingService: SortingService; - protected readonly _searchService: SearchService; - protected readonly _screenStateService: ScreenStateService; - - protected constructor(protected readonly _injector: Injector) { - this.filterService = this._injector.get>(FilterService); - this._sortingService = this._injector.get(SortingService); - this._searchService = this._injector.get>(SearchService); - this._screenStateService = this._injector.get>(ScreenStateService); - } - - get selectedEntitiesIds$(): Observable { - return this._screenStateService.selectedEntitiesIds$; - } - - get displayedEntities$(): Observable { - return this._screenStateService.displayedEntities$; - } - - get allEntities$(): Observable { - return this._screenStateService.entities$; - } - - get allEntities(): T[] { - return this._screenStateService.entities; - } - - get areAllEntitiesSelected() { - return this._screenStateService.areAllEntitiesSelected; - } - - get areSomeEntitiesSelected$() { - return this._screenStateService.areSomeEntitiesSelected$; - } - - get sortingOption(): SortingOption { - return this._sortingService.getSortingOption(); - } - - getFilter$(slug: string): Observable { - return this.filterService.getFilter$(slug); - } - - get searchForm() { - return this._searchService.searchForm; - } - - resetFilters() { - this.filterService.reset(); - } - - toggleSort($event) { - this._sortingService.toggleSort($event); - } - - toggleSelectAll() { - return this._screenStateService.toggleSelectAll(); - } - - toggleEntitySelected(event: MouseEvent, entity: T) { - event.stopPropagation(); - return this._screenStateService.toggleEntitySelected(entity); - } - - isSelected(entity: T) { - return this._screenStateService.isSelected(entity); - } -}