TagsItem

Item displaying tags, either from string split into tags, an array of strings or by plucking a value from an array of objects.

Using a string, split into tags using the configured separator:

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

    features : {
        columnToolbars : false
    },

    bodyItems : {
        // Display a tags item bound to the categories field
        categories : {
            type : 'tags'
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            {
                id         : 1,
                name       : 'Learn Angular',
                status     : 'doing',
                categories : 'book'
            },
            {
                id         : 2,
                name       : 'Learn React',
                status     : 'done',
                categories : 'online,video'
            },
            {
                id         : 3,
                name       : 'Learn Vue',
                status     : 'todo',
                categories : 'lessons,exam'
            }
        ]
    }
});

Using an array of strings, each entry is turned into a tag:

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

    features : {
        columnToolbars : false
    },

    bodyItems : {
        // Display a tags item bound to the tags field
        tags : {
            type : 'tags'
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            {
                id     : 1,
                name   : 'Bug #1',
                status : 'doing',
                tags   : ['bug', 'critical']
            },
            {
                id     : 2,
                name   : 'Bug #2',
                status : 'done',
                tags   : ['bug']
            },
            {
                id     : 3,
                name   : 'Request #1',
                status : 'todo',
                tags   : ['feature', 'info required']
            }
        ]
    }
});

Using an array of objects, gives you the most control over the tags. Requires configuring a textProperty and optionally a clsProperty:

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

    features : {
        columnToolbars : false
    },

    bodyItems : {
        // Display a tags item bound to the tags field
        tags : {
            type         : 'tags',
            // Plucking text from this property
            textProperty : 'title',
            // And CSS cls from this
            clsProperty  : 'cls'
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            {
                id     : 1,
                name   : 'Bug #1',
                status : 'doing',
                tags   : [{ title : 'bug' }, { title : 'critical', cls : 'b-color-red' }]
            },
            {
                id     : 2,
                name   : 'Bug #2',
                status : 'done',
                tags   : [{ title : 'bug' }]
            },
            {
                id     : 3,
                name   : 'Request #1',
                status : 'todo',
                tags   : [{ title : 'feature' }, { title : 'info required' }]
            }
        ]
    }
});

Configs

9
clsProperty: String

Property used to add a CSS class to each tag. It is plucked from an array of objects that is used as the value for this item.

const taskBoard = new TaskBoard({
   bodyItems : {
      tags : { type : 'TagsItem', clsProperty : 'color' }
   },

   project : {
       tasks : [{
           id : 1,
           name : 'Issue #1',
           tags : [
               { title : 'bug', color : 'orange' },
               { title : 'important', color : 'red' }
           ]
       }]
   }
});

// Card for Issue #1 will render 2 tags, one with cls 'orange' and one with cls 'red'
editor: String | Object= tagcombo

Widget type or config to use as the editor for this item. Used in the inline task editor.

Defaults to use a TagCombo.

separator: String= ,

Property used to split a value string into tags.

const taskBoard = new TaskBoard({
   bodyItems : {
      tags : { type : 'TagsItem', separator : ';' }
   },

   project : {
       tasks : [{
           id : 1,
           name : 'Issue #1',
           tags : 'bug;important'
       }]
   }
});

// Card for Issue #1 will render 2 tags, 'bug' and 'important'
textProperty: String

Property used to determine the text for the tag. It is plucked from an array of objects that is used as the value for this item.

const taskBoard = new TaskBoard({
   bodyItems : {
      tags : { type : 'TagsItem', textProperty : 'title' }
   },

   project : {
       tasks : [{
           id : 1,
           name : 'Issue #1',
           tags : [
               { title : 'bug', color : 'orange' },
               { title : 'important', color : 'red' }
           ]
       }]
   }
});

// Card for Issue #1 will render 2 tags, 'bug' and 'important'
clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

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

Typedefs

1

CSS variables

6