From 2c56ff6b821010f682f9bcd457f54db485283264 Mon Sep 17 00:00:00 2001
From: manueltauber <manuel.tauber@emea.nttdata.com>
Date: Mon, 22 May 2023 11:30:14 +0200
Subject: [PATCH] Tooltip/Done

---
 .../src/ntt-gantt/ntt-gantt.component.html    | 100 +++++-------------
 frontend/src/ntt-gantt/ntt-gantt.component.ts |   8 ++
 2 files changed, 34 insertions(+), 74 deletions(-)

diff --git a/frontend/src/ntt-gantt/ntt-gantt.component.html b/frontend/src/ntt-gantt/ntt-gantt.component.html
index bfccad9..4f880a5 100644
--- a/frontend/src/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/ntt-gantt/ntt-gantt.component.html
@@ -30,78 +30,6 @@
     <mat-slide-toggle  color="primary" [(ngModel)]="sortEnabled" [checked]="sortEnabled" >Sortieren</mat-slide-toggle>
   </div>
 
- <!-- <button mat-button (click)="openFilterDialog()">Filtern</button> -->
-  <!-- <mat-accordion class="filter">
-
-
-    <mat-expansion-panel (opened)="panelOpenState = true"
-                         (closed)="panelOpenState = false">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          Filter
-        </mat-panel-title>
-        <mat-panel-description>
-          {{filterEnabled ? 'Filter aktiviert' : 'kein Filter aktiv'}}
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-
-      <h3>Kurzbeschreibung* (Eingabe eines Textteiles filtert alle passenden Pakete)</h3>
-      <mat-form-field  appearance="fill" >
-        <mat-label>Text durchsuchen</mat-label>
-        <input matInput type="text" [(ngModel)]="criteria" >
-      </mat-form-field>
-      <h3>Paket-Typ (einen oder mehrere, exakte Eingabe)</h3>
-      <section class="example-section">
-          <mat-checkbox class="checkbox" *ngFor="let paketType of paketTypeList" [(ngModel)]="paketType.checked"
-                        color="primary">
-                        {{paketType.name}}</mat-checkbox>
-      </section>
-
-      <h3>Gewählte Supportgruppe in der Rolle "Planender IH" oder "Kostenverantwortlicher" (eine)</h3>
-      <mat-radio-group
-      [(ngModel)]="selectedSupportGroup"
-        aria-labelledby="example-radio-group-label"
-        class="example-radio-group"
-        [(ngModel)]="selectedSupportGroup">
-        <mat-radio-button class="example-radio-button" *ngFor="let supportGroup of supportGroupList" [value]="supportGroup">
-          {{supportGroup.name}}
-        </mat-radio-button>
-      </mat-radio-group>
-
-      <h3>Status (einer oder mehrere) des Pakets</h3>
-      <section class="example-section">
-        <mat-checkbox class="checkbox" *ngFor="let state of stateList" [(ngModel)]="state.checked"
-                      color="primary">
-                      {{state.stateNameDE}}</mat-checkbox>
-      </section>
-      <h3>Vertrag / Provider-Cluster (einen oder mehrere)</h3>
-      <section class="example-section">
-        <mat-checkbox class="checkbox" *ngFor="let vertrag of vertragList" [(ngModel)]="vertrag.checked"
-                      color="primary">
-                      {{vertrag.name}}</mat-checkbox>
-      </section>
-
-
-      <h3>Geplantes Start-Datum: Von / Bis</h3>
-      <mat-form-field appearance="fill">
-        <mat-label>Von</mat-label>
-        <input matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
-        <mat-hint>MM/DD/YYYY</mat-hint>
-        <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
-        <mat-datepicker #picker1></mat-datepicker>
-      </mat-form-field>
-      -
-      <mat-form-field appearance="fill">
-        <mat-label>Bis</mat-label>
-        <input matInput [matDatepicker]="picker2" [(ngModel)]="filterEndDate">
-        <mat-hint>MM/DD/YYYY</mat-hint>
-        <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
-        <mat-datepicker #picker2></mat-datepicker>
-      </mat-form-field>
-      <br><br>
-      <button  mat-raised-button color = "primary" (click)="buildFilterObject()">Filter anwenden</button>
-    </mat-expansion-panel>
-  </mat-accordion> -->
   <button style="justify-content: flex-end;" mat-icon-button aria-label="Filtern" (click)="openFilterDialog()">
     <mat-icon>filter_list</mat-icon>
   </button>
@@ -143,6 +71,7 @@
     [allowFiltering]="false"
     [timelineSettings]="timelineSettings"
     [selectionSettings]="selectionSettings"
+    [tooltipSettings]="tooltipSettings"
     gridLines="Both"
 
     (actionBegin)="actionBegin($event)"
@@ -157,9 +86,32 @@
     (onIntlChange)="onChange($event)"
     (queryTaskbarInfo) = "queryTaskbarInfo($event)"
     (expanding)="onExpand($event)"
+  >
+  <ng-template #tooltipSettingsTaskbar let-data>
+    <div>
+      <table>
+        <ng-container>
+          <tr>
+            <td style="padding:3px">Name: {{data.taskData.resources[0].resourceName}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">Status: {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">Vertrag: {{data.taskData.resources[0].vertragName}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">SupportGruppe: {{data.taskData.resources[0].supportGroup}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">Geplantes Start Datum: {{data.taskData.StartDate}}</td>
+          </tr>
+        </ng-container>
+      </table>
+    </div>
+  </ng-template>
+</ejs-gantt>
 
-
-  ></ejs-gantt>
   <!-- [filterSettings]="filterSettings" -->
 
     <mat-paginator  #paginator
diff --git a/frontend/src/ntt-gantt/ntt-gantt.component.ts b/frontend/src/ntt-gantt/ntt-gantt.component.ts
index 7c1f408..62e3523 100644
--- a/frontend/src/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/ntt-gantt/ntt-gantt.component.ts
@@ -11,6 +11,7 @@ import {MatDialog} from '@angular/material/dialog';
 import * as $ from 'jquery';
 import { StateDialogComponent } from 'src/app/state-dialog/state-dialog.component';
 import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
+import { Tooltip } from '@syncfusion/ej2-popups';
 
 
 @Component({
@@ -38,6 +39,7 @@ export class NttGanttComponent implements OnInit {
   public projectEndDate: Date = new Date('01/31/2024');
   public resourceFields: object ={};
   public editSettings: object = {};
+  public tooltipSettings: object ={};
   public columns: object[] = [];
   public toolbar: any[] = [];
   public timelineSettings: object ={};
@@ -239,9 +241,15 @@ export class NttGanttComponent implements OnInit {
           count: 1
       }
     };
+    this.tooltipSettings = {
+      showTooltip: true,
+      }
+
      this.projectStartDate = this.range.controls.start.value;
      this.projectEndDate = this.range.controls.end.value;
   }
+
+
   /**
    * The function taskbarEditing catches the corresponding syncfsuions event and cancels the user action if the isFixed flag of a task (Date) is set true
    * @param args event arguments from the syncfusion gantt chart