const { contract, boards, selectedProjectId, createBoard, onBoardSelected, showAddBoardDialog, onChangeShowAddBoardDialog, functionLoader, onChangeBoardName, boardName, editBoardName, showEditBoardDialog, onChangeShowEditBoardDialog, onEditBoardName, editedBoardId, editedBoardName, onChangeEditBoardName, createBoardStatus, editBoardNameStatus, onChangeShowDeleteBoardDialog, showDeleteBoardDialog, deleteBoard, componentOwnerId, addBoardNameMissing, editBoardNameMissing, enableEditBoardName, onChangeEnableEditBoardName } = props; const SideMenuContainer = styled.div` display: flex; flex-direction: column; flex-shrink: 0; width: 230px; padding-left: 0; background-color: #0E0E10; color: white; padding: 3px; gap: 16px; `; return ( <> {showDeleteBoardDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ConfirmationPopup`} props={ { onClick: () => deleteBoard(), onClose: () => onChangeShowDeleteBoardDialog(false, undefined, title), title: "Are you sure you want to delete the board?" } } /> } {showAddBoardDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.CreateBoardDialog`} props={{ componentOwnerId, createBoard, onChangeShowAddBoardDialog, open: showAddBoardDialog, functionLoader, onChangeBoardName, boardName, addBoardNameMissing }} />} {showEditBoardDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.EditBoardDialog`} props={{ createBoard, onClose: () => onChangeShowEditBoardDialog(false, undefined, undefined), open: showEditBoardDialog, functionLoader, onChangeEditBoardName, boardName, editedBoardId, editedBoardName, editBoardName, editBoardNameStatus, onChangeShowDeleteBoardDialog, componentOwnerId, editBoardNameMissing, enableEditBoardName, onChangeEnableEditBoardName, componentOwnerId }} />} <SideMenuContainer> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.AddBoard`} props={{ onClick: () => onChangeShowAddBoardDialog(true) }} /> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.BoardList`} props={{ componentOwnerId, selected: selectedProjectId, onClick: onBoardSelected, boards: boards, onEditBoardClick, editBoard, onChangeShowEditBoardDialog, createBoardStatus }} /> </SideMenuContainer> </> );