Hi, I'm making a gantt chart with resources views, based on resource view sample, but is not showing the tasks bar.
3core.mjs:11860 ERROR TypeError: Cannot set properties of undefined (setting 'isResourceTaskDeleted')
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import {
ExcelExportService,
GanttModule,
PdfExportService,
} from '@syncfusion/ej2-angular-gantt';
import { RouterOutlet } from '@angular/router';
import { DatePipe } from '@angular/common';
import { SupabaseServiceService } from '../../services/supabase-service.service';
import { HttpClient } from '@angular/common/http';
import { Atividades } from '../../atividades';
@Component({
selector: 'app-gantt-recursos',
standalone: true,
imports: [GanttModule, RouterOutlet],
templateUrl: './gantt-recursos.component.html',
styleUrl: './gantt-recursos.component.css',
providers: [ExcelExportService, PdfExportService, DatePipe],
encapsulation: ViewEncapsulation.None,
})
export class GanttRecursosComponent implements OnInit {
// Data for Gantt
public data?: object[];
public resources: object[] = [];
public taskSettings?: object;
public labelSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
resourceFields: { id: string; name: string; unit: string; group: string } = {
id: 'resourceId',
name: 'resourceName',
unit: 'Unit',
group: 'resourceGroup',
};
editSettings: {
allowAdding: boolean;
allowEditing: boolean;
allowDeleting: boolean;
allowTaskbarEditing: boolean;
showDeleteConfirmDialog: boolean;
} = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true,
};
columns: {
field: string;
visible?: boolean;
headerText?: string;
width?: number;
}[] = [
{ field: 'id', visible: false },
{ field: 'titulo', headerText: 'Name', width: 250 },
{ field: 'avanco' },
{ field: 'resourceGroup', headerText: 'Group' },
{ field: 'dtinicio_previsto' },
{ field: 'dttermino_previsto' },
];
public timelineSettings?: object = {
timelineViewMode: 'Year',
timelineUnitSize: 80,
};
toolbar: string[] | undefined;
splitterSettings: { columnIndex: number } | undefined;
constructor(
private http: HttpClient,
public supabaseService: SupabaseServiceService
) {}
public ngOnInit(): void {
this.resources = [];
this.taskSettings = {
id: 'id',
name: 'titulo',
startDate: 'dtinicio_previsto',
endDate: 'dttermino_previsto',
progress: 'avanco',
resourceInfo: 'assignee',
child: 'subtasks',
};
this.toolbar = [
'Add',
'Edit',
'Update',
'Delete',
'Cancel',
'ExpandAll',
'CollapseAll',
];
this.splitterSettings = {
columnIndex: 3,
};
this.projectStartDate = new Date('01/01/2023');
this.projectEndDate = new Date('12/31/2024');
this.carregarDados('');
}
// Data for Gantt
public dataTemp: any;
public dados?: Atividades[];
//carrega dados provenientes do supabase view: vw_atividadesl
private carregarDados(mostrar: string) {
var filtro = '';
if (mostrar == 'projetos') filtro = '&inc_plano_projetos=eq.true';
else if (mostrar == 'privado') filtro = '&privado=eq.true';
else if (mostrar == 'gestao') filtro = '&inc_plano_gestao=eq.true';
this.http.get(myurl).subscribe((response) => {
this.dataTemp = response;
this.dados = [];
this.resources = [];
this.dataTemp.forEach((value: Atividades) => {
//remove caracteres especiais dos titulos, pois estava dando erro ao exportar para PDF
value.titulo = value.titulo.replace(
/[^a-zA-Z [{}\],.<>?ªº_+-=§!@#$%&*()çÇãÃõÕáÁéÉíÍóÓúÚâÂêÊôÔàÀ]/g,
''
);
value.origem_titulo = value.origem_titulo.replace(
/[^a-zA-Z [{}\],.<>?ªº_+-=§!@#$%&*()çÇãÃõÕáÁéÉíÍóÓúÚâÂêÊôÔàÀ]/g,
''
);
//add resource to list
var resource = this.resources!.find(
(o: any) => o.resourceId === value.atribuidopara
);
if (resource == null) {
this.resources.push({
resourceId: value.atribuidopara,
resourceName: value.atribuidopara_nome,
});
}
value.assignee = [
{ resourceId: value.atribuidopara, resourceUnit: 100 },
];
this.dados!.push(value);
});
});
}
}
