Our flexible Kanban board for managing tasks with drag drop


Post by ahelis »

We are using a design that derives the columns from the dataset. After inserting we are getting columns appended to the end. Looking for a way to prevent these incorrect columns getting appended and remove our workaround.

BoardApi.prototype.insertColumn = function (taskRecord, selectedColumn) {
    let inserted;
    if (this.generateFromData === true) {
        const sort = this.sortAttribute;
        if (taskRecord && taskRecord[selectedColumn]) {
            const newColumn = taskRecord[selectedColumn];
            const newColumnDefinition = {
                id: newColumn.id,
                text: newColumn[DISPLAY_VALUE]
            };
            const index = this.configureColumn(newColumn, { action: INSERT, label: newColumn[DISPLAY_VALUE], sort: sort });
            if (index > -1) {
                inserted = this.board.columns.insert(index, newColumnDefinition);

                // bug in bryntum, inserts extra columns, workaround for now
                let last = this.board.columns.last;
                if (last) {
                    while (last.data.id === 'eventsSuspended') {
                        this.board.columns.remove(last);
                        last = this.board.columns.last;
                    }
               }
           }
       }
    }
}

Post by mats »

How can we reproduce this? If you can upload a small test case (ideally based on our standard demos) we can have a look and hopefully fix it quickly.


Post by ahelis »

Hi Mats,

Please copy and paste this example into your basic demo.

import { TaskBoard } from '../../build/taskboard.module.js?459924';
import shared from '../_shared/shared.module.js?459924';

const taskBoard = new TaskBoard({
    appendTo : 'container',

// Url for resource avatar images
resourceImagePath : '../_shared/images/users/',

// Experimental, transition moving cards using the editor
useDomTransition : true,

// Columns to display
columns : [
    { id : 'todo', text : 'Todo', color : 'orange' },
    { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
    { id : 'done', text : 'Done' }
],

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

tbar : [
    {
        type : 'label',
        text : 'Insert Columns'
    },
    {
        type  : 'buttonGroup',
        items : ['First', 'Second', 'Third'].map(name => {
            return {
                ref          : name.toLowerCase(),
                text         : name,
                //pressed      : DomHelper.themeInfo.name === name,
                enableToggle : true,
                toggleGroup  : 'insert_column',
                onAction() {
                    console.info(taskBoard.columns);
                    taskBoard.columns.insert(1, { id: 'two', text: 'Two' });            
                }
            };
        })
    }
],

// Project using inline data
project : {
    tasks : [
        { id : 1, name : 'Book flight', status : 'done', prio : 'medium' },
        { id : 2, name : 'Book hotel', status : 'done', prio : 'medium' },
        { id : 3, name : 'Pack bags', status : 'doing', prio : 'low' },
        { id : 4, name : 'Get visa', status : 'doing', prio : 'high' },
        { id : 5, name : 'Book train', status : 'done', prio : 'medium' },
        { id : 6, name : 'Go to airport', status : 'todo', prio : 'low' },
        { id : 7, name : 'Renew passport', status : 'todo', prio : 'high' },
        { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium' },
        { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium' },
        { id : 10, name : 'Canyoning', status : 'todo', prio : 'low' },
        { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium' },
        { id : 12, name : 'Diving license', status : 'todo', prio : 'medium' },
        { id : 13, name : 'Book cab', status : 'done', prio : 'low' },
        { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium' },
        { id : 15, name : 'Take pictures', status : 'todo', prio : 'low' },
        { id : 16, name : 'Take selfies', status : 'todo', prio : 'high' },
        { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium' },
        { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium' },
        { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high' },
        { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium' },
        { id : 21, name : 'Iron shirts', status : 'done', prio : 'low' }
    ],

    resources : [
        { id : 1, name : 'Angelo', image : 'angelo.jpg' },
        { id : 2, name : 'Celia', image : 'celia.jpg' },
        { id : 3, name : 'Dave', image : 'dave.jpg' },
        { id : 4, name : 'Emilia', image : 'emilia.jpg' },
        { id : 5, name : 'Gloria', image : 'gloria.jpg' },
        { id : 6, name : 'Henrik', image : 'henrik.jpg' },
        { id : 7, name : 'Kate', image : 'kate.jpg' },
        { id : 8, name : 'Lee', image : 'lee.jpg' },
        { id : 9, name : 'Lisa', image : 'lisa.jpg' },
        { id : 10, name : 'Mark', image : 'mark.jpg' },
        { id : 11, name : 'Steve', image : 'steve.jpg' }
    ],

    assignments : [
        { id : 1, event : 7, resource : 1 },
        { id : 2, event : 7, resource : 2 },
        { id : 3, event : 8, resource : 2 },
        { id : 4, event : 4, resource : 3 },
        { id : 5, event : 7, resource : 3 },
        { id : 6, event : 7, resource : 4 },
        { id : 7, event : 7, resource : 5 },
        { id : 8, event : 7, resource : 6 },
        { id : 9, event : 7, resource : 7 },
        { id : 10, event : 7, resource : 8 },
        { id : 11, event : 7, resource : 9 },
        { id : 12, event : 7, resource : 10 },
        { id : 13, event : 7, resource : 11 },
        { id : 14, event : 16, resource : 7 },
        { id : 15, event : 16, resource : 8 },
        { id : 16, event : 16, resource : 9 },
        { id : 17, event : 16, resource : 10 },
        { id : 18, event : 16, resource : 11 },
        { id : 19, event : 19, resource : 10 },
        { id : 20, event : 9, resource : 7 },
        { id : 21, event : 12, resource : 8 },
        { id : 22, event : 14, resource : 9 },
        { id : 23, event : 17, resource : 10 },
        { id : 24, event : 18, resource : 10 },
        { id : 25, event : 11, resource : 9 },
        { id : 26, event : 20, resource : 8 },
        { id : 27, event : 1, resource : 7 },
        { id : 28, event : 2, resource : 6 },
        { id : 29, event : 5, resource : 5 },
        { id : 30, event : 6, resource : 4 },
        { id : 31, event : 10, resource : 3 },
        { id : 32, event : 15, resource : 2 },
        { id : 33, event : 3, resource : 1 },
        { id : 34, event : 13, resource : 2 },
        { id : 36, event : 8, resource : 3 },
        { id : 37, event : 17, resource : 9 },
        { id : 38, event : 17, resource : 8 },
        { id : 39, event : 17, resource : 7 },
        { id : 40, event : 17, resource : 6 }
    ]
}
});

Here is the screen shot:

Screen Shot 2022-07-12 at 6.42.53 PM.png
Screen Shot 2022-07-12 at 6.42.53 PM.png (187.44 KiB) Viewed 475 times

Post by alex.l »

I've reproduced that. We will fix, thank you for the report!
Here is a link to track the status: https://github.com/bryntum/support/issues/4924

All the best,
Alex


Post Reply