const { projectId } = props; const contract = "dev-1692734722309-12667869668025"; const TopBar = styled.div` width: 100%; height: 50px; display: flex; flex-direction: row; `; const HorizontalFlexContainer = styled.div` height: 100vh; display: flex; flex-direction: row; justify-content: space-between; `; console.log("Board reloaded: project id", projectId); State.init({ currentProjectId: null, task: null, draggingTask: null, statusData: [], saveInProgress: false, }); const getStatuses = (projectId) => { Near.asyncView(contract, "get_statuses", { project_id: projectId }, "final", false).then( (data) => { State.update({ currentProjectId: projectId, bootStrapping: false, statusData: data, }); } ); } if( state.currentProjectId !== projectId) { getStatuses(projectId); } const createTask = (taskTitle, taskDescription) => { return Near.fakCall(contract, "create_task", { project_id: projectId, title: taskTitle, description: taskDescription }) .then(() => getStatuses(projectId)); }; console.log(JSON.stringify(state)); if (state.bootStrapping) { console.log("bootstrapping"); bootStrapApp(); return <Widget src="calimero.testnet/widget/Calimero.TaskChain.Loading" />; } const submitComment = (task_id, message) => { Near.fakCall(contract, "comment_on_task", { project_id, task_id, message }); console.log("submit"); }; const onTaskDragStart = (id, originalStatus, originalIndex) => { console.log("drag start", id, originalStatus, originalIndex); State.update({ draggingTask: { id, originalStatus, originalIndex } }); }; const onTaskDragStop = (newStatus, index) => { console.log("drag stop", state.draggingTask); // Create a deep copy of the statuses let statusesCopy = JSON.parse(JSON.stringify(state.statusData)); // Access and remove the task from the original status using the original index const originalStatusObj = statusesCopy.find( (status) => status.name === state.draggingTask.originalStatus ); const newStatusIndex = statusesCopy.findIndex((status) => status.name === newStatus); if (!originalStatusObj) { console.log( "Original status not found: ", state.draggingTask.originalStatus ); return; } const removedTask = originalStatusObj.tasks.splice( state.draggingTask.originalIndex, 1 )[0]; // If the task was not found, you can choose how to handle it. In this case, we just log an error and return. if (!removedTask) { console.log("Task not found: ", state.draggingTask); return; } // Add the task to the new status at the given index const newStatusObj = statusesCopy.find((status) => status.name === newStatus); if (!newStatusObj) { console.log("New status not found: ", newStatus); return; } const newIndex = index ?? newStatusObj.tasks.length; newStatusObj.tasks.splice(newIndex, 0, removedTask); // Update the state with the modified statuses console.log("contract updated"); State.update({ saveInProgress: true }); Near.fakCall(contract, "move_task", { project_id: projectId ,task_id: state.draggingTask.id, to_status_index: newStatusIndex, position: newIndex }) .then(() => { State.update({ saveInProgress: false }); console.log("contract updated"); }); State.update({ draggingTask: null, statusData: statusesCopy }); }; const onTaskDragOver = () => { //console.log("drag over", state.draggingTask); }; const handleClick = () => { State.update({ task }); }; return ( <> <HorizontalFlexContainer> {state.statusData.map((el) => { return ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.Board.TaskColumn" props={{ title: el.name, tasks: el.tasks, submitComment: submitComment, onClick: handleClick, onTaskDragStop: onTaskDragStop, onTaskDragStart: onTaskDragStart, onTaskDragOver: onTaskDragOver, createTask: createTask, }} /> ) })} </HorizontalFlexContainer> </> );