Page 1 of 1

[REACT] Phantom update start date

Posted: Tue Aug 16, 2022 1:13 pm
by Ayurchenkoi

Hello! I need to implement a functionality where I have to change the project start date when the percentage of the task changes from zero to something else. How can I do it?


Re: [REACT] Phantom update start date

Posted: Tue Aug 16, 2022 7:27 pm
by marcio

Hey Ayurchenkoi,

If I understood correctly what you want to achieve, you can set up using the change event listener in the taskStore, and with that update the project if the percentDone of the task is changed.

https://bryntum.com/docs/gantt/api/Gantt/data/TaskStore#event-change

project: {
    ... other project configurations
    taskStore: {
      listeners: {
        change: function ({ action, record, changes, source }) {
          // Check if the percentage is changed
          const isPercentChaged =
            record?.percentDone !== 0 && changes?.percentDone;
          if (action === "update" && isPercentChaged) {
            const newProjectStartDate = new Date(); // the date that you want to set
            source.project.startDate = newProjectStartDate;
          }
        },
      },
    },
  },

Re: [REACT] Phantom update start date

Posted: Wed Aug 17, 2022 1:38 pm
by Ayurchenkoi

can i do something similar?

taskStore: {
            listeners: {
                change: ({ action, record, changes }: any) => {
                    if (action === 'update') {
                        if (!!changes?.percentDone) {
                            if (changes.percentDone.oldValue == 0 && changes.percentDone.value < 100) {
                                record.actualStartDate = record.startDate
                            }
                            if (record.percentDone === 100) {
                                record.actualEndDate = record.endDate
                                record.actualStartDate = record.startDate
                            }
                        }

                    if (!!changes.actualEndDate && !!changes.actualEndDate.value) {
                        record.endDate = new Date()
                        record.percentDone = 100
                    }

                    if (!!changes.actualStartDate && !!changes.actualStartDate.value) {
                        record.startDate = new Date()
                    }
                }
            },
        },
    },

Re: [REACT] Phantom update start date

Posted: Wed Aug 17, 2022 4:03 pm
by marcio

Hmm, you could, but I don't see why you want to update the startDate of the task like you did in the code you shared, if you want to update the project date, you need to update the ProjectModel, not in the record. Could you please clarify what you want to achieve?


Re: [REACT] Phantom update start date

Posted: Thu Aug 18, 2022 11:26 am
by Ayurchenkoi

I put it a little wrong, I need to change the dates of the task, not the project, the code that I presented earlier does not work


Re: [REACT] Phantom update start date

Posted: Thu Aug 18, 2022 12:28 pm
by tasnim

Here is an example of how you can achieve it:

        taskStore : {
            listeners : {
                change(event) {
                    if (event.changes?.percentDone?.value) {
                        const record = event.records[0];
                        record.setStartDate(DateHelper.add(record.data.startDate, 5, 'day'));
                    }
                }
            }
        }
    },

Docs:
https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#function-setStartDate
https://bryntum.com/docs/gantt/api/Core/helper/DateHelper


Re: [REACT] Phantom update start date

Posted: Sun Aug 21, 2022 9:31 pm
by Ayurchenkoi

i tried the example provided above but for some reason setStartDate doesn't work. Record changes, but after nothing changes in gantt ui.
Image


Re: [REACT] Phantom update start date

Posted: Mon Aug 22, 2022 2:19 pm
by tasnim

Could you please attach a runnable test case here?


Re: [REACT] Phantom update start date

Posted: Mon Aug 29, 2022 9:50 am
by Ayurchenkoi
taskStore: {
            listeners: {
                change: ({ action, changes, records }: any) => {
                    const record = records[0]
                    if (action === 'update') {
                        if (!!changes?.percentDone) {
                            if (changes.percentDone.oldValue == 0 && changes.percentDone.value < 100) {
                                record.actualStartDate = record.startDate
                            }
                            if (record.percentDone === 100) {
                                record.actualEndDate = record.endDate
                                record.actualStartDate = record.startDate
                            }
                        }

                    if (!!changes.actualEndDate && !!changes.actualEndDate.value) {
                        record.setEndDate(new Date())
                        record.percentDone = 100
                    }

                    if (!!changes.actualStartDate && !!changes.actualStartDate.value) {
                        record.setStartDate(new Date())
                    }
                }
            },
        },
    },

Re: [REACT] Phantom update start date

Posted: Mon Aug 29, 2022 12:32 pm
by alex.l

Hi Ayurchenkoi,

I cannot check your code snippet, because I don't have actualStartDate field in TaskModel.
The code that Tasnim posted is working well to me. Try to put debugger and check if you actually entered into if statements.
Try to edit one of our examples to reproduce the issue and attach a runnable code here, if you cannot share your application code.

I tested in our advanced Gantt example with this code
https://bryntum.com/examples/gantt/advanced/


const gantt = new Gantt({
    appendTo : 'container',

dependencyIdField : 'wbsCode',

project : {
    // Let the Project know we want to use our own Task model with custom fields / methods
    taskModelClass : Task,
    transport      : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    // the code I added starts here 
    taskStore : {
        listeners : {
            change(event) {
                if (event.changes?.percentDone?.value) {
                    const record = event.records[0];
                    record.setStartDate(DateHelper.add(record.data.startDate, 5, 'day'));
                }
            }
        }