Our state of the art Gantt chart


Post by paulofrwk »

Hi, How can I get the object with the predecessor Id when added in a task item as the column "Predecessor" show below? I would like to see in a console.log this Id.

telaGantt.png
telaGantt.png (103.45 KiB) Viewed 258 times
const project = new bryntum.gantt.ProjectModel({
        taskModelClass: MyTask,
        hoursPerDay: 8,
        daysPerWeek: 5,
        daysPerMonth: 20,
        calendar: model,
        eventsData: [
            data
        ],

    dependenciesData: [
        { fromEvent: 2, toEvent: 3 },
        
    ],
    
    listeners: {
        change({ store, action, records }) {

            console.log("Records", records)

            if (action === "add" || action === "update" || action === "remove" || action === "refresh") {
                data = JSON.parse(store.json, records)[0]                   
                console.log("AppData", data)
               
                
            }                
        },

    },
    //autoSync: true,
});


   


const gantt = new bryntum.gantt.Gantt({
    project: project,
    calendar: 'Padrao',
    //width: 200,
    autoHeight: true,
    columns: [
        { type: 'sequence', enableCellContextMenu: false, editor: false, },
        { type: 'number', text: 'Id da Tarefa', field: '_internalId', enableCellContextMenu: false, editor: false, },
        {
            type: 'predecessor',
            text: 'Predecessor',
            dependencyIdField: '_internalId',
            width: 112
        },
        { type: 'name', text: 'Nome da Tarefa', field: 'name', width: 350, enableCellContextMenu: false, editor: false },
        {
            type: 'duration',
            text: 'Duração',
            width: 112
        },
        { type: 'number', field: 'automaticPercent', text:'Conclusão Automática', width: 180 },           
        { type: 'date', text: 'Início do Plan.', field: 'startDate', width: 150, enableCellContextMenu: false, editor: false, format: 'DD/MM/YYYY HH:mm',},
        { type: 'date', text: 'Término do Plan.', field: 'endDate', width: 150, enableCellContextMenu: false, editor: false, format: 'DD/MM/YYYY HH:mm', },
        ...
        

Post by marcio »

Hey paulofrwk,

You can achieve that by using the predecessorsTasks property and get the predecessors ids, like this:

listeners : {
            change({ store, action, records }) {
    
console.log('Records', records); if (action === 'add' || action === 'update' || action === 'remove' || action === 'refresh') { const predecessorsIds = records[0].predecessorTasks.map(task => task.id); // const data = JSON.parse(store.json, records)[0]; // console.log('AppData', data); } } }

You can also check the documentation for more info https://www.bryntum.com/docs/gantt/api/Gantt/model/TaskModel#property-predecessorTasks

Best regards,
Márcio


Post by paulofrwk »

Hey Marcio, Thanks for the quick support.

I've tried to take the predecessor 's Id as you wrote. but, it's still returning as "undefined".
what am I doing wrong?

Image


Post by mats »

That looks like a change on a dependency record. The Project receives updates from all its internal stores so you need to make sure you are dealing with a TaskRecord when that code runs.


Post by paulofrwk »

marcio wrote: Thu Sep 22, 2022 10:24 pm

Hey paulofrwk,

You can achieve that by using the predecessorsTasks property and get the predecessors ids, like this:

listeners : {
            change({ store, action, records }) {
    
console.log('Records', records); if (action === 'add' || action === 'update' || action === 'remove' || action === 'refresh') { const predecessorsIds = records[0].predecessorTasks.map(task => task.id); // const data = JSON.parse(store.json, records)[0]; // console.log('AppData', data); } } }

You can also check the documentation for more info https://www.bryntum.com/docs/gantt/api/Gantt/model/TaskModel#property-predecessorTasks

Thanks, it's working. But I'm trying to integrate with razor page and I would like to have this information in the object generated by the page. Is there a way to get through it? ? Below is the code for the page

@using Lider.Sigma.ValueObject.ViewModel.PCP

@model ProjetoPCPVM

@{
    ViewBag.Title = "Projeto";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jss = new System.Web.Script.Serialization.JavaScriptSerializer();

var projeto = jss.Serialize(Model);
}


<div class="panel panel-default margin-10">
    <div class="panel-heading row" style="margin:unset">
        <div class="col-md-10" style="margin-top: 10px">
            <h3 class="panel-title">@ViewBag.PCPTitle</h3>
        </div>
        <div class="pull-right col-md-2">
            <input class="form-control" type="text" id="taskSearch" placeholder="Pesquisar">

    </div>


</div>

<div class="panel-body" style="padding-bottom: 0px; padding-top: 0px">
    <div class="row">

        <div class="row">
            <div class="pull-right">
                <div class="col-md-3">
                    <button type="button" style="margin: 4px" class="btn btn-default" id="btnCriarAlterar"><i class="fa fa-save"></i> SALVAR</button>
                </div>
            </div>
        </div>

        @if (!Model.Tarefas.Any())
        {
            <div class="text-center" style="margin: 15px">
                Não foram encontradas tarefas para o projeto.
            </div>
        }
        else
        {
            <div style="position:relative;" id="reactdiv"></div>
        }


    </div>
</div>
</div>


<script src="~/Scripts/react/react.min.js"></script>

<script src="~/Scripts/react/gantt.umd.js"></script>


<link rel="stylesheet" href="~/Scripts/react/gantt.classic-light.css" id="bryntum-theme">

<link rel="stylesheet" href="~/Scripts/react/gantt.material.css">
<link rel="stylesheet" href="~/Scripts/react/gantt.stockholm.css" id="data-bryntum-theme">
<link rel="stylesheet" href="~/Scripts/react/gantt.classic.css" id="bryntum-theme">


<script type="text/javascript">

function getData() {
    //Projeto - Project data
    var projeto = @(Html.Raw(projeto));
    
    //tarefas - Tasks data
    var tarefas = projeto.Tarefas;
   
    var filhos = [];
    var total = 0;

    tarefas.forEach((tarefa, i) => {
        //Iterating children array to display children data
   
        var filho = {               
            IdPCP: tarefa.IdPCP,
            IdPCPLInha: tarefa.IdPCPLinha,
            Ordem: tarefa.Ordem,
            WoNum: tarefa.WoNum,
            IdProjetoServico: tarefa.IdProjetoServico,
            Parent: tarefa.parentId,
            Status: tarefa.status,
            StatusDate: moment(tarefa.statusDate).format("DD/MM/YYYY HH:mm"),
            Worktype: tarefa.worktype,
            Descricao: tarefa.Descricao,
            DTP: moment(tarefa.DTP).format("DD/MM/YYYY HH:mm"),
            DTPS: moment(tarefa.DTPS).format("DD/MM/YYYY HH:mm"),
            ETA: moment(tarefa.ETA).format("DD/MM/YYYY HH:mm"),
            HorasPlanejadas: tarefa.HorasPlanejadas,
            HorasTrabalhadas: tarefa.effort,
            Percentual: tarefa.percentDone,
            duration: tarefa.HorasTrabalhadas,
            startDate: moment(tarefa.DTP).format(),
            endDate: moment(tarefa.DTPS).format(),
            automaticPercent: 10,
            WOEQ5: tarefa.WOEQ5,
            parentId: "_generatedv4",
            //Predecessor: 
            
           
        }
        total = total + filho.HorasPlanejadas;

        filhos.push(filho);
    });

    //Updated Project data
    var novoProjeto = {
        IdProjetoServico: projeto.id,
        Descricao: projeto.DescricaoProjeto,
        startDate: projeto.DtPrevisaoEntrada,
        HorasPlanejadas: total,
        expanded: true,
        children: [...filhos]
    }

    return novoProjeto
}

var data = getData();
console.log("data", data.startDate);
//var salvar = saveData();

$('#btnCriarAlterar').click(function () {
    var projeto = @(Html.Raw(projeto));
    var date = new Date(projeto.DataCriacao);
    date.setFullYear(2022);
    
    var DtPrevisaoEntradaFormat = new Date(parseInt(projeto.DtPrevisaoEntrada.substr(6)));
    var dataCriacaoFormat = new Date(parseInt(projeto.DataCriacao.substr(6)));

    const projetoLista = [];
    projeto.DtPrevisaoEntrada = moment(DtPrevisaoEntradaFormat).format("DD/MM/YYYY HH:mm");
    projeto.DataCriacao = moment(dataCriacaoFormat).format("DD/MM/YYYY HH:mm");
    projeto.Tarefas.forEach((tarefa, index) => {
        //var DTPformat = new Date(parseInt(tarefa.DTP.substr(6)));
        //var DTPSformat = new Date(parseInt(tarefa.DTPS.substr(6)));
        //var ETAformat = new Date(parseInt(tarefa.ETA.substr(6)));
        var StatusDateformat = new Date(parseInt(tarefa.StatusDate.substr(6)));
        var projetoAtual = {
            IdPCP: tarefa.IdPCP || null,
            IdPCPLinha: tarefa.IdPCPLinha || null,
            WoNum: tarefa.WoNum || null,
            IdProjetoServico: tarefa.IdProjetoServico || null,
            Parent: tarefa.parentId || null,
            Ordem: index +1,
            Status: tarefa.Status || null,
            StatusDate: moment(StatusDateformat).format("DD/MM/YYYY HH:mm"),
            WorkType: tarefa.WorkType || null,
            Descricao: tarefa.Descricao || null,
            FailureDesc: tarefa.FailureDesc || null,
            WORK8: tarefa.WOEQ8 || null,
            HorasPlanejadas: tarefa.HorasPlanejadas,
            HorasTrabalhadas: tarefa.HorasTrabalhadas || null,
            DTP: tarefa.DTP,
            DTPS: tarefa.DTPS,
            ETA: tarefa.ETA,
            Percentual: tarefa.Percentual,
            Nivel: tarefa.Nivel || null,
            Versao: tarefa.Versao || null,
            DataInicioPlan: moment(tarefa.startDate).format("DD/MM/YYYY HH:mm"),
            Predecessor:                 
                                           
        }
        projetoLista.push(projetoAtual);
    });
    projeto.Tarefas = projetoLista;
    
    if (!data.children) {
        data.children = projeto.Tarefas;
        console.log("Projeto tarefas botao", projeto.Tarefas);
    } else {
        const listaTarefas = [];
        data.children.forEach((tarefa, index) => {
            var novaTarefa = {
                IdPCP: tarefa.IdPCP || null,
                IdPCPLinha: tarefa.IdPCPLinha || null,
                WoNum: tarefa.WoNum || null,
                IdProjetoServico: tarefa.IdProjetoServico || null,
                Parent: tarefa.parentId || null,
                Ordem: index +1,
                //trazer internalId do objeto record
                //NumeroTarefa: obj._internalId,
                //trazer internalId do objeto record _data fromEvent _internalId
                //Predecessor: ,
                Status: tarefa.Status || null,
                StatusDate: moment(tarefa.statusDate).format("DD/MM/YYYY HH:mm"),
                WorkType: tarefa.WorkType || null,
                Descricao: tarefa.Descricao || null,
                FailureDesc: tarefa.FailureDesc || null,
                WORK8: tarefa.WOEQ8 || null,
                HorasPlanejadas: tarefa.HorasPlanejadas,
                HorasTrabalhadas: tarefa.HorasTrabalhadas || null,
                DTP: moment(tarefa.startDate).format("DD/MM/YYYY HH:mm"),
                DTPS: moment(tarefa.endDate).format("DD/MM/YYYY HH:mm"),
                ETA: moment(tarefa.ETA).format("DD/MM/YYYY HH:mm"),
                Percentual: tarefa.Percentual,
                Nivel: tarefa.Nivel || null,
                Versao: tarefa.Versao || null,
                DataInicioPlan: moment(tarefa.DTP).format("DD/MM/YYYY HH:mm"),
                Predecessor: 

            }
            listaTarefas.push(novaTarefa);
        });
        projeto.Tarefas = listaTarefas;
        console.log("Lista", listaTarefas);
    }

    console.log("Projeto Final", projeto);

    //$.ajax({
    //    async: true,
    //    type: 'POST',
    //    url: '/PCP/CriarAlterar',
    //    data: projeto
    //});

});


</script>

<script src="@Url.Content("~/Scripts/jsx/App.jsx")"></script>



Post by mats »

But I'm trying to integrate with razor page and I would like to have this information in the object generated by the page. Is there a way to get through it?

Can you please explain a bit further your needs? Maybe it makes sense to set up a call to discuss your requirements and issues?


Post by paulofrwk »

mats wrote: Fri Oct 14, 2022 11:24 pm

But I'm trying to integrate with razor page and I would like to have this information in the object generated by the page. Is there a way to get through it?

Can you please explain a bit further your needs? Maybe it makes sense to set up a call to discuss your requirements and issues?

Hi Mats, thanks again for the support. It would be great if we set up a call to discuss it, because our team is really interested in implementing the gantt component but we're having trouble integrating the component's data into the backend and database we use. I believe that other people on my team are also in contact to verify the possibility of the call to resolve these technical questions.


Post by mats »

Ok, yes we see your booking. Looking forward to the meeting :)


Post Reply