Merge branch 'RED-3800' into 'master'

RED-3800: Improved main resolver / skeleton / loading / redirecting

Closes RED-3800

See merge request redactmanager/red-ui!102

apps/red-ui/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
-import { CompositeRouteGuard, DEFAULT_REDIRECT_KEY, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
+import { CompositeRouteGuard, DEFAULT_REDIRECT_KEY, IqserPermissionsGuard, IqserRoutes, orderedAsyncGuards } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
@@ -16,7 +16,7 @@ import { ARCHIVE_ROUTE, BreadcrumbTypes, DOSSIER_ID, DOSSIER_TEMPLATE_ID, DOSSIE
 import { DossierFilesGuard } from '@guards/dossier-files-guard';
 import { webViewerLoadedGuard } from './modules/pdf-viewer/services/webviewer-loaded.guard';
 import { Roles } from '@users/roles';
-import { mainResolver } from '@utils/main.resolver';
+import { mainGuard } from '@utils/main.resolver';
 import { hasAnyRoleGuard, IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { CustomRouteReuseStrategy } from '@iqser/common-ui/lib/utils';
 import { ifLoggedIn } from '@guards/if-logged-in.guard';
@@ -211,11 +211,8 @@ const routes: IqserRoutes = [
     },
     {
         path: ':tenant/main',
-        canActivate: [ifLoggedIn()],
+        canActivate: [orderedAsyncGuards([ifLoggedIn(), mainGuard()])],
         component: BaseScreenComponent,
-        resolve: {
-            whateverThisMainRouteNeeds: mainResolver,
-        },
         children: mainRoutes,
     },
     {

apps/red-ui/src/app/app.component.html

@@ -3,3 +3,13 @@
 <iqser-full-page-loading-indicator></iqser-full-page-loading-indicator>
 <iqser-connection-status></iqser-connection-status>
 <iqser-full-page-error></iqser-full-page-error>
+
+<iqser-skeleton [templates]="{ dashboard: dashboardSkeleton, dossier: dossierSkeleton }"></iqser-skeleton>
+
+<ng-template #dashboardSkeleton>
+    <redaction-dashboard-skeleton></redaction-dashboard-skeleton>
+</ng-template>
+
+<ng-template #dossierSkeleton>
+    <redaction-dossier-skeleton></redaction-dossier-skeleton>
+</ng-template>

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -48,13 +48,3 @@
 <router-outlet></router-outlet>
 
 <redaction-pdf-viewer [style.visibility]="documentViewer.loaded() ? 'visible' : 'hidden'"></redaction-pdf-viewer>
-
-<iqser-skeleton [templates]="{ dashboard: dashboardSkeleton, dossier: dossierSkeleton }"></iqser-skeleton>
-
-<ng-template #dashboardSkeleton>
-    <redaction-dashboard-skeleton></redaction-dashboard-skeleton>
-</ng-template>
-
-<ng-template #dossierSkeleton>
-    <redaction-dossier-skeleton></redaction-dossier-skeleton>
-</ng-template>

apps/red-ui/src/app/guards/if-logged-in.guard.ts

@@ -1,4 +1,4 @@
-import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { inject } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { keycloakInitializer, KeycloakStatusService, TenantsService } from '@iqser/common-ui/lib/tenants';
@@ -6,8 +6,9 @@ import { KeycloakService } from 'keycloak-angular';
 import { UserService } from '@users/user.service';
 import { LicenseService } from '@services/license.service';
 import { RouterHistoryService } from '@services/router-history.service';
+import { AsyncGuard } from '@iqser/common-ui';
 
-export function ifLoggedIn(): CanActivateFn {
+export function ifLoggedIn(): AsyncGuard {
     return async (route: ActivatedRouteSnapshot) => {
         const logger = inject(NGXLogger);
         logger.info('[ROUTES] Check if can activate route', route);

apps/red-ui/src/app/utils/main.resolver.ts

@@ -1,6 +1,5 @@
 import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-import { IqserPermissionsService, LoadingService } from '@iqser/common-ui';
+import { AsyncGuard, IqserPermissionsService, LoadingService } from '@iqser/common-ui';
 import { TenantsService } from '@iqser/common-ui/lib/tenants';
 import { BASE_HREF } from '@iqser/common-ui/lib/utils';
 import { ConfigService } from '@services/config.service';
@@ -13,47 +12,61 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { NGXLogger } from 'ngx-logger';
 import { firstValueFrom } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { Router, RouterStateSnapshot } from '@angular/router';
 
-function redirectToLastDossierTemplate(baseHref: string, tenant: string, lastDossierTemplate: string) {
+async function redirectToLastDossierTemplate(
+    router: Router,
+    state: RouterStateSnapshot,
+    baseHref: string,
+    tenant: string,
+    lastDossierTemplate: string,
+) {
     const lastUrlSegment = window.location.pathname.split('/').filter(Boolean).pop();
-    if (['main', tenant, baseHref].includes(lastUrlSegment)) {
-        window.location.assign(tenant + '/main/' + lastDossierTemplate);
+    if (['main', tenant, baseHref].includes(lastUrlSegment) && !state.url.includes(lastDossierTemplate)) {
+        await router.navigate([tenant, 'main', lastDossierTemplate]);
     }
 }
 
-export const mainResolver: ResolveFn<void> = async () => {
-    const logger = inject(NGXLogger);
-    logger.info('[ROUTES] Main resolver started...');
+export function mainGuard(): AsyncGuard {
+    return async (route, state) => {
+        const logger = inject(NGXLogger);
+        logger.info('[ROUTES] Main resolver started...');
 
-    inject(FeaturesService).loadConfig();
-    if (inject(IqserPermissionsService).has(Roles.dossiers.read)) {
-        inject(DossiersChangesService).initialize();
-    }
+        console.log('main guard');
 
-    const systemPreferencesService = inject(SystemPreferencesService);
-    const userPreferenceService = inject(UserPreferenceService);
-    const tenantsService = inject(TenantsService);
-    const loadingService = inject(LoadingService);
-    const configService = inject(ConfigService);
-    const baseHref = inject(BASE_HREF);
+        const router = inject(Router);
+        inject(FeaturesService).loadConfig();
+        if (inject(IqserPermissionsService).has(Roles.dossiers.read)) {
+            inject(DossiersChangesService).initialize();
+        }
 
-    const generalConfig$ = inject(GeneralSettingsService).getGeneralConfigurations();
-    const updatedDisplayName$ = generalConfig$.pipe(tap(config => configService.updateDisplayName(config.displayName)));
+        const systemPreferencesService = inject(SystemPreferencesService);
+        const userPreferenceService = inject(UserPreferenceService);
+        const tenantsService = inject(TenantsService);
+        const loadingService = inject(LoadingService);
+        const configService = inject(ConfigService);
+        const baseHref = inject(BASE_HREF);
 
-    await Promise.all([
-        systemPreferencesService.loadPreferencesIfNeeded(),
-        userPreferenceService.reload(),
-        firstValueFrom(updatedDisplayName$),
-    ]);
+        const generalConfig$ = inject(GeneralSettingsService).getGeneralConfigurations();
+        const updatedDisplayName$ = generalConfig$.pipe(tap(config => configService.updateDisplayName(config.displayName)));
 
-    const lastDossierTemplate = userPreferenceService.getLastDossierTemplate();
+        await Promise.all([
+            systemPreferencesService.loadPreferencesIfNeeded(),
+            userPreferenceService.reload(),
+            firstValueFrom(updatedDisplayName$),
+        ]);
 
-    if (lastDossierTemplate) {
-        redirectToLastDossierTemplate(baseHref, tenantsService.activeTenantId, lastDossierTemplate);
-    }
+        const lastDossierTemplate = userPreferenceService.getLastDossierTemplate();
 
-    loadingService.stop();
-    tenantsService.storeTenant();
+        if (lastDossierTemplate) {
+            await redirectToLastDossierTemplate(router, state, baseHref, tenantsService.activeTenantId, lastDossierTemplate);
+        }
 
-    logger.info('[ROUTES] Main resolver finished!');
-};
+        loadingService.stop();
+        tenantsService.storeTenant();
+
+        logger.info('[ROUTES] Main resolver finished!');
+
+        return true;
+    };
+}

apps/red-ui/src/assets/i18n/redact/de.json

@@ -1216,7 +1216,7 @@
     "missing-owner": "You cannot edit the dossier because the owner is missing!",
     "nav-items": {
       "choose-download": "Wählen Sie die Dokumente für Ihr Download-Paket aus:",
-      "dictionary": "Wörterbuch",
+      "dictionary": "Wörterbücher",
       "dossier-attributes": "Dossier-Attribute",
       "dossier-dictionary": "Dossier-Wörterbuch",
       "dossier-info": "Dossier-Info",
@@ -1759,11 +1759,11 @@
       "trash-documents": "Documents in Trash",
       "unused": "Unused Storage"
     },
-    "capacity-details": "Capacity Details",
+    "capacity-details": "Kapazitätsdetails",
     "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon",
     "copyright-claim-title": "Copyright",
     "current-analyzed-pages": "In aktuellem Lizenzzeitraum analysierte Seiten",
-    "current-volume-analyzed": "Data Volume Analyzed in Licensing Period",
+    "current-volume-analyzed": "Analysis Capacity Used in Licensing Period",
     "custom-app-title": "Name der Anwendung",
     "email": {
       "body": {
@@ -1776,14 +1776,14 @@
     "end-user-license-text": "Die Nutzung dieses Produkts unterliegt den Bedingungen der Endbenutzer-Lizenzvereinbarung für den RedactManager, sofern darin nichts anderweitig festgelegt.",
     "end-user-license-title": "Endbenutzer-Lizenzvereinbarung",
     "license-title": "License Title",
-    "licensed-capacity": "Licensed Capacity",
+    "licensed-capacity": "Licensed Analysis Capacity",
     "licensed-page-count": "Anzahl der lizenzierten Seiten",
     "licensed-to": "Lizenziert für",
     "licensing-details": "Lizenzdetails",
     "licensing-period": "Laufzeit der Lizenz",
     "ocr-analyzed-pages": "Mit OCR konvertierte Seiten",
     "pages": {
-      "analyzed-data-per-month": "Analyzed Data per Month",
+      "analyzed-data-per-month": "Analyzed Data Volume per Month",
       "cumulative-pages": "Seiten insgesamt",
       "cumulative-volume": "Cumulative Analyzed Data Volume",
       "pages-per-month": "Seiten pro Monat",
@@ -1798,7 +1798,7 @@
     },
     "total-analyzed": "Seit {date} insgesamt analysierte Seiten",
     "total-ocr-analyzed": "Total OCR Processed Pages",
-    "total-volume-analyzed": "Total Data Volume Analyzed",
+    "total-volume-analyzed": "Total Analysis Capacity Used",
     "unlicensed-analyzed": "Über Lizenz hinaus analysierte Seiten",
     "usage-details": "Nutzungsdetails"
   },

apps/red-ui/src/assets/i18n/redact/en.json

@@ -1216,7 +1216,7 @@
     "missing-owner": "You cannot edit the dossier because the owner is missing!",
     "nav-items": {
       "choose-download": "Choose what is included at download:",
-      "dictionary": "Dictionary",
+      "dictionary": "Dictionaries",
       "dossier-attributes": "Dossier Attributes",
       "dossier-dictionary": "Dossier Dictionary",
       "dossier-info": "Dossier Info",

libs/common-ui

@@ -1 +1 @@
-Subproject commit 2f2ee530b15e9e84dc28c3a23340cfb8b8b94319
+Subproject commit 890cf417a1900eb882c61d335276360a48c9a54c