Merge 869d9c1d11 into fdac299fc7

client/src/components/lists/List/ActionsStep.jsx

@@ -19,6 +19,7 @@ import SortStep from './SortStep';
 import SelectListTypeStep from '../SelectListTypeStep';
 import ConfirmationStep from '../../common/ConfirmationStep';
 import ArchiveCardsStep from '../../cards/ArchiveCardsStep';
+import BoardSelectStep from './BoardSelectStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -28,6 +29,7 @@ const StepTypes = {
   SORT: 'SORT',
   ARCHIVE_CARDS: 'ARCHIVE_CARDS',
   DELETE: 'DELETE',
+  MOVE_TO_BOARD: 'MOVE_TO_BOARD',
 };
 
 const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
@@ -84,6 +86,13 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
     openStep(StepTypes.DELETE);
   }, [openStep]);
 
+  const handleMoveToBoard = useCallback(
+    (targetBoardId) => {
+      dispatch(entryActions.moveListToBoardRequest(listId, targetBoardId));
+    },
+    [listId, dispatch],
+  );
+
   if (step) {
     switch (step.type) {
       case StepTypes.EDIT_TYPE:
@@ -114,6 +123,14 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
             onBack={handleBack}
           />
         );
+      case StepTypes.MOVE_TO_BOARD:
+        return (
+          <BoardSelectStep
+            currentBoardId={list.boardId}
+            onSelect={handleMoveToBoard}
+            onBack={handleBack}
+          />
+        );
       default:
     }
   }
@@ -171,6 +188,9 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
+          <Menu.Item className={styles.menuItem} onClick={() => openStep(StepTypes.MOVE_TO_BOARD)}>
+            {t('action.moveListToBoard', { context: 'title' })}
+          </Menu.Item>
         </Menu>
       </Popup.Content>
     </>

client/src/components/lists/List/ActionsStep.module.scss

@@ -19,3 +19,34 @@
     margin: 0 0.5em 0 0;
   }
 }
+
+.boardSelectStep {
+  padding: 0;
+}
+
+.boardButton {
+  display: block;
+  width: 100%;
+  padding: 9px 0;
+  border: none;
+  border-radius: 0.28571429rem !important;
+  font-size: 15px;
+  color: #234;
+  text-align: center;
+  cursor: pointer;
+  background: none;
+  transition: background 0.2s;
+}
+
+.boardButton:hover,
+.boardButton:focus {
+  background: #f4f6f8;
+  color: #16324a;
+}
+
+.noBoards {
+  color: #888;
+  text-align: center;
+  padding: 0;
+  font-size: 15px;
+}

client/src/components/lists/List/BoardSelectStep.jsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { createSelector } from 'reselect';
+import PopupHeader from '../../../lib/custom-ui/components/Popup/PopupHeader';
+import styles from './ActionsStep.module.scss';
+import selectors from '../../../selectors';
+
+const makeSelectBoardsByIds = () =>
+  createSelector(
+    (state, boardIds) => boardIds,
+    (state) => state,
+    (boardIds, state) => boardIds.map((id) => selectors.selectBoardById(state, id)),
+  );
+
+function BoardSelectStep({ currentBoardId, onSelect, onBack, onClose }) {
+  const [t] = useTranslation();
+  const projectId = useSelector((state) => selectors.selectPath(state).projectId);
+  const boardIds = useSelector((state) => selectors.selectBoardIdsByProjectId(state, projectId));
+  const selectBoardsByIds = useMemo(makeSelectBoardsByIds, []);
+  const boards = useSelector((state) => selectBoardsByIds(state, boardIds));
+
+  return (
+    <div className={styles.boardSelectStep}>
+      <PopupHeader onBack={onBack} onClose={onClose}>
+        {t('action.moveListToBoard', { context: 'title' })}
+      </PopupHeader>
+      <div className={styles.menu}>
+        {boards
+          .filter((b) => b && b.id !== currentBoardId)
+          .map((board) => (
+            <button
+              key={board.id}
+              type="button"
+              className={styles.boardButton}
+              onClick={() => onSelect(board.id)}
+            >
+              {board.name}
+            </button>
+          ))}
+        {boards.filter((b) => b && b.id !== currentBoardId).length === 0 && (
+          <div className={styles.noBoards}>{t('common.noOtherBoards')}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+BoardSelectStep.propTypes = {
+  currentBoardId: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+};
+
+BoardSelectStep.defaultProps = {
+  onClose: undefined,
+};
+
+export default BoardSelectStep;