feat: Add ability to duplicate card (#668)

plankanban · Apr 5, 2024 · 6cd9da8 · 6cd9da8
1 parent d7847fe
commit 6cd9da8
Show file tree

Hide file tree

Showing 21 changed files with 505 additions and 6 deletions.
diff --git a/client/src/actions/cards.js b/client/src/actions/cards.js
@@ -23,10 +23,14 @@ createCard.failure = (localId, error) => ({
   },
 });
 
-const handleCardCreate = (card) => ({
+const handleCardCreate = (card, cardMemberships, cardLabels, tasks, attachments) => ({
   type: ActionTypes.CARD_CREATE_HANDLE,
   payload: {
     card,
+    cardMemberships,
+    cardLabels,
+    tasks,
+    attachments,
   },
 });
 
@@ -60,6 +64,34 @@ const handleCardUpdate = (card) => ({
   },
 });
 
+const duplicateCard = (id, card, taskIds) => ({
+  type: ActionTypes.CARD_DUPLICATE,
+  payload: {
+    id,
+    card,
+    taskIds,
+  },
+});
+
+duplicateCard.success = (localId, card, cardMemberships, cardLabels, tasks) => ({
+  type: ActionTypes.CARD_DUPLICATE__SUCCESS,
+  payload: {
+    localId,
+    card,
+    cardMemberships,
+    cardLabels,
+    tasks,
+  },
+});
+
+duplicateCard.failure = (id, error) => ({
+  type: ActionTypes.CARD_DUPLICATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
 const deleteCard = (id) => ({
   type: ActionTypes.CARD_DELETE,
   payload: {
@@ -94,6 +126,7 @@ export default {
   handleCardCreate,
   updateCard,
   handleCardUpdate,
+  duplicateCard,
   deleteCard,
   handleCardDelete,
 };
diff --git a/client/src/api/cards.js b/client/src/api/cards.js
@@ -57,6 +57,12 @@ const updateCard = (id, data, headers) =>
     item: transformCard(body.item),
   }));
 
+const duplicateCard = (id, data, headers) =>
+  socket.post(`/cards/${id}/duplicate`, data, headers).then((body) => ({
+    ...body,
+    item: transformCard(body.item),
+  }));
+
 const deleteCard = (id, headers) =>
   socket.delete(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
@@ -81,6 +87,7 @@ export default {
   getCard,
   updateCard,
   deleteCard,
+  duplicateCard,
   makeHandleCardCreate,
   makeHandleCardUpdate,
   makeHandleCardDelete,

diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
@@ -36,6 +36,7 @@ const ActionsStep = React.memo(
     onUpdate,
     onMove,
     onTransfer,
+    onDuplicate,
     onDelete,
     onUserAdd,
     onUserRemove,
@@ -76,6 +77,11 @@ const ActionsStep = React.memo(
       openStep(StepTypes.MOVE);
     }, [openStep]);
 
+    const handleDuplicateClick = useCallback(() => {
+      onDuplicate();
+      onClose();
+    }, [onDuplicate, onClose]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
@@ -207,6 +213,11 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleDuplicateClick}>
+              {t('action.duplicateCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
               {t('action.deleteCard', {
                 context: 'title',
@@ -232,6 +243,7 @@ ActionsStep.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,
+  onDuplicate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,

diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
@@ -41,6 +41,7 @@ const Card = React.memo(
     onUpdate,
     onMove,
     onTransfer,
+    onDuplicate,
     onDelete,
     onUserAdd,
     onUserRemove,
@@ -185,6 +186,7 @@ const Card = React.memo(
                         onUpdate={onUpdate}
                         onMove={onMove}
                         onTransfer={onTransfer}
+                        onDuplicate={onDuplicate}
                         onDelete={onDelete}
                         onUserAdd={onUserAdd}
                         onUserRemove={onUserRemove}
@@ -238,6 +240,7 @@ Card.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,
+  onDuplicate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,

diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
@@ -55,6 +55,7 @@ const CardModal = React.memo(
     onUpdate,
     onMove,
     onTransfer,
+    onDuplicate,
     onDelete,
     onUserAdd,
     onUserRemove,
@@ -140,6 +141,11 @@ const CardModal = React.memo(
       });
     }, [isSubscribed, onUpdate]);
 
+    const handleDuplicateClick = useCallback(() => {
+      onDuplicate();
+      onClose();
+    }, [onDuplicate, onClose]);
+
     const handleGalleryOpen = useCallback(() => {
       isGalleryOpened.current = true;
     }, []);
@@ -496,6 +502,10 @@ const CardModal = React.memo(
                     {t('action.move')}
                   </Button>
                 </CardMovePopup>
+                <Button fluid className={styles.actionButton} onClick={handleDuplicateClick}>
+                  <Icon name="copy outline" className={styles.actionIcon} />
+                  {t('action.duplicate')}
+                </Button>
                 <DeletePopup
                   title="common.deleteCard"
                   content="common.areYouSureYouWantToDeleteThisCard"
@@ -555,6 +565,7 @@ CardModal.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,
+  onDuplicate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,

diff --git a/client/src/constants/ActionTypes.js b/client/src/constants/ActionTypes.js
@@ -194,6 +194,9 @@ export default {
   CARD_TRANSFER: 'CARD_TRANSFER',
   CARD_TRANSFER__SUCCESS: 'CARD_TRANSFER__SUCCESS',
   CARD_TRANSFER__FAILURE: 'CARD_TRANSFER__FAILURE',
+  CARD_DUPLICATE: 'CARD_DUPLICATE',
+  CARD_DUPLICATE__SUCCESS: 'CARD_DUPLICATE__SUCCESS',
+  CARD_DUPLICATE__FAILURE: 'CARD_DUPLICATE__FAILURE',
   CARD_DELETE: 'CARD_DELETE',
   CARD_DELETE__SUCCESS: 'CARD_DELETE__SUCCESS',
   CARD_DELETE__FAILURE: 'CARD_DELETE__FAILURE',

diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
@@ -132,6 +132,8 @@ export default {
   CURRENT_CARD_MOVE: `${PREFIX}/CURRENT_CARD_MOVE`,
   CARD_TRANSFER: `${PREFIX}/CARD_TRANSFER`,
   CURRENT_CARD_TRANSFER: `${PREFIX}/CURRENT_CARD_TRANSFER`,
+  CARD_DUPLICATE: `${PREFIX}/CARD_DUPLICATE`,
+  CURRENT_CARD_DUPLICATE: `${PREFIX}/CURRENT_CARD_DUPLICATE`,
   CARD_DELETE: `${PREFIX}/CARD_DELETE`,
   CURRENT_CARD_DELETE: `${PREFIX}/CURRENT_CARD_DELETE`,
   CARD_DELETE_HANDLE: `${PREFIX}/CARD_DELETE_HANDLE`,

diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
@@ -62,6 +62,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onUpdate: (data) => entryActions.updateCard(id, data),
       onMove: (listId, index) => entryActions.moveCard(id, listId, index),
       onTransfer: (boardId, listId) => entryActions.transferCard(id, boardId, listId),
+      onDuplicate: () => entryActions.duplicateCard(id),
       onDelete: () => entryActions.deleteCard(id),
       onUserAdd: (userId) => entryActions.addUserToCard(userId, id),
       onUserRemove: (userId) => entryActions.removeUserFromCard(userId, id),

diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
@@ -78,6 +78,7 @@ const mapDispatchToProps = (dispatch) =>
       onUpdate: entryActions.updateCurrentCard,
       onMove: entryActions.moveCurrentCard,
       onTransfer: entryActions.transferCurrentCard,
+      onDuplicate: entryActions.duplicateCurrentCard,
       onDelete: entryActions.deleteCurrentCard,
       onUserAdd: entryActions.addUserToCurrentCard,
       onUserRemove: entryActions.removeUserFromCurrentCard,

diff --git a/client/src/entry-actions/cards.js b/client/src/entry-actions/cards.js
@@ -74,6 +74,18 @@ const transferCurrentCard = (boardId, listId, index = 0) => ({
   },
 });
 
+const duplicateCard = (id) => ({
+  type: EntryActionTypes.CARD_DUPLICATE,
+  payload: {
+    id,
+  },
+});
+
+const duplicateCurrentCard = () => ({
+  type: EntryActionTypes.CURRENT_CARD_DUPLICATE,
+  payload: {},
+});
+
 const deleteCard = (id) => ({
   type: EntryActionTypes.CARD_DELETE,
   payload: {
@@ -103,6 +115,8 @@ export default {
   moveCurrentCard,
   transferCard,
   transferCurrentCard,
+  duplicateCard,
+  duplicateCurrentCard,
   deleteCard,
   deleteCurrentCard,
   handleCardDelete,

diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
@@ -51,6 +51,7 @@ export default {
       cardNotFound_title: 'Card Not Found',
       cardOrActionAreDeleted: 'Card or action are deleted.',
       color: 'Color',
+      copy_inline: 'copy',
       createBoard_title: 'Create Board',
       createLabel_title: 'Create Label',
       createNewOneOrSelectExistingOne: 'Create a new one or select<br />an existing one.',
@@ -196,6 +197,8 @@ export default {
       deleteTask: 'Delete task',
       deleteTask_title: 'Delete Task',
       deleteUser: 'Delete user',
+      duplicate: 'Duplicate',
+      duplicateCard_title: 'Duplicate Card',
       edit: 'Edit',
       editDueDate_title: 'Edit Due Date',
       editDescription_title: 'Edit Description',

diff --git a/client/src/locales/fr/core.js b/client/src/locales/fr/core.js
@@ -169,6 +169,7 @@ export default {
       deleteTask: 'Supprimer la tâche',
       deleteTask_title: 'Supprimer la tâche',
       deleteUser: "Supprimer l'utilisateur",
+      duplicate: 'Dupliquer',
       edit: 'Modifier',
       editDueDate_title: "Modifier la date d'échéance",
       editDescription_title: 'Éditer la description',

diff --git a/client/src/models/Card.js b/client/src/models/Card.js
@@ -1,3 +1,4 @@
+import pick from 'lodash/pick';
 import { attr, fk, many, oneToOne } from 'redux-orm';
 
 import BaseModel from './BaseModel';
@@ -165,7 +166,6 @@ export default class extends BaseModel {
 
         break;
       case ActionTypes.CARD_CREATE:
-      case ActionTypes.CARD_CREATE_HANDLE:
       case ActionTypes.CARD_UPDATE__SUCCESS:
       case ActionTypes.CARD_UPDATE_HANDLE:
         Card.upsert(payload.card);
@@ -176,10 +176,63 @@ export default class extends BaseModel {
         Card.upsert(payload.card);
 
         break;
+      case ActionTypes.CARD_CREATE_HANDLE: {
+        const cardModel = Card.upsert(payload.card);
+
+        payload.cardMemberships.forEach(({ userId }) => {
+          cardModel.users.add(userId);
+        });
+
+        payload.cardLabels.forEach(({ labelId }) => {
+          cardModel.labels.add(labelId);
+        });
+
+        break;
+      }
       case ActionTypes.CARD_UPDATE:
         Card.withId(payload.id).update(payload.data);
 
         break;
+      case ActionTypes.CARD_DUPLICATE: {
+        const cardModel = Card.withId(payload.id);
+
+        const nextCardModel = Card.upsert({
+          ...pick(cardModel.ref, [
+            'boardId',
+            'listId',
+            'position',
+            'name',
+            'description',
+            'dueDate',
+            'stopwatch',
+          ]),
+          ...payload.card,
+        });
+
+        cardModel.users.toRefArray().forEach(({ id }) => {
+          nextCardModel.users.add(id);
+        });
+
+        cardModel.labels.toRefArray().forEach(({ id }) => {
+          nextCardModel.labels.add(id);
+        });
+
+        break;
+      }
+      case ActionTypes.CARD_DUPLICATE__SUCCESS: {
+        Card.withId(payload.localId).deleteWithRelated();
+        const cardModel = Card.upsert(payload.card);
+
+        payload.cardMemberships.forEach(({ userId }) => {
+          cardModel.users.add(userId);
+        });
+
+        payload.cardLabels.forEach(({ labelId }) => {
+          cardModel.labels.add(labelId);
+        });
+
+        break;
+      }
       case ActionTypes.CARD_DELETE:
         Card.withId(payload.id).deleteWithRelated();
 

diff --git a/client/src/models/Task.js b/client/src/models/Task.js
@@ -1,5 +1,6 @@
 import { attr, fk } from 'redux-orm';
 
+import { createLocalId } from '../utils/local-id';
 import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 
@@ -44,10 +45,24 @@ export default class extends BaseModel {
 
         break;
       case ActionTypes.BOARD_FETCH__SUCCESS:
+      case ActionTypes.CARD_CREATE_HANDLE:
+      case ActionTypes.CARD_DUPLICATE__SUCCESS:
         payload.tasks.forEach((task) => {
           Task.upsert(task);
         });
 
+        break;
+      case ActionTypes.CARD_DUPLICATE:
+        payload.taskIds.forEach((taskId, index) => {
+          const taskModel = Task.withId(taskId);
+
+          Task.upsert({
+            ...taskModel.ref,
+            id: `${createLocalId()}-${index}`, // TODO: hack?
+            cardId: payload.card.id,
+          });
+        });
+
         break;
       case ActionTypes.TASK_CREATE:
       case ActionTypes.TASK_CREATE_HANDLE: