diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 23e8b18d8..2e45e3b41 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -119,9 +119,9 @@ const routes: IqserRoutes = [ { path: 'dashboard', loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule), - canActivate: [CompositeRouteGuard, IqserPermissionsGuard], + canActivate: [CompositeRouteGuard], data: { - routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard], + routeGuards: [IqserAuthGuard, RedRoleGuard, IqserPermissionsGuard, DossierTemplatesGuard, DashboardGuard], permissions: { allow: [ ROLES.any, @@ -140,6 +140,7 @@ const routes: IqserRoutes = [ [DEFAULT_REDIRECT_KEY]: '/auth-error', }, }, + skeleton: 'Dashboard', }, }, { diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 6f2b09693..7120cae70 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -5,3 +5,9 @@ + + + + + + diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 3c25bae90..399d01523 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -14,6 +14,7 @@ import { IqserLoadingModule, IqserPermissionsModule, IqserPermissionsService, + IqserSharedModule, IqserTranslateModule, IqserUsersModule, LanguageService, @@ -27,6 +28,7 @@ import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '@environments/environment'; import { AuthErrorComponent } from '@components/auth-error/auth-error.component'; import { NotificationsComponent } from '@components/notifications/notifications.component'; +import { DashboardSkeletonComponent } from '@components/dashboard-skeleton/dashboard-skeleton.component'; import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component'; import { AppRoutingModule } from './app-routing.module'; import { SharedModule } from '@shared/shared.module'; @@ -59,10 +61,20 @@ import { LicenseService } from '@services/license.service'; import { TenantIdInterceptor } from '@utils/tenant-id-interceptor'; import { UI_CACHES } from '@utils/constants'; import { RedRoleGuard } from '@users/red-role.guard'; +import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component'; const screens = [BaseScreenComponent, DownloadsListScreenComponent]; -const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens]; +const components = [ + AppComponent, + AuthErrorComponent, + NotificationsComponent, + SpotlightSearchComponent, + BreadcrumbsComponent, + DashboardSkeletonComponent, + SkeletonTopBarComponent, + ...screens, +]; export const appModuleFactory = (config: AppConfig) => { @NgModule({ @@ -83,6 +95,7 @@ export const appModuleFactory = (config: AppConfig) => { existingUserService: UserService, existingRoleGuard: RedRoleGuard, }), + IqserSharedModule, CachingModule.forRoot(UI_CACHES), IqserHelpModeModule.forRoot(links), PdfViewerModule, diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html new file mode 100644 index 000000000..2f89e274d --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html @@ -0,0 +1,17 @@ + + +
+ +
+
+
+ +
+
+
+
+
+
+
+
+
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss new file mode 100644 index 000000000..50f65e0b7 --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss @@ -0,0 +1,51 @@ +@use 'common-mixins'; + +:host { + min-height: 100vh; + background-color: var(--iqser-alt-background); + display: flex; + flex-direction: column; + align-items: center; + + .container { + padding: 32px; + width: 900px; + max-width: 100%; + box-sizing: border-box; + } +} + +.skeleton { + background-color: var(--iqser-grey-4); + + &.line { + border-radius: 12px; + } +} + +.dialog { + flex-direction: row; + max-width: unset; + min-height: unset; + margin: 0 0 16px 0; + + > div { + padding: 24px; + display: flex; + flex-direction: column; + overflow: hidden; + + &:not(:first-child) { + justify-content: center; + border-left: 1px solid var(--iqser-separator); + } + } +} + +.stats-subtitle { + flex-direction: column; + + > div { + margin-top: 10px; + } +} diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts new file mode 100644 index 000000000..67c47d282 --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'redaction-dashboard-skeleton', + templateUrl: './dashboard-skeleton.component.html', + styleUrls: ['./dashboard-skeleton.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DashboardSkeletonComponent {} diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html new file mode 100644 index 000000000..e83646bf0 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html @@ -0,0 +1,15 @@ +
+ + + +
+ +
+
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss new file mode 100644 index 000000000..02e36c560 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss @@ -0,0 +1,9 @@ +:host { + display: contents; +} + +.top-bar .actions { + display: flex; + align-items: center; + justify-content: flex-end; +} diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts new file mode 100644 index 000000000..1ac32cbd5 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Title } from '@angular/platform-browser'; + +@Component({ + selector: 'redaction-skeleton-top-bar', + templateUrl: './skeleton-top-bar.component.html', + styleUrls: ['./skeleton-top-bar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SkeletonTopBarComponent { + constructor(readonly titleService: Title) {} +} diff --git a/libs/common-ui b/libs/common-ui index cb3f1e3ee..a786f06e8 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit cb3f1e3eea6353711d2e5bdfe8664b1b4b8e70e2 +Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279