1217 lines
38 KiB
TypeScript
1217 lines
38 KiB
TypeScript
import { FilterDialogComponent } from './../app/filter-dialog/filter-dialog.component';
|
||
import { filteredData, editingData } from './../data';
|
||
import { ImplementerDialogComponent } from './../app/implementer-dialog/implementer-dialog.component';
|
||
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
|
||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
|
||
import { DataService } from 'src/app/data.service';
|
||
import { projectNewData } from 'src/data';
|
||
import {FormGroup, FormControl} from '@angular/forms';
|
||
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 { MAT_DATE_FORMATS } from '@angular/material/core';
|
||
|
||
export const MY_DATE_FORMATS = {
|
||
parse: {
|
||
dateInput: 'DD.MM.YYYY',
|
||
},
|
||
display: {
|
||
dateInput: 'DD.MM.YYYY',
|
||
monthYearLabel: 'MMMM YYYY',
|
||
dateA11yLabel: 'LL',
|
||
monthYearA11yLabel: 'MMMM YYYY'
|
||
},
|
||
};
|
||
|
||
@Component({
|
||
selector: 'ntt-gantt',
|
||
templateUrl: './ntt-gantt.component.html',
|
||
styleUrls: ['./ntt-gantt.component.css'],
|
||
providers: [
|
||
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
|
||
]
|
||
})
|
||
export class NttGanttComponent implements OnInit {
|
||
@ViewChild('ganttObject')
|
||
public ganttDefault!: GanttComponent;
|
||
|
||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||
|
||
public range = new FormGroup({
|
||
start: new FormControl<Date | null>(new Date('12/01/2022')),
|
||
end: new FormControl<Date | null>(new Date('01/31/2024')),
|
||
});
|
||
|
||
public data: any[] = [];
|
||
public allResources: any[] = [];
|
||
public resources: any[] = [];
|
||
public userSupportGroup: string;
|
||
public taskSettings: object = {};
|
||
public labelSettings: object = {};
|
||
public projectStartDate: Date = new Date('12/01/2022');
|
||
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 = {};
|
||
public rendering: boolean = true;
|
||
public blockedTaskIDs : number [] = [8];
|
||
public selectionSettings : object = {};
|
||
public spin: boolean = true;
|
||
public sliceStart: number;
|
||
public sliceEnd: number;
|
||
public filterSettings: object;
|
||
public splitterSettings : object;
|
||
public renderGantt: boolean;
|
||
public firstLoad: boolean;
|
||
public selectedScalar: string;
|
||
public scalars: string[];
|
||
public showDetails: boolean = true;
|
||
public panelOpenState:boolean;
|
||
public showNoResultsError: boolean = false;
|
||
public languages: string[] = ['DE', 'EN'];
|
||
public language: string = 'DE';
|
||
public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
|
||
public verticalPosition: MatSnackBarVerticalPosition = 'bottom';
|
||
|
||
public deMap : Map<string, string> = new Map<string, string>()
|
||
public enMap : Map<string, string> = new Map<string, string>()
|
||
public lMap : Map<string, string> = new Map<string, string>()
|
||
public attributes: any[] = [
|
||
//{value: 'vertrag', viewValue: 'WI Vertrag'},
|
||
{value: 'resourceName', viewValue: 'Name'},
|
||
{value: 'status', viewValue: 'Status'},
|
||
//{value: 'implementer', viewValue: 'Implementer'},
|
||
{value: 'changeid', viewValue: 'Change Id'},
|
||
];
|
||
|
||
public paketTypeList: any[] = [
|
||
{name: 'Paket Typ A', checked: false},
|
||
{name: 'Paket Typ B', checked: false},
|
||
{name: 'Paket Typ C', checked: false},
|
||
];
|
||
|
||
public stateList: any[] = [];
|
||
|
||
public vertragList: any[] = [
|
||
{name: 'Vertrag A', checked: false},
|
||
{name: 'Vertrag B', checked: false},
|
||
{name: 'Vertrag C', checked: false},
|
||
];
|
||
|
||
public supportGroupList: any[] = [
|
||
{name: 'SM ITSM', id: 'SG0001' },
|
||
{name: 'Support Group B', id: 'SG0002' },
|
||
{name: 'Support Group C', id: 'SG0003' },
|
||
];
|
||
public selectedSupportGroup: any = this.supportGroupList[0];
|
||
|
||
public filterStartDate: Date;
|
||
public filterEndDate: Date;
|
||
|
||
|
||
public selectedAttribute: string;
|
||
public showFilters: boolean = false;
|
||
|
||
// ["=",">","<","beinhaltet"];
|
||
public selectedFilter: string;
|
||
public showCriterea: boolean = false;
|
||
public criteria: string = '';
|
||
public filterEnabled: boolean = false;
|
||
public filters:any = null;
|
||
public sortEnabled: boolean = false;
|
||
public sortedData: any[] = [];
|
||
|
||
private selectedRescourceIds : any[] = [];
|
||
private selectedrowindex: number[] = [];
|
||
private selectedrecords: any[] = [];
|
||
private selRecs: any[] = [];
|
||
public states : any[] = [];
|
||
private approvalPending: boolean;
|
||
public sort = null;
|
||
public oldSort = null;
|
||
|
||
|
||
/**
|
||
* The constructor injects required dependencies
|
||
* @param dataService injects the dataService for data management and backend communication
|
||
* @param matDialog injects the matDialog
|
||
*/
|
||
constructor(public dataService: DataService, public matDialog : MatDialog, private _snackBar: MatSnackBar ) {
|
||
this.deMap.set('detailButton', 'Details anzeigen');
|
||
this.enMap.set('detailButton', 'Show Details');
|
||
this.deMap.set('filterButton', 'Filter anwenden');
|
||
this.enMap.set('filterButton', 'Apply Filters');
|
||
this.deMap.set('sortButton', 'Sortierung anwenden');
|
||
this.enMap.set('sortButton', 'Apply Sort');
|
||
this.deMap.set('field1', 'Kurzbeschreibung');
|
||
this.enMap.set('field1', 'Summary');
|
||
this.deMap.set('dateRangeLabel', 'Datumsbereich auswählen');
|
||
this.enMap.set('dateRangeLabel', 'Select Date Range');
|
||
this.deMap.set('language', 'Sprache');
|
||
this.enMap.set('language', 'Language');
|
||
this.deMap.set('clearFilter', 'Filter Löschen');
|
||
this.enMap.set('clearFilter', 'Clear Filter');
|
||
|
||
this.deMap.set('tooltipSummary', 'Name');
|
||
this.enMap.set('tooltipSummary', 'Name');
|
||
this.deMap.set('tooltipState', 'Status');
|
||
this.enMap.set('tooltipState', 'State');
|
||
this.deMap.set('tooltipPaketType', 'Paket Typ');
|
||
this.enMap.set('tooltipPaketType', 'Package Type');
|
||
this.deMap.set('tooltipContract', 'Vertrag / Provider Cluster');
|
||
this.enMap.set('tooltipContract', 'Contract / Provider Cluster');
|
||
this.deMap.set('tooltipSupportGroupKv', 'KV SG');
|
||
this.enMap.set('tooltipSupportGroupKv', 'KV SG');
|
||
this.deMap.set('tooltipSupportGroupIh', 'IH SG');
|
||
this.enMap.set('tooltipSupportGroupIh', 'IH SG');
|
||
this.deMap.set('tooltipDate', 'Geplantes Start Datum');
|
||
this.enMap.set('tooltipDate', 'Planned Start Date');
|
||
|
||
this.deMap.set('permit', 'Zur Genehmigung');
|
||
this.enMap.set('permit', 'Permit');
|
||
this.deMap.set('genehmigen', 'Genehmigen');
|
||
this.enMap.set('genehmigen', 'Approve');
|
||
this.deMap.set('ablehnen', 'Ablehnen');
|
||
this.enMap.set('ablehnen', 'Reject');
|
||
this.deMap.set('stornieren', 'Stornieren');
|
||
this.enMap.set('stornieren', 'Cancel');
|
||
this.deMap.set('implementer', 'Implementer Eintragen');
|
||
this.enMap.set('implementer', 'Enter Implementer');
|
||
this.deMap.set('stateChange', 'Statusübergang');
|
||
this.enMap.set('stateChange', 'State Transition');
|
||
|
||
if(navigator.language=='de-DE'){
|
||
this.language = 'DE';
|
||
}else{
|
||
this.language = 'EN';
|
||
}
|
||
|
||
this.initLanguge(true);
|
||
}
|
||
|
||
initLanguge(initial: boolean = false){
|
||
|
||
if(this.language == 'DE'){
|
||
this.dataService.selectedLanguage = 'DE';
|
||
this.lMap = this.deMap;
|
||
this.scalars = ['Woche-Tag', 'Monat-Woche', 'Jahr-Monat'];
|
||
this.selectedScalar = 'Monat-Woche';
|
||
this.columns = [
|
||
{ field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
|
||
{ field: 'stateName', headerText: 'Status', width: 250},
|
||
{ field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
|
||
{ field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
|
||
{ field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}}
|
||
]
|
||
}
|
||
else{
|
||
this.dataService.selectedLanguage = 'EN';
|
||
this.lMap = this.enMap;
|
||
this.scalars = ['Week-Day', 'Month-Week', 'Year-Month'];
|
||
this.selectedScalar = 'Month-Week';
|
||
this.columns = [
|
||
{ field: 'TaskName', headerText: 'Summary', width: 250 },
|
||
{ field: 'stateName', headerText: 'State', width: 250},
|
||
{ field: 'vertragName', headerText: 'Contract / Provider Cluster', width: 150 },
|
||
{ field: 'supportGroup', headerText: 'Selected Support Group' },
|
||
{ field: 'StartDate', headerText: 'Planned Start-Date', format : {type:'date', format:'dd.MM.yyyy'}}
|
||
]
|
||
}
|
||
if(!initial){
|
||
this.refreshData();
|
||
}
|
||
|
||
}
|
||
|
||
|
||
public logg(args){
|
||
console.log(args);
|
||
}
|
||
|
||
|
||
/**
|
||
* The function ngOnInit sets values which are required for rendering the gantt Chart. Furthermore it trims the resources (Changes Array) and sets the paginator to the first page.
|
||
*/
|
||
public ngOnInit(): void {
|
||
var WebFont = require('webfontloader');
|
||
WebFont.load({
|
||
google: {
|
||
families: [
|
||
'Material Icons',
|
||
],
|
||
},
|
||
});
|
||
this.renderGantt = false;
|
||
this.firstLoad = true;
|
||
this.sliceStart = 0;
|
||
this.sliceEnd = 20;
|
||
// this.dataService.fetchChanges().then((res: any[])=>{
|
||
// console.log(res);
|
||
// this.allResources = res;
|
||
// this.mapTasksToResources(0,20);
|
||
// this.range = new FormGroup({
|
||
// start: new FormControl<Date | null>(new Date('12/01/'+(new Date().getFullYear()-1))),
|
||
// end: new FormControl<Date | null>(new Date('01/31/'+(new Date().getFullYear()+1))),
|
||
// });
|
||
// this.renderGantt = true;
|
||
// });
|
||
this.dataService.fetchUserSupportGroup().then((res: any)=>{
|
||
console.log(res);
|
||
this.userSupportGroup = res.name;
|
||
this.refreshData();
|
||
this.states = this.dataService.getStates();
|
||
this.dataService.fetchStates().then((res: any [])=>{
|
||
this.states = res;
|
||
this.stateList = res;
|
||
this.spin = false;
|
||
console.log(this.states);
|
||
});
|
||
});
|
||
|
||
|
||
|
||
this.filterSettings = {
|
||
ignoreAccent: true
|
||
// columns: [
|
||
// { field: 'vertrag', matchCase: false, operator: 'startswith', predicate: 'and', value: 'WV' },
|
||
// ]
|
||
};
|
||
|
||
this.taskSettings = {
|
||
id: 'TaskID',
|
||
name: 'TaskName',
|
||
startDate: 'StartDate',
|
||
endDate: 'EndDate',
|
||
duration: 'Duration',
|
||
progress: 'Progress',
|
||
dependency: 'Predecessor',
|
||
resourceInfo: 'resources',
|
||
work: 'work',
|
||
expandState: 'isExpand',
|
||
child: 'subtasks',
|
||
isFixed: 'isFixed',
|
||
vertrag: 'vertrag'
|
||
};
|
||
this.resourceFields = {
|
||
id: 'resourceId',
|
||
name: 'resourceName',
|
||
unit: 'Unit',
|
||
group: 'resourceGroup',
|
||
state: 'state',
|
||
stateName: 'stateName',
|
||
isRes: 'isRes',
|
||
vertrag: 'vertrag',
|
||
vertragName: 'vertragName',
|
||
supportGroup: 'supportGroup',
|
||
supportGroupId: 'supportGroupId',
|
||
implementerEdit: 'implementerEdit'
|
||
};
|
||
this.editSettings = {
|
||
allowAdding: true,
|
||
allowEditing: true,
|
||
allowDeleting: true,
|
||
allowTaskbarEditing: true,
|
||
showDeleteConfirmDialog: true
|
||
};
|
||
|
||
this.selectionSettings = {
|
||
mode: 'Row',
|
||
type: 'Multiple',
|
||
};
|
||
|
||
this.columns = [
|
||
{ field: 'TaskName', headerText: 'Kurzbeschreibung', width: 250 },
|
||
{ field: 'stateName', headerText: 'Status', width: 250},
|
||
{ field: 'vertragName', headerText: 'Vertrag / Provider Cluster', width: 150 },
|
||
{ field: 'supportGroup', headerText: 'Gewählte Support Gruppe' },
|
||
{ field: 'StartDate', headerText: 'Geplantes Start-Datum', format : {type:'date', format:'dd.MM.yyyy'}},
|
||
// { field: 'approvalStatus', headerText: 'Active Approval', width: 100 },
|
||
// { field: 'supportGroupId' },
|
||
//{ field: 'Duration' },
|
||
//{ field: 'TaskID', headerText: 'Taks ID', width: 250 },
|
||
//{ field: 'work', headerText: 'Work' },
|
||
//{ field: 'Progress' },
|
||
//{ field: 'resourceGroup', headerText: 'Group' },
|
||
];
|
||
|
||
this.toolbar = ['Cancel'];
|
||
this.labelSettings = {
|
||
rightLabel: 'resources',
|
||
taskLabel: 'TaskName'
|
||
};
|
||
|
||
this.timelineSettings= {
|
||
topTier: {
|
||
//format: 'YYYY',
|
||
unit: 'Month'
|
||
},
|
||
bottomTier: {
|
||
format: 'WW',
|
||
unit: 'Week',
|
||
count: 1
|
||
}
|
||
};
|
||
this.tooltipSettings = {
|
||
showTooltip: true,
|
||
}
|
||
this.splitterSettings = {
|
||
columnIndex:3
|
||
};
|
||
|
||
|
||
this.projectStartDate = this.range.controls.start.value;
|
||
this.projectEndDate = this.range.controls.end.value;
|
||
|
||
|
||
}
|
||
|
||
languageChange(args: any){
|
||
console.log(this.language);
|
||
this.initLanguge();
|
||
}
|
||
|
||
/**
|
||
* 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
|
||
*/
|
||
public taskbarEditing(args: any) {
|
||
if(args.data.taskData.isFixed !== false ) {
|
||
args.cancel = true;
|
||
}
|
||
}
|
||
|
||
public renderDetails(){
|
||
// console.log(this.showDetails);
|
||
if(this.showDetails == false){
|
||
this.refreshData();
|
||
}else{
|
||
this.refreshData();
|
||
}
|
||
|
||
}
|
||
|
||
public changeScalar(){
|
||
if(this.selectedScalar == this.scalars[0]){
|
||
this.timelineSettings= {
|
||
topTier: {
|
||
//format: 'WW',
|
||
unit: 'Week'
|
||
},
|
||
bottomTier: {
|
||
format: 'dd',
|
||
unit: 'Day',
|
||
count: 1
|
||
}
|
||
};
|
||
}
|
||
|
||
if(this.selectedScalar == this.scalars[1]){
|
||
this.timelineSettings= {
|
||
topTier: {
|
||
//format: 'YYYY',
|
||
unit: 'Month'
|
||
},
|
||
bottomTier: {
|
||
format: 'WW',
|
||
unit: 'Week',
|
||
count: 1
|
||
}
|
||
};
|
||
}
|
||
|
||
if(this.selectedScalar == this.scalars[2]){
|
||
this.timelineSettings= {
|
||
topTier: {
|
||
//format: 'YYYY',
|
||
unit: 'Year'
|
||
},
|
||
bottomTier: {
|
||
format: 'MM',
|
||
unit: 'Month',
|
||
count: 1
|
||
}
|
||
};
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* The function taskbarEdited catches the corresponding syncfsuions event and cancels the user action if the isFixed flag of a task (Date) is set true
|
||
* If the isFixed flag is false, it triggers the dataService to update the moved date
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public taskbarEdited(args: any){
|
||
if(args.data.taskData.isFixed !== false ) {
|
||
args.cancel = true;
|
||
}else{
|
||
const found = this.allResources.find((resource) => {
|
||
return resource.resourceId == args.data.taskData.resources[0].resourceId;
|
||
});
|
||
this.dataService.updateDatePerChange(found);
|
||
|
||
}
|
||
}
|
||
|
||
/**
|
||
* The function queryTaskbarInfo catches the corresponding syncfsuions event and colors the respective diamond depending on the status
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public queryTaskbarInfo(args: any) {
|
||
if(args.data.taskData.isRes == false){
|
||
if(args.data.taskData.TaskID.includes("D2")){
|
||
if (args.data.taskData.resources[0].state == 0 ) {
|
||
args.milestoneColor = "red";
|
||
}
|
||
if (args.data.taskData.resources[0].state == 1 ) {
|
||
args.milestoneColor = "orange";
|
||
}
|
||
if (args.data.taskData.resources[0].state == 3 ) {
|
||
args.milestoneColor = "yellow";
|
||
}
|
||
if (args.data.taskData.resources[0].state == 6 ) {
|
||
args.milestoneColor = "lightgreen";
|
||
}
|
||
if (args.data.taskData.resources[0].state >= 10 ) {
|
||
args.milestoneColor = "lightgrey";
|
||
}
|
||
}else{
|
||
if (args.data.taskData.TaskID.includes("D1")||args.data.taskData.TaskID.includes("D4")){
|
||
if(this.showDetails == false){
|
||
args.taskbarElement.innerHTML = "";
|
||
}else{
|
||
if(args.data.taskData.TaskID.includes("D1")){
|
||
args.milestoneColor = "#d4d4d4";
|
||
}
|
||
if(args.data.taskData.TaskID.includes("D4")){
|
||
args.milestoneColor = "#a1a1a1";
|
||
}
|
||
}
|
||
}
|
||
if (args.data.taskData.TaskID.includes("D3")){
|
||
args.milestoneColor = "#bababa";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* The function onExpand catches the corresponding syncfsuions event and avoids a chart row from beeing expanded by the user
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public onExpand(args: any){
|
||
args.cancel = true;
|
||
}
|
||
|
||
/**
|
||
* The function actionBegin catches the corresponding syncfsuions event
|
||
* @param event event arguments from the syncfusion gantt chart
|
||
*/
|
||
|
||
|
||
/**
|
||
* The function mapTasksToResources slices the allResources array to the resources array according the actual page conditions maps the actual tasks (Dates) to the actual resources (Changes)
|
||
* This function is triggered when a pageEvent is thrown respectively a user changes the page on the paginator
|
||
* @param start begin of slice
|
||
* @param end end of slice
|
||
*/
|
||
public mapTasksToResources(start : number, end : number){
|
||
this.data = [];
|
||
this.resources = this.allResources; //.slice(start, end);
|
||
for (const resource of this.resources) {
|
||
for (const task of resource.tasks) {
|
||
this.data.push(task);
|
||
}
|
||
}
|
||
console.log(this.resources[this.resources.length-1]);
|
||
this.resources.push({resourceId: 'Timeline', resourceName: 'Planzeit Summen pro Woche'})
|
||
}
|
||
|
||
/**
|
||
* The function load catches the corresponding syncfsuions event and triggers the loading spinner to start while the gantt chart is refrehshing
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public load(args: any) {
|
||
this.spin = true;
|
||
}
|
||
|
||
/**
|
||
* The function dataBound catches the corresponding syncfsuions event and stops the loading spinner
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public dataBound(args: any) {
|
||
this.spin = false;
|
||
}
|
||
|
||
/**
|
||
* The function created catches the corresponding syncfsuions event and stops the internal loading spinner
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public created(args: any) {
|
||
this.ganttDefault.hideSpinner();
|
||
this.ganttDefault.treeGrid.grid.hideSpinner();
|
||
|
||
}
|
||
|
||
/**
|
||
* The function onChange catches the corresponding syncfsuions event
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public onChange(args: any){
|
||
|
||
}
|
||
|
||
/**
|
||
* The function handlePageEvent catches the corresponding matpaginator event and slices the gantt chart, that it fits to the actual page
|
||
* @param e pageEvent from the matpaginator
|
||
*/
|
||
public handlePageEvent(e: PageEvent):void {
|
||
let start = e.pageSize*e.pageIndex;
|
||
let end = start+ e.pageSize;
|
||
this.sliceStart = start;
|
||
this.sliceEnd = end;
|
||
//this.mapTasksToResources(start, end);
|
||
//this.quickRefresh();
|
||
this.refreshData();
|
||
// this.ganttDefault.dataSource = this.data;
|
||
// this.ganttDefault.resources = this.resources;
|
||
// this.ganttDefault.refresh();
|
||
|
||
}
|
||
|
||
/**
|
||
* The function startDateChanged catches the corresponding date-range-picker event
|
||
* @param startDate new startDate from date-range-picker
|
||
*/
|
||
public startDateChanged(startDate: any){
|
||
}
|
||
|
||
/**
|
||
* The function endDateChanged catches the corresponding date-range-picker event and validates the selected start- and enddate bacause the gantt chart needs a valid Date to be displayed
|
||
* @param endDate new endDate from date-range-picker
|
||
*/
|
||
public endDateChanged(endDate: any){
|
||
if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates
|
||
this.projectStartDate = new Date(this.range.controls.start.value);
|
||
this.projectEndDate = new Date(this.range.controls.end.value);
|
||
}
|
||
}
|
||
public rowSelecting(args: any){
|
||
console.log(args)
|
||
if(args.data.length){
|
||
// if((args.data.length == this.resources.length+1)){
|
||
// console.log("all")
|
||
// }else{
|
||
// if(args.data[args.data.length-1].TaskID == 'Timeline'){
|
||
// args.cancel = true;
|
||
// }
|
||
// }
|
||
if(args.data[args.data.length-1].TaskID == 'Timeline'){
|
||
let data = args.data;
|
||
data.pop();
|
||
args.data = data;
|
||
}
|
||
|
||
}else{
|
||
if(args.data.TaskID == 'Timeline'){
|
||
args.cancel = true;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* The function rowSelected catches the corresponding syncfsuions event and checks if all selected resources (changes) have the same status, then it displays the corresponding buttons
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public rowSelected(args: any) {
|
||
|
||
this.approvalPending = false;
|
||
this.selectedrowindex = this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes.
|
||
this.selectedrecords = this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records.
|
||
this.selRecs=[];
|
||
if(this.selectedrowindex.length>this.resources.length-1){
|
||
for (const record of this.selectedrecords) {
|
||
if(record.taskData.isRes == true){
|
||
this.selRecs.push(record);
|
||
}
|
||
}
|
||
}else{
|
||
this.selRecs = this.selectedrecords;
|
||
}
|
||
let allStates: boolean = true;
|
||
let allPermit: boolean = true;
|
||
let allApprove: boolean = true;
|
||
let allReject: boolean = true;
|
||
let allCancel: boolean = true;
|
||
let allImplementer: boolean = true;
|
||
let allTransition: boolean = true;
|
||
this.selectedRescourceIds = [];
|
||
for (const change of this.selRecs) {
|
||
if(change.taskData.approvalStatus == 1){
|
||
this.approvalPending = true;
|
||
}
|
||
if(change.taskData.state == this.selRecs[0].taskData.state){
|
||
if(allStates){
|
||
allStates = true;
|
||
}
|
||
this.selectedRescourceIds.push(change.taskData.resourceId);
|
||
}else{
|
||
allStates = false;
|
||
}
|
||
|
||
if(change.taskData.flagPermit == true && allPermit == true){
|
||
allPermit = true;
|
||
}else{
|
||
allPermit = false;
|
||
}
|
||
if(change.taskData.flagApproval == true && allApprove == true){
|
||
allApprove = true;
|
||
}else{
|
||
allApprove = false;
|
||
}
|
||
if(change.taskData.flagReject == true && allReject == true){
|
||
allReject = true;
|
||
}else{
|
||
allReject = false;
|
||
}
|
||
if(change.taskData.flagCancel == true && allCancel == true){
|
||
allCancel = true;
|
||
}else{
|
||
allCancel = false;
|
||
}
|
||
if(change.taskData.implementerEdit == true && allImplementer == true){
|
||
allImplementer = true;
|
||
}else{
|
||
allImplementer = false;
|
||
}
|
||
if(change.taskData.state > 0 && allTransition == true){
|
||
allTransition = true;
|
||
}else{
|
||
allTransition = false;
|
||
}
|
||
}
|
||
|
||
if(allStates){
|
||
this.toolbar = [];
|
||
if(allTransition){
|
||
this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
|
||
}
|
||
if(allPermit){
|
||
this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
|
||
}
|
||
if(allApprove){
|
||
this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
|
||
}
|
||
if(allReject){
|
||
this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
|
||
}
|
||
if(allCancel){
|
||
this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
|
||
}
|
||
if(allImplementer){
|
||
this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
|
||
}
|
||
|
||
}else{
|
||
this.toolbar = [];
|
||
}
|
||
|
||
|
||
this.approvalPending = false;
|
||
this.selRecs = [];
|
||
this.selectedrecords = [];
|
||
this.selectedrowindex = [];
|
||
}
|
||
|
||
/**
|
||
* The function rowDeselected catches the corresponding syncfsuions event
|
||
* When a line is deselected, it is checked if all resource states are equal after deselecting a resource, if they are equal then the respective buttons are displayed
|
||
* @param args event arguments from the syncfusion gantt chart
|
||
*/
|
||
public rowDeselected(args: any){
|
||
this.selectedRescourceIds.forEach((element,index)=>{
|
||
if(element == args.data.taskData.resourceId) delete this.selectedRescourceIds[index]; //TODO: auf memoryLeak prüfen
|
||
});
|
||
|
||
this.selectedrowindex= this.ganttDefault.selectionModule.getSelectedRowIndexes(); // get the selected row indexes.
|
||
this.selectedrecords= this.ganttDefault.selectionModule.getSelectedRecords(); // get the selected records.
|
||
this.selRecs = [];
|
||
if(this.selectedrowindex.length>this.resources.length-1){
|
||
for (const record of this.selectedrecords) {
|
||
if(record.taskData.isRes == true){
|
||
this.selRecs.push(record);
|
||
}
|
||
}
|
||
}else{
|
||
this.selRecs = this.selectedrecords;
|
||
}
|
||
let allStates: boolean = true;
|
||
let allPermit: boolean = true;
|
||
let allApprove: boolean = true;
|
||
let allReject: boolean = true;
|
||
let allCancel: boolean = true;
|
||
let allImplementer: boolean = true;
|
||
let allTransition: boolean = true;
|
||
this.selectedRescourceIds = [];
|
||
for (const change of this.selRecs) {
|
||
if(change.taskData.state == this.selRecs[0].taskData.state){
|
||
if(change.taskData.approvalStatus == 1){
|
||
this.approvalPending = true;
|
||
}
|
||
if(allStates){
|
||
allStates = true;
|
||
}
|
||
this.selectedRescourceIds.push(change.taskData.resourceId);
|
||
}else{
|
||
allStates = false;
|
||
}
|
||
|
||
|
||
if(change.taskData.flagPermit == true && allPermit == true){
|
||
allPermit = true;
|
||
}else{
|
||
allPermit = false;
|
||
}
|
||
if(change.taskData.flagApproval == true && allApprove == true){
|
||
allApprove = true;
|
||
}else{
|
||
allApprove = false;
|
||
}
|
||
if(change.taskData.flagReject == true && allReject == true){
|
||
allReject = true;
|
||
}else{
|
||
allReject = false;
|
||
}
|
||
if(change.taskData.flagCancel == true && allCancel == true){
|
||
allCancel = true;
|
||
}else{
|
||
allCancel = false;
|
||
}
|
||
if(change.taskData.implementerEdit == true && allImplementer == true){
|
||
allImplementer = true;
|
||
}else{
|
||
allImplementer = false;
|
||
}
|
||
if(change.taskData.state > 0 && allTransition == true){
|
||
allTransition = true;
|
||
}else{
|
||
allTransition = false;
|
||
}
|
||
|
||
}
|
||
if(allStates){
|
||
this.toolbar = [];
|
||
if(allTransition){
|
||
this.toolbar.push({text:this.lMap.get("stateChange"), id: "6"});
|
||
}
|
||
if(allPermit){
|
||
this.toolbar.push({text: this.lMap.get("permit"), id: "5"});
|
||
}
|
||
if(allApprove){
|
||
this.toolbar.push({text: this.lMap.get("genehmigen"), id: "7"});
|
||
}
|
||
if(allReject){
|
||
this.toolbar.push({text: this.lMap.get("ablehnen"), id: "8"});
|
||
}
|
||
if(allCancel){
|
||
this.toolbar.push({text: this.lMap.get("stornieren"), id: "11"});
|
||
}
|
||
if(allImplementer){
|
||
this.toolbar.push({text: this.lMap.get("implementer"), id: "10"});
|
||
}
|
||
|
||
}else{
|
||
this.toolbar = [];
|
||
}
|
||
this.selRecs = [];
|
||
this.selectedrecords = [];
|
||
this.selectedrowindex = [];
|
||
this.approvalPending = false;
|
||
|
||
}
|
||
|
||
/**
|
||
* The function toolbarBtnClicked catches the corresponding syncfsuions event and executes the button logic when a button is clicked
|
||
* @param args
|
||
*/
|
||
public toolbarBtnClicked(args :any){
|
||
|
||
if(args.item.text === "Statusübergang" || args.item.text === "State Transition"){
|
||
let data = {changes: [], states: this.states};
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const iterator of this.resources) {
|
||
if(iterator.resourceId == selectedRescourceId){
|
||
data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state});
|
||
}
|
||
}
|
||
}
|
||
let dialogRef = StateDialogComponent;
|
||
this.matDialog.open(dialogRef,
|
||
{
|
||
data : data,
|
||
}).afterClosed().subscribe((res)=>{
|
||
if(res=="Success"){
|
||
this.refreshData();
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
if(args.item.text === "Implementer Eintragen" || args.item.text === "Enter Implementer"){
|
||
let data = {changes: []};
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const change of this.resources) {
|
||
if(change.resourceId == selectedRescourceId){
|
||
// console.log(change);
|
||
data.changes.push({resourceId: change.resourceId, pkgId: change.changeNr, supportGroupId: change.supportGroupId});
|
||
}
|
||
}
|
||
}
|
||
this.matDialog.open(ImplementerDialogComponent,
|
||
{
|
||
data : data,
|
||
});
|
||
|
||
}
|
||
|
||
if(args.item.text === "Genehmigen" || args.item.text === "Approve"){
|
||
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const change of this.resources) {
|
||
if(change.resourceId == selectedRescourceId){
|
||
this.dataService.updateApproval(change, 1).then((res: any)=>{
|
||
if(res.status == 200){
|
||
this._snackBar.open("Genehmigung erfolgreich", 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}else{
|
||
this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}
|
||
this.refreshData();
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//this.ganttDefault.refresh();
|
||
}
|
||
|
||
if(args.item.text === "Zur Genehmigung" || args.item.text === "Permit"){
|
||
let data = {changes: [], states: this.states};
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const iterator of this.resources) {
|
||
if(iterator.resourceId == selectedRescourceId){
|
||
data.changes.push({resourceId: iterator.resourceId, changeNr: iterator.changeNr, currentState: iterator.state});
|
||
}
|
||
}
|
||
}
|
||
let dialogRef = StateDialogComponent;
|
||
this.matDialog.open(dialogRef,
|
||
{
|
||
data : data,
|
||
}).afterClosed().subscribe((res)=>{
|
||
if(res.status == 200){
|
||
this.refreshData();
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
|
||
|
||
if(args.item.text === "Ablehnen" || args.item.text === "Reject"){
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const change of this.resources) {
|
||
if(change.resourceId == selectedRescourceId){
|
||
this.dataService.updateApproval(change, 2).then((res: any)=>{
|
||
if(res.status == 200){
|
||
this._snackBar.open("Ablehnen erfolgreich", 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}else{
|
||
this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}
|
||
this.refreshData();
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//this.ganttDefault.refresh();
|
||
}
|
||
|
||
if(args.item.text === "stornieren" || args.item.text === "Cancel"){
|
||
for (const selectedRescourceId of this.selectedRescourceIds) {
|
||
for (const change of this.resources) {
|
||
if(change.resourceId == selectedRescourceId){
|
||
this.dataService.updateApproval(change, 3).then((res: any)=>{
|
||
if(res.status == 200){
|
||
this._snackBar.open("Stornieren erfolgreich", 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}else{
|
||
this._snackBar.open(res.HttpErrorResponse.message, 'Schließen', {
|
||
horizontalPosition: this.horizontalPosition,
|
||
verticalPosition: this.verticalPosition,
|
||
panelClass: ['mat-primary']
|
||
});
|
||
}
|
||
this.refreshData();
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//this.ganttDefault.refresh();
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
quickRefresh(){
|
||
this.renderGantt = false;
|
||
let newData = [];
|
||
for (const dat of this.data) {
|
||
newData.push(dat);
|
||
}
|
||
this.data = newData;
|
||
this.renderGantt = true;
|
||
}
|
||
|
||
refreshData(){
|
||
//console.log(this.ganttDefault.splitterModule);
|
||
this.showNoResultsError = false;
|
||
this.renderGantt = false;
|
||
this.dataService.fetchChanges(this.mapRequestJSON()).then((res: any[])=>{
|
||
this.allResources = res;
|
||
this.mapTasksToResources(this.sliceStart,this.sliceEnd);
|
||
// console.log(this.allResources)
|
||
if(res.length > 0){
|
||
this.spin = true;
|
||
this.renderGantt = true;
|
||
this.showNoResultsError = false;
|
||
}else{
|
||
this.renderGantt = false;
|
||
this.spin = false;
|
||
this.showNoResultsError = true;
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
// this.mapTasksToResources(this.sliceStart, this.sliceEnd);
|
||
// this.data = [];
|
||
// this.resources = this.allResources.slice(this.sliceStart, this.sliceEnd);
|
||
// for (const resource of this.resources) {
|
||
// for (const task of resource.tasks) {
|
||
// this.data.push(task);
|
||
// }
|
||
// }
|
||
|
||
}
|
||
clearFilter(){
|
||
this.filters = null;
|
||
this.filterEnabled = false;
|
||
this.sort = null;
|
||
this.sortEnabled = false;
|
||
this.refreshData();
|
||
}
|
||
mapRequestJSON(){
|
||
let request =
|
||
{
|
||
'sliceStart': this.sliceStart,
|
||
'sliceEnd': this.sliceEnd,
|
||
filter: this.filterEnabled ? this.filters : [{column: "SupportGroup", filter: "equals", criteria: [this.userSupportGroup]}],
|
||
sort: this.sortEnabled ? this.sort : {
|
||
'column': 'ChangeNr',
|
||
'mode': 'asc'
|
||
},
|
||
|
||
}
|
||
return request;
|
||
}
|
||
private oldFilters:{};
|
||
applyFilter(){
|
||
if(this.filterEnabled){
|
||
this.oldFilters = this.filters
|
||
this.filters = null;
|
||
this.refreshData();
|
||
}else{
|
||
this.filters = this.oldFilters;
|
||
this.refreshData();
|
||
}
|
||
|
||
}
|
||
openFilterDialog(){
|
||
let dialogRef = FilterDialogComponent;
|
||
this.matDialog.open(dialogRef,
|
||
{
|
||
data : [],
|
||
height: '70%',
|
||
width: '80%'
|
||
}).afterClosed().subscribe((res)=>{
|
||
if(res){
|
||
// console.log(res);
|
||
this.filters = res;
|
||
this.filterEnabled = true;
|
||
this.refreshData();
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
public buildFilterObject(){
|
||
this.filterEnabled = true;
|
||
let filter = []
|
||
let critPaketTypeFilter = [];
|
||
let critStateTypeFilter = [];
|
||
let critVertragTypeFilter = [];
|
||
let critSupportGroupfilter = {};
|
||
let critDateFilter = {};
|
||
let critTextFilter = {};
|
||
|
||
|
||
for (const paketType of this.paketTypeList) {
|
||
if(paketType.checked == true){
|
||
critPaketTypeFilter.push(paketType.name);
|
||
}
|
||
}
|
||
|
||
if(critPaketTypeFilter.length > 0){
|
||
filter.push({
|
||
"column": "paketType",
|
||
"filter": "equals",
|
||
"criteria": critPaketTypeFilter
|
||
});
|
||
}
|
||
|
||
for (const state of this.stateList) {
|
||
if(state.checked == true){
|
||
critStateTypeFilter.push(state.stateNameEN);
|
||
}
|
||
}
|
||
|
||
if(critStateTypeFilter.length > 0){
|
||
filter.push({
|
||
"column": "State",
|
||
"filter": "equals",
|
||
"criteria": critStateTypeFilter
|
||
});
|
||
}
|
||
|
||
for (const vertrag of this.vertragList) {
|
||
if(vertrag.checked == true){
|
||
critVertragTypeFilter.push(vertrag.name);
|
||
}
|
||
}
|
||
|
||
if(critVertragTypeFilter.length > 0){
|
||
filter.push({
|
||
"column": "Contract",
|
||
"filter": "equals",
|
||
"criteria": critVertragTypeFilter
|
||
});
|
||
}
|
||
|
||
// filter.push({
|
||
// "column": "supportGroup",
|
||
// "filter": "equals",
|
||
// "criteria": [this.selectedSupportGroup.id]
|
||
// });
|
||
|
||
if(this.filterStartDate != null && this.filterEndDate != null){
|
||
filter.push({
|
||
"column": "D2",
|
||
"filter": "dateRange",
|
||
"criteria": [this.filterStartDate, this.filterEndDate]
|
||
});
|
||
}
|
||
|
||
if(this.criteria != null && this.criteria != ""){
|
||
filter.push({
|
||
"column": "ResourceName",
|
||
"filter": "contains",
|
||
"criteria": [this.criteria]
|
||
});
|
||
}
|
||
this.filters = filter;
|
||
this.refreshData();
|
||
}
|
||
public onResizing(args){
|
||
let width ='' + args.paneSize[0]+'px';
|
||
this.splitterSettings = {
|
||
position: width
|
||
};
|
||
}
|
||
public actionBegin(args: any) {
|
||
console.log(args); //custom Action
|
||
if(args.dialogModel){
|
||
args.cancel = true;
|
||
if(args.rowData.taskData.resources[0].state == 0){
|
||
window.open("https://itsm-dev.asfinag.at/arsys/forms/itsm-app-dev/SHR%3ALandingConsole/Default+Administrator+View/?mode=search&F304255500=ASF:WI_TAS_Paket&F1000000076=FormOpenNoAppList&F303647600=SearchTicketWithQual&F304255610='1000000182' =\""+args.rowData.taskData.resources[0].changeNr+"\"", "_blank");
|
||
}else{
|
||
window.open("https://itsm-dev.asfinag.at/arsys/forms/itsm-app-dev/SHR%3ALandingConsole/Default+Administrator+View/?mode=search&F304255500=CHG:Infrastructure Change&F1000000076=FormOpenNoAppList&F303647600=SearchTicketWithQual&F304255610='1000000182' =\""+args.rowData.taskData.resources[0].changeNr+"\"", "_blank");
|
||
}
|
||
|
||
}else{
|
||
if(args.requestType=='sorting'){
|
||
let colName = "";
|
||
let mode = "asc";
|
||
args.cancel = true;
|
||
|
||
switch (args.columnName) {
|
||
case 'TaskName':
|
||
colName = 'ResourceName';
|
||
break;
|
||
case 'stateName':
|
||
colName = 'State';
|
||
break;
|
||
case 'supportGroup':
|
||
colName = 'SupportGroup';
|
||
break;
|
||
case 'approvalStatus':
|
||
colName = 'ApprovalStatus';
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
if(colName != ''){
|
||
this.sortEnabled = true;
|
||
if(this.oldSort != null && this.oldSort.column == this.sort.column){
|
||
mode = 'dsc'
|
||
}
|
||
this.oldSort = this.sort;
|
||
this.sort = {
|
||
'column': colName,
|
||
'mode': mode
|
||
}
|
||
this.refreshData();
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|