ChangeCalendar/frontend/src/ntt-gantt/ntt-gantt.component.html

171 lines
6.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<div id="topbar">
<mat-form-field appearance="fill">
<mat-label>{{lMap.get('dateRangeLabel')}}</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
<input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
</mat-date-range-input>
<!-- <mat-hint>tt.mm.yyyy tt.mm.yyyy</mat-hint> -->
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
<mat-radio-group
(change)="changeScalar()"
aria-labelledby="example-radio-group-label"
class="example-radio-group"
[(ngModel)]="selectedScalar">
<mat-radio-button color="primary" class="example-radio-button" *ngFor="let scalar of scalars" [value]="scalar" >
{{scalar}}
</mat-radio-button>
</mat-radio-group>
<!-- <p>Selected range: {{range.value | json}}</p> -->
<div class="toggleContainer">
<mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="renderDetails()">{{lMap.get('detailButton')}}</mat-slide-toggle>
<mat-slide-toggle [disabled]="filters == null" (change)="refreshData()" color="primary" [(ngModel)]="filterEnabled" [checked]="filterEnabled" (change)="applyFilter()">{{lMap.get('filterButton')}}</mat-slide-toggle>
<mat-slide-toggle color="primary" [(ngModel)]="sortEnabled" [checked]="sortEnabled" >{{lMap.get('sortButton')}}</mat-slide-toggle>
<button mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
{{lMap.get('clearFilter')}}<mat-icon>clear_all</mat-icon>
</button>
</div>
<mat-form-field style="width: 5%;">
<mat-label>{{lMap.get('language')}}</mat-label>
<mat-select (selectionChange)="languageChange($event)" [(value)]="language">
<mat-option *ngFor="let language of languages" [value]="language">
{{language}}
</mat-option>
</mat-select>
</mat-form-field>
<button style="justify-content: flex-end;" mat-icon-button aria-label="Filtern" (click)="openFilterDialog()">
<mat-icon>filter_list</mat-icon>
</button>
</div>
<div
*ngIf="!this.showNoResultsError" id="showSpin" data-bind="visible: spin"
style=" position: absolute; top: auto; left: 45%;">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet"/>
</div>
<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
[dataSource]="data"
[allowSorting] = 'true'
[resources]="resources"
[taskFields]="taskSettings"
[resourceFields]="resourceFields"
[editSettings]="editSettings"
[columns]="columns"
[toolbar]="toolbar"
[labelSettings]="labelSettings"
[allowSelection]='true'
[allowResizing] = 'true'
[highlightWeekends] = 'true'
[treeColumnIndex]="1"
[projectStartDate]="this.projectStartDate"
[projectEndDate]="this.projectEndDate"
viewType="ResourceView"
[showOverAllocation] = 'true'
[enableMultiTaskbar]= 'true'
[collapseAllParentTasks]= 'true'
[enableVirtualization]="false"
[allowSorting]= "true"
[allowFiltering]="false"
[timelineSettings]="timelineSettings"
[selectionSettings]="selectionSettings"
[tooltipSettings]="tooltipSettings"
[splitterSettings] = "splitterSettings"
gridLines="Both"
(actionBegin)="actionBegin($event)"
(taskbarEditing)="taskbarEditing($event)"
(taskbarEdited)="taskbarEdited($event)"
(toolbarClick)="toolbarBtnClicked($event)"
(rowSelected) = "rowSelected($event)"
(rowDeselected) = "rowDeselected($event)"
(created)="created($event)"
(dataBound)="dataBound($event)"
(load)="load($event)"
(onIntlChange)="onChange($event)"
(queryTaskbarInfo) = "queryTaskbarInfo($event)"
(expanding)="onExpand($event)"
(splitterResized)="onResizing($event)"
>
<ng-template #tooltipSettingsTaskbar let-data>
<div>
<table>
<ng-container>
<tr>
<td style="padding:3px">{{lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipState')}}: {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipPaketType')}}: {{data.taskData.resources[0].packageName}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipContract')}}: {{data.taskData.resources[0].vertragName}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipSupportGroupKv')}}: {{data.taskData.resources[0].supportGroup}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipSupportGroupIh')}}: {{data.taskData.resources[0].coordinatorSg}}</td>
</tr>
<tr>
<td style="padding:3px">{{lMap.get('tooltipDate')}}: {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
</tr>
<!-- <tr>
<td style="padding:3px"> Date: {{data.TaskID}}</td>
</tr> -->
</ng-container>
</table>
</div>
</ng-template>
</ejs-gantt>
<app-plan-time-bar #plantimeComponent *ngIf="renderplanTime"
[inputData]="inputForTimeline"
[splitterSettings]="splitterSettings"
[parentResources]="allResources"
[filters]="filters"
></app-plan-time-bar>
<div *ngIf="this.showNoResultsError && this.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</h2></div>
<div *ngIf="this.showNoResultsError && this.language =='EN'"><h2>The search did not return any results</h2></div>
<!-- [filterSettings]="filterSettings" -->
<mat-paginator #paginator
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
class="demo-paginator"
(page)="handlePageEvent($event)"
[length]="this.dataService.getTotalSize()"
[pageSize]="20"
[disabled]="false"
[showFirstLastButtons]="true"
[pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]"
[hidePageSize]="false"
[pageIndex]="0"
aria-label="Seite auswählen">
</mat-paginator>