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", "rename_status" ]; const PageContainer = styled.div` display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #0E0E10; padding-left: 60px; padding-right: 60px; padding-top: 30px; padding-bottom: 30px; 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: start; width: 100%; height: 100%; `; 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 [selectedProjectId, setSelectedProjectId] = useState(undefined); const [bootStrapping, setBootStrapping] = useState(true); const [loggedIn, setLoggedIn] = useState(false); const [functionLoader, setFunctionLoader] = useState(false); const [actionStatuses, setActionStatuses] = useState([]); const addActionStatus = (newActionStatus) => { let isNew = true; let newActionStatuses = actionStatuses.map((status) => { if (status.id === newActionStatusess.id) { isNew = false; return newActionStatus; } else { return status; } }) if (isNew) { newActionStatuses = [...newActionStatuses, newActionStatus]; } setActionStatuses(newActionStatuses); }; const removeActionStatus = (removeStatusId) => { setActionStatuses(actionStatuses.filter(({id}) => id !== removeStatusId)); }; const bootStrapApp = () => Near.hasValidCalimeroFak( contract ).then( ( result ) => { if ( result ) { setLoggedIn(true); setBootStrapping(false); } else { setLoggedIn(false); setBootStrapping(false); } } ); const Logo = () => ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.TaskChainLogo`} /> ); if ( !accountId ) { return <>Please login to continue.</>; } if ( bootStrapping ) { bootStrapApp(); return ( <PageContainer> <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.Loading`} props={{ logo: <Logo />, }} /> </PageContainer> ); } if ( !loggedIn ) { return ( <PageContainer> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.JoinApp`} props={{ contractName: contract, methodNames: methods, componentOwnerId, }} /> </PageContainer> ); } return ( <PageContainer> <HeaderContainer> <Logo /> {actionStatuses.length > 0 && <StatusContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.ActionStatus.Status` } props={{ actionStatuses, removeActionStatus }} /> </StatusContainer> } </HeaderContainer> <Divider>.</Divider> <BoardContainer> <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.SideMenu.SideMenu` } props={ { contract, componentOwnerId, selectedProjectId, setSelectedProjectId, functionLoader, setFunctionLoader, accountId, addActionStatus } } /> { selectedProjectId && ( <Widget src={ `${ componentOwnerId }/widget/Calimero.TaskChain.BoardContainer.Board` } props={ { componentOwnerId, contract, projectId: selectedProjectId, addActionStatus, addNewStatus } } /> ) } </BoardContainer> </PageContainer> );