const contract = props.contract || "taskchain.ws-protocol-63"; const methods = [ "create_new_project", "edit_name", "change_owner", "delete_project", "get_owners_projects", "get_members_projects", "get_project", "get_statuses", "add_status", "reorder_statuses", "remove_status", "add_member", "remove_member", "create_task", "get_task", "change_task_name", "edit_task_description", "assign_task", "remove_assignee", "move_task", "delete_task_by_id", "comment_on_task", "delete_comment_by_id", "edit_comment", "create_label", "get_label", "get_labels", "delete_label", "change_label_text", "change_label_color", "add_label_to_task", "remove_label_from_task", "add_checklist_element", "edit_checklist_element", "mark_checkmark", "delete_checkmark", "upload_file", "remove_file", "set_priority", "reset_priority" ]; const accountId = context.accountId; State.init( { boards: [], selectedProjectId: undefined, bootStrapping: true, loggedIn: false, showAddBoardDialog: false, functionLoader: false, boardName: "", showEditBoardDialog: false, editedBoardId: undefined, editedBoardName: "", showAddTaskDialog: false, taskTitle: "", taskDescription: "", statusData: undefined, createBoardStatus: [], showEditTaskDialog: false, editTaskId: undefined, editTaskTitle: "", editTaskDescription: "", editTaskColumn: "", editTaskTitleStatus: [], editTaskDescriptionStatus: [], editTaskDialogTaskId: undefined, showDeleteTaskDialog: false, deleteTaskId: undefined, deleteTaskStatus: [], editBoardNameStatus: [], deleteBoardId: undefined, deleteBoardStatus: [] } ); const componentOwnerId = props.componentOwnerId || "calimero.testnet"; const createBoard = () => { try { State.update({ functionLoader: true }); State.update( { createBoardStatus: [...state.createBoardStatus, {name: state.boardName, status: "Saving..."}] } ); const newBoard = [ null, state.boardName, ]; let newBoardsArray = []; const storageBoards = Storage.privateGet( "tempBoards" + contract ); if (storageBoards && JSON.parse(storageBoards).length > 0) { newBoardsArray = JSON.parse(storageBoards); newBoardsArray.push(newBoard); } else { newBoardsArray.push(newBoard); } const jsonStringArray = JSON.stringify(newBoardsArray); Storage.privateSet( "tempBoards" + contract, jsonStringArray ); setBoards(); Near.fakCalimeroCall( contract, "create_new_project", { name: state.boardName, owner: accountId, members: [ accountId ], statuses: [ "TO DO", "IN PROGRESS", "DONE" ] } ).then( () => { let foundStatus = state.createBoardStatus.find(b => b.name === state.boardName); foundStatus.status = "Saved"; const filteredStatuses = state.createBoardStatus.filter(b => b.name !== state.boardName); State.update( { createBoardStatus: [...filteredStatuses, foundStatus] } ); setTimeout(() => cleanBoardCreateStatus(state.boardName), 3000); setTimeout(getBoards, 3000); } ); } catch (e) { let foundStatus = state.createBoardStatus.find(b => b.name === state.boardName); foundStatus.status = "Error saving"; const filteredStatuses = state.createBoardStatus.filter(b => b.name !== state.boardName); State.update( { createBoardStatus: [...filteredStatuses, foundStatus] } ); Storage.privateSet( "tempBoards" + contract, "" ); } State.update({ functionLoader: false }); onChangeShowAddBoardDialog(false); }; const setBoards = () => { try { let boards = []; Near.asyncCalimeroView( contract, "get_members_projects", { member_id: context.accountId } ).then((b) => { boards = b; const storageBoards = Storage.privateGet( "tempBoards" + contract ); if (storageBoards && JSON.parse(storageBoards).length > 0) { const storageArray = JSON.parse(storageBoards); let newBoards = boards; for (let newBoard of storageArray) { if (boards.find(b => b[0] === newBoard[0])) { let editBoard = boards.find(b => b[0] === newBoard[0]); editBoard[1] = newBoard[1]; newBoards = boards.map(b => { if (b[0] === newBoard[0]) { return editBoard; } else { return b; } }); } else if (!boards.some(b => b[1] === newBoard[1])) { newBoards = [...newBoards, newBoard]; } } State.update({boards: newBoards}); } else { setBoards(); } }) } catch (e) { console.log(e); Storage.privateSet("tempBoards" + contract, ""); } } const cleanBoardCreateStatus = (name) => { let foundStatus = state.createBoardStatus.find(b => b.name === name); foundStatus.status = ""; const filteredStatuses = state.createBoardStatus.filter(b => b.name !== name); State.update( { createBoardStatus: [...filteredStatuses, foundStatus] } ); } const cleanBoardEditStatus = (id) => { const filteredStatuses = state.editBoardNameStatus.filter(b => b.id !== id); State.update( { editBoardNameStatus: [...filteredStatuses] } ); } const editBoardName = () => { try { State.update( { editBoardNameStatus: [...state.editBoardNameStatus, {id: state.editedBoardId, status: "Saving..."}] } ); const newBoard = [ state.editedBoardId, state.editedBoardName, ]; let newBoardsArray = []; const storageBoards = Storage.privateGet( "tempBoards" + contract ); if (storageBoards && JSON.parse(storageBoards).length > 0) { newBoardsArray = JSON.parse(storageBoards); newBoardsArray.push(newBoard); } else { newBoardsArray.push(newBoard); } const jsonStringArray = JSON.stringify(newBoardsArray); Storage.privateSet( "tempBoards" + contract, jsonStringArray ); setBoards(); Near.fakCalimeroCall( contract, "edit_name", { project_id: state.editedBoardId, new_name: state.editedBoardName } ).then( () => { let foundStatus = state.editBoardNameStatus.find(b => b.id === state.editedBoardId); foundStatus.status = "Saved"; const filteredStatuses = state.editBoardNameStatus.filter(b => b.id !== state.editedBoardId); State.update( { editBoardNameStatus: [...filteredStatuses, foundStatus] } ); setTimeout(() => cleanBoardEditStatus(state.editedBoardId), 3000); } ); } catch (e) { let foundStatus = state.editBoardNameStatus.find(b => b.id === state.editedBoardId); foundStatus.status = "Error saving"; const filteredStatuses = state.editBoardNameStatus.filter(b => b.id !== state.editedBoardId); State.update( { editBoardNameStatus: [...filteredStatuses, foundStatus] } ); Storage.privateSet( "tempBoards" + contract, "" ); setTimeout(getBoards, 3000); } }; const deleteBoard = () => { const oldBoards = state.boards; const boardId = state.deleteBoardId; const newDeleteBoardStatus = [...state.deleteBoardStatus, {boardId: boardId, status: `Deleting board: ${boardId}`}] State.update({ deleteBoardStatus: newDeleteBoardStatus }) try { const newBoards = state.boards.filter(board => board[0] !== boardId) State.update({ boards: newBoards }); Near.fakCalimeroCall( contract, "delete_project", { project_id: boardId, } ).then(() => { let foundStatus = newDeleteBoardStatus.find(b => b.boardId === boardId); foundStatus.status = `Deleted board: ${boardId}`; const filteredStatuses = newDeleteBoardStatus.filter(b => b.boardId !== boardId); State.update({ deleteBoardStatus: [...filteredStatuses, foundStatus] }) setTimeout(() => cleanDeleteBoardStatus(boardId), 3000); }) } catch (e) { let foundStatus = newDeleteBoardStatus.find(b => b.boardId === boardId); foundStatus.status = `Error deleting board: ${board}`; const filteredStatuses = newDeleteBoardStatus.filter(b => b.boardId !== boardId); State.update({ deleteBoardStatus: [...filteredStatuses, foundStatus] }) State.update( { boards: oldBoards } ); } onChangeShowEditBoardDialog(false, undefined, undefined) onChangeShowDeleteBoardDialog(false, undefined) } const cleanDeleteBoardStatus = (id) => { const filteredStatuses = state.deleteTaskStatus.filter(b => b.boardId !== id); State.update({ deleteBoardStatus: filteredStatuses }) } const onChangeBoardName = ({ target }) => { State.update({ boardName: target.value }); }; const onEditTaskTitle= ({ target }) => { State.update({ editTaskTitle: target.value }); }; const onEditTaskDescription= ({ target }) => { State.update({ editTaskDescription: target.value }); }; const setEditTask= (id, title, description, column) => { State.update({ editTaskId: id, editTaskTitle: title, editTaskDescription: description, editTaskColumn: column, }); }; const onEditBoardName = ({ target }) => { State.update({ editedBoardName: target.value }); } const onChangeTaskTitle = ({ target }) => { State.update({ taskTitle: target.value }); }; const onChangeTaskDescription = ({ target }) => { State.update({ taskDescription: target.value }); }; const onBoardSelected = (projectId) => { State.update( { selectedProjectId: projectId } ); }; const onChangeShowAddBoardDialog = ( open ) => { State.update( { showAddBoardDialog: open } ); }; const onChangeDeleteTaskStatus = ( status ) => { State.update( { deleteTaskStatus: status } ); }; const onChangeShowEditBoardDialog = ( open, id, name ) => { State.update( { showEditBoardDialog: open, editedBoardId: id, editedBoardName: name } ); }; const onChangeEditBoardName = ( {target} ) => { State.update( { editedBoardName: target.value } ); } const onChangeShowAddTaskDialog = ( open ) => { State.update( { showAddTaskDialog: open } ); }; const onChangeShowEditTaskDialog = ( open, id ) => { State.update( { showEditTaskDialog: open, editTaskDialogTaskId: id } ); }; const onChangeShowDeleteTaskDialog = ( open, id ) => { State.update( { showDeleteTaskDialog: open, deleteTaskId: id, } ); }; const onChangeShowDeleteBoardDialog = ( open, id ) => { State.update( { showDeleteBoardDialog: open, deleteBoardId: id, } ); }; const onChangeFunctionLoader = ( loading ) => { State.update( { functionLoader: loading } ); }; const updateStatusData = (data) => { State.update({ statusData: data}); }; const clearTaskTitle = () => { State.update({ taskTitle: ""}); }; const clearTaskDescription = () => { State.update({ taskDescription: ""}); }; const bootStrapApp = () => { Near.hasValidCalimeroFak( contract ).then( ( result ) => { console.log( "hasValidCalimeroFak", result ); if ( result ) { State.update( { bootStrapping: false, loggedIn: true } ); getBoards(); } else { State.update( { bootStrapping: false, loggedIn: false } ); } } ); }; const getBoards = () => { Near.asyncCalimeroView( contract, "get_members_projects", { member_id: context.accountId } ).then( ( boards ) => { State.update( { boards, selectedProjectId: boards.length > 0 ? boards[ 0 ][ 0 ] : undefined, bootStrapping: false, } ); } ); }; if ( state.bootStrapping ) { bootStrapApp(); return <Widget src="calimero.testnet/widget/Calimero.TaskChain.Loading" />; } const getStatuses = () => { Near.asyncCalimeroView( contract, "get_statuses", { project_id: state.selectedProjectId } ).then( ( data ) => { updateStatusData(data) } ); }; if ( !state.loggedIn ) { return ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.JoinApp" props={ { appName: "TaskChain", contractName: contract, methodNames: methods, } } /> ); } return ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.TaskChainContainer.TaskChainContainer" props={ { contract, boards: state.boards, selectedProjectId: state.selectedProjectId, createBoard, onBoardSelected, showAddBoardDialog: state.showAddBoardDialog, onChangeShowAddBoardDialog, functionLoader: state.functionLoader, onChangeBoardName, boardName: state.boardName, editBoardName, showEditBoardDialog: state.showEditBoardDialog, onChangeShowEditBoardDialog, onEditBoardName, editedBoardId: state.editedBoardId, editedBoardName: state.editedBoardName, onChangeEditBoardName, createTask, showAddTaskDialog: state.showAddTaskDialog, taskTitle: state.taskTitle, taskDescription: state.taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, statusData, updateStatusData, onChangeFunctionLoader, clearTaskTitle, clearTaskDescription, createBoardStatus: state.createBoardStatus, showEditTaskDialog: state.showEditTaskDialog, onChangeShowEditTaskDialog, onEditTaskTitle, onEditTaskDescription, setEditTask, editTaskTitle: state.editTaskTitle, editTaskDescription: state.editTaskDescription, editTaskId: state.editTaskId, editTaskColumn: state.editTaskColumn, editTaskDialogTaskId: state.editTaskDialogTaskId, onChangeShowDeleteTaskDialog, showDeleteTaskDialog: state.showDeleteTaskDialog, deleteTaskId: state.deleteTaskId, deleteTaskStatus: state.deleteTaskStatus, onChangeDeleteTaskStatus, editBoardNameStatus: state.editBoardNameStatus, deleteBoard, onChangeShowDeleteBoardDialog, showDeleteBoardDialog: state.showDeleteBoardDialog, deleteBoardStatus: state.deleteBoardStatus } } /> );