UndoRedo

A widget encapsulating undo/redo functionality for the project of a TaskBoard.

To make use of this, the project must be configured with a State Tracking Manager.

If inserted into a TaskBoard (such as into a tbar, or bbar), the project of the that TaskBoard will be used.

If this widget is to be used "standalone" (rendered into the DOM outside of a TaskBoard), this must be configured with a reference the TaskBoard.

There are three child widgets encapsulated which may be referenced through the widgetMap:

undoBtn - The button which operates the undo operation
transactionsCombo - A combobox into which is pushed the list of transactions,
redoBtn - The button which operates the redo operation

The transactionsCombo may be configured away if only the buttons are required:

{
    type      : 'undoredo',
    items     : {
        transactionsCombo : null
    }
}

The example below illustrated how to embed an undoredo widget in the top toolbar of a TaskBoard:

Undo redo

//<code-header>
fiddle.title = 'Undo redo';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false
    },

    tbar : [
        { type : 'taskboardundoredo', items : { transactionsCombo : { width : '20em' } } }
    ],

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Task 1', status : 'doing' },
            { id : 2, name : 'Task 2', status : 'done' },
            { id : 3, name : 'Task 3', status : 'todo' },
            { id : 4, name : 'Task 4', status : 'todo' },
            { id : 5, name : 'Task 5', status : 'todo' },
            { id : 6, name : 'Task 6', status : 'doing' },
            { id : 7, name : 'Task 7', status : 'done' },
            { id : 8, name : 'Task 8', status : 'done' },
            { id : 9, name : 'Task 9', status : 'todo' },
            { id : 10, name : 'Task 10', status : 'todo' }
        ],
        // Turn on automatic undo/redo recording
        stm : {
            autoRecord : true,
            disabled   : false,

            getTransactionTitle(transaction) {
                const lastAction = transaction.queue[transaction.queue.length - 1];

                let { type, model, newData } = lastAction;

                if (lastAction.modelList && lastAction.modelList.length) {
                    model = lastAction.modelList[0];
                }

                let title = 'Transaction ' + this.position;

                if (model.isEventModel) {
                    if (type === 'UpdateAction') {
                        if (newData.status) {
                            title = `Set task ${model.name} status to ${newData.status}`;
                        }
                        else if (newData.prio) {
                            title = `Set task ${model.name} prio to ${newData.prio}`;
                        }
                        else {
                            title = `Edit task ${model.name}`;
                        }
                    }
                    else if (type === 'RemoveAction') {
                        title = `Remove task ${model.name}`;
                    }
                    else if (type === 'AddAction') {
                        title = `Add task ${model.name}`;
                    }
                }
                else if (model.isAssignmentModel) {
                    if (type === 'RemoveAction') {
                        title = `Unassigned ${model.resource.name} from ${model.event.name}`;
                    }
                    else if (type === 'UpdateAction') {
                        title = `Assigned ${model.resource.name} to ${model.event.name}`;
                    }
                }

                return title;
            }
        }
    }
});

Configs

Common

listenersEvents

Other

color: StringUndoRedoBase

Button color for the undo and redo buttons. See color.

showZeroActionBadge: BooleanUndoRedoBase

Configure as true to show "0" badge on the undo and redo buttons when they have no actions left to perform. By default when there are no actions, no badge is displayed.

text: BooleanUndoRedoBase

Configure as true to show "Undo" and "Redo" as button texts. The buttons always have a tooltip as a hint to the user as to their purpose.

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

inputFieldAlignContainer

labelPositionContainer

renditionContainer

rtlRTL

spanWidget