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