diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 2e45e3b41..0033f3247 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -48,6 +48,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [ allow: [ROLES.dossierAttributes.read, ROLES.dossierAttributes.readConfig], redirectTo: '/auth-error', }, + skeleton: 'dossier', }, loadChildren: () => import('./modules/dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule), }, @@ -140,7 +141,7 @@ const routes: IqserRoutes = [ [DEFAULT_REDIRECT_KEY]: '/auth-error', }, }, - skeleton: 'Dashboard', + skeleton: 'dashboard', }, }, { diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 7120cae70..a5f32ccc0 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -6,8 +6,12 @@ - + - + + + + + diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 040277809..daf187ca9 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -62,6 +62,7 @@ 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'; +import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component'; const screens = [BaseScreenComponent, DownloadsListScreenComponent]; @@ -72,6 +73,7 @@ const components = [ SpotlightSearchComponent, BreadcrumbsComponent, DashboardSkeletonComponent, + DossierSkeletonComponent, SkeletonTopBarComponent, ...screens, ]; diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss index 25ba98779..67cebe653 100644 --- a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss @@ -15,11 +15,6 @@ } } -.skeleton-line { - background-color: var(--iqser-grey-4); - border-radius: 12px; -} - mat-icon { width: unset; height: unset; diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html new file mode 100644 index 000000000..952c948dd --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html @@ -0,0 +1,115 @@ + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
+
+ + + +
+ + + + + +
+
+ + + +
+ + + +
+
+ diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss new file mode 100644 index 000000000..129522635 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss @@ -0,0 +1,84 @@ +@use 'common-mixins'; + +:host { + background-color: var(--iqser-background); + display: block; +} + +.w-100p { + width: 100%; +} + +.right-container { + display: flex; + width: 375px; + min-width: 375px; + padding: 16px 24px 16px 24px; + + mat-icon { + width: 100%; + height: 100%; + } +} + +.sk-table { + display: flex; + + .sk-table-header, + .sk-table-cell { + padding: 0 10px; + border-bottom: 1px solid var(--iqser-separator); + box-sizing: border-box; + } + + .sk-table-column { + display: flex; + flex-direction: column; + flex: 1; + + &:first-child { + flex: 3; + + .sk-table-header, + .sk-table-cell { + padding-left: 56px; + } + } + + .sk-line { + margin: auto 0; + } + + &:last-child { + flex: 2; + + .sk-table-header, + .sk-table-cell { + padding-right: 21px; + } + + .sk-line { + margin-left: auto; + } + } + + &:nth-child(4), + &:nth-child(5) { + .sk-line, + .sk-circle { + margin: auto; + } + } + } + + .sk-table-header { + height: 30px; + padding-top: 11px; + } + + .sk-table-cell { + height: 80px; + display: flex; + align-items: center; + } +} diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts new file mode 100644 index 000000000..4b5724e8e --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts @@ -0,0 +1,35 @@ +import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; + +@Component({ + selector: 'redaction-dossier-skeleton', + templateUrl: './dossier-skeleton.component.html', + styleUrls: ['./dossier-skeleton.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DossierSkeletonComponent implements OnInit { + @ViewChild('workload1', { static: true }) workload1: TemplateRef; + @ViewChild('workload2', { static: true }) workload2: TemplateRef; + @ViewChild('workload3', { static: true }) workload3: TemplateRef; + @ViewChild('workload4', { static: true }) workload4: TemplateRef; + @ViewChild('workload5', { static: true }) workload5: TemplateRef; + @ViewChild('workload6', { static: true }) workload6: TemplateRef; + + workloadTemplates: TemplateRef[]; + + ngOnInit(): void { + this.workloadTemplates = [ + this.workload1, + this.workload3, + this.workload2, + this.workload3, + this.workload4, + this.workload5, + this.workload1, + this.workload5, + this.workload6, + this.workload6, + this.workload2, + this.workload5, + ]; + } +} diff --git a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts index 905d3924a..69315fb0d 100644 --- a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts +++ b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts @@ -20,6 +20,7 @@ const routes: Routes = [ routeGuards: [DossierFilesGuard], breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier], dossiersService: ARCHIVED_DOSSIERS_SERVICE, + skeleton: 'dossier', }, loadChildren: () => import('../dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule), },