TaskEdit

Feature

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):

Or anchored to a task:

Default items

By default it displays the following items:

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
           }
       }
   }
});

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
               }
           }
       }
   }
});

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
               }
           }
       }
   }
});

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.

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.

This feature is enabled by default.