diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index fd07db758a834553774eb96a079ecdbb69ec4601..65498902069a8551e53636046247c8b8fa104b80 100755
--- a/src/frontend/app/app.module.ts
+++ b/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,
diff --git a/src/frontend/app/home/dashboard/dashboard.component.html b/src/frontend/app/home/dashboard/dashboard.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..83e27cfbd95286b0cf051295e69576c289a221db
--- /dev/null
+++ b/src/frontend/app/home/dashboard/dashboard.component.html
@@ -0,0 +1,33 @@
+<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
diff --git a/src/frontend/app/home/dashboard/dashboard.component.scss b/src/frontend/app/home/dashboard/dashboard.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8d42b7d3dabc246a083bbadab19a69f99701eb22
--- /dev/null
+++ b/src/frontend/app/home/dashboard/dashboard.component.scss
@@ -0,0 +1,49 @@
+@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
diff --git a/src/frontend/app/home/dashboard/dashboard.component.ts b/src/frontend/app/home/dashboard/dashboard.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88ce3adb3bdfefd8f8fd42000f1521b5e5149ef7
--- /dev/null
+++ b/src/frontend/app/home/dashboard/dashboard.component.ts
@@ -0,0 +1,100 @@
+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;
+ });
+ }
+}
diff --git a/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.html b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..828f62d002701abdf399f0585906ede9917299c5
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.html
@@ -0,0 +1,6 @@
+<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
diff --git a/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.scss b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dad0b53288c98b08be588cd2c089a777fbd9252c
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.scss
@@ -0,0 +1,8 @@
+@import '../../../../../css/vars.scss';
+
+.tile-title {
+ padding: 10px;
+ color: $primary;
+ font-weight: bold;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.ts b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6aaa4475a533dcb930f38d6934a87316d3a90354
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/lastMailsView/tile-last-mails-view.component.ts
@@ -0,0 +1,62 @@
+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',
+ }
+ ];
+ }
+}
diff --git a/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.html b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..05709edd81fa704ad8ec0658fbb78434adf00af8
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.html
@@ -0,0 +1,6 @@
+<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
diff --git a/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.scss b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..29752795fa558e26c6c8c5d70ddc0b67c271bb92
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.scss
@@ -0,0 +1,9 @@
+@import '../../../../../../css/vars.scss';
+
+.tile-icon {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ font-size: 90px;
+ opacity: 0.1;
+}
diff --git a/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.ts b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37f14cb8d29af2f4b049ca4829cb39134fd5dee9
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/chart/tile-view-chart.component.ts
@@ -0,0 +1,34 @@
+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 { }
+}
diff --git a/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.html b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d3d4c5b510e66defabb43f4f8fef902e7d3f8e89
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.html
@@ -0,0 +1,8 @@
+<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>
diff --git a/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.scss b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6a6c01e6f3d77f9061e5ab1328aff4816a0fb627
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.scss
@@ -0,0 +1,23 @@
+@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
diff --git a/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.ts b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ed6195893ed6751c466356062b3df2780a01482
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/list/tile-view-list.component.ts
@@ -0,0 +1,29 @@
+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 { }
+}
diff --git a/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.html b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..69eb51bf734fa19a10b98867c1102b2f57b41691
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.html
@@ -0,0 +1,11 @@
+<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
diff --git a/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.scss b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f4fac1a754217af51f99f7916389b08da035c07c
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.scss
@@ -0,0 +1,32 @@
+@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
diff --git a/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.ts b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29626283e0abe0f41a2e31eac15b848219f24334
--- /dev/null
+++ b/src/frontend/app/home/dashboard/tile/view/resume/tile-view-resume.component.ts
@@ -0,0 +1,26 @@
+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 { }
+}
diff --git a/src/frontend/app/home/home.component.html b/src/frontend/app/home/home.component.html
index 3f9ae528c795b440c54c8477e3c281adfdaf90b8..5a4539c7df8d4c3c4799601f19b2eb65c6a67a62 100644
--- a/src/frontend/app/home/home.component.html
+++ b/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>
diff --git a/src/frontend/app/home/home.component.scss b/src/frontend/app/home/home.component.scss
index 0efda6154a3fc5e2f795755478cb378febea4aee..910844adf8430ad7da1b2185a3281de216b10aa3 100644
--- a/src/frontend/app/home/home.component.scss
+++ b/src/frontend/app/home/home.component.scss
@@ -1,5 +1,10 @@
@import '../../css/vars.scss';
+.container-content {
+ background: none;
+ box-shadow: none;
+}
+
.first_col {
position:relative;
text-align:center;