TaskItems

Mixin

Mixin that allows adding multiple predefined items (sort of like task widgets) to tasks:

You can pick from the following item types:

• image
• jsx
• progress
• rating
• resourceAvatars
• separator
• tags
• template
• text
• todoList

All of which are included in this demo:

Configuring which items to use

Task cards are divided into three sections, header, body and footer. Each section can hold items. The following items are defined by default:

Add items to tasks by supplying the bodyItems config (the other sections work the same):

const taskBoard = new TaskBoard({
    bodyItems : {
        // Will use "prio" as its field
        prio  : { type : 'text' },
        // Will use "status" as its field
        state : { type : 'text', field : 'status' }
    }
});

The items you supply are merged with the predefined items (as listed in the table above).

The only always required config for new items is type, which determines what kind of task item to use. Which other configs you can use depends on the item type.

By default, the key in the items object will be used to link the item to a field on a task. You can override the default by using the field config. Note that, in most cases, if the value of the backing field is null or undefined, the item will not be rendered.

To rearrange items, specify the order config of each item. Applied as flex order.

You can also add items to a tasks header and footer, using headerItems and footerItems.

Manipulating items per task

You can manipulate which items are shown for a task by supplying a processItems function. It will be called during rendering for each task and in it you can manipulate the passed bodyItems object. Set a property of it to null to remove that item for that task:

const taskBoard = new TaskBoard({
    bodyItems : {
        progress  : { type : 'progress' }
    },

    processItems({ taskRecord, bodyItems }) {
        if (taskRecord.status === 'done') {
            bodyItems.progress = null;
        }
    }
});