Our flexible Kanban board for managing tasks with drag drop


Post by Gaetek »

Hello
I am using the taskboard v5.0.1 react wrapper and I have something along the lines of:

const Board = forwardRef(({ info, onItemClicked, validateDrop }, ref) => {
    let grid = ref || createRef();
    const [swimlaneField, setSwimlaneField] = useState("");
    const [tasks, setTasks] = useState([]);
    const [columns, setColumns] = useState([]);
    const [swimlanes, setSwimlanes] = useState([]);
    const [config, setConfig] = useState({});

useEffect(() => {
    let configs = getTaskboardConfiguration(
        {
            taskClick: ({ taskRecord }) => {
                // code that responds to the click action
            },
            async beforeTaskDrop({ taskRecords, targetColumn, targetSwimlane, ...rest }) {
                // code that handles DnD
            },
        },
        controls
    );
    setConfig(configs);
}, []);

useEffect(() => {
    if (!Object.keys(info).length) {
        return;
    }
    let data = collectData({
        items: info.items,
        statuses: info.statuses,
        swimlaneField: swimlaneField && swimlaneField.value,
    });
    setColumns(data.columns);
    setSwimlanes(data.swimlanes);
    setTasks(data.tasks);
}, [info]);

useEffect(() => {
    if (!Object.keys(info).length) {
        return;
    }
    let data = collectData({
        items: info.items,
        statuses: info.statuses,
        swimlaneField: swimlaneField && swimlaneField.value,
    });

    setColumns(data.columns);
    setSwimlanes(data.swimlanes);
    setTasks(data.tasks);
}, [swimlaneField]);


return (
    <>
        <BryntumTaskBoard
            {...config}
            ref={grid}
            onDataChange={onDataChange}
            theme="classic-dark"
            width="100%"
            sortable={true}
            filterable={true}
            columnDragFeature={false}
            columnHeaderMenuFeature={false}
            columnToolbarsFeature={false}
            simpleTaskEditFeature={false}
            swimlaneDragFeature={false}
            taskDragFeature={true}
            taskDragSelectFeature={true}
            taskEditFeature={false}
            taskMenuFeature={false}
            taskTooltipFeature={false}
            swimlanes={swimlanes}
            columns={columns}
            tasks={tasks}
        />
    </>
);
});

I've removed the actual methods I use to retrieve the data because they are outside of the scope of my question.

It's important to note that I've created this button here that allows me to change the swimlane field

export default (change) => {
    change = (typeof change == 'function') ? change : (() => { });
    return {
        type: 'combo',
        items: [{ value: 'A', text: "A"}, { value: "B", text:"B" }, { value: "C", text: "C" }],
        value: "A",
        label: "Dummy Label",
        minWidth: "auto",
        inputWidth: "auto",
        listeners: {
            change
        }
    }
}

when the user select a a value among "A", "B" and "C" the onchange function is triggered and I use that to update the swimlaneField by using the react state "setSwimlaneField" ( this interaction is not shown in the code above but it goes in the "controls" variable I have when I call "getTaskboardConfiguration" ).

Now, the first time I load the taskboard I cannot see any data whatsoever even though I use the react setter to update the Taskboard Component. In order to see something I have to use the ref on the component and do something like this:

   useEffect(() => {
        if (grid && grid.current && grid.current.instance) {
            grid.current.instance.project.taskStore.removeAll();
            grid.current.instance.project.taskStore.add(tasks);
        }
    }, [tasks]);

Also, the first time data is loaded in the Taskboard I can drag and drop the tasks without any issues at all, but as soon as I change the swimlaneField with that custom combobox I made, the Taskboard updates and it shows me the data organized in the new swimlanes BUT I am no long able to perform any drag and drop operation on them.

chrome console says:

TypeError: Cannot read properties of undefined (reading 'some')
    at hasChanged (taskboard.module.js:96421:1)

Can you please help my with this one?

Thanks and keep up the good work


Post by alex.l »

https://bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskBoardSwimlanes#property-swimlanes is a store, it cannot be replaced at runtime with dataset, you need to manage store's data https://bryntum.com/docs/taskboard/api/Core/data/Store#property-data
so please use same approach as for tasks.
https://bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskBoardSwimlanes#config-swimlaneField is a config only, so it cannot be changed at runtime.
I see some inconsistency regarding this in our docs and guides. I'll update you after some investigation.

All the best,
Alex


Post Reply