taubem
/
ChangeCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tooltip/Done

main
manueltauber 2023-05-22 11:30:14 +02:00
parent 27fa61cb9c
commit 2c56ff6b82
2 changed files with 34 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/ntt-gantt/ntt-gantt.component.html
View File

@ -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

8
frontend/src/ntt-gantt/ntt-gantt.component.ts
View File

@ -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