TaskEdit

This features allows the user to edit tasks in a popup editor that can either be shown centered on screen (the default, double click a task to show the editor):

Task edit

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

    features : {
        columnToolbars : false,
        taskEdit       : true
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

Or anchored to a task:

Task edit anchored

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            // Config used to create the editor
            editorConfig : {
                // Will make it anchor to the task being edited
                centered : false,
                // Display it without masking the rest of the page
                modal    : false
            },

            // Affect the editors items
            items : {
                // Change the label for the name field
                name        : { label : 'Title' },
                // Hide description, color and column
                description : null,
                color       : null,
                column      : null
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        resources : [
            { id : 1, name : 'Emilia', image : 'emilia.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

Default items

By default it displays the following items:

Ref	Type	Weight	Comment
`name`	text	100	Task name
`description`	textarea	200	Task description
`resources`*	resourcescombo	300	Assigned resources
`color`	taskcolorcombo	400	Task eventColor
`column`	columncombo	500	Bound to configured columnField
`swimlane`*	swimlanecombo	600	Bound to configured swimlaneField
^* Only shown when using resources / swimlanes respectively

You can modify or remove the default items and add new custom items to the editor either at config time by using the items config or at runtime by using the processItems config.

Customize when configuring

The items config accepts an object keyed by item ref (as listed in the table above). This object will be merged with default items and the end result will determine which items are shown and how they are configured.

To remove a default item

Set a ref to null to remove the item from the editor:

const taskBoard = new TaskBoard({
   features : {
       taskEdit : {
           items : {
               // Remove the color field
               color : null
           }
       }
   }
});

Task edit remove

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            items : {
                // Remove description & color
                description : null,
                color       : null
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    // Project using inline data
    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

To modify a default item

Supply an object with the configs you want to change for a ref to modify the corresponding field:

const taskBoard = new TaskBoard({
   features : {
       taskEdit : {
           items : {
               // Change label of the description field and move it to the bottom
               description : {
                   label : 'Comment',
                   weight : 700
               }
           }
       }
   }
});

Task edit modify

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            items : {
                // Change descriptions label and move it to the bottom
                description : { label : 'Comment', weight : 800 }
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

To add a custom item

Supply a config object for the new item, using a ref that is not used by any default item:

const taskBoard = new TaskBoard({
   features : {
       taskEdit : {
           items : {
               // Change label of the description field and move it to the bottom
               deadline : {
                   type   : 'date',
                   label  : 'Deadline',
                   weight : 300,
                   name   : 'deadline' // Bound field. If it matches the ref (key) for the field, it can be left out
               }
           }
       }
   }
});

Task edit add

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            items : {
                // Add a custom category field
                category : {
                    type   : 'combo',
                    items  : ['Administrative', 'DevOps', 'Devs'],
                    name   : 'category',
                    label  : 'Category',
                    weight : 150
                },

                color       : null,
                description : null
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    footerField : 'category',

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        taskStore : {
            // Extra field on task records
            fields : ['category']
        },

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

Customize at runtime

By supplying a function to processItems you gain runtime control over which items are shown and how they are configured:

const taskBoard = new TaskBoard({
   features : {
       taskEdit : {
           processItems({ taskRecord, items }) {
               // Hide description for tasks that are done
               if (taskRecord.status === 'done') {
                   items.description = null;
               }

               // Modify the label for the name field
               items.name.label = 'Title';

               // Add a custom item for high prio tasks
               if (taskRecord.prio === 'high') {
                   items.severity = { type : 'number', name : 'severity', label : 'Severity' }
               }
           }
       }
   }
});

You can also use processItems to prevent the editor from being shown for certain tasks, by returning false from the function.

Task edit process items

//<code-header>
fiddle.title = 'Task edit process items';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskEdit       : {
            processItems({ taskRecord, items }) {
                // Disallow editing done tasks
                if (taskRecord.status === 'done') {
                    return false;
                }

                items.name.label = 'Title';
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' },
            { id : 2, name : 'Cant edit me', status : 'done' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 },
            { id : 2, event : 2, resource : 2 }
        ]
    }
});

Customizing other aspects of the editor

By supplying an editorConfig you can customize other aspects of the editor, such as its size, how it is anchored, its title etc.

Task edit editor config

//<code-header>
fiddle.title = 'Task edit editor config';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskEdit       : {
            editorConfig : {
                title : 'Task details',
                width : '50em'
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

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

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

    bodyItems : {
        tags : { type : 'tags'  }
    },

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing', category : 'DevOps', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

This feature is enabled by default.

Configs

Common

disabledInstancePlugin

listenersEvents

Customization

editorConfig: TaskEditorConfig

Config object merged with the default configuration of the editor (by default a TaskEditor).

Can be used to configure any aspect of the editor:

const taskBoard = new TaskBoard({
    features : {
        taskEdit : {
            editorConfig : {
                modal    : false,
                centered : false
            }
        }
    }
});

To customize the items in the editor, using items is preferable.

editorType: String= taskboardtaskeditor

Type of widget to use as the editor. Should point to a subclass of TaskEditor or a widget mimicking its API.

items: Object<String, (ContainerItemConfig|Boolean|null)>

Items definition passed on to the configured editor (by default a TaskEditor).

Can be used to add new items or modify and remove predefined items. To remove, supply null as the value.

Other

processItems: function

A function called before displaying the editor that allows manipulation of its items. Returning false from this function prevents the editor from being shown.

features         : {
   taskEdit : {
        processItems({ items, taskRecord, columnRecord, swimlaneRecord }) {
            // Manipulate existing items here as needed
            items.name.label = taskRecord.type === 'task' ? 'Task' : 'Issue';

           // Remove column field when editing tasks that are done
           if (columnRecord.id === 'done') {
               items.column = false
           }
        }
    }
},

Parameter	Type	Description
`context`	Object	An object with information about the editor being shown
`context.feature`	TaskEdit	A reference to this feature.
`context.items`	Object<String, ContainerItemConfig>	An object containing the editor item configs keyed by ref
`context.taskRecord`	TaskModel	Record representing task being edited
`context.columnRecord`	ColumnModel	Record representing tasks column
`context.swimlaneRecord`	SwimlaneModel	Record representing tasks swimlane

Returns: Boolean | null -

Returning false from this function prevents the menu being shown

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isTaskEdit: Boolean= truereadonly

Identifies an object as an instance of TaskEdit class, or subclass thereof.

isTaskEdit: Boolean= truereadonlystatic

Identifies an object as an instance of TaskEdit class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

Common

editTask

Edit the supplied task in the task editor.

taskBoard.editTask(taskStore.first);

Parameter	Type	Description
`taskRecord`	TaskModel	Task to edit
`element`	HTMLElement	Optionally an element to align to, by default it tries to resolve one from the supplied task when the editor is configured to not be centered.

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeTaskEdit

Fires on the owning TaskBoard before a task is displayed in an editor.

Returning false or a promise that resolves to false stops the default editing UI from being shown.

taskBoard.on({
    beforeTaskEdit({ taskRecord }) {
        return await userCanEdit(taskRecord);
    }
}

// Adding a listener using the "on" method
taskEdit.on('beforeTaskEdit', ({ source, taskRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The owning TaskBoard
`taskRecord`	TaskModel	The record about to be shown in the task editor

beforeTaskEditShow

Fires on the owning TaskBoard when the editor for a task is available, but before it is populated with data and shown. Allows manipulating fields etc.

taskBoard.on({
    beforeTaskEditShow({ taskRecord, editor }) {
        editor.title = `Editing "${taskRecord.name}"`;
    }
}

// Adding a listener using the "on" method
taskEdit.on('beforeTaskEditShow', ({ source, taskRecord, editor }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The owning TaskBoard
`taskRecord`	TaskModel	The record about to be shown in the task editor
`editor`	TaskEditor	The editor

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeTaskEdit

Called on the owning TaskBoard before a task is displayed in an editor.

Returning false or a promise that resolves to false stops the default editing UI from being shown.

taskBoard.on({
    beforeTaskEdit({ taskRecord }) {
        return await userCanEdit(taskRecord);
    }
}

new TaskEdit({
    onBeforeTaskEdit({ source, taskRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The owning TaskBoard
`taskRecord`	TaskModel	The record about to be shown in the task editor

onBeforeTaskEditShow

Called on the owning TaskBoard when the editor for a task is available, but before it is populated with data and shown. Allows manipulating fields etc.

taskBoard.on({
    beforeTaskEditShow({ taskRecord, editor }) {
        editor.title = `Editing "${taskRecord.name}"`;
    }
}

new TaskEdit({
    onBeforeTaskEditShow({ source, taskRecord, editor }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The owning TaskBoard
`taskRecord`	TaskModel	The record about to be shown in the task editor
`editor`	TaskEditor	The editor

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

TaskEdit

Default items

Customize when configuring

To remove a default item

To modify a default item

To add a custom item

Customize at runtime

Customizing other aspects of the editor

Configs

Common

Customization

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Common

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs