[REACT] Scheduling cycle auto sync

[rodel.ocfemia]

Hi,
We encountered this "Scheduling cycle" alert, then when we choose either of the options available then clicked Apply, the auto sync is not triggering. Then when the page is refreshed, the popup is displayed again.

So we need to update the data in the backend to fix the scheduling cycle issue. How can we do it because the autosync is not triggered?

Scheduling Cycle.PNG (32.44 KiB) Viewed 512 times

[rodel.ocfemia]

I have reproduced this using the react gantt basic example.

Scheduling Cycle 2.PNG (70.52 KiB) Viewed 506 times

See attached reproducible code.

Scheduling Cycle.zip

(2.24 MiB) Downloaded 75 times

I added the following additional dependencies in launch-saas.json.

{
        "id"       : 21,
        "fromTask" : 4035,
        "toTask"   : 4034
      }

[tasnim]

Hi,

We have a config https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#config-silenceInitialCommit enabled by default to not trigger the commit on initial load, cause the data initial gets calculated.

As you want it to get triggered you'd need to have silenceInitialCommit to false

project : {
	silenceInitialCommit : false
}

Hope this helps

Best regards,
Tasnim

[rodel.ocfemia]

Hi,
I've added the code but it does not trigger autosync when I clicked Apply button in the Scheduling Cycle popup. I need to trigger the sync so that I can remove those scheduling cycle records in the backend.

project: {
            autoLoad: true,
            transport: {
                load: {
                    url: 'data/launch-saas.json'
                }
            },
            validateResponse : true,
            silenceInitialCommit : false
        },

[tasnim]

Hi,

Looks like you don't have autoSync set to true, you need to have autoSync set to true inside the project
https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#config-autoSync

You'd need to have a sync URL https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#config-syncUrl inside the project
Then it'll trigger.

Best regards,
Tasnim

[rodel.ocfemia]

Oh I overlooked it in the gantt example code.
It's ok now. Thanks

[rodel.ocfemia]

Hi,
We found some issues when we added the following code. On page load, the sync is already triggered and passing all ids causing issues in the backend.

project : {
	silenceInitialCommit : false
}

Is there another way to trigger sync when the apply button is clicked on the Scheduling Cycle Popup window?

Or can an api be invoked when the Apply button is clicked? But for this option, I need to get the dependency Id so that I can pass on to the api as payload.

Scheduling Cycle 2.PNG (70.52 KiB) Viewed 480 times

[tasnim]

Hi,

Sure, you can call sync on the apply button and click

First, create a custom class extending CycleResolutionPopup class https://bryntum.com/products/gantt/docs/api/SchedulerPro/widget/CycleResolutionPopup

class customCycleResolutionPopup extends CycleResolutionPopup {
    async onApplyButtonClick() {
        const
            me                      = this,
            { selectedResolutions } = me;


    let project = null;
    if (selectedResolutions.size) {
        // apply selected resolutions
        selectedResolutions.forEach(resolution => {
            const resolutionParameters = me.getResolutionParameters(resolution);
            if (!project) {
                project = resolutionParameters[0].project;
            }
            return resolution.resolve(...resolutionParameters)
        });

        me.continueWithResolutionResult(EffectResolutionResult.Resume);

        me.doResolve(selectedResolutions);
        // calls sync
        await project.sync();
    }
    else {
        me.onCancelButtonClick();
    }
}
}

Then add this custom class to https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-cycleResolutionPopupClass config

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        silenceInitialCommit : false,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            },
            sync : {
                url : 'sync'
            }
        }
    },

cycleResolutionPopupClass : customCycleResolutionPopup,

columns : [
    { type : 'name', width : 250 }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

And then when you'll click on the apply button it'll make a sync request

This should be working for you.

Best regards,
Tasnim

[rodel.ocfemia]

Hi,
I encountered this error.

Unexpected aliasing of 'this' to local variable.eslint@typescript-eslint/no-this-alias
const me: this

Then I tried adding
// eslint-disable-next-line @typescript-eslint/no-this-alias

The error is gone, but the sync is not triggered on Apply button click.

I tried to put console.log, it reached await project.sync() but the sync is not triggered.
Please see updated code.

let bryntum: any;
  try {
    bryntum = require('@bryntum/gantt');
  } catch {
    console.warn('@bryntum/gantt is not available.');
  }
  const {CycleResolutionPopup, EffectResolutionResult } = bryntum;
class customCycleResolutionPopup extends CycleResolutionPopup {
    async onApplyButtonClick() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const me = this;
      const { selectedResolutions } = me;
      console.log('customCycleResolutionPopup');
      let project: any;

  console.log(selectedResolutions.size);
  if (selectedResolutions.size) {
    // apply selected resolutions
    selectedResolutions.forEach((resolution: any) => {
      const resolutionParameters = me.getResolutionParameters(resolution);
      if (!project) {
        project = resolutionParameters[0].project;
      }
      return resolution.resolve(...resolutionParameters);
    });

    me.continueWithResolutionResult(EffectResolutionResult.Resume);
    me.doResolve(selectedResolutions);
    // calls sync
    console.log('project.sync()'); //reach code here
    await project.sync();
  } else {
    me.onCancelButtonClick();
  }
}
  }

[tasnim]

Hi,

It is working fine here. I'm attaching a react app with that functionality implemented where you can check that it fires correctly.
Also please check the video that shows that it triggers the sync and show result in the network tab