RED-3796: Dashboard #1

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

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

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

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

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html

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

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss

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

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts

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

apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.html

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

apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss

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

apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts

@@ -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) {}
+}

apps/red-ui/src/app/modules/dashboard/dashboard.module.ts

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

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

@@ -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",

libs/common-ui

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