But, by this code we can remove columns from end of taskboard. We want delete button on newly created column and if user click on delete icon we can remove the respective column.
Also before removing the column we need to move the column tasks to another desired column?
import { TaskBoard } from '../../build/taskboard.module.js?474080';
import shared from '../_shared/shared.module.js?474080';
const taskBoard = new TaskBoard({
appendTo : 'container',
// Experimental, transition moving cards using the editor
useDomTransition : true,
features : {
columnDrag : true,
columnHeaderMenu : true,
columnToolbars : {
topItems : {
removeColumn : {
icon : 'b-fa-trash',
tooltip : 'Remove this column',
onClick : 'up.onRemoveColumnClick'
}
}
}
},
onRemoveColumnClick(props) {
console.log(props);
const { event, source } = props;
const id = event.target.closest('.b-taskboard-column[data-column]').dataset.column;
const taskboard = source.up('taskboard');
taskboard.columns.remove(id)
},
// Columns holding the tasks
columns : [
// When specified as string, the string will be used as is as the columns id and capitalized as the columns text
'todo',
'doing',
'review',
// Object form, configured to show multiple tasks per row
{ id : 'done', text : 'Done', tasksPerRow : 2 }
],
// Field on task records that will be used to determine which column it should be displayed in
columnField : 'status',
// Add a text item to card footer
footerItems : {
id : { type : 'text', editor : null }
},
tbar : [
// Button to add a column
{
type : 'button',
text : 'Add column',
icon : 'b-fa-plus-circle',
onClick : 'up.onAddClick'
},
// Button to remove a column
{
type : 'button',
ref : 'removeButton',
text : 'Remove column',
icon : 'b-fa-trash',
onClick : 'up.onRemoveClick',
disabled : true
},
'->',
// Field for filtering columns
{ type : 'columnfilterfield' },
// Button for picking which columns to show
{ type : 'columnpickerbutton' }
],
// Project holding tasks, resources and assignments
project : {
loadUrl : 'data/data.json',
autoLoad : true
},
// Custom task renderer, that adds prio as CSS class to the task element
taskRenderer({ taskRecord, cardConfig }) {
if (taskRecord.prio) {
cardConfig.class[taskRecord.prio] = true;
}
},
// Handler for clicking the add button
onAddClick() {
const id = taskBoard.columns.count;
taskBoard.columns.add({ id, text : `Column #${id}` });
taskBoard.scrollToColumn(id);
taskBoard.widgetMap.removeButton.disabled = false;
},
// Handler for clicking the remove button
onRemoveClick() {
taskBoard.columns.last.remove();
taskBoard.widgetMap.removeButton.disabled = taskBoard.columns.count < 5;
}
});