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.

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

    features : {
        columnToolbars : false,
        taskEdit       : {
            items : {
                todo : {
                    type         : 'todolist',
                    label        : 'Todo',
                    name         : 'todo',
                    textField    : 'title',
                    checkedField : 'done'
                }
            }
        }
    },

    bodyItems : {
        todo : {
            type         : 'todolist',
            textField    : 'title',
            checkedField : 'done'
        }
    },

    // Columns to display
    columns : [
        { id : 'todo', text : 'Todo', color : 'blue' },
        { id : 'doing', text : 'Doing', color : 'yellow' },
        { id : 'done', text : 'Done', color : 'green' }
    ],

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

    // Project using inline data
    project : {
        taskStore : {
            fields : [{ name : 'todo', type : 'array' }]
        },

        tasks : [
            {
                id     : 1,
                name   : 'Native application',
                status : 'doing',
                todo   : [
                    { title : 'Build', done : true },
                    { title : 'Compile', done : true },
                    { title : 'Process', done : false }
                ]
            },
            {
                id     : 2,
                name   : 'Buggy application',
                status : 'done',
                todo   : [
                    { title : 'Debug', done : true },
                    { title : 'Trace', done : false },
                    { title : 'Profile', done : true }
                ]
            }
        ]
    }
});

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

Configs

9
checkedField: String= checked

Name of a property on a todo item to use for the checkbox. The property is expected to be a boolean.

clsField: String= cls

Name of a property on a todo item whose value will be added as a CSS class to the todo item.

textField: String= text

Name of a property on a todo item to display as its text.

clsTaskItem
editorTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

2
isTodoListItem: Boolean= truereadonly
Identifies an object as an instance of TodoListItem class, or subclass thereof.
isTodoListItem: Boolean= truereadonlystatic
Identifies an object as an instance of TodoListItem class, or subclass thereof.

Typedefs

1

CSS variables

4