FEAT #16063 TIME 0:30 WIP dashboard (view thumbnail)

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

 import { Component, OnInit, AfterViewInit, QueryList, ViewChildren } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
-import { AppService } from '@service/app.service';
 import { DashboardService } from './dashboard.service';
 import { FunctionsService } from '@service/functions.service';
 

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

@@ -56,26 +56,31 @@ export class TileLastMailsViewDashboardComponent implements OnInit, AfterViewIni
             setTimeout(() => {
                 this.resources = [
                     {
+                        resId: 100,
                         recipient: 'Jan-louis ERCOLANNI (MAARCH)',
                         subject: 'Réservation bal des basketteurs',
                         creationDate: '26-01-2021',
                     },
                     {
+                        resId: 100,
                         recipient: 'Jan-louis ERCOLANNI (MAARCH)',
                         subject: 'Réservation bal des basketteurs',
                         creationDate: '26-01-2021',
                     },
                     {
+                        resId: 100,
                         recipient: 'Jan-louis ERCOLANNI (MAARCH)',
                         subject: 'Réservation bal des basketteurs',
                         creationDate: '26-01-2021',
                     },
                     {
+                        resId: 100,
                         recipient: 'Jan-louis ERCOLANNI (MAARCH)',
                         subject: 'Réservation bal des basketteurs',
                         creationDate: '26-01-2021',
                     },
                     {
+                        resId: 100,
                         recipient: 'Jan-louis ERCOLANNI (MAARCH)',
                         subject: 'Réservation bal des basketteurs',
                         creationDate: '26-01-2021',

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

+<i class="fa {{icon}} tile-icon" color="primary"></i>
 <mat-list role="list" style="width: 100%;overflow: auto;">
-    <mat-list-item class="resource" role="listitem" *ngFor="let resource of resources">
+    <mat-list-item class="resource" role="listitem" *ngFor="let resource of resources" (mouseenter)="resource.hovered=true" (mouseleave)="resource.hovered=false">
         <div class="item" *ngFor="let col of displayColumns">
             {{resource[col]}}
         </div>
+        <div [style.visibility]="resource.hovered ? 'initial': 'hidden'" class="view-action" (mouseenter)="viewThumbnail($event,resource);" (mouseleave)="closeThumbnail();">
+            <i class="fa fa-eye view-action-icon" color="primary"></i>
+        </div>
     </mat-list-item>
 </mat-list>
-<i class="fa {{icon}} tile-icon" color="primary"></i>
+<mat-card id="viewThumbnail" style="display:none;top:0px;right:0px;position: fixed;z-index: 2;margin-left: 1px;"><img style="max-height: 100vh;" *ngIf="thumbnailUrl !== ''" [src]="thumbnailUrl | secureUrl | async" /></mat-card>
\ No newline at end of file

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

@@ -20,4 +20,11 @@
 .resource:hover{
     background: rgba($primary,0.1);
     transition: all 0.2s;
+}
+
+.view-action:hover {
+    z-index: 3;
+    .view-action-icon {
+        // visibility: hidden;
+    }
 }
\ No newline at end of file

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

@@ -15,6 +15,7 @@ export class TileViewListComponent implements OnInit, AfterViewInit {
     @Input() resources: any[];
     @Input() icon: string = '';
 
+    thumbnailUrl: string = '';
     testDate = new Date();
 
     constructor(
@@ -26,4 +27,15 @@ export class TileViewListComponent implements OnInit, AfterViewInit {
     ngOnInit(): void { }
 
     ngAfterViewInit(): void { }
+
+    viewThumbnail(ev: any, resource: any) {
+        const timeStamp = +new Date();
+        this.thumbnailUrl = '../rest/resources/' + resource.resId + '/thumbnail?tsp=' + timeStamp;
+        $('#viewThumbnail').show();
+        console.log(ev);
+    }
+
+    closeThumbnail() {
+        $('#viewThumbnail').hide();
+    }
 }

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

 <mat-sidenav-container autosize class="maarch-container" joyrideStep="welcome" stepPosition="center">
     <mat-sidenav-content>
-        <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img
-                style="max-height: 100vh;" *ngIf="thumbnailUrl !== ''" [src]="thumbnailUrl | secureUrl | async" />
-        </mat-card>
         <div class="bg-head">
             <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                 <div class="bg-head-title-label">