How can I implement undo and redo for task edits in Smart Gantt while keeping se

[natejacobson]

Hi everyone, I am working on a scheduling screen for support teams with Gantt. I am currently trying to solve this: How can I implement undo and redo for task edits in Smart Gantt while keeping server data consistent? So far, I can reproduce it consistently in a small demo, but the UI behaves inconsistently after data updates. What approach would you recommend here?

[admin]

Hi,

The cleanest way to implement undo/redo for Smart Gantt task edits is to treat every edit as a command with a before/after state, rather than trying to restore the entire chart state.

Keep a history stack containing the changed task data:

– Before a task edit starts, store the original task state.
– After the edit completes, store the new state.
– Undo applies the old state.
– Redo applies the new state.
– Keep server persistence separate: when an undo/redo action changes a task, send the resulting task state back to the API so the backend stays synchronized.

A typical structure looks like:

const undoStack = [];
const redoStack = [];

function saveTaskChange(oldTask, newTask) {
    undoStack.push({
        oldValue: { ...oldTask },
        newValue: { ...newTask }
    });

    redoStack.length = 0;
}

function undo() {
    const action = undoStack.pop();

    if (!action) {
        return;
    }

    gantt.updateTask(action.oldValue.id, action.oldValue);

    redoStack.push(action);
}

function redo() {
    const action = redoStack.pop();

    if (!action) {
        return;
    }

    gantt.updateTask(action.newValue.id, action.newValue);

    undoStack.push(action);
}

Regards,
Markov

[Author]

Posts