Showing unmapped tasks and drag & drop them on the board

[stophi-dev]

I want to see all "unmapped" tasks in a box next to the board. I want to be able to drag & drop the tasks to the column and swimlane of my choice.

With "unmapped", I mean all tasks that are defined in the project, but could not be mapped to any column or swimlane.

So for example, i have the following board:

const taskBoard = new TaskBoard({
    appendTo: document.body,

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

swimlaneField: 'priority',
swimlanes: [
    'high',
    'medium',
    'low'
],

project: {
    tasksData: [
        {
            id: 1,
            name: 'Bug with rendering',
            status: 'concept',
            priority: 'low',
            component: ['frontend']
        },
        {
            id: 2,
            name: 'Bug with database',
            status: 'doing',
            priority: 'medium',
            component: ['backend']
        },
        {
            id: 3,
            name: 'Fix XSS Injection',
            status: 'done',
            priority: 'high',
            component: ['frontend']
        },
        {
            id: 4,
            name: 'Heisenbug',
            status: 'todo',
            priority: null,
            component: ['frontend', 'backend']
        }
    ]
}
});

The first and the last tasks are not visible on the board, because the column and respectively swimlane value doesn't fit to the defined columns/swimlanes.

So the unmapped cards could be determined like this (maybe there is a simpler way that I don't know):

const tasksOnBoardMap = taskBoard.columns
    .flatMap(column => column.tasks)
    .reduce((map, task) => map.set(task.id, task), new Map());

const tasksNotOnBoard = taskBoard.project.tasks
    .filter(task => !tasksOnBoardMap.has(task.id));

console.log('Cards that are not mapped to any column:');
tasksNotOnBoard
    .map(task => task.name)
    .forEach(name => console.log(name));

[marcio]

Hey,

Would be possible for you to have a "default" status? As we have here https://bryntum.com/products/taskboard/examples/task-drag/

You can set backlog or something like that for the tasks that haven't the status that is set in the Taskboard, and in that way, you'll have only one column with all the "unmapped" tasks.

[stophi-dev]

With that proposal I see two problems

1. It looks good if there are only columns, but if we have additionally swimlanes, then the structure should more be like in the attached picture. There is only one box for "unmapped tasks" and the unmapped tasks should not be divided into swimlanes.

2. There are multiple reasons why a task could be unmapped. And adding another value like 'backlog' in your example, would deviate from the real data in our backend and obfuscate the actual state of the task.

[mats]

FYI - We have this ticket open to look into supporting this: https://github.com/bryntum/support/issues/6603

[stophi-dev]

I don't know if that's exactly the same. Being able to drag & drop between two boards is not solving everything. Let's say I create a second board with a single column and no swimlanes where I want to put all the unmapped tasks. Now those tasks don't have a field by which they could be grouped into one column. They are just all other tasks that didn't fit in any of the defined columns or swimlanes. So the columnField could be null, swimlaneField could be null, columnField could be a value that is not defined as a column, etc. But maybe the Bryntum TaskBoard offers a mechanism to solve that problem, but I am not aware of it.

[mats]

That'd be an easy thing to implement, just a dummy field on your TaskModel that identifies tasks as "not in any other group"