TaskModel

Represents a single task on your TaskBoard, usually added to a TaskStore.

Customizing Task fields

The TaskModel has a few predefined fields as seen under Fields below. If you want to add new fields or change existing fields, you can do that by subclassing this class:

class MyTask extends TaskModel {

    static get fields() {
        return [
           // Add a new field
           { name: 'myField', type : 'number', defaultValue : 0 }
        ];
    }

    ...
}

// Instances of your class now has getters / setters defined for your field
const task = new MyTask();
console.log(task.myField); // => 0

If you want to use other names for any predefined field in your data, you can reconfigure them as seen below:

class MyTask extends TaskModel {

    static get fields() {
        return [
           // Remap status -> state
           { name: 'status', dataSource : 'state' }
        ];
    }

    ...
}

Configuring the Project to use a custom task model

Here's how you configure the Project to use a certain Model class:

const taskBoard = new TaskBoard({
    // Configure the project to use our custom task model and to load data remotely
    project : {
        taskModelClass : MyTask,

        autoLoad  : true
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    }
});

Read-only tasks

A task can be flagged as read-only using the readOnly field. This protects it from being edited in the UI, but has no effect on the data layer.

Please refer to Model for additional details.

No results

Fields

Fields belong to a Model class and define the Model data structure

collapsed : Boolean

Set to true to make the task render as a small bar in the UI. Toggling this state via UI is done through the CollapseItem.
description : String

Task description, by default shown in tasks body.
eventColor : 'red'/'pink'/'magenta'/'purple'/'violet'+ 17 more
Color, named colors are applied as a b-task-board-color-{color} (for example b-task-board-color-red) CSS class to the tasks card. Colors specified as hex, rgb() etc. are applied as style.color to the card.

If no color is specified, any color defined on the column or swimlane will apply instead.

By default it does not visually affect the UI, but it applies a color to the task that applications can leverage using currentColor to style it in the desired way.

Using named colors:
```
const taskBoard = new TaskBoard({
    project {
        tasks : [
            { id : 1, name : 'Important task', eventColor : 'red' }
        ]
    }
});
```
Will result in:
```
<div class="b-task-board-card b-task-board-color-red">
```
Which can the be used for example like:
```
.b-task-board-card {
    // currentColor is the color defined by b-red
    border-left : 5px solid currentColor;
}
```
Using non-named colors:
```
const taskBoard = new TaskBoard({
    project {
        tasks : [
            { id : 1, name : 'Important task', eventColor : '#ff0000' }
        ]
    }
});
```
Will result in:
```
<div class="b-task-board-card" style="color: #ff0000">
```
Predefined named colors:

red

pink

magenta

purple

violet

deep-purple

indigo

blue

light-blue

cyan

teal

green

light-green

lime

yellow

orange

amber

deep-orange

light-gray

gray
prio : String/Number

Task priority, can be used for sorting, or to link a task to a swimlane on the TaskBoard.
readOnly : Boolean

Set to true to make the task read-only, preventing it from being edited in the UI.

See the class description above for a live demo.
status : String

Task status, for example for linking a task to a column on the TaskBoard.
weight : Number

Task weight, used by default to determine its index in a column. Higher weights are displayed further down.

The weight is applied as a default sorter to the TaskStore.

When no weights are defined, task order is determined by store order.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTaskModel : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TaskModel class, or subclass thereof.

isTaskModel : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TaskModel class, or subclass thereof.

Source path

TaskBoard/model/TaskModel.js