const editBoardName = props.editBoardName; const open = props.open; const onClose = props.onClose; const functionLoader = props.functionLoader; const onEditBoardName = props.onEditBoardName; const editedBoardId = props.editedBoardId; const editedBoardName = props.editedBoardName; const onChangeEditBoardName = props.onChangeEditBoardName; const editBoardNameStatus = props.editBoardNameStatus; const onChangeShowDeleteBoardDialog = props.onChangeShowDeleteBoardDialog; const componentOwnerId = props.componentOwnerId; const editBoardNameMissing = props.editBoardNameMissing; const selectedProjectId = props.selectedProjectId; const users = props.users; const boardMembers = props.boardMembers; const addMember = props.addMember; const addMemberStatus = props.addMemberStatus; const setMemberInputOpen = props.setMemberInputOpen; const addMemberInputOpen = props.addMemberInputOpen; const selectedUser = props.selectedUser; const setSelectedUser = props.setSelectedUser; const addActionStatus = props.addActionStatus; const removeBoardMember = props.removeBoardMember; const contract = props.contract; const OverlayContainer = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; padding-top: 100px; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 24px; `; const ActionsContainer = styled.div` display: flex; flex-direction: row; gap: 2px; align-items: center; items-center: center; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const Name = styled.input` color: #fff; font-family: Helvetica Neue; font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: 0em; text-align: left; width: 70%; height: 40px; padding: 8px 60px 8px 0px; border-radius: 4px; background-color: transparent; :focus { outline-color: #D0FC42; outline-style: solid; outline-width: 1px; } ::placeholder { color: #D0FC42; } border: none; `; const CloseButton = styled.div` color: #6B7280; :hover { color: #D0FC42; } cursor: pointer; `; const P = styled.p` display: inline-block; width: 100px; margin: 0; `; const InputContainer = styled.div` display: flex; flex-direction: row; align-items: center; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; margin-top: 22px; margin-bottom: 16px; `; const SuccessIcon = styled.div` color: #00FF66; `; const ErrorIcon = styled.div` color: #DC3545; `; const FieldContainer = styled.div` position: relative; width: 100%; `; const StatusIcon = styled.div` padding-right: 60px; `; const MissingTitle = styled.div` position: absolute; left: 16px; top: 40px; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const EditBoardNameButton = styled.div` color: #6B7280; :hover { color: #D0FC42; } display: flex; flex-direction: row; cursor: pointer; justify-content: center; align-items: center; gap: 5px; `; const CloseAddMeberButton = styled.div` color: #6B7280; :hover { color: #D0FC42; } cursor: pointer; position: absolute; right: 10px; top: 10px; `; const FunctionButton = styled.button` background-color: red; :hover { opacity: 0.8; } color: #fff; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const DeleteColumnContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const CloseDeleteColumnButton = styled.div` background-color: transparent; display: flex; justify-content: center; color: #6b7280; :hover { color: #fff; } cursor: pointer; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const TextContainer = styled.div` display: flex; justify-content: center; flex-direction: column; width: 100%; text-align: center; margin-bottom: 1rem; margin-top: 1rem; `; const boardNameStatus = editBoardNameStatus.find(b => b.id = editedBoardId); const [selectedOption, setSelectedOption] = useState(1); const [isRemoveMemberConfirmationVisible, setIsRemoveMemberConfirmationVisible] = useState(false); const [removingMember, setRemovingMember] = useState(undefined); const onSelectRemovingMember = (member) => { setIsRemoveMemberConfirmationVisible(true); setRemovingMember(member); } const removeMember = useCallback(() => { const actionStatusPrefix = "Remove member"; let newActionStatus = { id: actionStatusPrefix + editedBoardId + removingMember.id, status: `Removing member ${removingMember.id} from board ${editedBoardName}`, seen: false }; try { addActionStatus(newActionStatus) removeBoardMember(removingMember) Near.fakCalimeroCall(contract, "remove_member", { project_id: selectedProjectId, member: removingMember.id, }).then(() => { newActionStatus.status = `Removed member ${removingMember.id} from board ${boardName}`; addActionStatus(newActionStatus); }); } catch (e) { console.log("removeMember", e); newActionStatus.status = `Error removing member ${removingMember.id} from board ${boardName}`; addActionStatus(newActionStatus); } setIsRemoveMemberConfirmationVisible(false); }, [removingMember]); const BoardDetailsContent = () => ( <OverlayContainer> <PopupContainer> <Header> <FieldContainer> <Name onChange={onChangeEditBoardName} value={editedBoardName} onBlur={editBoardName} placeholder="Add Title" /> {editBoardNameMissing && <MissingTitle> Missing name </MissingTitle> } </FieldContainer> <ActionsContainer> {(boardNameStatus && boardNameStatus.id === editedBoardId) && ( <StatusIcon> {boardNameStatus.status === "Saving..." && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> )} {boardNameStatus.status === "Saved" && ( <SuccessIcon> <i className="bi bi-check"></i> </SuccessIcon> )} {boardNameStatus.status === "Error" && ( <ErrorIcon> <i className="bi bi-x-circle"></i> </ErrorIcon> )} </StatusIcon> ) } <CloseButton onClick={onClose}> <i className="bi bi-x-circle"></i> </CloseButton> </ActionsContainer> </Header> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Selector`} props={{ selectorOptions: [ { id: 1, title: "About", icon: "bi bi-info-circle-fill"}, { id: 2, title: `Members ${boardMembers.length}`, icon: "bi bi-people-fill"} ], onClick: setSelectedOption, selected: selectedOption, }} /> <Divider /> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.EditBoardOptions`} props={{ onChangeShowDeleteBoardDialog, editedBoardId, addMemberInputOpen, componentOwnerId, setSelectedUser, setMemberInputOpen, selectedUser, boardMembers, selectedOption, users: users.filter(user => !boardMembers.some(member => member.id === user.id)), addMember, addMemberStatus, onSelectRemovingMember }} /> </PopupContainer> </OverlayContainer> ) const RemoveMemberContent = () => ( <OverlayContainer> <PopupContainer> <DeleteColumnContainer> <TextContainer> <Text>Are you sure you want to remove member {removingMember.id}?</Text> </TextContainer> <FunctionButton onClick={removeMember}>Remove</FunctionButton> <CloseDeleteColumnButton onClick={() => setIsRemoveMemberConfirmationVisible(false)}> Close </CloseDeleteColumnButton> </DeleteColumnContainer> </PopupContainer> </OverlayContainer> ); if (isRemoveMemberConfirmationVisible) { return <RemoveMemberContent /> } else { return <BoardDetailsContent /> }