TodoListField

A field that displays, and also lets users edit, a list of todo items. Each item has a checkbox to mark if the item is completed or not and a button to edit its text/remove it. Designed to be used in the task editor, to work in tandem with the TodoListItem.

Todo list field

//<code-header>
fiddle.title = 'Todo list field';
//</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 : [
        'todo',
        'doing',
        'done'
    ],

    // 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   : 'Double click me',
                status : 'doing',
                todo   : [
                    { title : 'Build', done : true },
                    { title : 'Compile', done : true },
                    { title : 'Process', done : false }
                ]
            },
            {
                id     : 2,
                name   : 'Or me',
                status : 'done',
                todo   : [
                    { title : 'Debug', done : true },
                    { title : 'Trace', done : false },
                    { title : 'Profile', done : true }
                ]
            }
        ]
    }
});

To hook it up, add it to the task editors items and link it to a field on your task model declared with type : 'array'. The fields data is expected to be an array of objects. Configure textField and checkedField to match the names used by the objects in your array.

This snippet illustrates basic usage:

const taskBoard = new TaskBoard({
   features : {
       taskEdit : {
           items : {
               todo : {
                   type         : 'todolist',
                   label        : 'Todo',
                   field        : 'todo',
                   // "title" property will be used as the todo item text
                   textField    : 'title',
                   // "done" property will drive the checkbox
                   checkedField : 'done'
               }
           }
       }
   },

   project : {
       taskStore : {
           fields : [ { name : 'todo', type : 'array' } ]
       }

       tasks : [
           {
               id   : 1,
               name : 'Important task',
               todo : [
                   { title : 'Fix this', done : true },
                   { title : 'Fix that', done : false }
               ]
           }
       ]
   }
});