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

RED-3796: Dashboard #1

Browse Source
This commit is contained in:
Adina Țeudan 2022-04-19 23:43:42 +03:00
parent 1df0ced12d
commit a11d02f126
11 changed files with 149 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import { DOSSIERS_ARCHIVE } from '@utils/constants';
const routes: Routes = [
{
path: '',
redirectTo: 'main/dossiers',
redirectTo: 'main/dashboard',
pathMatch: 'full',
},
{
@ -33,6 +33,16 @@ const routes: Routes = [
component: BaseScreenComponent,
loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
},
{
path: 'main/dashboard',
component: BaseScreenComponent,
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard],
requiredRoles: ['RED_USER', 'RED_MANAGER'],
},
},
{
path: 'main/dossiers',
component: BaseScreenComponent,

2
apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.scss
View File

@ -1,3 +1,3 @@
:host {
display: flex;
flex-direction: row;
}

12
apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html Normal file
View File

@ -0,0 +1,12 @@
<div *ngIf="dossierTemplate$ | async as dossierTemplate" class="dialog">
<!-- <div>{{ dossierTemplate.name }}</div>-->
<!-- <div>-->
<!-- <pre>{{ stats$ | async | json }}</pre>-->
<!-- </div>-->
<!-- <div>stats2</div>-->
<div class="empty">
<div>nothing here</div>
<div>btn</div>
</div>
</div>

23
apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss Normal file
View File

@ -0,0 +1,23 @@
.dialog {
flex-direction: row;
max-width: unset;
> div {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
&:not(:first-child) {
align-items: center;
justify-content: center;
border-left: 1px solid var(--iqser-separator);
}
&.empty {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
}

34
apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts Normal file
View File

@ -0,0 +1,34 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { DossierTemplatesService } from '../../../../services/entity-services/dossier-templates.service';
import { DossierTemplate, DossierTemplateStats } from '@red/domain';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
@Component({
selector: 'redaction-template-stats [dossierTemplateId]',
templateUrl: './template-stats.component.html',
styleUrls: ['./template-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TemplateStatsComponent implements OnChanges {
@Input() dossierTemplateId: string;
readonly dossierTemplate$: Observable<DossierTemplate>;
readonly stats$: Observable<DossierTemplateStats>;
readonly #ngOnChanges$ = new BehaviorSubject<string>(undefined);
constructor(
private readonly _dossierTemplatesService: DossierTemplatesService,
private readonly _dossierTemplateStatsService: DossierTemplateStatsService,
) {
this.dossierTemplate$ = this.#ngOnChanges$.pipe(switchMap(id => this._dossierTemplatesService.getEntityChanged$(id)));
this.stats$ = this.#ngOnChanges$.pipe(switchMap(id => this._dossierTemplateStatsService.watch$(id)));
}
ngOnChanges() {
if (this.dossierTemplateId) {
this.#ngOnChanges$.next(this.dossierTemplateId);
}
}
}

12
apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.html Normal file
View File

@ -0,0 +1,12 @@
<div class="overlay-shadow"></div>
<div class="container">
<h2 [translateParams]="{ name: currentUser.firstName || currentUser.name }" [translate]="'dashboard.greeting.title'"></h2>
<p translate="dashboard.greeting.subtitle"></p>
<redaction-template-stats
*ngFor="let dossierTemplate of dossierTemplatesService.all$ | async"
[dossierTemplateId]="dossierTemplate.id"
></redaction-template-stats>
</div>

11
apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss Normal file
View File

@ -0,0 +1,11 @@
:host {
align-items: center;
background-color: var(--iqser-grey-2);
.container {
padding: 32px;
width: 900px;
max-width: 100%;
box-sizing: border-box;
}
}

15
apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { UserService } from '../../../services/user.service';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
@Component({
selector: 'redaction-dashboard-screen',
templateUrl: './dashboard-screen.component.html',
styleUrls: ['./dashboard-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardScreenComponent {
readonly currentUser = this._userService.currentUser;
constructor(private readonly _userService: UserService, readonly dossierTemplatesService: DossierTemplatesService) {}
}

23
apps/red-ui/src/app/modules/dashboard/dashboard.module.ts Normal file
View File

@ -0,0 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardScreenComponent } from './dashboard-screen/dashboard-screen.component';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { TemplateStatsComponent } from './components/template-stats/template-stats.component';
import { DossierTemplatesGuard } from '../../guards/dossier-templates.guard';
import { CompositeRouteGuard } from '@iqser/common-ui';
const routes = [
{
path: '',
component: DashboardScreenComponent,
canActivate: [CompositeRouteGuard],
data: { routeGuards: [DossierTemplatesGuard] },
},
];
@NgModule({
declarations: [DashboardScreenComponent, TemplateStatsComponent],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
})
export class DashboardModule {}

6
apps/red-ui/src/assets/i18n/en.json
View File

@ -8,6 +8,12 @@
"all": "All",
"none": "None"
},
"dashboard": {
"greeting": {
"title": "Welcome, {name}!",
"subtitle": "Here's what's happening in your redaction teams today."
}
},
"add-dossier-dialog": {
"actions": {
"save": "Save",

2
libs/common-ui

@ -1 +1 @@
Subproject commit fd9d622413547de842439e8d91ee4316f2facff1
Subproject commit 3684acc2c99fafc88351af188745c10065c16cdb