[ANGULAR] Scheduling cycle popup edit query

[shashank.yadav]

Hi Team,

Query: Is there any event to make below changes for popup Scheduling cycle.

A. How to remove option "Deactivate dependency".
B. Callback function on button "Apply" click.

schedulingPopup.png (28.83 KiB) Viewed 194 times

Thanks,
Shashank Yadav
Hatch Digital

[tasnim]

Hi,

Sure, to achieve it you need to create a custom class overriding the cycleResolutionPopup class
https://bryntum.com/products/gantt/docs/api/SchedulerPro/widget/CycleResolutionPopup

And need to set the custom class to https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-cycleResolutionPopupClass

class CustomCycleResolution extends CycleResolutionPopup {
    getResolutions() {
        const
            { schedulingIssue } = this,
            invalidDependencies = schedulingIssue?.getInvalidDependencies();

    let resolutions = schedulingIssue?.getResolutions();

    // If there are invalid dependencies involved (like parent-child or self-to-self)
    // let's not suggests other resolutions to simplify the UI

    if (resolutions && invalidDependencies.length) {
        resolutions = resolutions.filter(r => r.dependency && invalidDependencies.includes(r.dependency));
    }

    resolutions?.shift();

    return resolutions;
}

onApplyButtonClick() {
    console.log('apply button clicked');
    super.onApplyButtonClick()
}
}

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

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);
    }
}
});

Screenshot 2024-03-13 112743.png (26.37 KiB) Viewed 191 times

I hope it helps.

[shashank.yadav]

Hi Tasim,

Thanks for responding.
Do we need to import CycleResolutionPopup from "@bryntum/gantt"?
Because code is not able to find onApplyButtonClick function and variable schedulingIssue from extended class.

import { CycleResolutionPopup } from "@bryntum/gantt";

Thanks,
Shashank Yadav
Hatch Digital

[tasnim]

Hi,

It's works fine for me in react

Here is how my code looks like in AppConfig file

/**
 * Application configuration
 */
import React from 'react';
import DemoButton from './components/DemoButton';
import DemoEditor from './components/DemoEditor';
import { CycleResolutionPopup } from '@bryntum/gantt';

class CustomCycleResolution extends CycleResolutionPopup {
    getResolutions() {
        const
            { schedulingIssue } = this,
            invalidDependencies = schedulingIssue?.getInvalidDependencies();

    let resolutions = schedulingIssue?.getResolutions();

    // If there are invalid dependencies involved (like parent-child or self-to-self)
    // let's not suggests other resolutions to simplify the UI

    if (resolutions && invalidDependencies.length) {
        resolutions = resolutions.filter(r => r.dependency && invalidDependencies.includes(r.dependency));
    }

    /* eslint-disable no-unused-expressions */
    resolutions?.shift();

    return resolutions;
}

onApplyButtonClick() {
    console.log('apply button clicked');
    super.onApplyButtonClick()
}
}

const ganttConfig = {
    project : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/launch-saas.json'
            }
        },
        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true
    },
    cycleResolutionPopupClass : CustomCycleResolution,
    columns : [
        {
            type     : 'name',
            field    : 'name',
            width    : 250,
            renderer : ({ record }) => {
                return record.isLeaf ? <span>{record.name}</span> : <b>{record.name}</b>;
            }
        },
        {
            text                 : 'Edit<div class="small-text">(React component)</div>',
            htmlEncodeHeaderText : false,
            width                : 120,
            editor               : false,
            align                : 'center',
            // Using custom React component
            renderer             : ({ record, grid, grid: { extraData } }) =>
                record.isLeaf ? (
                    <DemoButton
                        text={'Edit'}
                        onClick={() => extraData.handleEditClick({ record, grid })}
                    />
                ) : null
        },
        {
            field                : 'draggable',
            text                 : 'Draggable<div class="small-text">(React editor)</div>',
            htmlEncodeHeaderText : false,
            width                : 120,
            align                : 'center',
            editor               : ref => <DemoEditor ref={ref} />,
            renderer             : ({ value }) => (value ? 'Yes' : 'No')
        }
    ],

viewPreset : 'weekAndDayLetter',
barMargin  : 10
};

export { ganttConfig };

What errors do you get?

[shashank.yadav]

We are on Angular.
Below is the error, also I checked that in the class CycleResolutionPopup, function onApplyButtonClick does not exists, in gantt 5.6.7 version.

applyButton.png (51.31 KiB) Viewed 173 times

Thanks,
Shashank Yadav
Hatch Digital

[shashank.yadav]

Any lead for angular, please?

[tasnim]

Hi,

I've updated one of our demo with the cycleResolution popup code (Angular)
Please find it attached below. You can run it with npm i && npm start

Please let us know if you have any other questions.

[shashank.yadav]

Thanks Tasim.
I do have a query, as after we select "Removing Dependencies" and then on Apply button.
The changes get applied to Gantt.

But we have observed that, the projectl -> stm is not tracking the changes made.
Is it expected behavior?
Is there any way that we can add that "removed depndency" change to project -> stm?

Thanks,
Shashank Yadav
Hatch Digital

[tasnim]

Hi,

Sounds like a bug, we'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/8811

Best regards,
Tasnim

[shashank.yadav]

Perfect. Could you prioritize it for next patch release, please.

Thanks,
Shashank Yadav
Hatch Digital