[INFO REQ] add process to undo/redo buttons

[kevin.snps]

Hi team,
We want to do some more process while undo and redo buttons are clicked by looking at the source code (UndoRedoBase) .
we did something like this in our source but it seems to be not working

image (4).png (10.63 KiB) Viewed 504 times

Undo-Redo Base in bryntum source code

image (5).png (46.91 KiB) Viewed 504 times

[tasnim]

you can do something like this :

{
                    ref   : 'undoRedo',
                    type  : 'undoredo',
                    items : {
                        transactionsCombo : null,
                        undoBtn : {
                            onAction : () => {
                                console.log('log');
                            }
                        }
                    }
                },

[kevin.snps]

Hi Tasnim,
Thanks for the reply. What you suggested would work but its not what we are looking for.
It would completely override the undo and redo action.

In this case it would just print a console.log('log') when we do a undo click.
We want to retain the undo and redo actions and do not want any changes to it, and add some custom code to undo and redo.
Is there a way to achieve a undo/redo process with the custom code getting executed.

[tasnim]

If you don't want to override it. You can use the click event to achieve it.
Docs https://bryntum.com/docs/gantt/api/Core/widget/Button#event-click

Example:

                {
                    ref   : 'undoRedo',
                    type  : 'undoredo',
                    items : {
                        transactionsCombo : null,
                        undoBtn : {
                            listeners : {
                                click() {
                                    console.log('click undo');
                                }
                            }
                        },
                        redoBtn : {
                            listeners : {
                                click() {
                                    console.log('click redo')
                                }
                            }
                        }
                    },
               },

Good Luck ,
Tasnim

[kevin.snps]

Hi Tasnim ,
Thank you for your reply. We would like to know how we can access the latest scheduler.project.inlineData data after a undo/redo event has happened. It seems like if we use a click listener, the scheduler.project data remains the same as how it was before the undo/redo event.

[tasnim]

The way you're getting the data that should work. Could you please provide your code so we can check what's wrong? To better assist you, could you please provide a runnable test case?

Good Luck ,
Tasnim

[kevin.snps]

Hi Tasnim,
We wanted to send a runnable test case for the above issue - [when we click undo and redo buttons we are not getting the latest project data], but we are not able to use the undo/redo functionality in the sandbox environment.
Could you let us know what is going wrong.
The below code represents the schedulerPro which has the undo and redo functionality.

I have also attached the whole component. Hope it will be a help for your debug.

/* globals bryntum : true */
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import GANTT from '@salesforce/resourceUrl/bryntum_gantt_439';
import SCHEDULERPRO from '@salesforce/resourceUrl/bryntum_scheduler_pro_506';
import {
  CALENDARS,
  EVENTS,
  RESOURCES,
  ASSIGNMENTS,
  DEPENDENCIES,
} from './data.js';

export default class Schedulerpro_component extends LightningElement {
  renderedCallback() {
    if (this.bryntumInitialized) {
      return;
    }
    this.bryntumInitialized = true;

Promise.all([
  loadScript(this, SCHEDULERPRO + '/schedulerpro.lwc.module.min.js'),
  loadStyle(this, SCHEDULERPRO + '/schedulerpro.material.min.css'),
  loadScript(this, GANTT + '/gantt.lwc.module.js'),
])
  .then(() => {
    this.createScheduler();
  })
  .catch((error) => {
    this.dispatchEvent(
      new ShowToastEvent({
        title: 'Error loading Bryntum Scheduler Pro',
        message: error,
        variant: 'error',
      }),
    );
  });
  }

  createScheduler() {
    const container = this.template.querySelector('.container');
    const project = (window.project = new bryntum.schedulerpro.ProjectModel({
      calendar: 'weekends',
      eventsData: EVENTS,
      resourcesData: RESOURCES,
      assignmentsData: ASSIGNMENTS,
      calendarsData: CALENDARS,
      dependenciesData: DEPENDENCIES,
      autoLoad: true,

  // 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,
}));
const scheduler = (window.schedulerpro =
  new bryntum.schedulerpro.SchedulerPro({
    appendTo: container,
    minHeight: '10em',
    flex: '1 1 50%',

    startDate: new Date(2020, 3, 26),
    endDate: new Date(2020, 4, 10),
    viewPreset: 'dayAndWeek',
    eventStyle: 'plain',
    tickSize: 20,
    resourceImagePath: '../_shared/images/users/',

    columns: [
      { type: 'resourceInfo', text: 'Name', field: 'name', width: 130 },
      { text: 'City', field: 'city', width: 90 },
    ],
    project,
    tbar: [
      {
        type: 'undoredo',
        icon: 'b-fa-undo',
      },
    ],
  }));

scheduler.render(container);
window.splitter = new bryntum.schedulerpro.Splitter({
  appendTo: container,
});

window.histogram = new bryntum.schedulerpro.ResourceHistogram({
  project,
  partner: scheduler,
  hideHeaders: true,
  appendTo: container,
  rowHeight: 60,
  minHeight: '10em',
  flex: '1 1 50%',
  showBarTip: true,
  //resourceImagePath : '../_shared/images/users/',
  columns: [
    {
      type: 'resourceInfo',
      text: 'Name',
      field: 'name',
      flex: 1,
      showEventCount: false,
    },
  ],
});
  }
}

[tasnim]

Hi,
I'm not able to run your application could you please provide a runnable app that I can run and debug?

[kevin.snps]

Hi Tasnim,
The component we have sent runs in our environment fine, and don't know what went wrong.
Do you have any logs that could help us tackle the problem?
We are using this component in the LWC, to run it in a salesforce environment. Is this the same for you?

[Maxim Gorkovsky]

Hello.
As far as I understood, your problem is that you want to run some code after undo or redo action has happened? In such case you can use a reference to state tracking manager on the project model: https://bryntum.com/docs/gantt/api/SchedulerPro/model/ProjectModel#property-stm and listen to restoringStop event: https://bryntum.com/docs/gantt/api/Core/data/stm/StateTrackingManager#event-restoringStop

For the scheduler pro project you would also want to wait for project to commit inside your listener: await project.commitAsync() After that you can be sure data is up to date