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));