From 990c52ad6d69ff3c96a973b5d3d802a75a0d0687 Mon Sep 17 00:00:00 2001 From: George Date: Mon, 24 Jul 2023 11:33:41 +0300 Subject: [PATCH] RED-7200, rewrite loading service with signals, specifically call stop when needed, remove catch all stop from composite guard postcheck. Update common-ui. --- .../preferences/preferences.component.ts | 11 ++++++--- .../base-entity-screen.component.ts | 8 +++++-- .../default-colors-screen.component.ts | 23 +++++++++++++++---- ...dossier-states-listing-screen.component.ts | 11 ++++++++- ...sier-templates-listing-screen.component.ts | 8 +++++-- .../entities-listing-screen.component.ts | 8 +++++-- .../permissions-screen.component.ts | 8 +++++-- .../watermarks-listing-screen.component.ts | 8 +++++-- .../dossiers-listing-screen.component.ts | 5 +++- .../services/webviewer-loaded.guard.ts | 2 +- .../dictionary-manager.component.html | 2 +- .../trash-screen/trash-screen.component.ts | 8 +++++-- libs/common-ui | 2 +- 13 files changed, 80 insertions(+), 24 deletions(-) diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts index c7fb30560..3880756bc 100644 --- a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts @@ -1,8 +1,8 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service'; import { FormBuilder, FormGroup } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; -import { BaseFormComponent, IqserPermissionsService } from '@iqser/common-ui'; +import { BaseFormComponent, IqserPermissionsService, LoadingService } from '@iqser/common-ui'; import { Roles } from '@users/roles'; import { AsControl } from '@iqser/common-ui/lib/utils'; @@ -31,7 +31,7 @@ const Screens = { styleUrls: ['./preferences.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class PreferencesComponent extends BaseFormComponent { +export class PreferencesComponent extends BaseFormComponent implements OnInit { readonly form: FormGroup>; readonly currentScreen: Screen; readonly screens = Screens; @@ -44,6 +44,7 @@ export class PreferencesComponent extends BaseFormComponent { private readonly _permissionsService: IqserPermissionsService, private readonly _route: ActivatedRoute, private readonly _changeRef: ChangeDetectorRef, + private readonly _loadingService: LoadingService, ) { super(); this.form = this._formBuilder.group({ @@ -66,6 +67,10 @@ export class PreferencesComponent extends BaseFormComponent { this.currentScreen = _route.snapshot.data.screen; } + ngOnInit() { + this._loadingService.stop(); + } + async save(): Promise { if (this.form.controls.autoExpandFiltersOnActions.value !== this.userPreferenceService.getAutoExpandFiltersOnActions()) { await this.userPreferenceService.toggleAutoExpandFiltersOnActions(); diff --git a/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts b/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts index 635cd8392..d7580b24b 100644 --- a/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain'; import { Router } from '@angular/router'; import { firstValueFrom, Observable } from 'rxjs'; @@ -16,7 +16,7 @@ import { TenantsService } from '@iqser/common-ui/lib/tenants'; templateUrl: './base-entity-screen.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BaseEntityScreenComponent { +export class BaseEntityScreenComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID); readonly #entityType = getParam(ENTITY_TYPE); readonly disabledItems$: Observable; @@ -39,6 +39,10 @@ export class BaseEntityScreenComponent { ); } + ngOnInit() { + this._loadingService.stop(); + } + openDeleteDictionariesDialog() { this._dialogService.openDialog('confirm', null, async () => { this._loadingService.start(); 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 6070e9103..0520cd1df 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 @@ -1,7 +1,14 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { DefaultColorTypes, DOSSIER_TEMPLATE_ID, User } from '@red/domain'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { CircleButtonTypes, IListable, ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui'; +import { + CircleButtonTypes, + IListable, + ListingComponent, + listingProvidersFactory, + LoadingService, + TableColumnConfig, +} from '@iqser/common-ui'; import { defaultColorsTranslations } from '@translations/default-colors-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { combineLatest } from 'rxjs'; @@ -22,7 +29,7 @@ interface ListItem extends IListable { changeDetection: ChangeDetectionStrategy.OnPush, providers: listingProvidersFactory(DefaultColorsScreenComponent), }) -export class DefaultColorsScreenComponent extends ListingComponent { +export class DefaultColorsScreenComponent extends ListingComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID); readonly circleButtonTypes = CircleButtonTypes; readonly currentUser = getCurrentUser(); @@ -35,7 +42,11 @@ export class DefaultColorsScreenComponent extends ListingComponent { ]; readonly context$; - constructor(private readonly _dialogService: AdminDialogService, private readonly _defaultColorsService: DefaultColorsService) { + constructor( + private readonly _dialogService: AdminDialogService, + private readonly _defaultColorsService: DefaultColorsService, + private readonly _loadingService: LoadingService, + ) { super(); this.context$ = combineLatest([this._defaultColorsService.all$]).pipe( @@ -47,6 +58,10 @@ export class DefaultColorsScreenComponent extends ListingComponent { ); } + ngOnInit() { + this._loadingService.stop(); + } + openEditColorDialog(color: ListItem) { this._dialogService.openDialog('editColor', { colorKey: color.key, dossierTemplateId: this.#dossierTemplateId }); } diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts index e4f3b1cda..730e83923 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts @@ -1,5 +1,12 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { defaultDialogConfig, IconButtonTypes, ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui'; +import { + defaultDialogConfig, + IconButtonTypes, + ListingComponent, + listingProvidersFactory, + LoadingService, + TableColumnConfig, +} from '@iqser/common-ui'; import { type DonutChartConfig, DOSSIER_TEMPLATE_ID, type DossierState } from '@red/domain'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { firstValueFrom, Observable } from 'rxjs'; @@ -35,6 +42,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent { +export class DossierTemplatesListingScreenComponent extends ListingComponent implements OnInit { readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; readonly roles = Roles; @@ -54,6 +54,10 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent { this._loadingService.loadWhile(this._deleteTemplates()); diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts index d5c8537a2..b003281e1 100644 --- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CircleButtonTypes, IconButtonTypes, @@ -23,7 +23,7 @@ import { getParam } from '@iqser/common-ui/lib/utils'; styleUrls: ['./entities-listing-screen.component.scss'], providers: listingProvidersFactory(EntitiesListingScreenComponent), }) -export class EntitiesListingScreenComponent extends ListingComponent { +export class EntitiesListingScreenComponent extends ListingComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID); readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; @@ -48,6 +48,10 @@ export class EntitiesListingScreenComponent extends ListingComponent this.templateStats$ = this._dossierTemplateStatsService.watch$(this.#dossierTemplateId).pipe(tap(() => this._loadDictionaryData())); } + ngOnInit() { + this._loadingService.stop(); + } + openDeleteEntitiesDialog(types = this.listingService.selected) { this._dialogService.openDialog('confirm', null, async () => { this._loadingService.start(); diff --git a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts index 309c09449..a7f36d2fa 100644 --- a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { IqserPermissionsService, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui'; import { PermissionsMapping, User } from '@red/domain'; import { ConfigService } from '../config.service'; @@ -20,7 +20,7 @@ import { SortingOrders } from '@iqser/common-ui/lib/sorting'; styleUrls: ['./permissions-screen.component.scss'], providers: listingProvidersFactory(PermissionsScreenComponent), }) -export class PermissionsScreenComponent extends ListingComponent implements OnDestroy { +export class PermissionsScreenComponent extends ListingComponent implements OnInit, OnDestroy { readonly #subscription: Subscription = new Subscription(); readonly roles = Roles; readonly currentUser = getCurrentUser(); @@ -65,6 +65,10 @@ export class PermissionsScreenComponent extends ListingComponent { this._loadingService.start(); await this._entityPermissionsService.togglePermission(this.targetObject, targetPermission, changedPermission); diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts index 8a5602b84..16d084fe7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CircleButtonTypes, IconButtonTypes, @@ -24,7 +24,7 @@ import { getParam } from '@iqser/common-ui/lib/utils'; styleUrls: ['./watermarks-listing-screen.component.scss'], providers: listingProvidersFactory(WatermarksListingScreenComponent), }) -export class WatermarksListingScreenComponent extends ListingComponent { +export class WatermarksListingScreenComponent extends ListingComponent implements OnInit { readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID); readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; @@ -51,6 +51,10 @@ export class WatermarksListingScreenComponent extends ListingComponent im private readonly _dialogService: SharedDialogService, private readonly _activeDossiersService: ActiveDossiersService, private readonly _userPreferenceService: UserPreferenceService, + private readonly _loadingService: LoadingService, dossierTemplatesService: DossierTemplatesService, ) { super(); @@ -56,10 +57,12 @@ export class DossiersListingScreenComponent extends ListingComponent im this.addSubscription = this._activeDossiersService.all$ .pipe(tap(dossiers => this.entitiesService.setEntities(dossiers.filter(d => d.dossierTemplateId === this.dossierTemplate.id)))) .subscribe(); + this._loadingService.stop(); } ngOnAttach(): void { this._tableComponent?.scrollToLastIndex(); + this._loadingService.stop(); } private _computeAllFilters() { diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts index 44d915163..2f6491588 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts @@ -31,7 +31,7 @@ export function webViewerLoadedGuard(): CanActivateFn | ResolveFn { } catch (e) { const redirectUrl = state.url.split('/').slice(0, -2).join('/'); logger.warn('[PDF] WebViewerGuard error: ', e, 'redirecting to', redirectUrl); - return router.navigateByUrl(redirectUrl); // redirect to dissier page + return router.navigateByUrl(redirectUrl); // redirect to dossier page } annotationManager.init(instance.Core.annotationManager); diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html index 33b8651e9..b53c7b213 100644 --- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html +++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html @@ -97,7 +97,7 @@ [label]="'dictionary-overview.save-changes' | translate" [type]="iconButtonTypes.primary" icon="iqser:check" - [disabled]="!!(_loadingService.isLoading$ | async)" + [disabled]="!!_loadingService.isLoading()" >
diff --git a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts index 42848bc46..8e5f25332 100644 --- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts +++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { CircleButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { firstValueFrom, Observable } from 'rxjs'; @@ -17,7 +17,7 @@ import { SortingOrders } from '@iqser/common-ui/lib/sorting'; component: TrashScreenComponent, }), }) -export class TrashScreenComponent extends ListingComponent { +export class TrashScreenComponent extends ListingComponent implements OnInit { readonly circleButtonTypes = CircleButtonTypes; readonly tableHeaderLabel = _('trash.table-header.title'); readonly canRestoreSelected$ = this._canRestoreSelected$; @@ -44,6 +44,10 @@ export class TrashScreenComponent extends ListingComponent { }); } + ngOnInit() { + this._loadingService.stop(); + } + private get _canRestoreSelected$(): Observable { return this.listingService.selectedEntities$.pipe( map(entities => entities.length && !entities.find(dossier => !(dossier.canRestore && dossier.hasRestoreRights))), diff --git a/libs/common-ui b/libs/common-ui index 2524896f4..d40f83936 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 2524896f460594d7766a7c572b63cd3199eac7db +Subproject commit d40f839365d62af8893cb529020702949ffeca33