const contract = props.contract || "taskchain.ws-protocol-63"; const componentOwnerId = props.componentOwnerId || "calimero.testnet"; const accountId = context.accountId; 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", "add_application_member", "remove_application_member", "get_application_members", "get_members" ]; State.init( { selectedProjectId: undefined, bootStrapping: true, loggedIn: false, functionLoader: false, showAddTaskDialog: false, taskTitle: "", taskDescription: "", statusData: undefined, showEditTaskDialog: false, editTaskId: undefined, editTaskTitle: "", editTaskDescription: "", editTaskTitleMissing: false, editTaskDescriptionMissing: false, editTaskColumn: "", editTaskTitleStatus: [], editTaskDescriptionStatus: [], editTaskDialogTaskId: undefined, showDeleteTaskDialog: false, deleteTaskId: undefined, deleteTaskStatus: [], addTaskTitleMissing: false, addTaskDescriptionMissing: false, } ); const PageContainer = styled.div` display: flex; flex-direction: column; width: 100%; height: 100vh; background-color: #0E0E10; padding-left: 60px; padding-right: 60px; padding-top: 26px; gap: 24px; `; const TaskChainLogo = styled.a` display: flex; flex-direction: space-between; align-items: center width: 100%; height: 100vh; background-color: #0E0E10; color: #FFFFFF; font-family: Inter; font-weight: 700; font-size: 20.92px; line-height: 31.39px; :hover { text-decoration: none; } `; const HeaderContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; position: relative; `; const BoardContainer = styled.div` padding-top: 8px; display: flex; flex-direction: row; justify-content: center; `; const StatusContainer = styled.div` position: absolute; top: 1rem; right: 1rem; display: flex; flex-direction: column; background-color: #1E1F28; border-radius: 0.5rem; padding: 1rem; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; `; const Text = styled.text` color: white; `; const [ addColumnDialogOpen, setAddColumnDialogOpen ] = useState( false ); const [ addColumnNameMissing, setAddColumnNameMissing ] = useState( false ); const [ columnName, setColumnName ] = useState( "" ); const [dragColumnStatus, setDragColumnStatus] = useState([]); const onChangeColumnName = ( { target } ) => { setColumnName( target.value ); }; const onEditTaskTitle = ( { target } ) => { setEditTaskTitleMissing( false ); State.update( { editTaskTitle: target.value } ); }; const onEditTaskDescription = ( { target } ) => { setEditTaskDescriptionMissing( false ); State.update( { editTaskDescription: target.value } ); }; const setEditTask = ( id, title, description, column ) => { State.update( { editTaskId: id, editTaskTitle: title, editTaskDescription: description, editTaskColumn: column, } ); }; const setAddTaskTitleMissing = ( missing ) => { State.update( { addTaskTitleMissing: missing } ); }; const setAddTaskDescriptionMissing = ( missing ) => { State.update( { addTaskDescriptionMissing: missing } ); }; const onChangeTaskTitle = ( { target } ) => { setAddTaskTitleMissing( false ); State.update( { taskTitle: target.value } ); }; const onChangeTaskDescription = ( { target } ) => { setAddTaskDescriptionMissing( false ); State.update( { taskDescription: target.value } ); }; const onBoardSelected = ( projectId ) => { State.update( { selectedProjectId: projectId } ); }; const setEditTaskTitleMissing = ( missing ) => { State.update( { editTaskTitleMissing: missing } ); }; const setEditTaskDescriptionMissing = ( missing ) => { State.update( { editTaskDescriptionMissing: missing } ); }; const onChangeDeleteTaskStatus = ( status ) => { State.update( { deleteTaskStatus: status } ); }; const onChangeShowAddTaskDialog = ( open ) => { setAddTaskTitleMissing( false ); setAddTaskDescriptionMissing( false ); State.update( { showAddTaskDialog: open, taskTitle: "", taskDescription: "", } ); }; const onChangeShowEditTaskDialog = ( open, id ) => { setEditTaskTitleMissing( false ); setEditTaskDescriptionMissing( false ); State.update( { showEditTaskDialog: open, editTaskDialogTaskId: id } ); }; const onChangeShowDeleteTaskDialog = ( open, id ) => { State.update( { showDeleteTaskDialog: open, deleteTaskId: 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 ) => { if ( result ) { return Near.fakCalimeroCall( contract, "add_application_member", { new_member: accountId, } ).then( () => { State.update( { bootStrapping: false, loggedIn: true } ); } ); } else { State.update( { bootStrapping: false, loggedIn: false } ); } } ); const getStatuses = () => { Near.asyncCalimeroView( contract, "get_statuses", { project_id: state.selectedProjectId } ).then( ( data ) => { updateStatusData( data ); } ); }; const Logo = () => ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.TaskChainLogo`} /> ); if ( !accountId ) { return <>Please login to continue.</>; } if ( state.bootStrapping ) { bootStrapApp(); return ( <PageContainer> <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.Loading`} props={{ logo: <Logo />, }} /> </PageContainer> ); } if ( !state.loggedIn ) { return ( <PageContainer> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.JoinApp`} props={{ contractName: contract, methodNames: methods, componentOwnerId, }} /> </PageContainer> ); } return ( <PageContainer> <HeaderContainer> <Logo/> {( state.deleteTaskStatus.length > 0 || state.deleteBoardStatus.length > 0 || dragColumnStatus.length > 0 ) && <StatusContainer> { state.deleteTaskStatus.length > 0 && state.deleteTaskStatus.map( d => ( <Text key={ d.id }> { d.status } </Text> ) ) } { state.deleteBoardStatus.length > 0 && state.deleteBoardStatus.map( b => ( <Text key={ b.id }> { b.status } </Text> ) ) } <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.ActionStatus.Status` } props={{ statuses: dragColumnStatus, setStatuses: setDragColumnStatus }} /> </StatusContainer> } </HeaderContainer> <Divider>.</Divider> <BoardContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.SideMenu.SideMenu` } props={ { contract, componentOwnerId, selectedProjectId: state.selectedProjectId, onBoardSelected, functionLoader: state.functionLoader, accountId } } /> { state.selectedProjectId && ( <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.BoardContainer.Board` } props={ { componentOwnerId, contract, projectId: state.selectedProjectId, showAddTaskDialog: state.showAddTaskDialog, taskTitle: state.taskTitle, taskDescription: state.taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, functionLoader, statusData, updateStatusData, onChangeFunctionLoader, clearTaskTitle, clearTaskDescription, onChangeShowEditTaskDialog, onEditTaskTitle, onEditTaskDescription, setEditTask, editTaskTitle: state.editTaskTitle, editTaskDescription: state.editTaskDescription, editTaskId: state.editTaskId, editTaskColumn: state.editTaskColumn, editTaskDialogTaskId: state.editTaskDialogTaskId, onChangeShowDeleteTaskDialog, showEditTaskDialog: state.showEditTaskDialog, showDeleteTaskDialog: state.showDeleteTaskDialog, deleteTaskId: state.deleteTaskId, deleteTaskStatus: state.deleteTaskStatus, onChangeDeleteTaskStatus, addColumnDialogOpen, setAddColumnDialogOpen, addColumnNameMissing, addColumn, columnName, onChangeColumnName, setColumnName, dragColumnStatus, setDragColumnStatus } } /> ) } </BoardContainer> </PageContainer> );