FEAT #16063 TIME 3 WIP dashboard home

src/frontend/app/app.module.ts

@@ -29,6 +29,13 @@ import { ActionsService } from './actions/actions.service';
 
 import { AppComponent } from './app.component';
 
+import { DashboardComponent } from './home/dashboard/dashboard.component';
+import { TileViewListComponent } from './home/dashboard/tile/view/list/tile-view-list.component';
+import { TileViewResumeComponent } from './home/dashboard/tile/view/resume/tile-view-resume.component';
+import { TileViewChartComponent } from './home/dashboard/tile/view/chart/tile-view-chart.component';
+import { TileLastMailsViewDashboardComponent } from './home/dashboard/tile/lastMailsView/tile-last-mails-view.component';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+
 // ACTIONS
 import { ConfirmActionComponent } from './actions/confirm-action/confirm-action.component';
 import { DisabledBasketPersistenceActionComponent } from './actions/disabled-basket-persistence-action/disabled-basket-persistence-action.component';
@@ -153,9 +160,15 @@ export class MyHammerConfig extends HammerGestureConfig {
         AdministrationModule,
         DocumentViewerModule,
         AppListModule,
+        NgxChartsModule
     ],
     declarations: [
         AppComponent,
+        DashboardComponent,
+        TileLastMailsViewDashboardComponent,
+        TileViewListComponent,
+        TileViewResumeComponent,
+        TileViewChartComponent,
         ProcessComponent,
         IndexationComponent,
         LinkResourceModalComponent,

src/frontend/app/home/dashboard/dashboard.component.html

+<div class="dashboard-container" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="tiles">
+    <div class="tile" [class.empty_tile_edit]="tile.id === null && tile.editMode" [class.empty_tile]="tile.id === null"
+        *ngFor="let tile of tiles;let i=index" (mouseenter)="enterTile(tile, i)" dnd-sortable [sortableIndex]="i">
+        <div class="tool-left" *ngIf="tile.id !== null && tile.editMode">
+            <span dnd-sortable-handle style="cursor: move;">
+                <mat-icon color="primary" class="fa fa-arrows-alt"></mat-icon>
+            </span>
+        </div>
+        <div class="tool" *ngIf="tile.id !== null && tile.editMode">
+            <button color="primary" mat-button mat-icon-button [matMenuTriggerFor]="toolMenu">
+                <mat-icon class="fa fa-ellipsis-v"></mat-icon>
+            </button>
+            <mat-menu #toolMenu="matMenu">
+                <ng-container  *ngFor="let menu of tile.menus">
+                    <button *ngIf="menu!=='view'" mat-menu-item>{{menu}}</button>
+                    <button *ngIf="menu==='view'" mat-menu-item [matMenuTriggerFor]="toolMenuView">{{menu}}</button>
+                </ng-container>
+            </mat-menu>
+            <mat-menu #toolMenuView="matMenu">
+                <button mat-menu-item *ngFor="let view of tile.views" [disabled]="tile.view === view" (click)="tile.view = view">
+                    <mat-icon class="fa fa-list" color="primary" style="height: auto;width: auto;"></mat-icon>
+                    <span>{{view}}</span>
+                </button>
+            </mat-menu>
+        </div>
+        <app-tile-last-mails-view *ngIf="tile.type === 'lastViewMails'" [view]="tile.view"
+            style="display: flex;height: 100%;flex-direction: column;width: 100%;">
+        </app-tile-last-mails-view>
+        <button mat-button color="secondary" mat-icon-button *ngIf="tile.id === null && tile.editMode">
+            <mat-icon color="secondary" class="fa fa-plus"></mat-icon>
+        </button>
+    </div>
+</div>
\ No newline at end of file

src/frontend/app/home/dashboard/dashboard.component.scss

+@import '../../../css/vars.scss';
+
+.dashboard-container {
+    display: grid;
+    grid-template-columns: repeat(3, 33%);
+}
+
+.tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    height: 250px;
+    background: white;
+}
+
+.empty_tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    height: 250px;
+    box-shadow: none;
+    background: none;
+}
+
+.empty_tile_edit {
+    border: dashed 2px $secondary;
+}
+
+.tool {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+
+.tool-left {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file

src/frontend/app/home/dashboard/dashboard.component.ts

+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { AppService } from '@service/app.service';
+
+@Component({
+    selector: 'app-dashboard',
+    templateUrl: 'dashboard.component.html',
+    styleUrls: ['dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit, AfterViewInit {
+
+    tiles: any = [
+        {
+            id: 1,
+            type: 'lastViewMails',
+            view: 'resume',
+            menus: [
+                'delete',
+                'view'
+            ],
+            views: [
+                'list',
+                'resume',
+                'chart'
+            ]
+        },
+        {
+            id: null,
+            type: null,
+            view: null,
+            menus: null,
+            views: null
+        },
+        {
+            id: 2,
+            type: 'lastViewMails',
+            view: 'list',
+            menus: [
+                'delete',
+                'view'
+            ],
+            views: [
+                'list',
+                'resume',
+                'chart'
+            ]
+        },
+        {
+            id: 3,
+            type: 'lastViewMails',
+            view: 'resume',
+            menus: [
+                'delete',
+                'view'
+            ],
+            views: [
+                'list',
+                'resume',
+                'chart'
+            ]
+        },
+        {
+            id: null,
+            type: null,
+            view: null,
+            menus: null,
+            views: null
+        },
+        {
+            id: 4,
+            type: 'lastViewMails',
+            view: 'list',
+            menus: [
+                'delete',
+                'view'
+            ],
+            views: [
+                'list',
+                'resume',
+                'chart'
+            ]
+        },
+    ];
+    constructor(
+        public translate: TranslateService,
+        public http: HttpClient,
+        public appService: AppService,
+    ) { }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void { }
+
+    enterTile(tile: any, index: number) {
+        this.tiles.forEach((element: any, indexTile: number) => {
+            element.editMode = indexTile === index ? true : false;
+        });
+    }
+}

src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.html

+<div class="tile-title">
+    Mes derniers courriers consultés
+</div>
+<app-tile-view-list *ngIf="view==='list'" [displayColumns]="['recipient','subject','creationDate']" [resources]="resources" [icon]="'fa-history'" style="display: flex;flex: 1;overflow: auto;"></app-tile-view-list>
+<app-tile-view-resume *ngIf="view==='resume'" [countResources]="resources.length" [icon]="'fa-history'"  [resourceLabel]="'courrier(s)'" style="display: flex;flex: 1;overflow: auto;"></app-tile-view-resume>
+<app-tile-view-chart *ngIf="view==='chart'" [icon]="'fa-history'" style="display: flex;flex: 1;overflow: auto;"></app-tile-view-chart>
\ No newline at end of file

src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.scss

+@import '../../../../../css/vars.scss';
+
+.tile-title {
+    padding: 10px;
+    color: $primary;
+    font-weight: bold;
+    text-align: center;
+}
\ No newline at end of file

src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.ts

+import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { AppService } from '@service/app.service';
+import { Time } from '@angular/common';
+import { TimeAgoPipe } from '@plugins/timeAgo.pipe';
+
+@Component({
+    selector: 'app-tile-last-mails-view',
+    templateUrl: 'tile-last-mails-view.component.html',
+    styleUrls: ['tile-last-mails-view.component.scss'],
+    providers: [TimeAgoPipe]
+})
+export class TileLastMailsViewDashboardComponent implements OnInit, AfterViewInit {
+
+    @Input() view: string = 'list';
+
+    testDate = new Date();
+
+    label: 'Mes derniers courriers consultés';
+
+    resources: any[] = [];
+
+    constructor(
+        public translate: TranslateService,
+        public http: HttpClient,
+        public appService: AppService,
+        private timeAgoPipe: TimeAgoPipe
+    ) { }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void {
+        this.resources = [
+            {
+                recipient: 'Jan-louis ERCOLANNI (MAARCH)',
+                subject: 'Réservation bal des basketteurs',
+                creationDate: '26-01-2021',
+            },
+            {
+                recipient: 'Jan-louis ERCOLANNI (MAARCH)',
+                subject: 'Réservation bal des basketteurs',
+                creationDate: '26-01-2021',
+            },
+            {
+                recipient: 'Jan-louis ERCOLANNI (MAARCH)',
+                subject: 'Réservation bal des basketteurs',
+                creationDate: '26-01-2021',
+            },
+            {
+                recipient: 'Jan-louis ERCOLANNI (MAARCH)',
+                subject: 'Réservation bal des basketteurs',
+                creationDate: '26-01-2021',
+            },
+            {
+                recipient: 'Jan-louis ERCOLANNI (MAARCH)',
+                subject: 'Réservation bal des basketteurs',
+                creationDate: '26-01-2021',
+            }
+        ];
+    }
+}

src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.html

+<ngx-charts-pie-chart 
+    [results]="saleData"
+    [legend]="false"
+    [labels]="true" >
+</ngx-charts-pie-chart>
+<i class="fa {{icon}} tile-icon" color="primary"></i>
\ No newline at end of file

src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.scss

+@import '../../../../../../css/vars.scss';
+
+.tile-icon {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    font-size: 90px;
+    opacity: 0.1;
+}

src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.ts

+import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { AppService } from '@service/app.service';
+
+@Component({
+    selector: 'app-tile-view-chart',
+    templateUrl: 'tile-view-chart.component.html',
+    styleUrls: ['tile-view-chart.component.scss'],
+})
+export class TileViewChartComponent implements OnInit, AfterViewInit {
+
+    @Input() icon: string = '';
+
+    saleData = [
+        { name: 'Litige', value: 24 },
+        { name: 'Convocation', value: 12 },
+        { name: 'Abonnement', value: 53 },
+        { name: 'Réservation', value: 21 },
+        { name: 'Invitation', value: 2 }
+    ];
+
+    testDate = new Date();
+
+    constructor(
+        public translate: TranslateService,
+        public http: HttpClient,
+        public appService: AppService,
+    ) { }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void { }
+}

src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.html

+<mat-list role="list" style="width: 100%;overflow: auto;">
+    <mat-list-item class="resource" role="listitem" *ngFor="let resource of resources">
+        <div class="item" *ngFor="let col of displayColumns">
+            {{resource[col]}}
+        </div>
+    </mat-list-item>
+</mat-list>
+<i class="fa {{icon}} tile-icon" color="primary"></i>

src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.scss

+@import '../../../../../../css/vars.scss';
+
+.item {
+    font-size: 12px;
+}
+
+.tile-icon {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    font-size: 90px;
+    opacity: 0.1;
+}
+
+.resource{
+    background: none;
+    transition: all 0.2s;
+}
+
+.resource:hover{
+    background: rgba($primary,0.1);
+    transition: all 0.2s;
+}
\ No newline at end of file

src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.ts

+import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { AppService } from '@service/app.service';
+
+@Component({
+    selector: 'app-tile-view-list',
+    templateUrl: 'tile-view-list.component.html',
+    styleUrls: ['tile-view-list.component.scss'],
+})
+export class TileViewListComponent implements OnInit, AfterViewInit {
+
+    @Input() displayColumns: string[];
+
+    @Input() resources: any[];
+    @Input() icon: string = '';
+
+    testDate = new Date();
+
+    constructor(
+        public translate: TranslateService,
+        public http: HttpClient,
+        public appService: AppService,
+    ) { }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void { }
+}

src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.html

+<div style="width: 100%;height: 100%;">
+    <div color="primary" class="resume-content">
+        <span class="resume-number">
+            {{countResources}}
+        </span>
+        <span class="resume-label">
+            {{resourceLabel}}
+        </span>
+    </div>
+    <i class="fa fa-history tile-icon" color="primary"></i>
+</div>
\ No newline at end of file

src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.scss

+@import '../../../../../../css/vars.scss';
+
+.tile-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 90px;
+    opacity: 0.1;
+    z-index: 1;
+}
+
+.resume-content {
+    z-index: 2;
+    position: absolute;
+    left: 50%;
+    top: 65%;
+    transform: translateY(-50%);
+    width: 50%;
+}
+
+.resume-number {
+    color: $secondary;
+    font-size: 50px;
+    font-weight: bold;
+}
+
+.resume-label {
+    font-size: 20px;
+    font-weight: bold;
+    color: #d9d9d9;
+}
\ No newline at end of file

src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.ts

+import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { AppService } from '@service/app.service';
+
+@Component({
+    selector: 'app-tile-view-resume',
+    templateUrl: 'tile-view-resume.component.html',
+    styleUrls: ['tile-view-resume.component.scss'],
+})
+export class TileViewResumeComponent implements OnInit, AfterViewInit {
+
+    @Input() countResources: any[];
+    @Input() icon: string = '';
+    @Input() resourceLabel: string = '';
+
+    constructor(
+        public translate: TranslateService,
+        public http: HttpClient,
+        public appService: AppService,
+    ) { }
+
+    ngOnInit(): void { }
+
+    ngAfterViewInit(): void { }
+}

src/frontend/app/home/home.component.html

@@ -25,7 +25,8 @@
         </div>
         <div class="container" [class.fullContainer]="appService.getViewMode()">
             <div class="container-content">
-                <mat-tab-group>
+                <app-dashboard></app-dashboard>
+                <!--<mat-tab-group>
                     <mat-tab *ngIf="homeData !== undefined && homeData.isLinkedToMaarchParapheur">
                         <ng-template matTabLabel>
                             <span [class.noDoc]="nbMpDocs === 0" matBadge="{{nbMpDocs}}"
@@ -39,7 +40,6 @@
                         </div>
                         <table *ngIf="!loading" mat-table [dataSource]="dataSource" matSort matSortActive="res_id"
                             matSortDisableClear matSortDirection="asc" style="width:100%;table-layout: fixed;">
-                            <!-- Number Column -->
                             <ng-container matColumnDef="res_id">
                                 <td class="first_col" mat-cell *matCellDef="let row"
                                     [ngStyle]="{'width': appService.getViewMode() ? '30%' : '15%'}">
@@ -112,7 +112,7 @@
                                 style="cursor:pointer;"></tr>
                         </table>
                     </mat-tab>
-                </mat-tab-group>
+                </mat-tab-group>-->
             </div>
         </div>
     </mat-sidenav-content>

src/frontend/app/home/home.component.scss

 @import '../../css/vars.scss';
 
+.container-content {
+    background: none;
+    box-shadow: none;
+}
+
 .first_col {
     position:relative;
     text-align:center;