Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-5085: Dossier skeleton WIP

Browse Source
This commit is contained in:
Adina Țeudan 2022-12-14 17:45:19 +02:00
parent aa3a52b4b2
commit c65ce41447
8 changed files with 245 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/app-routing.module.ts
View File

@ -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',
},
},
{

8
apps/red-ui/src/app/app.component.html
View File

@ -6,8 +6,12 @@
<iqser-connection-status></iqser-connection-status>
<iqser-full-page-error></iqser-full-page-error>
<iqser-skeleton [templates]="{ Dashboard: Dashboard }"></iqser-skeleton>
<iqser-skeleton [templates]="{ dashboard: dashboardSkeleton, dossier: dossierSkeleton }"></iqser-skeleton>
<ng-template #Dashboard>
<ng-template #dashboardSkeleton>
<redaction-dashboard-skeleton></redaction-dashboard-skeleton>
</ng-template>
<ng-template #dossierSkeleton>
<redaction-dossier-skeleton></redaction-dossier-skeleton>
</ng-template>

2
apps/red-ui/src/app/app.module.ts
View File

@ -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,
];

5
apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss
View File

@ -15,11 +15,6 @@
}
}
.skeleton-line {
background-color: var(--iqser-grey-4);
border-radius: 12px;
}
mat-icon {
width: unset;
height: unset;

115
apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html Normal file
View File

@ -0,0 +1,115 @@
<redaction-skeleton-top-bar></redaction-skeleton-top-bar>
<section class="animate-flicker">
<div class="page-header">
<div class="flex-align-items-center w-100p">
<div class="sk-line sk-h-8 sk-w-56 mr-16"></div>
<ng-container *ngFor="let filter of [].constructor(3)">
<div class="sk-square mr-4"></div>
<div class="sk-line sk-h-8 sk-w-110 mr-25"></div>
</ng-container>
</div>
<div class="flex-align-items-center">
<div *ngFor="let button of [].constructor(5)" class="sk-square mr-20"></div>
<div class="sk-square ml-14"></div>
<div class="sk-square ml-26"></div>
</div>
</div>
<div class="overlay-shadow"></div>
<div class="content-inner">
<div class="content-container">
<div class="header-item">
<div class="header-title w-100p">
<iqser-round-checkbox></iqser-round-checkbox>
<div class="sk-line sk-h-8 sk-w-110"></div>
</div>
</div>
<div class="sk-table">
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-110"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-line sk-h-8 sk-w-110"></div>
</div>
</div>
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-70"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-line sk-h-8 sk-w-70"></div>
</div>
</div>
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-60"></div>
</div>
<div *ngFor="let template of workloadTemplates" class="sk-table-cell">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
</div>
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-40"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-line sk-h-8 sk-w-40"></div>
</div>
</div>
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-70"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-circle w-24"></div>
</div>
</div>
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-70"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-line sk-h-8 sk-w-12"></div>
</div>
</div>
</div>
</div>
<div class="right-container"></div>
</div>
</section>
<ng-template #workload1>
<div class="sk-square mr-4"></div>
<div class="sk-square mr-4"></div>
<div class="sk-rhombus"></div>
</ng-template>
<ng-template #workload2>
<div class="sk-square"></div>
</ng-template>
<ng-template #workload3></ng-template>
<ng-template #workload4>
<div class="sk-circle w-16 mr-4"></div>
<div class="sk-rhombus"></div>
</ng-template>
<ng-template #workload5>
<div class="sk-circle w-16"></div>
</ng-template>
<ng-template #workload6>
<div class="sk-square mr-4"></div>
<div class="sk-square"></div>
</ng-template>

84
apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss Normal file
View File

@ -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;
}
}

35
apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts Normal file
View File

@ -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<unknown>;
@ViewChild('workload2', { static: true }) workload2: TemplateRef<unknown>;
@ViewChild('workload3', { static: true }) workload3: TemplateRef<unknown>;
@ViewChild('workload4', { static: true }) workload4: TemplateRef<unknown>;
@ViewChild('workload5', { static: true }) workload5: TemplateRef<unknown>;
@ViewChild('workload6', { static: true }) workload6: TemplateRef<unknown>;
workloadTemplates: TemplateRef<unknown>[];
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,
];
}
}

1
apps/red-ui/src/app/modules/archive/archive-routing.module.ts
View File

@ -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),
},