From b1d187476d7c63b19d9d67976cb4ee6e66004cd6 Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Tue, 5 May 2020 01:30:06 +0500
Subject: [PATCH] Move cards between boards and projects

---
 client/src/actions/entry/board.js             |   7 +
 client/src/actions/entry/card.js              |  29 +++-
 client/src/api/http.js                        |   2 +-
 client/src/components/Card/ActionsPopup.jsx   |  32 ++++
 client/src/components/Card/Card.jsx           |  21 +++
 client/src/components/CardModal/CardModal.jsx |  39 ++++-
 client/src/components/MoveCardPopup.jsx       |   5 +
 .../components/MoveCardStep/MoveCardStep.jsx  | 161 ++++++++++++++++++
 .../MoveCardStep/MoveCardStep.module.css      |  10 ++
 client/src/components/MoveCardStep/index.js   |   3 +
 client/src/constants/EntryActionTypes.js      |   4 +
 client/src/containers/CardContainer.js        |  19 ++-
 client/src/containers/CardModalContainer.js   |  18 +-
 client/src/lib/popup/Popup.module.css         |   2 -
 client/src/locales/en/app.js                  |  14 +-
 client/src/locales/ru/app.js                  |  14 +-
 client/src/sagas/app/services/board.js        |  11 +-
 client/src/sagas/app/services/card.js         |  23 +++
 client/src/sagas/app/services/router.js       |   2 +-
 client/src/sagas/app/watchers/board.js        |   2 +
 client/src/sagas/app/watchers/card.js         |  12 ++
 client/src/selectors/current.js               |  30 ++++
 server/api/controllers/cards/update.js        |  25 ++-
 server/api/helpers/update-card.js             |   5 +
 24 files changed, 474 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/MoveCardPopup.jsx
 create mode 100644 client/src/components/MoveCardStep/MoveCardStep.jsx
 create mode 100644 client/src/components/MoveCardStep/MoveCardStep.module.css
 create mode 100644 client/src/components/MoveCardStep/index.js

diff --git a/client/src/actions/entry/board.js b/client/src/actions/entry/board.js
index b34028c4..32e97848 100755
--- a/client/src/actions/entry/board.js
+++ b/client/src/actions/entry/board.js
@@ -7,6 +7,13 @@ export const createBoardInCurrentProject = (data) => ({
   },
 });
 
+export const fetchBoard = (id) => ({
+  type: EntryActionTypes.BOARD_FETCH,
+  payload: {
+    id,
+  },
+});
+
 export const updateBoard = (id, data) => ({
   type: EntryActionTypes.BOARD_UPDATE,
   payload: {
diff --git a/client/src/actions/entry/card.js b/client/src/actions/entry/card.js
index fc4e61ae..76a9129e 100755
--- a/client/src/actions/entry/card.js
+++ b/client/src/actions/entry/card.js
@@ -23,7 +23,7 @@ export const updateCurrentCard = (data) => ({
   },
 });
 
-export const moveCard = (id, listId, index) => ({
+export const moveCard = (id, listId, index = 0) => ({
   type: EntryActionTypes.CARD_MOVE,
   payload: {
     id,
@@ -32,6 +32,33 @@ export const moveCard = (id, listId, index) => ({
   },
 });
 
+export const moveCurrentCard = (listId, index = 0) => ({
+  type: EntryActionTypes.CURRENT_CARD_MOVE,
+  payload: {
+    listId,
+    index,
+  },
+});
+
+export const transferCard = (id, boardId, listId, index = 0) => ({
+  type: EntryActionTypes.CARD_TRANSFER,
+  payload: {
+    id,
+    boardId,
+    listId,
+    index,
+  },
+});
+
+export const transferCurrentCard = (boardId, listId, index = 0) => ({
+  type: EntryActionTypes.CURRENT_CARD_TRANSFER,
+  payload: {
+    boardId,
+    listId,
+    index,
+  },
+});
+
 export const deleteCard = (id) => ({
   type: EntryActionTypes.CARD_DELETE,
   payload: {
diff --git a/client/src/api/http.js b/client/src/api/http.js
index f6ce4cb3..646528da 100755
--- a/client/src/api/http.js
+++ b/client/src/api/http.js
@@ -4,7 +4,7 @@ import Config from '../constants/Config';
 
 const http = {};
 
-// TODO: all methods
+// TODO: add all methods
 ['POST'].forEach((method) => {
   http[method.toLowerCase()] = (url, data, headers) => {
     const formData = Object.keys(data).reduce((result, key) => {
diff --git a/client/src/components/Card/ActionsPopup.jsx b/client/src/components/Card/ActionsPopup.jsx
index e39d6f6a..48e636d5 100644
--- a/client/src/components/Card/ActionsPopup.jsx
+++ b/client/src/components/Card/ActionsPopup.jsx
@@ -1,3 +1,4 @@
+import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +11,7 @@ import ProjectMembershipsStep from '../ProjectMembershipsStep';
 import LabelsStep from '../LabelsStep';
 import EditDueDateStep from '../EditDueDateStep';
 import EditTimerStep from '../EditTimerStep';
+import MoveCardStep from '../MoveCardStep';
 import DeleteStep from '../DeleteStep';
 
 import styles from './ActionsPopup.module.css';
@@ -19,21 +21,26 @@ const StepTypes = {
   LABELS: 'LABELS',
   EDIT_DUE_DATE: 'EDIT_DUE_DATE',
   EDIT_TIMER: 'EDIT_TIMER',
+  MOVE: 'MOVE',
   DELETE: 'DELETE',
 };
 
 const ActionsStep = React.memo(
   ({
     card,
+    projectsToLists,
     projectMemberships,
     currentUserIds,
     labels,
     currentLabelIds,
     onNameEdit,
     onUpdate,
+    onMove,
+    onTransfer,
     onDelete,
     onUserAdd,
     onUserRemove,
+    onBoardFetch,
     onLabelAdd,
     onLabelRemove,
     onLabelCreate,
@@ -65,6 +72,10 @@ const ActionsStep = React.memo(
       openStep(StepTypes.EDIT_TIMER);
     }, [openStep]);
 
+    const handleMoveClick = useCallback(() => {
+      openStep(StepTypes.MOVE);
+    }, [openStep]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
@@ -130,6 +141,18 @@ const ActionsStep = React.memo(
               onClose={onClose}
             />
           );
+        case StepTypes.MOVE:
+          return (
+            <MoveCardStep
+              projectsToLists={projectsToLists}
+              defaultPath={pick(card, ['projectId', 'boardId', 'listId'])}
+              onMove={onMove}
+              onTransfer={onTransfer}
+              onBoardFetch={onBoardFetch}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
         case StepTypes.DELETE:
           return (
             <DeleteStep
@@ -180,6 +203,11 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleMoveClick}>
+              {t('action.moveCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
               {t('action.deleteCard', {
                 context: 'title',
@@ -195,6 +223,7 @@ const ActionsStep = React.memo(
 ActionsStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   card: PropTypes.object.isRequired,
+  projectsToLists: PropTypes.array.isRequired,
   projectMemberships: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
@@ -202,9 +231,12 @@ ActionsStep.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   onNameEdit: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onTransfer: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
+  onBoardFetch: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index f4b8b961..f85796c0 100755
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@@ -24,17 +24,24 @@ const Card = React.memo(
     dueDate,
     timer,
     coverUrl,
+    listId,
+    boardId,
+    projectId,
     isPersisted,
     notificationsTotal,
     users,
     labels,
     tasks,
+    allProjectsToLists,
     allProjectMemberships,
     allLabels,
     onUpdate,
+    onMove,
+    onTransfer,
     onDelete,
     onUserAdd,
     onUserRemove,
+    onBoardFetch,
     onLabelAdd,
     onLabelRemove,
     onLabelCreate,
@@ -143,17 +150,24 @@ const Card = React.memo(
                         name,
                         dueDate,
                         timer,
+                        listId,
+                        boardId,
+                        projectId,
                         isPersisted,
                       }}
+                      projectsToLists={allProjectsToLists}
                       projectMemberships={allProjectMemberships}
                       currentUserIds={users.map((user) => user.id)}
                       labels={allLabels}
                       currentLabelIds={labels.map((label) => label.id)}
                       onNameEdit={handleNameEdit}
                       onUpdate={onUpdate}
+                      onMove={onMove}
+                      onTransfer={onTransfer}
                       onDelete={onDelete}
                       onUserAdd={onUserAdd}
                       onUserRemove={onUserRemove}
+                      onBoardFetch={onBoardFetch}
                       onLabelAdd={onLabelAdd}
                       onLabelRemove={onLabelRemove}
                       onLabelCreate={onLabelCreate}
@@ -184,19 +198,26 @@ Card.propTypes = {
   dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   coverUrl: PropTypes.string,
+  listId: PropTypes.string.isRequired,
+  boardId: PropTypes.string.isRequired,
+  projectId: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   notificationsTotal: PropTypes.number.isRequired,
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
   tasks: PropTypes.array.isRequired,
+  allProjectsToLists: PropTypes.array.isRequired,
   allProjectMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onTransfer: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
+  onBoardFetch: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index 7ef4255b..159fba5a 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -20,6 +20,7 @@ import ProjectMembershipsPopup from '../ProjectMembershipsPopup';
 import LabelsPopup from '../LabelsPopup';
 import EditDueDatePopup from '../EditDueDatePopup';
 import EditTimerPopup from '../EditTimerPopup';
+import MoveCardPopup from '../MoveCardPopup';
 import DeletePopup from '../DeletePopup';
 
 import styles from './CardModal.module.css';
@@ -33,18 +34,25 @@ const CardModal = React.memo(
     isSubscribed,
     isActionsFetching,
     isAllActionsFetched,
+    listId,
+    boardId,
+    projectId,
     users,
     labels,
     tasks,
     attachments,
     actions,
+    allProjectsToLists,
     allProjectMemberships,
     allLabels,
     isEditable,
     onUpdate,
+    onMove,
+    onTransfer,
     onDelete,
     onUserAdd,
     onUserRemove,
+    onBoardFetch,
     onLabelAdd,
     onLabelRemove,
     onLabelCreate,
@@ -328,7 +336,9 @@ const CardModal = React.memo(
                   <EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                     <Button fluid className={styles.actionButton}>
                       <Icon name="calendar check outline" className={styles.actionIcon} />
-                      {t('common.dueDate')}
+                      {t('common.dueDate', {
+                        context: 'title',
+                      })}
                     </Button>
                   </EditDueDatePopup>
                   <EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
@@ -354,6 +364,26 @@ const CardModal = React.memo(
                     <Icon name="paper plane outline" className={styles.actionIcon} />
                     {isSubscribed ? t('action.unsubscribe') : t('action.subscribe')}
                   </Button>
+                  <MoveCardPopup
+                    projectsToLists={allProjectsToLists}
+                    defaultPath={{
+                      projectId,
+                      boardId,
+                      listId,
+                    }}
+                    onMove={onMove}
+                    onTransfer={onTransfer}
+                    onBoardFetch={onBoardFetch}
+                  >
+                    <Button
+                      fluid
+                      className={styles.actionButton}
+                      onClick={handleToggleSubscribeClick}
+                    >
+                      <Icon name="share square outline" className={styles.actionIcon} />
+                      {t('action.move')}
+                    </Button>
+                  </MoveCardPopup>
                   <DeletePopup
                     title={t('common.deleteCard', {
                       context: 'title',
@@ -385,20 +415,27 @@ CardModal.propTypes = {
   isSubscribed: PropTypes.bool.isRequired,
   isActionsFetching: PropTypes.bool.isRequired,
   isAllActionsFetched: PropTypes.bool.isRequired,
+  listId: PropTypes.string.isRequired,
+  boardId: PropTypes.string.isRequired,
+  projectId: PropTypes.string.isRequired,
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
   tasks: PropTypes.array.isRequired,
   attachments: PropTypes.array.isRequired,
   actions: PropTypes.array.isRequired,
+  allProjectsToLists: PropTypes.array.isRequired,
   allProjectMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   isEditable: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onTransfer: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
+  onBoardFetch: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
diff --git a/client/src/components/MoveCardPopup.jsx b/client/src/components/MoveCardPopup.jsx
new file mode 100644
index 00000000..1f0cdb82
--- /dev/null
+++ b/client/src/components/MoveCardPopup.jsx
@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import MoveCardStep from './MoveCardStep';
+
+export default withPopup(MoveCardStep);
diff --git a/client/src/components/MoveCardStep/MoveCardStep.jsx b/client/src/components/MoveCardStep/MoveCardStep.jsx
new file mode 100644
index 00000000..b93bd239
--- /dev/null
+++ b/client/src/components/MoveCardStep/MoveCardStep.jsx
@@ -0,0 +1,161 @@
+import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import { useForm } from '../../hooks';
+
+import styles from './MoveCardStep.module.css';
+
+const MoveCardStep = React.memo(
+  ({ projectsToLists, defaultPath, onMove, onTransfer, onBoardFetch, onBack, onClose }) => {
+    const [t] = useTranslation();
+
+    const [path, handleFieldChange] = useForm(() => ({
+      projectId: null,
+      boardId: null,
+      listId: null,
+      ...defaultPath,
+    }));
+
+    const selectedProject = useMemo(
+      () => projectsToLists.find((project) => project.id === path.projectId) || null,
+      [projectsToLists, path.projectId],
+    );
+
+    const selectedBoard = useMemo(
+      () =>
+        (selectedProject && selectedProject.boards.find((board) => board.id === path.boardId)) ||
+        null,
+      [selectedProject, path.boardId],
+    );
+
+    const selectedList = useMemo(
+      () => (selectedBoard && selectedBoard.lists.find((list) => list.id === path.listId)) || null,
+      [selectedBoard, path.listId],
+    );
+
+    const handleBoardIdFieldChange = useCallback(
+      (event, data) => {
+        if (selectedProject.boards.find((board) => board.id === data.value).isFetching === null) {
+          onBoardFetch(data.value);
+        }
+
+        handleFieldChange(event, data);
+      },
+      [onBoardFetch, handleFieldChange, selectedProject],
+    );
+
+    const handleSubmit = useCallback(() => {
+      if (selectedBoard.id !== defaultPath.boardId) {
+        onTransfer(selectedBoard.id, selectedList.id);
+      } else if (selectedList.id !== defaultPath.listId) {
+        onMove(selectedList.id);
+      }
+
+      onClose();
+    }, [defaultPath, onMove, onTransfer, onClose, selectedBoard, selectedList]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t('common.moveCard', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Form onSubmit={handleSubmit}>
+            <div className={styles.text}>{t('common.project')}</div>
+            <Dropdown
+              fluid
+              selection
+              name="projectId"
+              options={projectsToLists.map((project) => ({
+                text: project.name,
+                value: project.id,
+              }))}
+              value={selectedProject && selectedProject.id}
+              placeholder={
+                projectsToLists.length === 0 ? t('common.noProjects') : t('common.selectProject')
+              }
+              disabled={projectsToLists.length === 0}
+              className={styles.field}
+              onChange={handleFieldChange}
+            />
+            {selectedProject && (
+              <>
+                <div className={styles.text}>{t('common.board')}</div>
+                <Dropdown
+                  fluid
+                  selection
+                  name="boardId"
+                  options={selectedProject.boards.map((board) => ({
+                    text: board.name,
+                    value: board.id,
+                  }))}
+                  value={selectedBoard && selectedBoard.id}
+                  placeholder={
+                    selectedProject.boards.length === 0
+                      ? t('common.noBoards')
+                      : t('common.selectBoard')
+                  }
+                  disabled={selectedProject.boards.length === 0}
+                  className={styles.field}
+                  onChange={handleBoardIdFieldChange}
+                />
+              </>
+            )}
+            {selectedBoard && (
+              <>
+                <div className={styles.text}>{t('common.list')}</div>
+                <Dropdown
+                  fluid
+                  selection
+                  name="listId"
+                  options={selectedBoard.lists.map((list) => ({
+                    text: list.name,
+                    value: list.id,
+                  }))}
+                  value={selectedList && selectedList.id}
+                  placeholder={
+                    selectedBoard.isFetching === false && selectedBoard.lists.length === 0
+                      ? t('common.noLists')
+                      : t('common.selectList')
+                  }
+                  loading={selectedBoard.isFetching !== false}
+                  disabled={selectedBoard.isFetching !== false || selectedBoard.lists.length === 0}
+                  className={styles.field}
+                  onChange={handleFieldChange}
+                />
+              </>
+            )}
+            <Button
+              positive
+              content={t('action.move')}
+              disabled={(selectedBoard && selectedBoard.isFetching !== false) || !selectedList}
+            />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+MoveCardStep.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  projectsToLists: PropTypes.array.isRequired,
+  defaultPath: PropTypes.object.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  onMove: PropTypes.func.isRequired,
+  onTransfer: PropTypes.func.isRequired,
+  onBoardFetch: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+MoveCardStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default MoveCardStep;
diff --git a/client/src/components/MoveCardStep/MoveCardStep.module.css b/client/src/components/MoveCardStep/MoveCardStep.module.css
new file mode 100644
index 00000000..72114a1d
--- /dev/null
+++ b/client/src/components/MoveCardStep/MoveCardStep.module.css
@@ -0,0 +1,10 @@
+.field {
+  margin-bottom: 8px;
+}
+
+.text {
+  color: #444444;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 6px;
+}
diff --git a/client/src/components/MoveCardStep/index.js b/client/src/components/MoveCardStep/index.js
new file mode 100644
index 00000000..68e47a88
--- /dev/null
+++ b/client/src/components/MoveCardStep/index.js
@@ -0,0 +1,3 @@
+import MoveCardStep from './MoveCardStep';
+
+export default MoveCardStep;
diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
index 497c9d29..07c85b81 100755
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@@ -49,6 +49,7 @@ export default {
   /* Board */
 
   BOARD_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/BOARD_IN_CURRENT_PROJECT_CREATE`,
+  BOARD_FETCH: `${PREFIX}/BOARD_FETCH`,
   BOARD_UPDATE: `${PREFIX}/BOARD_UPDATE`,
   BOARD_MOVE: `${PREFIX}/BOARD_MOVE`,
   BOARD_DELETE: `${PREFIX}/BOARD_DELETE`,
@@ -78,6 +79,9 @@ export default {
   CARD_UPDATE: `${PREFIX}/CARD_UPDATE`,
   CURRENT_CARD_UPDATE: `${PREFIX}/CURRENT_CARD_UPDATE`,
   CARD_MOVE: `${PREFIX}/CARD_MOVE`,
+  CURRENT_CARD_MOVE: `${PREFIX}/CURRENT_CARD_MOVE`,
+  CARD_TRANSFER: `${PREFIX}/CARD_TRANSFER`,
+  CURRENT_CARD_TRANSFER: `${PREFIX}/CURRENT_CARD_TRANSFER`,
   CARD_DELETE: `${PREFIX}/CARD_DELETE`,
   CURRENT_CARD_DELETE: `${PREFIX}/CURRENT_CARD_DELETE`,
 
diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
index 654f9dc6..a768a422 100755
--- a/client/src/containers/CardContainer.js
+++ b/client/src/containers/CardContainer.js
@@ -9,6 +9,8 @@ import {
   makeTasksByCardIdSelector,
   makeUsersByCardIdSelector,
   membershipsForCurrentProjectSelector,
+  pathSelector,
+  projectsToListsForCurrentUserSelector,
 } from '../selectors';
 import {
   addLabelToCard,
@@ -16,8 +18,11 @@ import {
   createLabelInCurrentBoard,
   deleteCard,
   deleteLabel,
+  fetchBoard,
+  moveCard,
   removeLabelFromCard,
   removeUserFromCard,
+  transferCard,
   updateLabel,
   updateCard,
 } from '../actions/entry';
@@ -31,10 +36,15 @@ const makeMapStateToProps = () => {
   const notificationsTotalByCardIdSelector = makeNotificationsTotalByCardIdSelector();
 
   return (state, { id, index }) => {
+    const { projectId } = pathSelector(state);
+    const allProjectsToLists = projectsToListsForCurrentUserSelector(state);
     const allProjectMemberships = membershipsForCurrentProjectSelector(state);
     const allLabels = labelsForCurrentBoardSelector(state);
 
-    const { name, dueDate, timer, coverUrl, isPersisted } = cardByIdSelector(state, id);
+    const { name, dueDate, timer, coverUrl, listId, boardId, isPersisted } = cardByIdSelector(
+      state,
+      id,
+    );
 
     const users = usersByCardIdSelector(state, id);
     const labels = labelsByCardIdSelector(state, id);
@@ -48,11 +58,15 @@ const makeMapStateToProps = () => {
       dueDate,
       timer,
       coverUrl,
+      listId,
+      boardId,
+      projectId,
       isPersisted,
       notificationsTotal,
       users,
       labels,
       tasks,
+      allProjectsToLists,
       allProjectMemberships,
       allLabels,
     };
@@ -63,9 +77,12 @@ const mapDispatchToProps = (dispatch, { id }) =>
   bindActionCreators(
     {
       onUpdate: (data) => updateCard(id, data),
+      onMove: (listId, index) => moveCard(id, listId, index),
+      onTransfer: (boardId, listId) => transferCard(id, boardId, listId),
       onDelete: () => deleteCard(id),
       onUserAdd: (userId) => addUserToCard(userId, id),
       onUserRemove: (userId) => removeUserFromCard(userId, id),
+      onBoardFetch: fetchBoard,
       onLabelAdd: (labelId) => addLabelToCard(labelId, id),
       onLabelRemove: (labelId) => removeLabelFromCard(labelId, id),
       onLabelCreate: (data) => createLabelInCurrentBoard(data),
diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
index 4f2dd0f9..e0d7d26e 100755
--- a/client/src/containers/CardModalContainer.js
+++ b/client/src/containers/CardModalContainer.js
@@ -11,6 +11,8 @@ import {
   labelsForCurrentBoardSelector,
   labelsForCurrentCardSelector,
   membershipsForCurrentProjectSelector,
+  pathSelector,
+  projectsToListsForCurrentUserSelector,
   tasksForCurrentCardSelector,
   usersForCurrentCardSelector,
 } from '../selectors';
@@ -27,8 +29,11 @@ import {
   deleteLabel,
   deleteTask,
   fetchActionsInCurrentCard,
+  fetchBoard,
+  moveCurrentCard,
   removeLabelFromCurrentCard,
   removeUserFromCurrentCard,
+  transferCurrentCard,
   updateAttachment,
   updateCommentAction,
   updateCurrentCard,
@@ -39,7 +44,9 @@ import Paths from '../constants/Paths';
 import CardModal from '../components/CardModal';
 
 const mapStateToProps = (state) => {
+  const { projectId } = pathSelector(state);
   const { isAdmin } = currentUserSelector(state);
+  const allProjectsToLists = projectsToListsForCurrentUserSelector(state);
   const allProjectMemberships = membershipsForCurrentProjectSelector(state);
   const allLabels = labelsForCurrentBoardSelector(state);
 
@@ -51,6 +58,7 @@ const mapStateToProps = (state) => {
     isSubscribed,
     isActionsFetching,
     isAllActionsFetched,
+    listId,
     boardId,
   } = currentCardSelector(state);
 
@@ -68,14 +76,17 @@ const mapStateToProps = (state) => {
     isSubscribed,
     isActionsFetching,
     isAllActionsFetched,
+    listId,
+    boardId,
+    projectId,
     users,
     labels,
     tasks,
     attachments,
     actions,
+    allProjectsToLists,
     allProjectMemberships,
     allLabels,
-    boardId,
     isEditable: isAdmin,
   };
 };
@@ -84,9 +95,12 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       onUpdate: updateCurrentCard,
+      onMove: moveCurrentCard,
+      onTransfer: transferCurrentCard,
       onDelete: deleteCurrentCard,
       onUserAdd: addUserToCurrentCard,
       onUserRemove: removeUserFromCurrentCard,
+      onBoardFetch: fetchBoard,
       onLabelAdd: addLabelToCurrentCard,
       onLabelRemove: removeLabelFromCurrentCard,
       onLabelCreate: createLabelInCurrentBoard,
@@ -108,7 +122,7 @@ const mapDispatchToProps = (dispatch) =>
   );
 
 const mergeProps = (stateProps, dispatchProps) => ({
-  ...omit(stateProps, 'boardId'),
+  ...stateProps,
   ...omit(dispatchProps, 'push'),
   onClose: () => dispatchProps.push(Paths.BOARDS.replace(':id', stateProps.boardId)),
 });
diff --git a/client/src/lib/popup/Popup.module.css b/client/src/lib/popup/Popup.module.css
index e04e77e9..3b0704a0 100644
--- a/client/src/lib/popup/Popup.module.css
+++ b/client/src/lib/popup/Popup.module.css
@@ -17,8 +17,6 @@
     0 0 0 1px rgba(9, 45, 66, 0.08) !important;
   margin-top: 6px !important;
   max-height: calc(100% - 70px);
-  overflow: hidden;
-  overflow-y: auto;
   padding: 0 12px 12px !important;
   width: 304px;
 }
diff --git a/client/src/locales/en/app.js b/client/src/locales/en/app.js
index 6e25c00d..4723ac10 100644
--- a/client/src/locales/en/app.js
+++ b/client/src/locales/en/app.js
@@ -33,6 +33,7 @@ export default {
       attachment: 'Attachment',
       attachments: 'Attachments',
       authentication: 'Authentication',
+      board: 'Board',
       boardNotFound_title: 'Board Not Found',
       cardActions_title: 'Card Actions',
       cardNotFound_title: 'Card Not Found',
@@ -46,7 +47,7 @@ export default {
       createTextFile_title: 'Create Text File',
       currentPassword: 'Current password',
       date: 'Date',
-      dueDate: 'Due date',
+      dueDate_title: 'Due Date',
       deleteAttachment_title: 'Delete Attachment',
       deleteBoard_title: 'Delete Board',
       deleteCard_title: 'Delete Card',
@@ -82,14 +83,19 @@ export default {
       hours: 'Hours',
       invalidCurrentPassword: 'Invalid current password',
       labels: 'Labels',
+      list: 'List',
       listActions_title: 'List Actions',
       members: 'Members',
       minutes: 'Minutes',
+      moveCard_title: 'Move Card',
       name: 'Name',
       newEmail: 'New e-mail',
       newPassword: 'New password',
       newUsername: 'New username',
       noConnectionToServer: 'No connection to server',
+      noBoards: 'No boards',
+      noLists: 'No lists',
+      noProjects: 'No projects',
       notifications: 'Notifications',
       noUnreadNotifications: 'No unread notifications',
       openBoard_title: 'Open Board',
@@ -99,11 +105,15 @@ export default {
       preferences: 'Preferences',
       pressPasteShortcutToAddAttachmentFromClipboard:
         'Tip: press Ctrl-V (Cmd-V on Mac) to add an attachment from the clipboard.',
+      project: 'Project',
       projectNotFound_title: 'Project Not Found',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Refresh the page</0> to load last data<br />and receive updates',
       removeMember_title: 'Remove Member',
       seconds: 'Seconds',
+      selectBoard: 'Select board',
+      selectList: 'Select list',
+      selectProject: 'Select project',
       settings: 'Settings',
       subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
       taskActions_title: 'Task Actions',
@@ -165,6 +175,8 @@ export default {
       editUsername_title: 'Edit Username',
       logOut_title: 'Log Out',
       makeCover_title: 'Make Cover',
+      move: 'Move',
+      moveCard_title: 'Move Card',
       remove: 'Remove',
       removeCover_title: 'Remove Cover',
       removeFromProject: 'Remove from project',
diff --git a/client/src/locales/ru/app.js b/client/src/locales/ru/app.js
index 3ad24e1e..cb123b4d 100644
--- a/client/src/locales/ru/app.js
+++ b/client/src/locales/ru/app.js
@@ -37,6 +37,7 @@ export default {
       attachment: 'Вложение',
       attachments: 'Вложения',
       authentication: 'Аутентификация',
+      board: 'Доска',
       boardNotFound: 'Доска не найдена',
       cardActions: 'Действия с карточкой',
       cardNotFound: 'Карточка не найдена',
@@ -86,14 +87,19 @@ export default {
       hours: 'Часы',
       invalidCurrentPassword: 'Неверный текущий пароль',
       labels: 'Метки',
+      list: 'Список',
       listActions: 'Действия со списком',
       members: 'Участники',
       minutes: 'Минуты',
+      moveCard: 'Перемещение карточки',
       name: 'Имя',
       newEmail: 'Новый e-mail',
       newPassword: 'Новый пароль',
       newUsername: 'Новое имя пользователя',
       noConnectionToServer: 'Нет соединения с сервером',
+      noBoards: 'Досок нет',
+      noLists: 'Списков нет',
+      noProjects: 'Проектов нет',
       notifications: 'Уведомления',
       noUnreadNotifications: 'Уведомлений нет',
       openBoard: 'Откройте доску',
@@ -103,11 +109,15 @@ export default {
       preferences: 'Предпочтения',
       pressPasteShortcutToAddAttachmentFromClipboard:
         'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена.',
-      projectNotFound: 'Доска не найдена',
+      project: 'Проект',
+      projectNotFound: 'Проект не найден',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Обновите страницу</0>, чтобы загрузить<br />актуальные данные и получать обновления',
       removeMember: 'Удаление участника',
       seconds: 'Секунды',
+      selectBoard: 'Выберите доску',
+      selectList: 'Выберите список',
+      selectProject: 'Выберите проект',
       settings: 'Настройки',
       subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
       taskActions: 'Действия с задачей',
@@ -166,6 +176,8 @@ export default {
       editUsername_title: 'Изменить имя пользователя',
       logOut: 'Выйти',
       makeCover: 'Сделать обложкой',
+      move: 'Переместить',
+      moveCard: 'Переместить карточку',
       remove: 'Убрать',
       removeCover: 'Убрать обложку',
       removeFromProject: 'Удалить из проекта',
diff --git a/client/src/sagas/app/services/board.js b/client/src/sagas/app/services/board.js
index 21390eb9..b9e94b69 100644
--- a/client/src/sagas/app/services/board.js
+++ b/client/src/sagas/app/services/board.js
@@ -1,7 +1,12 @@
 import { call, put, select } from 'redux-saga/effects';
 
 import { goToBoardService, goToProjectService } from './router';
-import { createBoardRequest, deleteBoardRequest, updateBoardRequest } from '../requests';
+import {
+  createBoardRequest,
+  deleteBoardRequest,
+  fetchBoardRequest,
+  updateBoardRequest,
+} from '../requests';
 import { boardByIdSelector, nextBoardPositionSelector, pathSelector } from '../../../selectors';
 import { createBoard, deleteBoard, updateBoard } from '../../../actions';
 import { createLocalId } from '../../../utils/local-id';
@@ -38,6 +43,10 @@ export function* createBoardInCurrentProjectService(data) {
   yield call(createBoardService, projectId, data);
 }
 
+export function* fetchBoard(id) {
+  yield call(fetchBoardRequest, id);
+}
+
 export function* updateBoardService(id, data) {
   yield put(updateBoard(id, data));
   yield call(updateBoardRequest, id, data);
diff --git a/client/src/sagas/app/services/card.js b/client/src/sagas/app/services/card.js
index ade180f0..97bdd1e4 100644
--- a/client/src/sagas/app/services/card.js
+++ b/client/src/sagas/app/services/card.js
@@ -45,6 +45,29 @@ export function* moveCardService(id, listId, index) {
   });
 }
 
+export function* moveCurrentCardService(listId, index) {
+  const { cardId } = yield select(pathSelector);
+
+  yield call(moveCardService, cardId, listId, index);
+}
+
+export function* transferCardService(id, boardId, listId, index) {
+  const position = yield select(nextCardPositionSelector, listId, index, id);
+
+  yield call(updateCardService, id, {
+    boardId,
+    listId,
+    position,
+  });
+}
+
+export function* transferCurrentCardService(boardId, listId, index) {
+  const { cardId, boardId: currentBoardId } = yield select(pathSelector);
+
+  yield call(goToBoardService, currentBoardId);
+  yield call(transferCardService, cardId, boardId, listId, index);
+}
+
 export function* deleteCardService(id) {
   const { cardId, boardId } = yield select(pathSelector);
 
diff --git a/client/src/sagas/app/services/router.js b/client/src/sagas/app/services/router.js
index 5c8a1906..c77f4b8b 100644
--- a/client/src/sagas/app/services/router.js
+++ b/client/src/sagas/app/services/router.js
@@ -34,7 +34,7 @@ export function* runPathActionsService(pathsMatch) {
   switch (pathsMatch.path) {
     case Paths.BOARDS:
     case Paths.CARDS: {
-      const currentBoard = yield select(currentBoardSelector);
+      const currentBoard = yield select(currentBoardSelector); // TODO: move to services
 
       if (currentBoard && currentBoard.isFetching === null) {
         yield call(fetchBoardRequest, currentBoard.id);
diff --git a/client/src/sagas/app/watchers/board.js b/client/src/sagas/app/watchers/board.js
index 349430cc..919e0265 100644
--- a/client/src/sagas/app/watchers/board.js
+++ b/client/src/sagas/app/watchers/board.js
@@ -3,6 +3,7 @@ import { all, takeLatest } from 'redux-saga/effects';
 import {
   createBoardInCurrentProjectService,
   deleteBoardService,
+  fetchBoard,
   moveBoardService,
   updateBoardService,
 } from '../services';
@@ -13,6 +14,7 @@ export default function* () {
     takeLatest(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
       createBoardInCurrentProjectService(data),
     ),
+    takeLatest(EntryActionTypes.BOARD_FETCH, ({ payload: { id } }) => fetchBoard(id)),
     takeLatest(EntryActionTypes.BOARD_UPDATE, ({ payload: { id, data } }) =>
       updateBoardService(id, data),
     ),
diff --git a/client/src/sagas/app/watchers/card.js b/client/src/sagas/app/watchers/card.js
index 67a4e44b..699ee6f5 100644
--- a/client/src/sagas/app/watchers/card.js
+++ b/client/src/sagas/app/watchers/card.js
@@ -5,6 +5,9 @@ import {
   deleteCardService,
   deleteCurrentCardService,
   moveCardService,
+  moveCurrentCardService,
+  transferCardService,
+  transferCurrentCardService,
   updateCardService,
   updateCurrentCardService,
 } from '../services';
@@ -24,6 +27,15 @@ export default function* () {
     takeLatest(EntryActionTypes.CARD_MOVE, ({ payload: { id, listId, index } }) =>
       moveCardService(id, listId, index),
     ),
+    takeLatest(EntryActionTypes.CURRENT_CARD_MOVE, ({ payload: { listId, index } }) =>
+      moveCurrentCardService(listId, index),
+    ),
+    takeLatest(EntryActionTypes.CARD_TRANSFER, ({ payload: { id, boardId, listId, index } }) =>
+      transferCardService(id, boardId, listId, index),
+    ),
+    takeLatest(EntryActionTypes.CURRENT_CARD_TRANSFER, ({ payload: { boardId, listId, index } }) =>
+      transferCurrentCardService(boardId, listId, index),
+    ),
     takeLatest(EntryActionTypes.CARD_DELETE, ({ payload: { id } }) => deleteCardService(id)),
     takeLatest(EntryActionTypes.CURRENT_CARD_DELETE, () => deleteCurrentCardService()),
   ]);
diff --git a/client/src/selectors/current.js b/client/src/selectors/current.js
index e59359aa..35dc84e8 100755
--- a/client/src/selectors/current.js
+++ b/client/src/selectors/current.js
@@ -63,6 +63,36 @@ export const projectsForCurrentUserSelector = createSelector(
   },
 );
 
+export const projectsToListsForCurrentUserSelector = createSelector(
+  orm,
+  (state) => currentUserIdSelector(state),
+  ({ User }, id) => {
+    if (!id) {
+      return id;
+    }
+
+    const userModel = User.withId(id);
+
+    if (!userModel) {
+      return userModel;
+    }
+
+    return userModel
+      .getOrderedProjectMembershipsQuerySet()
+      .toModelArray()
+      .map(({ project: projectModel }) => ({
+        ...projectModel.ref,
+        boards: projectModel
+          .getOrderedBoardsQuerySet()
+          .toModelArray()
+          .map((boardModel) => ({
+            ...boardModel.ref,
+            lists: boardModel.getOrderedListsQuerySet().toRefArray(),
+          })),
+      }));
+  },
+);
+
 export const notificationsForCurrentUserSelector = createSelector(
   orm,
   (state) => currentUserIdSelector(state),
diff --git a/server/api/controllers/cards/update.js b/server/api/controllers/cards/update.js
index 8f2c718a..97813858 100755
--- a/server/api/controllers/cards/update.js
+++ b/server/api/controllers/cards/update.js
@@ -20,6 +20,10 @@ module.exports = {
       type: 'string',
       regex: /^[0-9]+$/,
     },
+    boardId: {
+      type: 'string',
+      regex: /^[0-9]+$/,
+    },
     coverAttachmentId: {
       type: 'string',
       regex: /^[0-9]+$/,
@@ -71,10 +75,10 @@ module.exports = {
       .getCardToProjectPath(inputs.id)
       .intercept('pathNotFound', () => Errors.CARD_NOT_FOUND);
 
-    let { card } = cardToProjectPath;
-    const { list, project } = cardToProjectPath;
+    let { card, project } = cardToProjectPath;
+    const { list } = cardToProjectPath;
 
-    const isUserMemberForProject = await sails.helpers.isUserMemberForProject(
+    let isUserMemberForProject = await sails.helpers.isUserMemberForProject(
       project.id,
       currentUser.id,
     );
@@ -87,12 +91,25 @@ module.exports = {
     if (!_.isUndefined(inputs.listId) && inputs.listId !== list.id) {
       toList = await List.findOne({
         id: inputs.listId,
-        boardId: card.boardId,
+        boardId: inputs.boardId || card.boardId,
       });
 
       if (!toList) {
         throw Errors.LIST_NOT_FOUND;
       }
+
+      ({ project } = await sails.helpers
+        .getListToProjectPath(toList.id)
+        .intercept('pathNotFound', () => Errors.LIST_NOT_FOUND));
+
+      isUserMemberForProject = await sails.helpers.isUserMemberForProject(
+        project.id,
+        currentUser.id,
+      );
+
+      if (!isUserMemberForProject) {
+        throw Errors.LIST_NOT_FOUND; // Forbidden
+      }
     }
 
     const values = _.pick(inputs, [
diff --git a/server/api/helpers/update-card.js b/server/api/helpers/update-card.js
index ceb8ef72..0ddd059f 100644
--- a/server/api/helpers/update-card.js
+++ b/server/api/helpers/update-card.js
@@ -40,6 +40,10 @@ module.exports = {
         delete inputs.toList; // eslint-disable-line no-param-reassign
       } else {
         values.listId = inputs.toList.id;
+
+        if (inputs.toList.boardId !== inputs.list.boardId) {
+          values.boardId = inputs.toList.boardId;
+        }
       }
     }
 
@@ -92,6 +96,7 @@ module.exports = {
       );
 
       if (inputs.toList) {
+        // TODO: add transfer action
         await sails.helpers.createAction(card, inputs.user, {
           type: 'moveCard',
           data: {