Improved tooltip

Author: renemadsen

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.html

@@ -58,7 +58,7 @@
         </strong>
       </div>
       <div class="plan-text" *ngIf="row.planningPrDayModels[col.field]?.plannedStartOfShift1 === 0 && row.planningPrDayModels[col.field]?.planHours !== 0">
-        <strong class="{{ getCellTextColor(row, col.field) }}">
+        <strong class="{{ getCellTextColor(row, col.field) }}" [matTooltip]="'PlannedHours' | translate ">
           {{ convertHoursToTime(row.planningPrDayModels[col.field]?.planHours) }}
         </strong>
       </div>
@@ -100,12 +100,12 @@
 
     <!-- Right Icons -->
     <div class="plan-icons">
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 2" class="blue-text">flight</mat-icon>
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 3 || row.planningPrDayModels[col.field]?.message === 7 || row.planningPrDayModels[col.field]?.message === 8" class="red-text">sick</mat-icon>
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 1" class="blue-text">event_busy</mat-icon>
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 4" class="blue-text">school</mat-icon>
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 5" class="blue-text">event_busy</mat-icon>
-      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 9" class="blue-text">outdoor_grill</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 2" class="blue-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">flight</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 3 || row.planningPrDayModels[col.field]?.message === 7 || row.planningPrDayModels[col.field]?.message === 8" class="red-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">sick</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 1" class="blue-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">event_busy</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 4" class="blue-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">school</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 5" class="blue-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">event_busy</mat-icon>
+      <mat-icon *ngIf="row.planningPrDayModels[col.field]?.message === 9" class="blue-text" [matTooltip]="enumKeys[row.planningPrDayModels[col.field]?.message - 1] | translate">outdoor_grill</mat-icon>
     </div>
   </div>
 </ng-template>

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.ts

@@ -5,11 +5,12 @@ import {
 import {AssignedSiteModel, TimePlanningModel} from '../../../models';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
 import {TranslateService} from '@ngx-translate/core';
-import {TimePlanningPnSettingsService} from 'src/app/plugins/modules/time-planning-pn/services';
+import {TimePlanningPnSettingsService} from '../../../services';
 import {MatDialog} from '@angular/material/dialog';
 import {AssignedSiteDialogComponent, WorkdayEntityDialogComponent} from '../';
 import {DatePipe} from '@angular/common';
 import * as R from 'ramda';
+import {TimePlanningMessagesEnum} from '../../../enums';
 
 @Component({
   selector: 'app-time-plannings-table',
@@ -27,6 +28,7 @@ export class TimePlanningsTableComponent implements OnInit, OnChanges {
   @Output() assignedSiteChanged: EventEmitter<AssignedSiteModel> = new EventEmitter<AssignedSiteModel>();
   @Output() sortChanged: EventEmitter<string> = new EventEmitter<string>();
   tableHeaders: MtxGridColumn[] = [];
+  enumKeys: string[];
 
   @ViewChild('firstColumnTemplate', {static: true}) firstColumnTemplate!: TemplateRef<any>;
   @ViewChild('dayColumnTemplate', {static: true}) dayColumnTemplate!: TemplateRef<any>;
@@ -41,6 +43,7 @@ export class TimePlanningsTableComponent implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    this.enumKeys = Object.keys(TimePlanningMessagesEnum).filter(key => isNaN(Number(key)));
     this.updateTableHeaders();
   }
 

eform-client/src/app/plugins/modules/time-planning-pn/i18n/bgBG.ts

@@ -95,4 +95,5 @@ export const bgBG = {
   TimeOff: 'Свободно време',
   Shift: 'Shift',
   Registered: 'Регистриран',
+  PlannedHours: 'Планирани часове',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/csCZ.ts

@@ -95,4 +95,5 @@ export const csCZ = {
   TimeOff: 'Volno',
   Shift: 'Posun',
   Registered: 'Registrovaný',
+  PlannedHours: 'Plánované hodiny',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/da.ts

@@ -93,4 +93,5 @@ export const da = {
   TimeOff: 'Ferie fridag',
   Shift: 'Skift',
   Registered: 'Registreret',
+  PlannedHours: 'Planlagte timer',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/deDE.ts

@@ -95,4 +95,5 @@ export const deDE = {
   TimeOff: 'Auszeit',
   Shift: 'Schicht',
   Registered: 'Eingetragen',
+  PlannedHours: 'Geplante Stunden',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/elGR.ts

@@ -95,4 +95,5 @@ export const elGR = {
   TimeOff: 'Ρεπό',
   Shift: 'Αλλαγή',
   Registered: 'Εγγεγραμμένος',
+  PlannedHours: 'Προγραμματισμένες ώρες',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/enUS.ts

@@ -92,5 +92,6 @@ export const enUS = {
   'Flex balance to date': 'Flex balance to date',
   'TimeOff': 'Time off',
   'Shift': 'Shift',
-  'Registered': 'Registered'
+  'Registered': 'Registered',
+  'PlannedHours': 'Planned hours',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/esES.ts

@@ -95,4 +95,5 @@ export const esES = {
   TimeOff: 'Tiempo libre',
   Shift: 'Cambio',
   Registered: 'Registrado',
+  PlannedHours: 'Horas planificadas',
 };

eform-client/src/app/plugins/modules/time-planning-pn/i18n/etET.ts

@@ -95,4 +95,5 @@ export const etET = {
   TimeOff: 'Vaba aeg',
   Shift: 'Shift',
   Registered: 'Registreeritud',
+  PlannedHours: 'Planeeritud tunnid',
 };