Hello friends,
Before I used gantt version 4.0.8, I had to install the source base of the library and then import it into my project in the form
"bryntum-angular-shared": "file:../bryntum-gantt-4.0.8/gantt-4.0.8/examples/angular/_shared",
"bryntum-gantt": "file:../bryntum-gantt-4.0.8/gantt-4.0.8/build",Now i want to use gantt 4.1.5 using npm install
"@bryntum/gantt": "4.1.5", // ex bryntum-gantt
"@bryntum/gantt-angular": "4.1.5", // ex bryntum-angular-sharedBut some previous features when using 4.0.8 version are now faulty, can you tell me how to fix the above errors. Here is my code:
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import ganttConfig from './../ganttConfig';
// import { allData } from '../../assets/data/all-data';
// import { GanttComponent } from 'bryntum-angular-shared';
import { BryntumGanttComponent } from '@bryntum/gantt-angular';
import {
Panel,
ProjectModel,
EventModel,
EventStore,
LocaleManager,
TaskStore,
Gantt,
} from '@bryntum/gantt/gantt.lite.umd.js';
import { NgForm, FormGroup, FormControl, FormBuilder } from '@angular/forms';
import '../custom.locale.Ja.js';
import { CommonService } from '../services/common.service';
declare global {
interface Window {
ReactNativeWebView: any;
}
}
@Component({
selector: 'gantt-chart-work-all',
templateUrl: 'gantt-chart-work-all.component.html',
styleUrls: ['gantt-chart-work-all.component.scss'],
})
export class GanttChartWorkAllComponent implements OnInit, AfterViewInit {
data;
editedTask: boolean;
testAll: any;
typeFilter: any;
constructor(private fb: FormBuilder, private _commonService: CommonService) {}
title = 'gantt-chart-project';
ganttConfig = ganttConfig;
type = 0;
name = '';
// @ViewChild(GanttComponent, {
// static: false,
// })
// gantt: GanttComponent;
listDataChange = [];
@ViewChild(BryntumGanttComponent, { static: false })
ganttComponent: BryntumGanttComponent;
// private gantt : Gantt;
ngOnInit(): void {
this.getData();
this.getTaskFilter();
this.getEdited();
this.onExportPDF();
LocaleManager.applyLocale('Ja');
}
ngAfterViewInit(): void {
// console.log(this.gantt.ganttInstance);
// store Gantt isntance
// this.gantt = this.ganttComponent.instance;
console.log(this.ganttComponent.instance);
}
getData() {
this._commonService.allData$.subscribe(async (data) => {
if (data) {
this.data = await this._commonService.prepareAllData(data);
const dataAllStore =
await this._commonService.convertDataToTaskStoreAllData(this.data);
this.testAll = dataAllStore;
this._commonService.updateDataChart(this.ganttComponent, dataAllStore);
}
});
}
async onGanttEvents(event: any) {
if (event.type && event.type == 'taskresizeend') {
await this.ganttComponent.instance.project.commitAsync();
const updateData = {
originalData: event?.taskRecord?.originalData,
startDate: event?.taskRecord?.startDate,
endDate: event?.taskRecord?.endDate,
eventType: event?.type,
};
this.listDataChange = await this.listDataChange.filter(
(data) => data?.originalData?.id != updateData?.originalData?.id
);
this.listDataChange.push(updateData);
window.ReactNativeWebView.postMessage(
JSON.stringify({
action: 'pushDataChange',
listDataChange: this.listDataChange,
})
);
} else if (event?.type && event?.type == 'aftertaskdrop') {
await this.ganttComponent.instance.project.commitAsync();
const updateDataDrag = {
originalData: event?.taskRecords[0]?.originalData,
startDate: event?.context?.startDate,
endDate: event?.context?.endDate,
eventType: event?.type,
};
this.listDataChange = await this.listDataChange.filter(
(data) => data?.originalData?.id != updateDataDrag?.originalData?.id
);
this.listDataChange.push(updateDataDrag);
window.ReactNativeWebView.postMessage(
JSON.stringify({
action: 'pushDataChange',
listDataChange: this.listDataChange,
})
);
}
}
onExportPDF() {
this._commonService.exportPdf$.subscribe(async (exportPdf) => {
if (exportPdf?.isExportPdf && exportPdf?.isExportPdf == 0) {
this.ganttComponent.instance.features.pdfExport.export().then(
(res: any) => {
if (res?.response?.parsedJson?.url) {
window.ReactNativeWebView.postMessage(
JSON.stringify({
action: 'pushAttachmentUrl',
url: res?.response?.parsedJson?.url,
})
);
}
},
(err) => {
console.log('err', err);
}
);
}
});
}
getTaskFilter() {
this._commonService.taskFilter$.subscribe(async (data) => {
if (data) {
this.onTaskChanged(data);
}
});
}
getEdited() {
this._commonService.edited$.subscribe(async (edited) => {
if (edited == 1) {
this.ganttComponent.features.taskResize.disabled = false;
this.ganttComponent.features.taskDrag.disabled = false;
// @ts-ignore: Unreachable code error
this.ganttComponent.instance.subGrids.locked.collapsed = true;
}
});
}
async onTaskChanged(value) {
const type = value;
if (type.length > 0) {
const filterAllData = await this._commonService.filterAllDataByType(
this.data,
type
);
const taskStoreAllData =
await this._commonService.convertDataToTaskStoreAllData(filterAllData);
this._commonService.updateDataChart(
this.ganttComponent,
taskStoreAllData
);
}
}
}
