Skip to content
Snippets Groups Projects
Commit d4bbb40d authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #16063 TIME 3 WIP dashboard home

parent c7c1d7e4
No related branches found
No related tags found
No related merge requests found
Showing
with 457 additions and 3 deletions
......@@ -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,
......
<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
@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
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;
});
}
}
<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
@import '../../../../../css/vars.scss';
.tile-title {
padding: 10px;
color: $primary;
font-weight: bold;
text-align: center;
}
\ No newline at end of file
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',
}
];
}
}
<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
@import '../../../../../../css/vars.scss';
.tile-icon {
position: absolute;
bottom: 0px;
left: 0px;
font-size: 90px;
opacity: 0.1;
}
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 { }
}
<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>
@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
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 { }
}
<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
@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
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 { }
}
......@@ -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>
......
@import '../../css/vars.scss';
.container-content {
background: none;
box-shadow: none;
}
.first_col {
position:relative;
text-align:center;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment