TodoListItem

Item displaying a list of todo items with associated checkboxes. It allows users to toggle the checkbox for each item on the card to indicate if that item is completed or not. By adding a TodoListField to the task editor users can also add, edit and remove todo items.

It consumes an array of objects representing todo items. For this item to work as indented, that array has to be supplied by a task field using type : 'array'. It is also important to configure the textField and checkedField to match properties of the objects in that array. This snippet illustrates a possible setup:

// Custom task model with a todo field of array type
class MyTask extends TaskModel {
    static fields = [
       { name : 'todo', type : 'array' }
    ];
}

const taskBoard = new TaskBoard({
   project : {
       // Use the custom task model defined above
       taskModelClass : MyTask,

       tasks : [
           {
             id : 1,
             name : 'Order software',
             // The custom field, accepts an array
             todo : [
                 { title : 'Sketchup Pro', done : false },
                 { title : 'AutoCAD LT', done : true },
                 { title : 'Inventor', done : false }
             ]
           }
       ]
   },

   bodyItems : {
       todo : {
           // Add a todo list item to card body
           type         : 'todoList',
           // Map text to the "title" field
           textField    : 'text',
           // Map checkbox to the "done" field
           checkedField : 'done'
       }
   }
});