From 44a3c2a2ec7a5d744709a6e0cc05a7d656cbd263 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Fri, 28 Apr 2023 14:53:47 +0200
Subject: [PATCH 01/17] Added sorting of lists. Added sorting for name, id,
 position, createdAt, updatedAt, dueDate, creatorUserId

---
 client/src/actions/lists.js                   |  31 ++++
 client/src/components/Card/Card.jsx           |   2 +
 client/src/components/List/ActionsStep.jsx    | 136 +++++++++------
 client/src/components/List/List.jsx           |  17 +-
 client/src/components/SortStep/SortStep.jsx   | 164 ++++++++++++++++++
 .../components/SortStep/SortStep.module.scss  |   7 +
 client/src/components/SortStep/index.js       |   3 +
 client/src/constants/ActionTypes.js           |   4 +
 client/src/constants/EntryActionTypes.js      |   1 +
 client/src/containers/BoardsContainer.js      |   1 +
 client/src/containers/ListContainer.js        |   1 +
 client/src/entry-actions/lists.js             |   8 +
 client/src/locales/sv/core.js                 |  10 ++
 client/src/models/List.js                     |  65 ++++++-
 client/src/sagas/core/services/lists.js       |  18 ++
 client/src/sagas/core/watchers/lists.js       |   3 +
 client/src/sagas/core/watchers/socket.js      |   6 +
 package-lock.json                             |  12 +-
 18 files changed, 424 insertions(+), 65 deletions(-)
 create mode 100644 client/src/components/SortStep/SortStep.jsx
 create mode 100644 client/src/components/SortStep/SortStep.module.scss
 create mode 100644 client/src/components/SortStep/index.js

diff --git a/client/src/actions/lists.js b/client/src/actions/lists.js
index 59f944f..d48bbcf 100644
--- a/client/src/actions/lists.js
+++ b/client/src/actions/lists.js
@@ -89,6 +89,35 @@ const handleListDelete = (list) => ({
   },
 });
 
+const sortList = (id) => ({
+  type: ActionTypes.LIST_SORT,
+  payload: {
+    id,
+  },
+});
+
+sortList.success = (list) => ({
+  type: ActionTypes.LIST_SORT__SUCCESS,
+  payload: {
+    list,
+  },
+});
+
+sortList.failure = (id, error) => ({
+  type: ActionTypes.LIST_SORT__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleListSort = (list) => ({
+  type: ActionTypes.LIST_SORT_HANDLE,
+  payload: {
+    list,
+  },
+});
+
 export default {
   createList,
   handleListCreate,
@@ -96,4 +125,6 @@ export default {
   handleListUpdate,
   deleteList,
   handleListDelete,
+  sortList,
+  handleListSort,
 };
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index 37521a0..88d87a0 100755
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@@ -248,6 +248,8 @@ Card.propTypes = {
   onLabelUpdate: PropTypes.func.isRequired,
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
+  // onSortTitleAsc: PropTypes.func.isRequired,
+  // onSortTitleDesc: PropTypes.func.isRequired,
 };
 
 Card.defaultProps = {
diff --git a/client/src/components/List/ActionsStep.jsx b/client/src/components/List/ActionsStep.jsx
index 1e94d5a..b894339 100755
--- a/client/src/components/List/ActionsStep.jsx
+++ b/client/src/components/List/ActionsStep.jsx
@@ -6,78 +6,108 @@ import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
 import DeleteStep from '../DeleteStep';
+import SortStep from '../SortStep';
 
 import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   DELETE: 'DELETE',
+  SORT: 'SORT',
 };
 
-const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) => {
-  const [t] = useTranslation();
-  const [step, openStep, handleBack] = useSteps();
+const ActionsStep = React.memo(
+  ({ onNameEdit, onCardAdd, onDelete, onClose, onSort, selectedOption, setSelectedOption }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
 
-  const handleEditNameClick = useCallback(() => {
-    onNameEdit();
-    onClose();
-  }, [onNameEdit, onClose]);
+    const handleEditNameClick = useCallback(() => {
+      onNameEdit();
+      onClose();
+    }, [onNameEdit, onClose]);
 
-  const handleAddCardClick = useCallback(() => {
-    onCardAdd();
-    onClose();
-  }, [onCardAdd, onClose]);
+    const handleAddCardClick = useCallback(() => {
+      onCardAdd();
+      onClose();
+    }, [onCardAdd, onClose]);
 
-  const handleDeleteClick = useCallback(() => {
-    openStep(StepTypes.DELETE);
-  }, [openStep]);
+    const handleDeleteClick = useCallback(() => {
+      openStep(StepTypes.DELETE);
+    }, [openStep]);
+
+    const handleSortClick = useCallback(() => {
+      openStep(StepTypes.SORT);
+    }, [openStep]);
+
+    if (step && step.type === StepTypes.DELETE) {
+      return (
+        <DeleteStep
+          title="common.deleteList"
+          content="common.areYouSureYouWantToDeleteThisList"
+          buttonContent="action.deleteList"
+          onConfirm={onDelete}
+          onBack={handleBack}
+        />
+      );
+    }
+
+    if (step && step.type === StepTypes.SORT) {
+      return (
+        <SortStep
+          title="common.sortList"
+          content="common.areYouSureYouWantToSortThisList"
+          buttonContent="action.sortList"
+          onConfirm={onSort}
+          onBack={handleBack}
+          selectedOption={selectedOption}
+          setSelectedOption={setSelectedOption}
+        />
+      );
+    }
 
-  if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
-        title="common.deleteList"
-        content="common.areYouSureYouWantToDeleteThisList"
-        buttonContent="action.deleteList"
-        onConfirm={onDelete}
-        onBack={handleBack}
-      />
+      <>
+        <Popup.Header>
+          {t('common.listActions', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              {t('action.editTitle', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
+              {t('action.addCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              {t('action.deleteList', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
+              {t('action.sortList', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
     );
-  }
-
-  return (
-    <>
-      <Popup.Header>
-        {t('common.listActions', {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
-            {t('action.editTitle', {
-              context: 'title',
-            })}
-          </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
-            {t('action.addCard', {
-              context: 'title',
-            })}
-          </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
-            {t('action.deleteList', {
-              context: 'title',
-            })}
-          </Menu.Item>
-        </Menu>
-      </Popup.Content>
-    </>
-  );
-});
+  },
+);
 
 ActionsStep.propTypes = {
   onNameEdit: PropTypes.func.isRequired,
   onCardAdd: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
+  onSort: PropTypes.func.isRequired,
+  selectedOption: PropTypes.string.isRequired,
+  setSelectedOption: PropTypes.func.isRequired,
 };
 
 export default ActionsStep;
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index f09116c..dd140fb 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
-import { usePopup } from '../../lib/popup';
+import { usePopup, closePopup } from '../../lib/popup';
 
 import DroppableTypes from '../../constants/DroppableTypes';
 import CardContainer from '../../containers/CardContainer';
@@ -19,6 +19,7 @@ const List = React.memo(
   ({ id, index, name, isPersisted, cardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('name');
 
     const nameEdit = useRef(null);
     const listWrapper = useRef(null);
@@ -40,11 +41,11 @@ const List = React.memo(
 
     const handleAddCardClick = useCallback(() => {
       setIsAddCardOpened(true);
-    }, []);
+    }, [setIsAddCardOpened]);
 
     const handleAddCardClose = useCallback(() => {
       setIsAddCardOpened(false);
-    }, []);
+    }, [setIsAddCardOpened]);
 
     const handleNameEdit = useCallback(() => {
       nameEdit.current.open();
@@ -52,7 +53,12 @@ const List = React.memo(
 
     const handleCardAdd = useCallback(() => {
       setIsAddCardOpened(true);
-    }, []);
+    }, [setIsAddCardOpened]);
+
+    const onSort = useCallback(() => {
+      onUpdate({ selectedOption: document.querySelector('input[name="sort"]:checked').value });
+      closePopup();
+    }, [onUpdate]);
 
     useEffect(() => {
       if (isAddCardOpened) {
@@ -114,6 +120,9 @@ const List = React.memo(
                     onNameEdit={handleNameEdit}
                     onCardAdd={handleCardAdd}
                     onDelete={onDelete}
+                    onSort={onSort}
+                    selectedOption={selectedOption}
+                    setSelectedOption={setSelectedOption}
                   >
                     <Button className={classNames(styles.headerButton, styles.target)}>
                       <Icon fitted name="pencil" size="small" />
diff --git a/client/src/components/SortStep/SortStep.jsx b/client/src/components/SortStep/SortStep.jsx
new file mode 100644
index 0000000..d7ad6fc
--- /dev/null
+++ b/client/src/components/SortStep/SortStep.jsx
@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import styles from './SortStep.module.scss';
+
+const SortStep = React.memo(
+  ({ title, content, buttonContent, onBack, onConfirm, selectedOption, setSelectedOption }) => {
+    const [t] = useTranslation();
+
+    const [checked, setChecked] = useState(false);
+
+    function handleChange(event) {
+      setSelectedOption(event.target.id);
+    }
+
+    const updateState = () => {
+      if (checked) {
+        setChecked(false);
+      } else {
+        setChecked(true);
+      }
+    };
+
+    function changeEvent(event) {
+      handleChange(event);
+      updateState();
+    }
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <div className={styles.content}>{t(content)}</div>
+          <div>
+            <label htmlFor="name">
+              <input
+                type="radio"
+                id="name"
+                name="sort"
+                value="name"
+                onChange={changeEvent}
+                checked={selectedOption === 'name'}
+              />
+              {t('action.sortByTitleList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+
+            <label htmlFor="id">
+              <input
+                type="radio"
+                id="id"
+                name="sort"
+                value="id"
+                onChange={changeEvent}
+                checked={selectedOption === 'id'}
+              />
+              {t('action.sortByIdList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+            <label htmlFor="position">
+              <input
+                type="radio"
+                id="position"
+                name="sort"
+                value="position"
+                onChange={changeEvent}
+                checked={selectedOption === 'position'}
+              />
+              {t('action.sortByPositionList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+            <label htmlFor="createdAt">
+              <input
+                type="radio"
+                id="createdAt"
+                name="sort"
+                value="createdAt"
+                onChange={changeEvent}
+                checked={selectedOption === 'createdAt'}
+              />
+              {t('action.sortByCreatedAt', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+            <label htmlFor="updatedAt">
+              <input
+                type="radio"
+                id="updatedAt"
+                name="sort"
+                value="updatedAt"
+                onChange={changeEvent}
+                checked={selectedOption === 'updatedAt'}
+              />
+              {t('action.sortByUpdatedAtList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+            <label htmlFor="dueDate">
+              <input
+                type="radio"
+                id="dueDate"
+                name="sort"
+                value="dueDate"
+                onChange={changeEvent}
+                checked={selectedOption === 'dueDate'}
+              />
+              {t('action.sortByDueDateList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+            <label htmlFor="creatorUserId">
+              <input
+                type="radio"
+                id="creatorUserId"
+                name="sort"
+                value="creatorUserId"
+                onChange={changeEvent}
+                checked={selectedOption === 'creatorUserId'}
+              />
+              {t('action.sortByCreatorUserIdList', {
+                context: 'title',
+              })}
+            </label>
+            <br />
+          </div>
+
+          <Button fluid negative content={t(buttonContent)} onClick={onConfirm} />
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+SortStep.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  buttonContent: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  selectedOption: PropTypes.string.isRequired,
+  setSelectedOption: PropTypes.func.isRequired,
+};
+
+SortStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default SortStep;
diff --git a/client/src/components/SortStep/SortStep.module.scss b/client/src/components/SortStep/SortStep.module.scss
new file mode 100644
index 0000000..46135a9
--- /dev/null
+++ b/client/src/components/SortStep/SortStep.module.scss
@@ -0,0 +1,7 @@
+:global(#app) {
+  .content {
+    color: #212121;
+    padding-bottom: 6px;
+    padding-left: 2px;
+  }
+}
diff --git a/client/src/components/SortStep/index.js b/client/src/components/SortStep/index.js
new file mode 100644
index 0000000..4388a89
--- /dev/null
+++ b/client/src/components/SortStep/index.js
@@ -0,0 +1,3 @@
+import SortStep from './SortStep';
+
+export default SortStep;
diff --git a/client/src/constants/ActionTypes.js b/client/src/constants/ActionTypes.js
index 4b07530..5fdc430 100644
--- a/client/src/constants/ActionTypes.js
+++ b/client/src/constants/ActionTypes.js
@@ -172,6 +172,10 @@ export default {
   LIST_DELETE__SUCCESS: 'LIST_DELETE__SUCCESS',
   LIST_DELETE__FAILURE: 'LIST_DELETE__FAILURE',
   LIST_DELETE_HANDLE: 'LIST_DELETE_HANDLE',
+  LIST_SORT: 'LIST_SORT',
+  LIST_SORT__SUCCESS: 'LIST_SORT__SUCCESS',
+  LIST_SORT__FAILURE: 'LIST_SORT__FAILURE',
+  LIST_SORT_HANDLE: 'LIST_SORT_HANDLE',
 
   /* Cards */
 
diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
index 1a7f241..a43869d 100755
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@@ -120,6 +120,7 @@ export default {
   LIST_MOVE: `${PREFIX}/LIST_MOVE`,
   LIST_DELETE: `${PREFIX}/LIST_DELETE`,
   LIST_DELETE_HANDLE: `${PREFIX}/LIST_DELETE_HANDLE`,
+  LIST_SORT_HANDLE: `${PREFIX}/LIST_SORT_HANDLE`,
 
   /* Cards */
 
diff --git a/client/src/containers/BoardsContainer.js b/client/src/containers/BoardsContainer.js
index a8bbf2e..fcca8ec 100755
--- a/client/src/containers/BoardsContainer.js
+++ b/client/src/containers/BoardsContainer.js
@@ -24,6 +24,7 @@ const mapDispatchToProps = (dispatch) =>
       onUpdate: entryActions.updateBoard,
       onMove: entryActions.moveBoard,
       onDelete: entryActions.deleteBoard,
+      onSort: entryActions.sortBoard,
     },
     dispatch,
   );
diff --git a/client/src/containers/ListContainer.js b/client/src/containers/ListContainer.js
index cb2f6a0..f50afc0 100755
--- a/client/src/containers/ListContainer.js
+++ b/client/src/containers/ListContainer.js
@@ -35,6 +35,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onUpdate: (data) => entryActions.updateList(id, data),
       onDelete: () => entryActions.deleteList(id),
       onCardCreate: (data, autoOpen) => entryActions.createCard(id, data, autoOpen),
+      onSort: (data) => entryActions.sortList(id, data),
     },
     dispatch,
   );
diff --git a/client/src/entry-actions/lists.js b/client/src/entry-actions/lists.js
index 97350c1..9c598e7 100755
--- a/client/src/entry-actions/lists.js
+++ b/client/src/entry-actions/lists.js
@@ -51,6 +51,13 @@ const handleListDelete = (list) => ({
   },
 });
 
+const handleListSort = (list) => ({
+  type: EntryActionTypes.LIST_SORT_HANDLE,
+  payload: {
+    list,
+  },
+});
+
 export default {
   createListInCurrentBoard,
   handleListCreate,
@@ -59,4 +66,5 @@ export default {
   moveList,
   deleteList,
   handleListDelete,
+  handleListSort,
 };
diff --git a/client/src/locales/sv/core.js b/client/src/locales/sv/core.js
index 3416364..8478d03 100644
--- a/client/src/locales/sv/core.js
+++ b/client/src/locales/sv/core.js
@@ -32,6 +32,7 @@ export default {
         'Är du säker på att du vill ta bort den här kommentaren?',
       areYouSureYouWantToDeleteThisLabel: 'Är du säker på att du vill ta bort den här etiketten?',
       areYouSureYouWantToDeleteThisList: 'Är du säker på att du vill ta bort den här listan?',
+      areYouSureYouWantToSortThisList: 'Är du säker på att du vill sortera den här listan?',
       areYouSureYouWantToDeleteThisProject: 'Är du säker på att du vill ta bort det här projektet?',
       areYouSureYouWantToDeleteThisTask: 'Är du säker på att du vill ta bort den här uppgiften?',
       areYouSureYouWantToDeleteThisUser: 'Är du säker på att du vill ta bort den här användaren?',
@@ -129,6 +130,7 @@ export default {
       selectList: 'Välj lista',
       selectProject: 'Välj projekt',
       settings: 'Inställningar',
+      sortList: 'Sortera listan',
       stopwatch: 'Timer',
       subscribeToMyOwnCardsByDefault: 'Prenumerera på mina egna kort som standard',
       taskActions_title: 'Uppgiftsåtgärder',
@@ -205,6 +207,14 @@ export default {
       save: 'Spara',
       showAllAttachments: 'Visa alla bilagor ({{hidden}} dolda)',
       showFewerAttachments: 'Visa färre bilagor',
+      sortByCreatedAt: ' Sortera på skapad',
+      sortByCreatorUserIdList: ' Sortera på skapad av',
+      sortByDueDateList: ' Sortera på förfallodatum',
+      sortByIdList: ' Sortera på id',
+      sortByPositionList: ' Sortera på position',
+      sortByTitleList: ' Sortera på titel',
+      sortByUpdatedAtList: ' Sortera på uppdaterad',
+      sortList: 'Sortera listan',
       start: 'Starta',
       stop: 'Stoppa',
       subscribe: 'Prenumerera',
diff --git a/client/src/models/List.js b/client/src/models/List.js
index b634a66..8f11639 100755
--- a/client/src/models/List.js
+++ b/client/src/models/List.js
@@ -76,16 +76,77 @@ export default class extends BaseModel {
 
         break;
       }
+      case ActionTypes.LIST_SORT:
+        List.withId(payload.id).sortList();
+        break;
+      case ActionTypes.LIST_SORT__SUCCESS:
+      case ActionTypes.LIST_SORT_HANDLE: {
+        const listModel = List.withId(payload.list.id);
+
+        if (listModel) {
+          listModel.sortList();
+        }
+
+        break;
+      }
       default:
     }
   }
 
-  getOrderedCardsQuerySet() {
+  getOrderedByIdCardsQuerySet() {
+    return this.cards.orderBy('id');
+  }
+
+  getOrderedByPositionCardsQuerySet() {
     return this.cards.orderBy('position');
   }
 
+  getOrderedByTitelCardsQuerySet() {
+    return this.cards.orderBy('name');
+  }
+
+  getOrderedByCreatedAtCardsQuerySet() {
+    return this.cards.orderBy('createdAt');
+  }
+
+  getOrderedByUpdatedAtCardsQuerySet() {
+    return this.cards.orderBy('updatedAt');
+  }
+
+  getOrderedByDueDateCardsQuerySet() {
+    return this.cards.orderBy('dueDate');
+  }
+
   getFilteredOrderedCardsModelArray() {
-    let cardModels = this.getOrderedCardsQuerySet().toModelArray();
+    const sortby = this.selectedOption;
+
+    let cardModels = null;
+
+    switch (sortby) {
+      case 'name':
+        cardModels = this.getOrderedByTitelCardsQuerySet().toModelArray();
+        break;
+      case 'id':
+        cardModels = this.getOrderedByIdCardsQuerySet().toModelArray();
+        break;
+      case 'position':
+        cardModels = this.getOrderedByPositionCardsQuerySet().toModelArray();
+        break;
+      case 'createdAt':
+        cardModels = this.getOrderedByCreatedAtCardsQuerySet().toModelArray();
+        break;
+      case 'updatedAt':
+        cardModels = this.getOrderedByUpdatedAtCardsQuerySet().toModelArray();
+        break;
+      case 'dueDate':
+        cardModels = this.getOrderedByDueDateCardsQuerySet().toModelArray();
+        break;
+      case 'creatorUserId':
+        cardModels = this.getOrderedByDueDateCardsQuerySet().toModelArray();
+        break;
+      default:
+        cardModels = this.getOrderedByPositionCardsQuerySet().toModelArray();
+    }
 
     const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);
     const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id);
diff --git a/client/src/sagas/core/services/lists.js b/client/src/sagas/core/services/lists.js
index d9dd718..c630d41 100644
--- a/client/src/sagas/core/services/lists.js
+++ b/client/src/sagas/core/services/lists.js
@@ -61,6 +61,24 @@ export function* handleListUpdate(list) {
   yield put(actions.handleListUpdate(list));
 }
 
+export function* sortList(id, data) {
+  yield put(actions.sortList(id, data));
+
+  let list;
+  try {
+    ({ item: list } = yield call(request, api.sortList, id, data));
+  } catch (error) {
+    yield put(actions.sortList.failure(id, error));
+    return;
+  }
+
+  yield put(actions.sortList.success(list));
+}
+
+export function* handleListSort(list) {
+  yield put(actions.handleListSort(list));
+}
+
 export function* moveList(id, index) {
   const { boardId } = yield select(selectors.selectListById, id);
   const position = yield select(selectors.selectNextListPosition, boardId, index, id);
diff --git a/client/src/sagas/core/watchers/lists.js b/client/src/sagas/core/watchers/lists.js
index 028881e..c7a6ad1 100644
--- a/client/src/sagas/core/watchers/lists.js
+++ b/client/src/sagas/core/watchers/lists.js
@@ -17,6 +17,9 @@ export default function* listsWatchers() {
     takeEvery(EntryActionTypes.LIST_UPDATE_HANDLE, ({ payload: { list } }) =>
       services.handleListUpdate(list),
     ),
+    takeEvery(EntryActionTypes.LIST_SORT_HANDLE, ({ payload: { list } }) =>
+      services.handleListSort(list),
+    ),
     takeEvery(EntryActionTypes.LIST_MOVE, ({ payload: { id, index } }) =>
       services.moveList(id, index),
     ),
diff --git a/client/src/sagas/core/watchers/socket.js b/client/src/sagas/core/watchers/socket.js
index ef6bed9..4b73dd2 100644
--- a/client/src/sagas/core/watchers/socket.js
+++ b/client/src/sagas/core/watchers/socket.js
@@ -84,6 +84,10 @@ const createSocketEventsChannel = () =>
       emit(entryActions.handleListDelete(item));
     };
 
+    const handleListSort = ({ item }) => {
+      emit(entryActions.handleListSort(item));
+    };
+
     const handleLabelCreate = ({ item }) => {
       emit(entryActions.handleLabelCreate(item));
     };
@@ -193,6 +197,7 @@ const createSocketEventsChannel = () =>
     socket.on('listCreate', handleListCreate);
     socket.on('listUpdate', handleListUpdate);
     socket.on('listDelete', handleListDelete);
+    socket.on('listSort', handleListSort);
 
     socket.on('labelCreate', handleLabelCreate);
     socket.on('labelUpdate', handleLabelUpdate);
@@ -249,6 +254,7 @@ const createSocketEventsChannel = () =>
       socket.off('listCreate', handleListCreate);
       socket.off('listUpdate', handleListUpdate);
       socket.off('listDelete', handleListDelete);
+      socket.off('listSort', handleListSort);
 
       socket.off('labelCreate', handleLabelCreate);
       socket.off('labelUpdate', handleLabelUpdate);
diff --git a/package-lock.json b/package-lock.json
index 25768c5..228dd12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2039,9 +2039,9 @@
       }
     },
     "node_modules/yaml": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
-      "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
       "engines": {
         "node": ">= 14"
       }
@@ -3510,9 +3510,9 @@
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
     },
     "yaml": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
-      "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA=="
     },
     "yargs": {
       "version": "17.6.2",

From 191639f0677b4c343ae65ec68f90bd7a554fb752 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Thu, 4 May 2023 15:52:17 +0200
Subject: [PATCH 02/17] Added translations in english for sorting

---
 client/src/locales/en/core.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index ab165d3..b3013d3 100644
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@@ -27,6 +27,7 @@ export default {
       areYouSureYouWantToDeleteThisComment: 'Are you sure you want to delete this comment?',
       areYouSureYouWantToDeleteThisLabel: 'Are you sure you want to delete this label?',
       areYouSureYouWantToDeleteThisList: 'Are you sure you want to delete this list?',
+      areYouSureYouWantToSortThisList: 'Are you sure you want to sort this list?',
       areYouSureYouWantToDeleteThisProject: 'Are you sure you want to delete this project?',
       areYouSureYouWantToDeleteThisTask: 'Are you sure you want to delete this task?',
       areYouSureYouWantToDeleteThisUser: 'Are you sure you want to delete this user?',
@@ -135,6 +136,7 @@ export default {
       seconds: 'Seconds',
       selectBoard: 'Select board',
       selectList: 'Select list',
+      sortList: 'Sort list',
       selectPermissions_title: 'Select Permissions',
       selectProject: 'Select project',
       settings: 'Settings',
@@ -223,6 +225,14 @@ export default {
       showAllAttachments: 'Show all attachments ({{hidden}} hidden)',
       showDetails: 'Show details',
       showFewerAttachments: 'Show fewer attachments',
+      sortByCreatedAt: ' Sort by created at',
+      sortByCreatorUserIdList: ' Sort by creator',
+      sortByDueDateList: ' Sort by due date',
+      sortByIdList: ' Sort by id',
+      sortByPositionList: ' Sort by position',
+      sortByTitleList: ' Sort by title',
+      sortByUpdatedAtList: ' Sort by updated at',
+      sortList: 'Sort list',
       start: 'Start',
       stop: 'Stop',
       subscribe: 'Subscribe',

From b273a4f68b8753f8a8b1e539e2fb140f9ebd2b9b Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Mon, 15 May 2023 14:10:31 +0200
Subject: [PATCH 03/17] Added copy button code from copy-button-added #346 on
 github

---
 client/src/components/CardModal/CardModal.jsx | 27 +++++++++++++++++++
 client/src/lib/popup/index.js                 |  3 ++-
 client/src/locales/en/core.js                 |  6 ++++-
 client/src/locales/sv/core.js                 |  4 +++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index d72ccca..7a07f7a 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -24,6 +24,7 @@ import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
+import CardCopyPopup from '../CardCopyPopup';
 
 import styles from './CardModal.module.scss';
 
@@ -493,6 +494,32 @@ const CardModal = React.memo(
                     {t('action.move')}
                   </Button>
                 </CardMovePopup>
+                <CardCopyPopup
+                  projectsToLists={allProjectsToLists}
+                  defaultPath={{
+                    name,
+                    description,
+                    users,
+                    labels,
+                    tasks,
+                    attachments,
+                    projectId,
+                    boardId,
+                    listId,
+                  }}
+                  onMove={onMove}
+                  onTransfer={onTransfer}
+                  onBoardFetch={onBoardFetch}
+                >
+                  <Button
+                    fluid
+                    className={styles.actionButton}
+                    // onClick={handleToggleSubscriptionClick}
+                  >
+                    <Icon name="copy outline" className={styles.actionIcon} />
+                    {t('action.copy')}
+                  </Button>
+                </CardCopyPopup>
                 <DeletePopup
                   title="common.deleteCard"
                   content="common.areYouSureYouWantToDeleteThisCard"
diff --git a/client/src/lib/popup/index.js b/client/src/lib/popup/index.js
index e085abb..2c382f4 100755
--- a/client/src/lib/popup/index.js
+++ b/client/src/lib/popup/index.js
@@ -1,4 +1,5 @@
 import usePopup from './use-popup';
 import closePopup from './close-popup';
+import withPopup from './with-popup';
 
-export { usePopup, closePopup };
+export { usePopup, closePopup, withPopup };
diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index b3013d3..ffaf538 100644
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@@ -21,13 +21,13 @@ export default {
       all: 'All',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
         'All changes will be automatically saved<br />after connection restored',
+      areYouSureYouWantToCopyThisCard: 'Are you sure you want to copy this card',
       areYouSureYouWantToDeleteThisAttachment: 'Are you sure you want to delete this attachment?',
       areYouSureYouWantToDeleteThisBoard: 'Are you sure you want to delete this board?',
       areYouSureYouWantToDeleteThisCard: 'Are you sure you want to delete this card?',
       areYouSureYouWantToDeleteThisComment: 'Are you sure you want to delete this comment?',
       areYouSureYouWantToDeleteThisLabel: 'Are you sure you want to delete this label?',
       areYouSureYouWantToDeleteThisList: 'Are you sure you want to delete this list?',
-      areYouSureYouWantToSortThisList: 'Are you sure you want to sort this list?',
       areYouSureYouWantToDeleteThisProject: 'Are you sure you want to delete this project?',
       areYouSureYouWantToDeleteThisTask: 'Are you sure you want to delete this task?',
       areYouSureYouWantToDeleteThisUser: 'Are you sure you want to delete this user?',
@@ -37,6 +37,7 @@ export default {
         'Are you sure you want to remove this manager from the project?',
       areYouSureYouWantToRemoveThisMemberFromBoard:
         'Are you sure you want to remove this member from the board?',
+      areYouSureYouWantToSortThisList: 'Are you sure you want to sort this list?',
       attachment: 'Attachment',
       attachments: 'Attachments',
       authentication: 'Authentication',
@@ -50,6 +51,7 @@ export default {
       cardNotFound_title: 'Card Not Found',
       cardOrActionAreDeleted: 'Card or action are deleted',
       color: 'Color',
+      copyCard: 'Copy card',
       createBoard_title: 'Create Board',
       createLabel_title: 'Create Label',
       createNewOneOrSelectExistingOne: 'Create a new one or select<br />an existing one',
@@ -175,6 +177,8 @@ export default {
       addTask: 'Add task',
       addToCard: 'Add to card',
       addUser: 'Add user',
+      copy: 'Copy',
+      copyCard: 'Copy card',
       createBoard: 'Create board',
       createFile: 'Create file',
       createLabel: 'Create label',
diff --git a/client/src/locales/sv/core.js b/client/src/locales/sv/core.js
index 8478d03..6fea429 100644
--- a/client/src/locales/sv/core.js
+++ b/client/src/locales/sv/core.js
@@ -24,6 +24,7 @@ export default {
       all: 'Alla',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
         'Alla ändringar kommer att sparas automatiskt<br />så fort anslutningen är återställd',
+      areYouSureYouWantToCopyThisCard: 'Är du säker på att du vill kopiera det här kortet',
       areYouSureYouWantToDeleteThisAttachment:
         'Är du säker på att du vill ta bort den här bilagan?',
       areYouSureYouWantToDeleteThisBoard: 'Är du säker på att du vill ta bort den här tavlan?',
@@ -52,6 +53,7 @@ export default {
       cardNotFound_title: 'Kort Ej Funnet',
       cardOrActionAreDeleted: 'Kort eller åtgärd är borttagen',
       color: 'Färg',
+      copyCard: 'Kopiera kort',
       createBoard_title: 'Skapa Tavla',
       createLabel_title: 'Skapa Etikett',
       createNewOneOrSelectExistingOne: 'Skapa en ny eller välj<br />en redan existerande',
@@ -162,6 +164,8 @@ export default {
       addTask: 'Lägg till uppgift',
       addToCard: 'Lägg till i kort',
       addUser: 'Lägg till användare',
+      copy: 'Kopiera',
+      copyCard: 'Kopiera kort',
       createBoard: 'Skapa tavla',
       createFile: 'Skapa fil',
       createLabel: 'Skapa etikett',

From 21fc0f560a435ab9eefb11c074387a3aad770909 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Tue, 16 May 2023 16:44:47 +0200
Subject: [PATCH 04/17] =?UTF-8?q?Add=C3=ADng=20code=20where=20copying=20fr?=
 =?UTF-8?q?om=20list=20works=20but=20from=20opened=20card=20does=20not.=20?=
 =?UTF-8?q?Copying=20content=20on=20card=20does=20not=20work=20from=20any?=
 =?UTF-8?q?=20place.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/actions/cards.js                   |  31 +++
 .../src/components/BoardActions/Filters.jsx   |   3 +
 client/src/components/Boards/Boards.jsx       | 198 +++++++++---------
 client/src/components/Card/ActionsStep.jsx    |  32 +++
 client/src/components/Card/Card.jsx           |   3 +
 client/src/components/CardCopyPopup.jsx       |   5 +
 .../components/CardCopyStep/CardCopyStep.jsx  | 169 +++++++++++++++
 .../CardCopyStep/CardCopyStep.module.scss     |  12 ++
 client/src/components/CardCopyStep/index.js   |   3 +
 client/src/components/CardModal/CardModal.jsx |  58 ++++-
 .../components/CardMoveStep/CardMoveStep.jsx  |  14 +-
 .../src/components/LabelsStep/LabelsStep.jsx  |   5 +
 client/src/components/List/List.jsx           |  16 +-
 client/src/constants/ActionTypes.js           |   2 +
 client/src/constants/EntryActionTypes.js      |   2 +
 client/src/constants/Enums.js                 |   1 +
 client/src/containers/BoardContainer.js       |   1 +
 client/src/containers/BoardsContainer.js      |   1 +
 client/src/containers/CardContainer.js        |   1 +
 client/src/containers/CardModalContainer.js   |   1 +
 client/src/entry-actions/cards.js             |  10 +
 client/src/lib/popup/with-popup.jsx           | 109 ++++++++++
 client/src/sagas/core/watchers/cards.js       |   4 +
 server/api/models/Action.js                   |   1 +
 24 files changed, 573 insertions(+), 109 deletions(-)
 create mode 100644 client/src/components/CardCopyPopup.jsx
 create mode 100644 client/src/components/CardCopyStep/CardCopyStep.jsx
 create mode 100644 client/src/components/CardCopyStep/CardCopyStep.module.scss
 create mode 100644 client/src/components/CardCopyStep/index.js
 create mode 100644 client/src/lib/popup/with-popup.jsx

diff --git a/client/src/actions/cards.js b/client/src/actions/cards.js
index 0969910..509c3f7 100644
--- a/client/src/actions/cards.js
+++ b/client/src/actions/cards.js
@@ -89,6 +89,35 @@ const handleCardDelete = (card) => ({
   },
 });
 
+const copyCard = (id) => ({
+  type: ActionTypes.CARD_COPY,
+  payload: {
+    id,
+  },
+});
+
+copyCard.success = (card) => ({
+  type: ActionTypes.CARD_COPY__SUCCESS,
+  payload: {
+    card,
+  },
+});
+
+copyCard.failure = (id, error) => ({
+  type: ActionTypes.CARD_COPY__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleCardCopy = (card) => ({
+  type: ActionTypes.CARD_COPY_HANDLE,
+  payload: {
+    card,
+  },
+});
+
 export default {
   createCard,
   handleCardCreate,
@@ -96,4 +125,6 @@ export default {
   handleCardUpdate,
   deleteCard,
   handleCardDelete,
+  copyCard,
+  handleCardCopy,
 };
diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx
index c4e61c6..5542f51 100644
--- a/client/src/components/BoardActions/Filters.jsx
+++ b/client/src/components/BoardActions/Filters.jsx
@@ -25,6 +25,7 @@ const Filters = React.memo(
     onLabelUpdate,
     onLabelMove,
     onLabelDelete,
+    // onCopyCard,
   }) => {
     const [t] = useTranslation();
 
@@ -83,6 +84,7 @@ const Filters = React.memo(
             onUpdate={onLabelUpdate}
             onMove={onLabelMove}
             onDelete={onLabelDelete}
+            // onCopyCard={onCopyCard}
           >
             <button type="button" className={styles.filterButton}>
               <span className={styles.filterTitle}>{`${t('common.labels')}:`}</span>
@@ -121,6 +123,7 @@ Filters.propTypes = {
   onLabelUpdate: PropTypes.func.isRequired,
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
+  // onCopyCard: PropTypes.func.isRequired,
 };
 
 export default Filters;
diff --git a/client/src/components/Boards/Boards.jsx b/client/src/components/Boards/Boards.jsx
index fad2047..fda6102 100755
--- a/client/src/components/Boards/Boards.jsx
+++ b/client/src/components/Boards/Boards.jsx
@@ -14,115 +14,118 @@ import EditStep from './EditStep';
 
 import styles from './Boards.module.scss';
 
-const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
-  const tabsWrapper = useRef(null);
+const Boards = React.memo(
+  ({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete, onCopyCard }) => {
+    const tabsWrapper = useRef(null);
 
-  const handleWheel = useCallback(({ deltaY }) => {
-    tabsWrapper.current.scrollBy({
-      left: deltaY,
-    });
-  }, []);
+    const handleWheel = useCallback(({ deltaY }) => {
+      tabsWrapper.current.scrollBy({
+        left: deltaY,
+      });
+    }, []);
 
-  const handleDragStart = useCallback(() => {
-    closePopup();
-  }, []);
+    const handleDragStart = useCallback(() => {
+      closePopup();
+    }, []);
 
-  const handleDragEnd = useCallback(
-    ({ draggableId, source, destination }) => {
-      if (!destination || source.index === destination.index) {
-        return;
-      }
+    const handleDragEnd = useCallback(
+      ({ draggableId, source, destination }) => {
+        if (!destination || source.index === destination.index) {
+          return;
+        }
 
-      onMove(draggableId, destination.index);
-    },
-    [onMove],
-  );
+        onMove(draggableId, destination.index);
+      },
+      [onMove],
+    );
 
-  const handleUpdate = useCallback(
-    (id, data) => {
-      onUpdate(id, data);
-    },
-    [onUpdate],
-  );
+    const handleUpdate = useCallback(
+      (id, data) => {
+        onUpdate(id, data);
+      },
+      [onUpdate],
+    );
 
-  const handleDelete = useCallback(
-    (id) => {
-      onDelete(id);
-    },
-    [onDelete],
-  );
+    const handleDelete = useCallback(
+      (id) => {
+        onDelete(id);
+      },
+      [onDelete],
+    );
 
-  const AddPopup = usePopup(AddStep);
-  const EditPopup = usePopup(EditStep);
+    const AddPopup = usePopup(AddStep);
+    const EditPopup = usePopup(EditStep);
 
-  const itemsNode = items.map((item, index) => (
-    <Draggable
-      key={item.id}
-      draggableId={item.id}
-      index={index}
-      isDragDisabled={!item.isPersisted || !canEdit}
-    >
-      {({ innerRef, draggableProps, dragHandleProps }) => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
-          <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
-            {item.isPersisted ? (
-              <>
-                <Link
-                  {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-                  to={Paths.BOARDS.replace(':id', item.id)}
-                  title={item.name}
-                  className={styles.link}
-                >
-                  {item.name}
-                </Link>
-                {canEdit && (
-                  <EditPopup
-                    defaultData={pick(item, 'name')}
-                    onUpdate={(data) => handleUpdate(item.id, data)}
-                    onDelete={() => handleDelete(item.id)}
+    const itemsNode = items.map((item, index) => (
+      <Draggable
+        key={item.id}
+        draggableId={item.id}
+        index={index}
+        isDragDisabled={!item.isPersisted || !canEdit}
+      >
+        {({ innerRef, draggableProps, dragHandleProps }) => (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
+            <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
+              {item.isPersisted ? (
+                <>
+                  <Link
+                    {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                    to={Paths.BOARDS.replace(':id', item.id)}
+                    title={item.name}
+                    className={styles.link}
                   >
-                    <Button className={classNames(styles.editButton, styles.target)}>
-                      <Icon fitted name="pencil" size="small" />
-                    </Button>
-                  </EditPopup>
-                )}
-              </>
-            ) : (
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              <span {...dragHandleProps} className={styles.link}>
-                {item.name}
-              </span>
-            )}
+                    {item.name}
+                  </Link>
+                  {canEdit && (
+                    <EditPopup
+                      defaultData={pick(item, 'name')}
+                      onUpdate={(data) => handleUpdate(item.id, data)}
+                      onDelete={() => handleDelete(item.id)}
+                      onCopyCard={onCopyCard}
+                    >
+                      <Button className={classNames(styles.editButton, styles.target)}>
+                        <Icon fitted name="pencil" size="small" />
+                      </Button>
+                    </EditPopup>
+                  )}
+                </>
+              ) : (
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                <span {...dragHandleProps} className={styles.link}>
+                  {item.name}
+                </span>
+              )}
+            </div>
           </div>
-        </div>
-      )}
-    </Draggable>
-  ));
+        )}
+      </Draggable>
+    ));
 
-  return (
-    <div className={styles.wrapper} onWheel={handleWheel}>
-      <div ref={tabsWrapper} className={styles.tabsWrapper}>
-        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
-            {({ innerRef, droppableProps, placeholder }) => (
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              <div {...droppableProps} ref={innerRef} className={styles.tabs}>
-                {itemsNode}
-                {placeholder}
-                {canEdit && (
-                  <AddPopup onCreate={onCreate}>
-                    <Button icon="plus" className={styles.addButton} />
-                  </AddPopup>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
+    return (
+      <div className={styles.wrapper} onWheel={handleWheel}>
+        <div ref={tabsWrapper} className={styles.tabsWrapper}>
+          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+              {({ innerRef, droppableProps, placeholder }) => (
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                  {itemsNode}
+                  {placeholder}
+                  {canEdit && (
+                    <AddPopup onCreate={onCreate} onCopyCard={onCopyCard}>
+                      <Button icon="plus" className={styles.addButton} />
+                    </AddPopup>
+                  )}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 Boards.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -132,6 +135,7 @@ Boards.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 Boards.defaultProps = {
diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
index dbd349e..185b4d1 100644
--- a/client/src/components/Card/ActionsStep.jsx
+++ b/client/src/components/Card/ActionsStep.jsx
@@ -12,6 +12,7 @@ import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
+import CardCopyStep from '../CardCopyStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -22,6 +23,7 @@ const StepTypes = {
   EDIT_STOPWATCH: 'EDIT_STOPWATCH',
   MOVE: 'MOVE',
   DELETE: 'DELETE',
+  COPY: 'COPY',
 };
 
 const ActionsStep = React.memo(
@@ -47,6 +49,7 @@ const ActionsStep = React.memo(
     onLabelMove,
     onLabelDelete,
     onClose,
+    onCopyCard,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
@@ -76,6 +79,10 @@ const ActionsStep = React.memo(
       openStep(StepTypes.MOVE);
     }, [openStep]);
 
+    const handleCopyClick = useCallback(() => {
+      openStep(StepTypes.COPY);
+    }, [openStep]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
@@ -108,6 +115,7 @@ const ActionsStep = React.memo(
               onUserSelect={onUserAdd}
               onUserDeselect={onUserRemove}
               onBack={handleBack}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.LABELS:
@@ -122,6 +130,7 @@ const ActionsStep = React.memo(
               onMove={onLabelMove}
               onDelete={onLabelDelete}
               onBack={handleBack}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT_DUE_DATE:
@@ -131,6 +140,7 @@ const ActionsStep = React.memo(
               onUpdate={handleDueDateUpdate}
               onBack={handleBack}
               onClose={onClose}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT_STOPWATCH:
@@ -140,6 +150,7 @@ const ActionsStep = React.memo(
               onUpdate={handleStopwatchUpdate}
               onBack={handleBack}
               onClose={onClose}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.MOVE:
@@ -152,6 +163,7 @@ const ActionsStep = React.memo(
               onBoardFetch={onBoardFetch}
               onBack={handleBack}
               onClose={onClose}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.DELETE:
@@ -162,6 +174,20 @@ const ActionsStep = React.memo(
               buttonContent="action.deleteCard"
               onConfirm={onDelete}
               onBack={handleBack}
+              onCopyCard={onCopyCard}
+            />
+          );
+        case StepTypes.COPY:
+          return (
+            <CardCopyStep
+              projectsToLists={projectsToLists}
+              defaultPath={pick(card, ['projectId', 'boardId', 'listId'])}
+              onCopyCard={onCopyCard}
+              onTransfer={onTransfer}
+              onBoardFetch={onBoardFetch}
+              onBack={handleBack}
+              onClose={onClose}
+              onConfirm={onCopyCard}
             />
           );
         default:
@@ -212,6 +238,11 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleCopyClick}>
+              {t('action.copyCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
           </Menu>
         </Popup.Content>
       </>
@@ -243,6 +274,7 @@ ActionsStep.propTypes = {
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 export default ActionsStep;
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index 88d87a0..6463e0e 100755
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@@ -51,6 +51,7 @@ const Card = React.memo(
     onLabelUpdate,
     onLabelMove,
     onLabelDelete,
+    onCopyCard,
   }) => {
     const nameEdit = useRef(null);
 
@@ -195,6 +196,7 @@ const Card = React.memo(
                         onLabelUpdate={onLabelUpdate}
                         onLabelMove={onLabelMove}
                         onLabelDelete={onLabelDelete}
+                        onCopyCard={onCopyCard}
                       >
                         <Button className={classNames(styles.actionsButton, styles.target)}>
                           <Icon fitted name="pencil" size="small" />
@@ -250,6 +252,7 @@ Card.propTypes = {
   onLabelDelete: PropTypes.func.isRequired,
   // onSortTitleAsc: PropTypes.func.isRequired,
   // onSortTitleDesc: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 Card.defaultProps = {
diff --git a/client/src/components/CardCopyPopup.jsx b/client/src/components/CardCopyPopup.jsx
new file mode 100644
index 0000000..548e231
--- /dev/null
+++ b/client/src/components/CardCopyPopup.jsx
@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import CardCopyStep from './CardCopyStep';
+
+export default withPopup(CardCopyStep);
diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
new file mode 100644
index 0000000..643a67a
--- /dev/null
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -0,0 +1,169 @@
+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 './CardCopyStep.module.scss';
+
+const CardCopyStep = React.memo(
+  ({ projectsToLists, defaultPath, onTransfer, onBoardFetch, onBack, onClose, onCopyCard }) => {
+    const [t] = useTranslation();
+
+    const [path, handleFieldChange] = useForm(() => ({
+      projectId: null,
+      boardId: null,
+      listId: null,
+      name: null,
+      description: null,
+      tasks: [],
+      attachments: [],
+      labels: [],
+      users: [],
+      ...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 handleBoardIdChange = 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) {
+        console.log('test');
+      }
+
+      onCopyCard(selectedList.id, { name: 'test' }, false);
+      onClose();
+    }, [defaultPath, onTransfer, onClose, selectedBoard, selectedList, onCopyCard]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t('action.copyCard', {
+            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={handleBoardIdChange}
+                />
+              </>
+            )}
+            {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.copy')} // change this action.copy
+              disabled={(selectedBoard && selectedBoard.isFetching !== false) || !selectedList}
+            />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+CardCopyStep.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,
+  onCopyCard: PropTypes.func.isRequired,
+};
+
+CardCopyStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default CardCopyStep;
diff --git a/client/src/components/CardCopyStep/CardCopyStep.module.scss b/client/src/components/CardCopyStep/CardCopyStep.module.scss
new file mode 100644
index 0000000..9df5f99
--- /dev/null
+++ b/client/src/components/CardCopyStep/CardCopyStep.module.scss
@@ -0,0 +1,12 @@
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}
diff --git a/client/src/components/CardCopyStep/index.js b/client/src/components/CardCopyStep/index.js
new file mode 100644
index 0000000..5309f55
--- /dev/null
+++ b/client/src/components/CardCopyStep/index.js
@@ -0,0 +1,3 @@
+import CardCopyStep from './CardCopyStep';
+
+export default CardCopyStep;
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index 7a07f7a..af498e7 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -24,6 +24,7 @@ import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
+import CardCopyStep from '../CardCopyStep';
 import CardCopyPopup from '../CardCopyPopup';
 
 import styles from './CardModal.module.scss';
@@ -79,6 +80,7 @@ const CardModal = React.memo(
     onCommentActivityUpdate,
     onCommentActivityDelete,
     onClose,
+    onCopyCard,
   }) => {
     const [t] = useTranslation();
 
@@ -203,6 +205,7 @@ const CardModal = React.memo(
                             currentUserIds={userIds}
                             onUserSelect={onUserAdd}
                             onUserDeselect={onUserRemove}
+                            onCopyCard={onCopyCard}
                           >
                             <User name={user.name} avatarUrl={user.avatarUrl} />
                           </BoardMembershipsPopup>
@@ -217,6 +220,7 @@ const CardModal = React.memo(
                         currentUserIds={userIds}
                         onUserSelect={onUserAdd}
                         onUserDeselect={onUserRemove}
+                        onCopyCard={onCopyCard}
                       >
                         <button
                           type="button"
@@ -248,6 +252,7 @@ const CardModal = React.memo(
                             onUpdate={onLabelUpdate}
                             onMove={onLabelMove}
                             onDelete={onLabelDelete}
+                            onCopyCard={onCopyCard}
                           >
                             <Label name={label.name} color={label.color} />
                           </LabelsPopup>
@@ -266,6 +271,7 @@ const CardModal = React.memo(
                         onUpdate={onLabelUpdate}
                         onMove={onLabelMove}
                         onDelete={onLabelDelete}
+                        onCopyCard={onCopyCard}
                       >
                         <button
                           type="button"
@@ -286,11 +292,15 @@ const CardModal = React.memo(
                     </div>
                     <span className={styles.attachment}>
                       {canEdit ? (
-                        <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
-                          <DueDate value={dueDate} />
+                        <DueDateEditPopup
+                          defaultValue={dueDate}
+                          onUpdate={handleDueDateUpdate}
+                          onCopyCard={onCopyCard}
+                        >
+                          <DueDate value={dueDate} onCopyCard={onCopyCard} />
                         </DueDateEditPopup>
                       ) : (
-                        <DueDate value={dueDate} />
+                        <DueDate value={dueDate} onCopyCard={onCopyCard} />
                       )}
                     </span>
                   </div>
@@ -308,10 +318,18 @@ const CardModal = React.memo(
                           defaultValue={stopwatch}
                           onUpdate={handleStopwatchUpdate}
                         >
-                          <Stopwatch startedAt={stopwatch.startedAt} total={stopwatch.total} />
+                          <Stopwatch
+                            startedAt={stopwatch.startedAt}
+                            total={stopwatch.total}
+                            onCopyCard={onCopyCard}
+                          />
                         </StopwatchEditPopup>
                       ) : (
-                        <Stopwatch startedAt={stopwatch.startedAt} total={stopwatch.total} />
+                        <Stopwatch
+                          startedAt={stopwatch.startedAt}
+                          total={stopwatch.total}
+                          onCopyCard={onCopyCard}
+                        />
                       )}
                     </span>
                     {canEdit && (
@@ -337,7 +355,11 @@ const CardModal = React.memo(
                   <Icon name="align justify" className={styles.moduleIcon} />
                   <div className={styles.moduleHeader}>{t('common.description')}</div>
                   {canEdit ? (
-                    <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
+                    <DescriptionEdit
+                      defaultValue={description}
+                      onUpdate={handleDescriptionUpdate}
+                      onCopyCard={onCopyCard}
+                    >
                       {description ? (
                         <button
                           type="button"
@@ -377,6 +399,7 @@ const CardModal = React.memo(
                     onUpdate={onTaskUpdate}
                     onMove={onTaskMove}
                     onDelete={onTaskDelete}
+                    onCopyCard={onCopyCard}
                   />
                 </div>
               </div>
@@ -394,6 +417,7 @@ const CardModal = React.memo(
                     onCoverUpdate={handleCoverUpdate}
                     onGalleryOpen={handleGalleryOpen}
                     onGalleryClose={handleGalleryClose}
+                    onCopyCard={onCopyCard}
                   />
                 </div>
               </div>
@@ -411,6 +435,7 @@ const CardModal = React.memo(
               onCommentCreate={onCommentActivityCreate}
               onCommentUpdate={onCommentActivityUpdate}
               onCommentDelete={onCommentActivityDelete}
+              onCopyCard={onCopyCard}
             />
           </Grid.Column>
           {canEdit && (
@@ -422,6 +447,7 @@ const CardModal = React.memo(
                   currentUserIds={userIds}
                   onUserSelect={onUserAdd}
                   onUserDeselect={onUserRemove}
+                  onCopyCard={onCopyCard}
                 >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="user outline" className={styles.actionIcon} />
@@ -437,13 +463,18 @@ const CardModal = React.memo(
                   onUpdate={onLabelUpdate}
                   onMove={onLabelMove}
                   onDelete={onLabelDelete}
+                  onCopyCard={onCopyCard}
                 >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="bookmark outline" className={styles.actionIcon} />
                     {t('common.labels')}
                   </Button>
                 </LabelsPopup>
-                <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
+                <DueDateEditPopup
+                  defaultValue={dueDate}
+                  onUpdate={handleDueDateUpdate}
+                  onCopyCard={onCopyCard}
+                >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="calendar check outline" className={styles.actionIcon} />
                     {t('common.dueDate', {
@@ -451,13 +482,17 @@ const CardModal = React.memo(
                     })}
                   </Button>
                 </DueDateEditPopup>
-                <StopwatchEditPopup defaultValue={stopwatch} onUpdate={handleStopwatchUpdate}>
+                <StopwatchEditPopup
+                  defaultValue={stopwatch}
+                  onUpdate={handleStopwatchUpdate}
+                  onCopyCard={onCopyCard}
+                >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="clock outline" className={styles.actionIcon} />
                     {t('common.stopwatch')}
                   </Button>
                 </StopwatchEditPopup>
-                <AttachmentAddPopup onCreate={onAttachmentCreate}>
+                <AttachmentAddPopup onCreate={onAttachmentCreate} onCopyCard={onCopyCard}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="attach" className={styles.actionIcon} />
                     {t('common.attachment')}
@@ -484,6 +519,7 @@ const CardModal = React.memo(
                   onMove={onMove}
                   onTransfer={onTransfer}
                   onBoardFetch={onBoardFetch}
+                  onCopyCard={onCopyCard}
                 >
                   <Button
                     fluid
@@ -510,11 +546,12 @@ const CardModal = React.memo(
                   onMove={onMove}
                   onTransfer={onTransfer}
                   onBoardFetch={onBoardFetch}
+                  onCopyCard={onCopyCard}
                 >
                   <Button
                     fluid
                     className={styles.actionButton}
-                    // onClick={handleToggleSubscriptionClick}
+                    onClick={handleToggleSubscriptionClick}
                   >
                     <Icon name="copy outline" className={styles.actionIcon} />
                     {t('action.copy')}
@@ -602,6 +639,7 @@ CardModal.propTypes = {
   onCommentActivityUpdate: PropTypes.func.isRequired,
   onCommentActivityDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 CardModal.defaultProps = {
diff --git a/client/src/components/CardMoveStep/CardMoveStep.jsx b/client/src/components/CardMoveStep/CardMoveStep.jsx
index be8bfe3..93448d9 100644
--- a/client/src/components/CardMoveStep/CardMoveStep.jsx
+++ b/client/src/components/CardMoveStep/CardMoveStep.jsx
@@ -9,7 +9,16 @@ import { useForm } from '../../hooks';
 import styles from './CardMoveStep.module.scss';
 
 const CardMoveStep = React.memo(
-  ({ projectsToLists, defaultPath, onMove, onTransfer, onBoardFetch, onBack, onClose }) => {
+  ({
+    projectsToLists,
+    defaultPath,
+    onMove,
+    onTransfer,
+    onBoardFetch,
+    onBack,
+    onClose,
+    onCopyCard,
+  }) => {
     const [t] = useTranslation();
 
     const [path, handleFieldChange] = useForm(() => ({
@@ -103,6 +112,7 @@ const CardMoveStep = React.memo(
                   disabled={selectedProject.boards.length === 0}
                   className={styles.field}
                   onChange={handleBoardIdChange}
+                  onCopyCard={onCopyCard}
                 />
               </>
             )}
@@ -127,6 +137,7 @@ const CardMoveStep = React.memo(
                   disabled={selectedBoard.isFetching !== false || selectedBoard.lists.length === 0}
                   className={styles.field}
                   onChange={handleFieldChange}
+                  onCopyCard={onCopyCard}
                 />
               </>
             )}
@@ -152,6 +163,7 @@ CardMoveStep.propTypes = {
   onBoardFetch: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 CardMoveStep.defaultProps = {
diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx
index aeabc4d..63de7c3 100755
--- a/client/src/components/LabelsStep/LabelsStep.jsx
+++ b/client/src/components/LabelsStep/LabelsStep.jsx
@@ -32,6 +32,7 @@ const LabelsStep = React.memo(
     onMove,
     onDelete,
     onBack,
+    onCopyCard,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
@@ -118,6 +119,7 @@ const LabelsStep = React.memo(
               }}
               onCreate={onCreate}
               onBack={handleBack}
+              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT: {
@@ -130,6 +132,7 @@ const LabelsStep = React.memo(
                 onUpdate={(data) => handleUpdate(currentItem.id, data)}
                 onDelete={() => handleDelete(currentItem.id)}
                 onBack={handleBack}
+                onCopyCard={onCopyCard}
               />
             );
           }
@@ -180,6 +183,7 @@ const LabelsStep = React.memo(
                         onSelect={() => handleSelect(item.id)}
                         onDeselect={() => handleDeselect(item.id)}
                         onEdit={() => handleEdit(item.id)}
+                        onCopyCard={onCopyCard}
                       />
                     ))}
                     {placeholder}
@@ -227,6 +231,7 @@ LabelsStep.propTypes = {
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 LabelsStep.defaultProps = {
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index dd140fb..a1931da 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -12,11 +12,23 @@ import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
 import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
+import CardCopyStep from '../CardCopyStep';
 
 import styles from './List.module.scss';
 
 const List = React.memo(
-  ({ id, index, name, isPersisted, cardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
+  ({
+    id,
+    index,
+    name,
+    isPersisted,
+    cardIds,
+    canEdit,
+    onUpdate,
+    onDelete,
+    onCardCreate,
+    onCopyCard,
+  }) => {
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
     const [selectedOption, setSelectedOption] = useState('name');
@@ -123,6 +135,7 @@ const List = React.memo(
                     onSort={onSort}
                     selectedOption={selectedOption}
                     setSelectedOption={setSelectedOption}
+                    onCopyCard={onCopyCard}
                   >
                     <Button className={classNames(styles.headerButton, styles.target)}>
                       <Icon fitted name="pencil" size="small" />
@@ -170,6 +183,7 @@ List.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCardCreate: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func.isRequired,
 };
 
 export default List;
diff --git a/client/src/constants/ActionTypes.js b/client/src/constants/ActionTypes.js
index 5fdc430..74d7840 100644
--- a/client/src/constants/ActionTypes.js
+++ b/client/src/constants/ActionTypes.js
@@ -197,6 +197,8 @@ export default {
   CARD_DELETE__SUCCESS: 'CARD_DELETE__SUCCESS',
   CARD_DELETE__FAILURE: 'CARD_DELETE__FAILURE',
   CARD_DELETE_HANDLE: 'CARD_DELETE_HANDLE',
+  CARD_COPY_HANDLE: 'CARD_COPY_HANDLE',
+  CARD_COPY: 'CARD_COPY',
 
   /* Tasks */
 
diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
index a43869d..40366e2 100755
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@@ -136,6 +136,8 @@ export default {
   CARD_DELETE: `${PREFIX}/CARD_DELETE`,
   CURRENT_CARD_DELETE: `${PREFIX}/CURRENT_CARD_DELETE`,
   CARD_DELETE_HANDLE: `${PREFIX}/CARD_DELETE_HANDLE`,
+  CARD_COPY: `${PREFIX}/CARD_COPY`,
+  CARD_COPY_HANDLE: `${PREFIX}/CARD_COPY_HANDLE`,
 
   /* Tasks */
 
diff --git a/client/src/constants/Enums.js b/client/src/constants/Enums.js
index 1fb5cdc..6ca6fc9 100755
--- a/client/src/constants/Enums.js
+++ b/client/src/constants/Enums.js
@@ -12,4 +12,5 @@ export const ActivityTypes = {
   CREATE_CARD: 'createCard',
   MOVE_CARD: 'moveCard',
   COMMENT_CARD: 'commentCard',
+  COPY_CARD: 'copyCard',
 };
diff --git a/client/src/containers/BoardContainer.js b/client/src/containers/BoardContainer.js
index 7c47375..66bc909 100755
--- a/client/src/containers/BoardContainer.js
+++ b/client/src/containers/BoardContainer.js
@@ -27,6 +27,7 @@ const mapDispatchToProps = (dispatch) =>
       onListCreate: entryActions.createListInCurrentBoard,
       onListMove: entryActions.moveList,
       onCardMove: entryActions.moveCard,
+      onCardCopy: entryActions.copyCard,
     },
     dispatch,
   );
diff --git a/client/src/containers/BoardsContainer.js b/client/src/containers/BoardsContainer.js
index fcca8ec..090218b 100755
--- a/client/src/containers/BoardsContainer.js
+++ b/client/src/containers/BoardsContainer.js
@@ -25,6 +25,7 @@ const mapDispatchToProps = (dispatch) =>
       onMove: entryActions.moveBoard,
       onDelete: entryActions.deleteBoard,
       onSort: entryActions.sortBoard,
+      onCopyCard: entryActions.createCard,
     },
     dispatch,
   );
diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
index 127d443..d506262 100755
--- a/client/src/containers/CardContainer.js
+++ b/client/src/containers/CardContainer.js
@@ -72,6 +72,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onLabelUpdate: (labelId, data) => entryActions.updateLabel(labelId, data),
       onLabelMove: (labelId, index) => entryActions.moveLabel(labelId, index),
       onLabelDelete: (labelId) => entryActions.deleteLabel(labelId),
+      onCopyCard: (listId, data) => entryActions.createCard(listId, data, false),
     },
     dispatch,
   );
diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
index ceae984..7f1ab38 100755
--- a/client/src/containers/CardModalContainer.js
+++ b/client/src/containers/CardModalContainer.js
@@ -100,6 +100,7 @@ const mapDispatchToProps = (dispatch) =>
       onCommentActivityCreate: entryActions.createCommentActivityInCurrentCard,
       onCommentActivityUpdate: entryActions.updateCommentActivity,
       onCommentActivityDelete: entryActions.deleteCommentActivity,
+      onCopyCard: entryActions.copyCard,
       push,
     },
     dispatch,
diff --git a/client/src/entry-actions/cards.js b/client/src/entry-actions/cards.js
index d73b247..bbb7521 100755
--- a/client/src/entry-actions/cards.js
+++ b/client/src/entry-actions/cards.js
@@ -47,6 +47,15 @@ const moveCard = (id, listId, index = 0) => ({
   },
 });
 
+const copyCard = (id, listId, index = 0) => ({
+  type: EntryActionTypes.CARD_COPY,
+  payload: {
+    id,
+    listId,
+    index,
+  },
+});
+
 const moveCurrentCard = (listId, index = 0) => ({
   type: EntryActionTypes.CURRENT_CARD_MOVE,
   payload: {
@@ -106,4 +115,5 @@ export default {
   deleteCard,
   deleteCurrentCard,
   handleCardDelete,
+  copyCard,
 };
diff --git a/client/src/lib/popup/with-popup.jsx b/client/src/lib/popup/with-popup.jsx
new file mode 100644
index 0000000..50c2302
--- /dev/null
+++ b/client/src/lib/popup/with-popup.jsx
@@ -0,0 +1,109 @@
+import { ResizeObserver } from '@juggle/resize-observer';
+import React, { useCallback, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
+
+import styles from './Popup.module.css';
+
+export default (WrappedComponent, defaultProps) => {
+  const Popup = React.memo(({ children, ...props }) => {
+    const [isOpened, setIsOpened] = useState(false);
+
+    const wrapper = useRef(null);
+    const resizeObserver = useRef(null);
+
+    const handleOpen = useCallback(() => {
+      setIsOpened(true);
+    }, []);
+
+    const handleClose = useCallback(() => {
+      setIsOpened(false);
+    }, []);
+
+    const handleMouseDown = useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+
+    const handleClick = useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+
+    const handleTriggerClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+
+        const { onClick } = children;
+
+        if (onClick) {
+          onClick(event);
+        }
+      },
+      [children],
+    );
+
+    const handleContentRef = useCallback((element) => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+
+      if (!element) {
+        resizeObserver.current = null;
+        return;
+      }
+
+      resizeObserver.current = new ResizeObserver(() => {
+        if (resizeObserver.current.isInitial) {
+          resizeObserver.current.isInitial = false;
+          return;
+        }
+
+        wrapper.current.positionUpdate();
+      });
+
+      resizeObserver.current.isInitial = true;
+      resizeObserver.current.observe(element);
+    }, []);
+
+    const tigger = React.cloneElement(children, {
+      onClick: handleTriggerClick,
+    });
+
+    return (
+      <SemanticUIPopup
+        basic
+        wide
+        ref={wrapper}
+        trigger={tigger}
+        on="click"
+        open={isOpened}
+        position="bottom left"
+        popperModifiers={[
+          {
+            name: 'preventOverflow',
+            options: {
+              boundariesElement: 'window',
+            },
+          },
+        ]}
+        className={styles.wrapper}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        onMouseDown={handleMouseDown}
+        onClick={handleClick}
+        {...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
+      >
+        <div ref={handleContentRef}>
+          <Button icon="close" onClick={handleClose} className={styles.closeButton} />
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <WrappedComponent {...props} onClose={handleClose} />
+        </div>
+      </SemanticUIPopup>
+    );
+  });
+
+  Popup.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return Popup;
+};
diff --git a/client/src/sagas/core/watchers/cards.js b/client/src/sagas/core/watchers/cards.js
index 0290515..a17c020 100644
--- a/client/src/sagas/core/watchers/cards.js
+++ b/client/src/sagas/core/watchers/cards.js
@@ -37,5 +37,9 @@ export default function* cardsWatchers() {
     takeEvery(EntryActionTypes.CARD_DELETE_HANDLE, ({ payload: { card } }) =>
       services.handleCardDelete(card),
     ),
+
+    takeEvery(EntryActionTypes.CARD_COPY, ({ payload: { listId, data, autoOpen } }) =>
+      services.createCard(listId, data, autoOpen),
+    ),
   ]);
 }
diff --git a/server/api/models/Action.js b/server/api/models/Action.js
index 9aedbd1..5c46c2f 100755
--- a/server/api/models/Action.js
+++ b/server/api/models/Action.js
@@ -9,6 +9,7 @@ const Types = {
   CREATE_CARD: 'createCard',
   MOVE_CARD: 'moveCard',
   COMMENT_CARD: 'commentCard',
+  COPY_CARD: 'copyCard',
 };
 
 module.exports = {

From 981c12568a2aa06b0089935116a7fbf43f1456c1 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Fri, 19 May 2023 09:45:22 +0200
Subject: [PATCH 05/17] Fixed copying card from within opened card

---
 client/src/entry-actions/cards.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/entry-actions/cards.js b/client/src/entry-actions/cards.js
index bbb7521..0596b63 100755
--- a/client/src/entry-actions/cards.js
+++ b/client/src/entry-actions/cards.js
@@ -47,12 +47,12 @@ const moveCard = (id, listId, index = 0) => ({
   },
 });
 
-const copyCard = (id, listId, index = 0) => ({
+const copyCard = (listId, data, autoOpen) => ({
   type: EntryActionTypes.CARD_COPY,
   payload: {
-    id,
     listId,
-    index,
+    data,
+    autoOpen,
   },
 });
 

From f9779687ebbffeb788cd1c0412263ff842c0ba09 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Fri, 19 May 2023 13:56:47 +0200
Subject: [PATCH 06/17] Fixed linting problems

---
 client/src/components/CardCopyStep/CardCopyStep.jsx | 11 ++++++-----
 client/src/components/CardModal/CardModal.jsx       |  2 +-
 client/src/components/LabelsStep/LabelsStep.jsx     |  3 ++-
 client/src/components/List/List.jsx                 |  8 ++++++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 643a67a..54a517d 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -9,7 +9,7 @@ import { useForm } from '../../hooks';
 import styles from './CardCopyStep.module.scss';
 
 const CardCopyStep = React.memo(
-  ({ projectsToLists, defaultPath, onTransfer, onBoardFetch, onBack, onClose, onCopyCard }) => {
+  ({ projectsToLists, defaultPath, onBoardFetch, onBack, onClose, onCopyCard }) => {
     const [t] = useTranslation();
 
     const [path, handleFieldChange] = useForm(() => ({
@@ -54,15 +54,16 @@ const CardCopyStep = React.memo(
     );
 
     const handleSubmit = useCallback(() => {
+      /*
       if (selectedBoard.id !== defaultPath.boardId) {
         onTransfer(selectedBoard.id, selectedList.id);
       } else if (selectedList.id !== defaultPath.listId) {
         console.log('test');
       }
-
-      onCopyCard(selectedList.id, { name: 'test' }, false);
+      */
+      onCopyCard(selectedList.id, path, false);
       onClose();
-    }, [defaultPath, onTransfer, onClose, selectedBoard, selectedList, onCopyCard]);
+    }, [onCopyCard, selectedList.id, path, onClose]);
 
     return (
       <>
@@ -155,7 +156,7 @@ CardCopyStep.propTypes = {
   defaultPath: PropTypes.object.isRequired,
   /* eslint-enable react/forbid-prop-types */
   // onMove: PropTypes.func.isRequired,
-  onTransfer: PropTypes.func.isRequired,
+  // onTransfer: PropTypes.func.isRequired,
   onBoardFetch: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index af498e7..27c82a4 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -24,7 +24,7 @@ import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
-import CardCopyStep from '../CardCopyStep';
+// import CardCopyStep from '../CardCopyStep';
 import CardCopyPopup from '../CardCopyPopup';
 
 import styles from './CardModal.module.scss';
diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx
index 63de7c3..77e95b2 100755
--- a/client/src/components/LabelsStep/LabelsStep.jsx
+++ b/client/src/components/LabelsStep/LabelsStep.jsx
@@ -231,13 +231,14 @@ LabelsStep.propTypes = {
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func,
-  onCopyCard: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func,
 };
 
 LabelsStep.defaultProps = {
   title: 'common.labels',
   canEdit: true,
   onBack: undefined,
+  onCopyCard: undefined,
 };
 
 export default LabelsStep;
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index a1931da..5ba7af0 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -12,7 +12,7 @@ import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
 import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
-import CardCopyStep from '../CardCopyStep';
+// import CardCopyStep from '../CardCopyStep';
 
 import styles from './List.module.scss';
 
@@ -183,7 +183,11 @@ List.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCardCreate: PropTypes.func.isRequired,
-  onCopyCard: PropTypes.func.isRequired,
+  onCopyCard: PropTypes.func,
+};
+
+List.defaultProps = {
+  onCopyCard: undefined,
 };
 
 export default List;

From 2cc41e3dcaf414b5b448f2d75568a77b3a8a4d02 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Tue, 23 May 2023 11:11:53 +0200
Subject: [PATCH 07/17] Git added copying of labels when copying cards

---
 client/src/api/cards.js                             | 7 +++++++
 client/src/components/CardCopyStep/CardCopyStep.jsx | 2 +-
 client/src/constants/ActionTypes.js                 | 2 ++
 client/src/containers/BoardsContainer.js            | 2 +-
 client/src/containers/CardContainer.js              | 2 +-
 client/src/containers/ListContainer.js              | 1 +
 client/src/models/Card.js                           | 5 +++++
 client/src/sagas/core/services/cards.js             | 8 +++++++-
 client/src/sagas/core/services/index.js             | 2 ++
 9 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/api/cards.js b/client/src/api/cards.js
index 5240038..4153157 100755
--- a/client/src/api/cards.js
+++ b/client/src/api/cards.js
@@ -41,6 +41,12 @@ const createCard = (listId, data, headers) =>
     item: transformCard(body.item),
   }));
 
+const copyCard = (listId, data, headers) =>
+  socket.post(`/lists/${listId}/cards`, transformCardData(data), headers).then((body) => ({
+    ...body,
+    item: transformCard(body.item),
+  }));
+
 const getCard = (id, headers) =>
   socket.get(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
@@ -84,4 +90,5 @@ export default {
   makeHandleCardCreate,
   makeHandleCardUpdate,
   makeHandleCardDelete,
+  copyCard,
 };
diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 54a517d..70ae2e9 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -61,7 +61,7 @@ const CardCopyStep = React.memo(
         console.log('test');
       }
       */
-      onCopyCard(selectedList.id, path, false);
+      onCopyCard(selectedList.id, path);
       onClose();
     }, [onCopyCard, selectedList.id, path, onClose]);
 
diff --git a/client/src/constants/ActionTypes.js b/client/src/constants/ActionTypes.js
index 74d7840..8510f4f 100644
--- a/client/src/constants/ActionTypes.js
+++ b/client/src/constants/ActionTypes.js
@@ -199,6 +199,8 @@ export default {
   CARD_DELETE_HANDLE: 'CARD_DELETE_HANDLE',
   CARD_COPY_HANDLE: 'CARD_COPY_HANDLE',
   CARD_COPY: 'CARD_COPY',
+  CARD_COPY__SUCCESS: 'CARD_COPY__SUCCESS',
+  CARD_COPY__FAILURE: 'CARD_COPY__FAILURE',
 
   /* Tasks */
 
diff --git a/client/src/containers/BoardsContainer.js b/client/src/containers/BoardsContainer.js
index 090218b..d0e6aee 100755
--- a/client/src/containers/BoardsContainer.js
+++ b/client/src/containers/BoardsContainer.js
@@ -25,7 +25,7 @@ const mapDispatchToProps = (dispatch) =>
       onMove: entryActions.moveBoard,
       onDelete: entryActions.deleteBoard,
       onSort: entryActions.sortBoard,
-      onCopyCard: entryActions.createCard,
+      onCopyCard: entryActions.copyCard,
     },
     dispatch,
   );
diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
index d506262..caaa8f4 100755
--- a/client/src/containers/CardContainer.js
+++ b/client/src/containers/CardContainer.js
@@ -72,7 +72,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onLabelUpdate: (labelId, data) => entryActions.updateLabel(labelId, data),
       onLabelMove: (labelId, index) => entryActions.moveLabel(labelId, index),
       onLabelDelete: (labelId) => entryActions.deleteLabel(labelId),
-      onCopyCard: (listId, data) => entryActions.createCard(listId, data, false),
+      onCopyCard: (listId, data) => entryActions.copyCard(listId, data, false),
     },
     dispatch,
   );
diff --git a/client/src/containers/ListContainer.js b/client/src/containers/ListContainer.js
index f50afc0..62496af 100755
--- a/client/src/containers/ListContainer.js
+++ b/client/src/containers/ListContainer.js
@@ -36,6 +36,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onDelete: () => entryActions.deleteList(id),
       onCardCreate: (data, autoOpen) => entryActions.createCard(id, data, autoOpen),
       onSort: (data) => entryActions.sortList(id, data),
+      onCardCopy: (data, autoOpen) => entryActions.copyCard(id, data, autoOpen),
     },
     dispatch,
   );
diff --git a/client/src/models/Card.js b/client/src/models/Card.js
index 8ac9c7b..3272929 100755
--- a/client/src/models/Card.js
+++ b/client/src/models/Card.js
@@ -175,6 +175,11 @@ export default class extends BaseModel {
         Card.withId(payload.localId).delete();
         Card.upsert(payload.card);
 
+        break;
+      case ActionTypes.CARD_COPY__SUCCESS:
+        Card.withId(payload.localId).delete();
+        Card.upsert(payload.card);
+
         break;
       case ActionTypes.CARD_UPDATE:
         Card.withId(payload.id).update(payload.data);
diff --git a/client/src/sagas/core/services/cards.js b/client/src/sagas/core/services/cards.js
index 40c3db8..399b226 100644
--- a/client/src/sagas/core/services/cards.js
+++ b/client/src/sagas/core/services/cards.js
@@ -1,4 +1,4 @@
-import { call, put, select } from 'redux-saga/effects';
+import { call, put, select, all } from 'redux-saga/effects';
 
 import { goToBoard, goToCard } from './router';
 import request from '../request';
@@ -6,6 +6,7 @@ import selectors from '../../../selectors';
 import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
+import { addLabelToCard } from './labels';
 
 export function* createCard(listId, data, autoOpen) {
   const { boardId } = yield select(selectors.selectListById, listId);
@@ -39,6 +40,11 @@ export function* createCard(listId, data, autoOpen) {
   if (autoOpen) {
     yield call(goToCard, card.id);
   }
+
+  // Add labels to card
+  const arr = [];
+  Object.keys(nextData.labels).map((key) => arr.push(nextData.labels[key].id));
+  yield all(arr?.map((label) => call(addLabelToCard, label, card.id)));
 }
 
 export function* handleCardCreate(card) {
diff --git a/client/src/sagas/core/services/index.js b/client/src/sagas/core/services/index.js
index 55d1175..833cbfe 100644
--- a/client/src/sagas/core/services/index.js
+++ b/client/src/sagas/core/services/index.js
@@ -15,6 +15,7 @@ import attachments from './attachments';
 import activities from './activities';
 import commentActivities from './comment-activities';
 import notifications from './notifications';
+import copycards from './copycards';
 
 export default {
   ...router,
@@ -34,4 +35,5 @@ export default {
   ...activities,
   ...commentActivities,
   ...notifications,
+  ...copycards,
 };

From a8f49deab8dd07cab19f24eb988cef3846bbca74 Mon Sep 17 00:00:00 2001
From: Jens Frost <93131870+jensfrost@users.noreply.github.com>
Date: Tue, 23 May 2023 16:56:04 +0200
Subject: [PATCH 08/17] Added copying of tasks. Unclear why in payload there is
 two tasks with the same localId

---
 client/src/components/CardCopyStep/CardCopyStep.jsx |  7 -------
 client/src/models/Task.js                           |  4 +++-
 client/src/sagas/core/services/cards.js             | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 70ae2e9..9abd54d 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -54,13 +54,6 @@ const CardCopyStep = React.memo(
     );
 
     const handleSubmit = useCallback(() => {
-      /*
-      if (selectedBoard.id !== defaultPath.boardId) {
-        onTransfer(selectedBoard.id, selectedList.id);
-      } else if (selectedList.id !== defaultPath.listId) {
-        console.log('test');
-      }
-      */
       onCopyCard(selectedList.id, path);
       onClose();
     }, [onCopyCard, selectedList.id, path, onClose]);
diff --git a/client/src/models/Task.js b/client/src/models/Task.js
index 1a47271..218541f 100755
--- a/client/src/models/Task.js
+++ b/client/src/models/Task.js
@@ -57,7 +57,9 @@ export default class extends BaseModel {
 
         break;
       case ActionTypes.TASK_CREATE__SUCCESS:
-        Task.withId(payload.localId).delete();
+        if (Task.withId(payload.localId)) {
+          Task.withId(payload.localId).delete();
+        }
         Task.upsert(payload.task);
 
         break;
diff --git a/client/src/sagas/core/services/cards.js b/client/src/sagas/core/services/cards.js
index 399b226..fc3ea47 100644
--- a/client/src/sagas/core/services/cards.js
+++ b/client/src/sagas/core/services/cards.js
@@ -7,6 +7,7 @@ import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 import { addLabelToCard } from './labels';
+import { createTask } from './tasks';
 
 export function* createCard(listId, data, autoOpen) {
   const { boardId } = yield select(selectors.selectListById, listId);
@@ -41,10 +42,20 @@ export function* createCard(listId, data, autoOpen) {
     yield call(goToCard, card.id);
   }
 
-  // Add labels to card
+  // Add labels to card //
   const arr = [];
   Object.keys(nextData.labels).map((key) => arr.push(nextData.labels[key].id));
   yield all(arr?.map((label) => call(addLabelToCard, label, card.id)));
+
+  // Add tasks to card //
+  const tasks = [];
+  Object.keys(nextData.tasks)?.map((key) => tasks.push(nextData.tasks[key]));
+  tasks.forEach((task) => {
+    // eslint-disable-next-line no-param-reassign
+    task.id = `local:${task.id}`;
+  });
+
+  yield all(tasks?.map((task) => call(createTask, card.id, task)));
 }
 
 export function* handleCardCreate(card) {

From ff511d0b9e6b9dabba8b399ff57784be9faa2c57 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Fri, 26 May 2023 13:09:29 +0200
Subject: [PATCH 09/17] Added copying of Members when copying cards. Changed
 line endings to lf instead of crlf

---
 client/src/locales/_/index.js           |  31 ----
 client/src/locales/_/zh/core.js         | 207 ------------------------
 client/src/locales/_/zh/embed.js        |  20 ---
 client/src/sagas/core/services/cards.js |   6 +
 client/src/sagas/core/services/index.js |   2 -
 5 files changed, 6 insertions(+), 260 deletions(-)
 delete mode 100644 client/src/locales/_/index.js
 delete mode 100644 client/src/locales/_/zh/core.js
 delete mode 100644 client/src/locales/_/zh/embed.js

diff --git a/client/src/locales/_/index.js b/client/src/locales/_/index.js
deleted file mode 100644
index 58bff0d..0000000
--- a/client/src/locales/_/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import fromPairs from 'lodash/fromPairs';
-
-import cs from './cs/embed';
-import da from './da/embed';
-import de from './de/embed';
-import en from './en/embed';
-import es from './es/embed';
-import fr from './fr/embed';
-import ja from './ja/embed';
-import pl from './pl/embed';
-import ru from './ru/embed';
-import uz from './uz/embed';
-import zh from './zh/embed';
-
-const localePairs = [
-  ['cs', cs],
-  ['da', da],
-  ['de', de],
-  ['en', en],
-  ['es', es],
-  ['fr', fr],
-  ['ja', ja],
-  ['pl', pl],
-  ['ru', ru],
-  ['uz', uz],
-  ['zh', zh],
-];
-
-export const languages = localePairs.map((locale) => locale[0]);
-
-export const embedLocales = fromPairs(localePairs);
diff --git a/client/src/locales/_/zh/core.js b/client/src/locales/_/zh/core.js
deleted file mode 100644
index bcd48e7..0000000
--- a/client/src/locales/_/zh/core.js
+++ /dev/null
@@ -1,207 +0,0 @@
-export default {
-  format: {
-    date: 'M/d/yyyy',
-    time: 'p',
-    dateTime: '$t(format:date) $t(format:time)',
-    longDate: 'MMM d',
-    longDateTime: "MMMM d 'at' p",
-  },
-
-  translation: {
-    common: {
-      account: '账号',
-      actions: '操作',
-      addAttachment_title: '添加附件',
-      addComment: '添加评论',
-      addManager_title: '添加管理员',
-      addMember_title: '添加成员',
-      addUser_title: '添加用户',
-      administrator: '管理员',
-      all: '全部',
-      allChangesWillBeAutomaticallySavedAfterConnectionRestored: '所有修改会在重连后自动保存',
-      areYouSureYouWantToDeleteThisAttachment: '确认删除此附件吗？',
-      areYouSureYouWantToDeleteThisBoard: '确认删除此面板吗？',
-      areYouSureYouWantToDeleteThisCard: '确认删除此卡片吗？',
-      areYouSureYouWantToDeleteThisComment: '确认删除此评论吗？',
-      areYouSureYouWantToDeleteThisLabel: '确认删除此标签吗？',
-      areYouSureYouWantToDeleteThisList: '确认删除此列表吗？',
-      areYouSureYouWantToDeleteThisProject: '确认删除此项目吗？',
-      areYouSureYouWantToDeleteThisTask: '确认删除此任务吗？',
-      areYouSureYouWantToDeleteThisUser: '确认删除此用户吗？',
-      areYouSureYouWantToLeaveBoard: '确认离开此面板吗？',
-      areYouSureYouWantToLeaveProject: '确认离开此项目吗？',
-      areYouSureYouWantToRemoveThisManagerFromProject: '确认从本项目删除该管理员吗？',
-      areYouSureYouWantToRemoveThisMemberFromBoard: '确认本面板删除该成员吗？',
-      attachment: '附件',
-      attachments: '多个附件',
-      authentication: '认证',
-      background: '背景',
-      board: '面板',
-      boardNotFound_title: '面板不存在',
-      cardActions_title: '卡片操作',
-      cardNotFound_title: '卡片不存在',
-      cardOrActionAreDeleted: '卡片或操作已经被删除',
-      color: '颜色',
-      createBoard_title: '创建面板',
-      createLabel_title: '创建标签',
-      createNewOneOrSelectExistingOne: '创建一个新的或者选择一个已创建的',
-      createProject_title: '创建项目',
-      createTextFile_title: '创建文本文件',
-      currentPassword: '当前密码',
-      dangerZone_title: '危险区域',
-      date: '日期',
-      dueDate_title: '截止日期',
-      deleteAttachment_title: '删除附件',
-      deleteBoard_title: '删除面板',
-      deleteCard_title: '删除擦片',
-      deleteComment_title: '删除评论',
-      deleteLabel_title: '删除标签',
-      deleteList_title: '删除列表',
-      deleteProject_title: '删除项目',
-      deleteTask_title: '删除任务',
-      deleteUser_title: '删除用户',
-      description: '描述',
-      dropFileToUpload: '拖放文件以上传',
-      editAttachment_title: '编辑附件',
-      editAvatar_title: '编辑头像',
-      editBoard_title: '编辑面板',
-      editDueDate_title: '编辑截止时间',
-      editEmail_title: '编辑邮箱',
-      editLabel_title: '编辑标签',
-      editPassword_title: '修改密码',
-      editTimer_title: '修改时间',
-      editUsername_title: '修改用户名',
-      email: '邮箱',
-      emailAlreadyInUse: '邮箱已使用',
-      enterCardTitle: '输入卡片标题...',
-      enterDescription: '输入描述...',
-      enterFilename: '输入文件名',
-      enterListTitle: '输入列表标题...',
-      enterProjectTitle: '输入项目标题',
-      enterTaskDescription: '输入任务描述...',
-      filterByLabels_title: '通过标签筛选',
-      filterByMembers_title: '通过成员筛选',
-      fromComputer_title: '从电脑',
-      general: '全体',
-      hours: '小时',
-      invalidCurrentPassword: '当前密码错误',
-      labels: '标签',
-      leaveBoard_title: '离开面板',
-      leaveProject_title: '离开项目',
-      list: '列表',
-      listActions_title: '列表操作',
-      managers: '管理员',
-      members: '成员',
-      minutes: '分钟',
-      moveCard_title: '移动卡片',
-      name: '姓名',
-      newEmail: '新邮箱',
-      newPassword: '新密码',
-      newUsername: '新用户名',
-      noConnectionToServer: '未连接服务器',
-      noBoards: '没有面板',
-      noLists: '没有列表',
-      noProjects: '没有项目',
-      notifications: '通知',
-      noUnreadNotifications: '没有未读通知',
-      openBoard_title: '打开面板',
-      optional_inline: '可选的',
-      organization: '组织机构',
-      phone: '电话',
-      preferences: '偏好',
-      pressPasteShortcutToAddAttachmentFromClipboard:
-        '提示: 点击 Ctrl-V (Mac: Cmd-V) 从剪切板添加附件.',
-      project: '项目',
-      projectNotFound_title: '项目未找到',
-      removeManager_title: '删除管理员',
-      removeMember_title: '删除成员',
-      seconds: '秒',
-      selectBoard: '选择面板',
-      selectList: '选择列表',
-      selectProject: '选择项目',
-      settings: '设置',
-      subscribeToMyOwnCardsByDefault: '默认关注自己创建的卡片',
-      taskActions_title: '任务操作',
-      tasks: '任务',
-      time: '时间',
-      timer: '计时器',
-      title: '标题',
-      userActions_title: '用户操作',
-      userAddedThisCardToList: '<0>{{user}}</0><1> 向列表 {{list}} 添加了该卡片</1>',
-      userLeftNewCommentToCard: '{{user}} 给 {{card}} 添加了一个新评论 «{{comment}}»',
-      userMovedCardFromListToList:
-        '{{user}} 将卡片 <2>{{card}}</2> 从 {{fromList}} 移动到 {{toList}}',
-      userMovedThisCardFromListToList:
-        '<0>{{user}}</0><1> 将该卡片从 {{fromList}} 移动到 {{toList}}</1>',
-      username: '用户名',
-      usernameAlreadyInUse: '用户名已占用',
-      users: '用户',
-      writeComment: '编写评论...',
-    },
-
-    action: {
-      addAnotherCard: '添加别的卡片',
-      addAnotherList: '添加别的列表',
-      addAnotherTask: '添加别的任务',
-      addCard: '添加卡片',
-      addCard_title: '添加卡片',
-      addComment: '添加评论',
-      addList: '添加列表',
-      addMoreDetailedDescription: '添加更多详细描述',
-      addTask: '添加任务',
-      addToCard: '添加擦篇',
-      addUser: '添加用户',
-      createBoard: '创建面板',
-      createFile: '创建文件',
-      createLabel: '创建标签',
-      createNewLabel: '创建新标签',
-      createProject: '创建项目',
-      delete: '删除',
-      deleteAttachment: '删除附件',
-      deleteAvatar: '删除头像',
-      deleteBoard: '删除面板',
-      deleteCard: '删除卡片',
-      deleteCard_title: '删除卡片',
-      deleteComment: '删除评论',
-      deleteImage: '删除图片',
-      deleteLabel: '删除标签',
-      deleteList: '删除列表',
-      deleteList_title: '删除列表',
-      deleteProject: '删除项目',
-      deleteProject_title: '删除项目',
-      deleteTask: '删除任务',
-      deleteTask_title: '删除任务',
-      deleteUser: '删除用户',
-      edit: '编辑',
-      editDueDate_title: '编辑到期时间',
-      editDescription_title: '编辑描述',
-      editEmail_title: '编辑邮箱',
-      editPassword_title: '编辑密码',
-      editTimer_title: '编辑实践',
-      editTitle_title: '编辑标题',
-      editUsername_title: '编辑用户名',
-      leaveBoard: '离开面板',
-      leaveProject: '离开项目',
-      logOut_title: '退出',
-      makeCover_title: '设置标题',
-      move: '移动',
-      moveCard_title: '移动卡片',
-      remove: '删除',
-      removeBackground: '删除背景',
-      removeCover_title: '删除封面',
-      removeFromBoard: '从面板中删除',
-      removeFromProject: '从项目中删除',
-      removeManager: '删除管理者',
-      removeMember: '删除成员',
-      save: '保存',
-      showAllAttachments: '显示所有的附件 ({{hidden}} 隐藏)',
-      showFewerAttachments: '显示较少的附件',
-      start: '开始',
-      stop: '结束',
-      subscribe: '关注',
-      unsubscribe: '取消关注',
-      uploadNewAvatar: '上传新头像',
-      uploadNewImage: '上传图片',
-    },
-  },
-};
diff --git a/client/src/locales/_/zh/embed.js b/client/src/locales/_/zh/embed.js
deleted file mode 100644
index ef3b436..0000000
--- a/client/src/locales/_/zh/embed.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  translation: {
-    common: {
-      emailOrUsername: '邮箱或用户名',
-      invalidEmailOrUsername: '错误的邮箱或用户名',
-      invalidPassword: '密码错误',
-      logInToPlanka: '登录至 Planka',
-      noInternetConnection: '没有网络连接',
-      pageNotFound_title: '页面找不到',
-      password: '密码',
-      projectManagement: '项目管理',
-      serverConnectionFailed: '服务连接失败',
-      unknownError: '未知错误，请稍后重试',
-    },
-
-    action: {
-      logIn: '登录',
-    },
-  },
-};
diff --git a/client/src/sagas/core/services/cards.js b/client/src/sagas/core/services/cards.js
index fc3ea47..bd17755 100644
--- a/client/src/sagas/core/services/cards.js
+++ b/client/src/sagas/core/services/cards.js
@@ -8,6 +8,7 @@ import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 import { addLabelToCard } from './labels';
 import { createTask } from './tasks';
+import { addUserToCard } from './users';
 
 export function* createCard(listId, data, autoOpen) {
   const { boardId } = yield select(selectors.selectListById, listId);
@@ -56,6 +57,11 @@ export function* createCard(listId, data, autoOpen) {
   });
 
   yield all(tasks?.map((task) => call(createTask, card.id, task)));
+
+  // Add users to card //
+  const users = [];
+  Object.keys(nextData.users)?.map((key) => users.push(nextData.users[key].id));
+  yield all(users?.map((user) => call(addUserToCard, user, card.id)));
 }
 
 export function* handleCardCreate(card) {
diff --git a/client/src/sagas/core/services/index.js b/client/src/sagas/core/services/index.js
index 833cbfe..55d1175 100644
--- a/client/src/sagas/core/services/index.js
+++ b/client/src/sagas/core/services/index.js
@@ -15,7 +15,6 @@ import attachments from './attachments';
 import activities from './activities';
 import commentActivities from './comment-activities';
 import notifications from './notifications';
-import copycards from './copycards';
 
 export default {
   ...router,
@@ -35,5 +34,4 @@ export default {
   ...activities,
   ...commentActivities,
   ...notifications,
-  ...copycards,
 };

From 50c7f4a490575a4326a63ef32dbecacb97516c63 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Mon, 29 May 2023 12:35:04 +0200
Subject: [PATCH 10/17] Fixed sorting of tasks to be added in same order as in
 original card when copying cards.

---
 client/src/sagas/core/services/tasks.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/sagas/core/services/tasks.js b/client/src/sagas/core/services/tasks.js
index cae0cd4..3129e93 100644
--- a/client/src/sagas/core/services/tasks.js
+++ b/client/src/sagas/core/services/tasks.js
@@ -7,10 +7,18 @@ import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
 export function* createTask(cardId, data) {
-  const nextData = {
-    ...data,
-    position: yield select(selectors.selectNextTaskPosition, cardId),
-  };
+  let nextData = {};
+  if (data.position) {
+    nextData = {
+      ...data,
+      position: data.position,
+    };
+  } else {
+    nextData = {
+      ...data,
+      position: yield select(selectors.selectNextTaskPosition, cardId),
+    };
+  }
 
   const localId = yield call(createLocalId);
 

From 982a196ee282f6a50b8d2257608464550cab8e73 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Tue, 30 May 2023 17:38:00 +0200
Subject: [PATCH 11/17] Fixed copying of cards from list and from card modal.
 Both ways of copying works.

---
 .../src/components/BoardActions/Filters.jsx   |  1 -
 client/src/components/Card/ActionsStep.jsx    | 20 +++++-
 client/src/components/Card/Card.jsx           | 10 +++
 .../components/CardCopyStep/CardCopyStep.jsx  | 31 ++++++--
 client/src/components/CardModal/CardModal.jsx | 70 +++++++++++++++----
 .../components/CardMoveStep/CardMoveStep.jsx  | 15 +---
 client/src/components/List/List.jsx           |  2 +-
 client/src/containers/CardModalContainer.js   |  2 +
 client/src/containers/ListContainer.js        |  1 -
 9 files changed, 115 insertions(+), 37 deletions(-)

diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx
index 5542f51..80a7a6e 100644
--- a/client/src/components/BoardActions/Filters.jsx
+++ b/client/src/components/BoardActions/Filters.jsx
@@ -84,7 +84,6 @@ const Filters = React.memo(
             onUpdate={onLabelUpdate}
             onMove={onLabelMove}
             onDelete={onLabelDelete}
-            // onCopyCard={onCopyCard}
           >
             <button type="button" className={styles.filterButton}>
               <span className={styles.filterTitle}>{`${t('common.labels')}:`}</span>
diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
index 185b4d1..4dd97de 100644
--- a/client/src/components/Card/ActionsStep.jsx
+++ b/client/src/components/Card/ActionsStep.jsx
@@ -53,6 +53,23 @@ const ActionsStep = React.memo(
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
+    // prepare defaultPath data for copying card
+    const defaultPath = {};
+    defaultPath.id = card.id;
+    defaultPath.boardId = card.boardId;
+    defaultPath.projectId = card.projectId;
+    defaultPath.listId = card.listId;
+    defaultPath.cardId = card.id;
+    defaultPath.name = card.name;
+    defaultPath.dueDate = card.dueDate;
+    defaultPath.stopwatch = card.stopwatch;
+    defaultPath.labels = card.labels;
+    defaultPath.boardMemberships = boardMemberships;
+    defaultPath.currentLabelIds = currentLabelIds;
+    defaultPath.currentUserIds = currentUserIds;
+    defaultPath.tasks = card.tasks;
+    defaultPath.users = card.users;
+    defaultPath.description = card.description;
 
     const handleEditNameClick = useCallback(() => {
       onNameEdit();
@@ -181,13 +198,12 @@ const ActionsStep = React.memo(
           return (
             <CardCopyStep
               projectsToLists={projectsToLists}
-              defaultPath={pick(card, ['projectId', 'boardId', 'listId'])}
+              defaultPath={defaultPath}
               onCopyCard={onCopyCard}
               onTransfer={onTransfer}
               onBoardFetch={onBoardFetch}
               onBack={handleBack}
               onClose={onClose}
-              onConfirm={onCopyCard}
             />
           );
         default:
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index 6463e0e..a8cbd5b 100755
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@@ -21,6 +21,7 @@ import styles from './Card.module.scss';
 const Card = React.memo(
   ({
     id,
+    description,
     index,
     name,
     dueDate,
@@ -171,6 +172,13 @@ const Card = React.memo(
                     {canEdit && (
                       <ActionsPopup
                         card={{
+                          id,
+                          description,
+                          index,
+                          name,
+                          tasks,
+                          labels,
+                          users,
                           dueDate,
                           stopwatch,
                           boardId,
@@ -218,6 +226,7 @@ const Card = React.memo(
 
 Card.propTypes = {
   id: PropTypes.string.isRequired,
+  description: PropTypes.string,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   dueDate: PropTypes.instanceOf(Date),
@@ -259,6 +268,7 @@ Card.defaultProps = {
   dueDate: undefined,
   stopwatch: undefined,
   coverUrl: undefined,
+  description: undefined,
 };
 
 export default Card;
diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 9abd54d..4765381 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -7,21 +7,35 @@ import { Popup } from '../../lib/custom-ui';
 import { useForm } from '../../hooks';
 
 import styles from './CardCopyStep.module.scss';
+import store from '../../store';
 
 const CardCopyStep = React.memo(
   ({ projectsToLists, defaultPath, onBoardFetch, onBack, onClose, onCopyCard }) => {
     const [t] = useTranslation();
+    // Get store to get value for description string
+    const st = store.getState();
+
+    const keys = Object.keys(st.orm.Card.itemsById);
+    if (defaultPath.description === undefined) {
+      keys.forEach((key) => {
+        if (key === defaultPath.id) {
+          // eslint-disable-next-line no-param-reassign
+          defaultPath.description = st.orm.Card.itemsById[key].description;
+        }
+      });
+    }
 
     const [path, handleFieldChange] = useForm(() => ({
       projectId: null,
       boardId: null,
       listId: null,
-      name: null,
-      description: null,
-      tasks: [],
-      attachments: [],
-      labels: [],
-      users: [],
+      name: defaultPath.name,
+      description: defaultPath.description,
+      tasks: defaultPath.tasks,
+      attachments: defaultPath.attachments,
+      labels: defaultPath.labels,
+      users: defaultPath.users,
+      dueDate: defaultPath.dueDate,
       ...defaultPath,
     }));
 
@@ -144,6 +158,9 @@ const CardCopyStep = React.memo(
 );
 
 CardCopyStep.propTypes = {
+  id: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  description: PropTypes.string,
   /* eslint-disable react/forbid-prop-types */
   projectsToLists: PropTypes.array.isRequired,
   defaultPath: PropTypes.object.isRequired,
@@ -158,6 +175,8 @@ CardCopyStep.propTypes = {
 
 CardCopyStep.defaultProps = {
   onBack: undefined,
+  description: undefined,
+  id: undefined,
 };
 
 export default CardCopyStep;
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index 27c82a4..eadcd8c 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -24,13 +24,14 @@ import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
-// import CardCopyStep from '../CardCopyStep';
+
 import CardCopyPopup from '../CardCopyPopup';
 
 import styles from './CardModal.module.scss';
 
 const CardModal = React.memo(
   ({
+    id,
     name,
     description,
     dueDate,
@@ -84,6 +85,59 @@ const CardModal = React.memo(
   }) => {
     const [t] = useTranslation();
 
+    const card = {};
+    card.id = id;
+    card.name = name;
+    card.description = description;
+    card.dueDate = dueDate;
+    card.stopwatch = stopwatch;
+    card.isSubscribed = isSubscribed;
+    card.isActivitiesFetching = isActivitiesFetching;
+    card.isAllActivitiesFetched = isAllActivitiesFetched;
+    card.isActivitiesDetailsVisible = isActivitiesDetailsVisible;
+    card.isActivitiesDetailsFetching = isActivitiesDetailsFetching;
+    card.listId = listId;
+    card.boardId = boardId;
+    card.projectId = projectId;
+    card.users = users;
+    card.labels = labels;
+    card.tasks = tasks;
+    card.attachments = attachments;
+    card.activities = activities;
+    card.allProjectsToLists = allProjectsToLists;
+    card.allBoardMemberships = allBoardMemberships;
+    card.allLabels = allLabels;
+    card.canEdit = canEdit;
+    card.canEditCommentActivities = canEditCommentActivities;
+    card.canEditAllCommentActivities = canEditAllCommentActivities;
+    card.onUpdate = onUpdate;
+    card.onMove = onMove;
+    card.onTransfer = onTransfer;
+    card.onDelete = onDelete;
+    card.onUserAdd = onUserAdd;
+    card.onUserRemove = onUserRemove;
+    card.onBoardFetch = onBoardFetch;
+    card.onLabelAdd = onLabelAdd;
+    card.onLabelRemove = onLabelRemove;
+    card.onLabelCreate = onLabelCreate;
+    card.onLabelUpdate = onLabelUpdate;
+    card.onLabelMove = onLabelMove;
+    card.onLabelDelete = onLabelDelete;
+    card.onTaskCreate = onTaskCreate;
+    card.onTaskUpdate = onTaskUpdate;
+    card.onTaskMove = onTaskMove;
+    card.onTaskDelete = onTaskDelete;
+    card.onAttachmentCreate = onAttachmentCreate;
+    card.onAttachmentUpdate = onAttachmentUpdate;
+    card.onAttachmentDelete = onAttachmentDelete;
+    card.onActivitiesFetch = onActivitiesFetch;
+    card.onActivitiesDetailsToggle = onActivitiesDetailsToggle;
+    card.onCommentActivityCreate = onCommentActivityCreate;
+    card.onCommentActivityUpdate = onCommentActivityUpdate;
+    card.onCommentActivityDelete = onCommentActivityDelete;
+    card.onClose = onClose;
+    card.onCopyCard = onCopyCard;
+
     const isGalleryOpened = useRef(false);
 
     const handleToggleStopwatchClick = useCallback(() => {
@@ -532,17 +586,7 @@ const CardModal = React.memo(
                 </CardMovePopup>
                 <CardCopyPopup
                   projectsToLists={allProjectsToLists}
-                  defaultPath={{
-                    name,
-                    description,
-                    users,
-                    labels,
-                    tasks,
-                    attachments,
-                    projectId,
-                    boardId,
-                    listId,
-                  }}
+                  defaultPath={card}
                   onMove={onMove}
                   onTransfer={onTransfer}
                   onBoardFetch={onBoardFetch}
@@ -588,6 +632,7 @@ const CardModal = React.memo(
 );
 
 CardModal.propTypes = {
+  id: PropTypes.string,
   name: PropTypes.string.isRequired,
   description: PropTypes.string,
   dueDate: PropTypes.instanceOf(Date),
@@ -646,6 +691,7 @@ CardModal.defaultProps = {
   description: undefined,
   dueDate: undefined,
   stopwatch: undefined,
+  id: undefined,
 };
 
 export default CardModal;
diff --git a/client/src/components/CardMoveStep/CardMoveStep.jsx b/client/src/components/CardMoveStep/CardMoveStep.jsx
index 93448d9..90f2743 100644
--- a/client/src/components/CardMoveStep/CardMoveStep.jsx
+++ b/client/src/components/CardMoveStep/CardMoveStep.jsx
@@ -9,18 +9,8 @@ import { useForm } from '../../hooks';
 import styles from './CardMoveStep.module.scss';
 
 const CardMoveStep = React.memo(
-  ({
-    projectsToLists,
-    defaultPath,
-    onMove,
-    onTransfer,
-    onBoardFetch,
-    onBack,
-    onClose,
-    onCopyCard,
-  }) => {
+  ({ projectsToLists, defaultPath, onMove, onTransfer, onBoardFetch, onBack, onClose }) => {
     const [t] = useTranslation();
-
     const [path, handleFieldChange] = useForm(() => ({
       projectId: null,
       boardId: null,
@@ -112,7 +102,6 @@ const CardMoveStep = React.memo(
                   disabled={selectedProject.boards.length === 0}
                   className={styles.field}
                   onChange={handleBoardIdChange}
-                  onCopyCard={onCopyCard}
                 />
               </>
             )}
@@ -137,7 +126,6 @@ const CardMoveStep = React.memo(
                   disabled={selectedBoard.isFetching !== false || selectedBoard.lists.length === 0}
                   className={styles.field}
                   onChange={handleFieldChange}
-                  onCopyCard={onCopyCard}
                 />
               </>
             )}
@@ -163,7 +151,6 @@ CardMoveStep.propTypes = {
   onBoardFetch: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
-  onCopyCard: PropTypes.func.isRequired,
 };
 
 CardMoveStep.defaultProps = {
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index 5ba7af0..e6253aa 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -12,7 +12,6 @@ import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
 import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
-// import CardCopyStep from '../CardCopyStep';
 
 import styles from './List.module.scss';
 
@@ -136,6 +135,7 @@ const List = React.memo(
                     selectedOption={selectedOption}
                     setSelectedOption={setSelectedOption}
                     onCopyCard={onCopyCard}
+                    id={id}
                   >
                     <Button className={classNames(styles.headerButton, styles.target)}>
                       <Icon fitted name="pencil" size="small" />
diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
index 7f1ab38..d3f18ff 100755
--- a/client/src/containers/CardModalContainer.js
+++ b/client/src/containers/CardModalContainer.js
@@ -18,6 +18,7 @@ const mapStateToProps = (state) => {
   const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
   const {
+    id,
     name,
     description,
     dueDate,
@@ -46,6 +47,7 @@ const mapStateToProps = (state) => {
   }
 
   return {
+    id,
     name,
     description,
     dueDate,
diff --git a/client/src/containers/ListContainer.js b/client/src/containers/ListContainer.js
index 62496af..f50afc0 100755
--- a/client/src/containers/ListContainer.js
+++ b/client/src/containers/ListContainer.js
@@ -36,7 +36,6 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onDelete: () => entryActions.deleteList(id),
       onCardCreate: (data, autoOpen) => entryActions.createCard(id, data, autoOpen),
       onSort: (data) => entryActions.sortList(id, data),
-      onCardCopy: (data, autoOpen) => entryActions.copyCard(id, data, autoOpen),
     },
     dispatch,
   );

From 1de9deae6d7ba7c41cdba790b6ea1da31cb4afe5 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Wed, 31 May 2023 08:56:04 +0200
Subject: [PATCH 12/17] Fixed bug where new cards where not correctly created.

---
 client/src/sagas/core/services/cards.js | 34 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/client/src/sagas/core/services/cards.js b/client/src/sagas/core/services/cards.js
index bd17755..3ade422 100644
--- a/client/src/sagas/core/services/cards.js
+++ b/client/src/sagas/core/services/cards.js
@@ -44,24 +44,28 @@ export function* createCard(listId, data, autoOpen) {
   }
 
   // Add labels to card //
-  const arr = [];
-  Object.keys(nextData.labels).map((key) => arr.push(nextData.labels[key].id));
-  yield all(arr?.map((label) => call(addLabelToCard, label, card.id)));
-
+  if (nextData.labels) {
+    const arr = [];
+    Object.keys(nextData.labels).map((key) => arr.push(nextData.labels[key].id));
+    yield all(arr?.map((label) => call(addLabelToCard, label, card.id)));
+  }
   // Add tasks to card //
-  const tasks = [];
-  Object.keys(nextData.tasks)?.map((key) => tasks.push(nextData.tasks[key]));
-  tasks.forEach((task) => {
-    // eslint-disable-next-line no-param-reassign
-    task.id = `local:${task.id}`;
-  });
-
-  yield all(tasks?.map((task) => call(createTask, card.id, task)));
+  if (nextData.tasks) {
+    const tasks = [];
+    Object.keys(nextData.tasks)?.map((key) => tasks.push(nextData.tasks[key]));
+    tasks.forEach((task) => {
+      // eslint-disable-next-line no-param-reassign
+      task.id = `local:${task.id}`;
+    });
+    yield all(tasks?.map((task) => call(createTask, card.id, task)));
+  }
 
   // Add users to card //
-  const users = [];
-  Object.keys(nextData.users)?.map((key) => users.push(nextData.users[key].id));
-  yield all(users?.map((user) => call(addUserToCard, user, card.id)));
+  if (nextData.users) {
+    const users = [];
+    Object.keys(nextData.users)?.map((key) => users.push(nextData.users[key].id));
+    yield all(users?.map((user) => call(addUserToCard, user, card.id)));
+  }
 }
 
 export function* handleCardCreate(card) {

From 863bf71b72bedaf2e056b4be39fb9b58c27f20e2 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Wed, 31 May 2023 09:33:47 +0200
Subject: [PATCH 13/17] Code cleanup. Removed onCopyCard where it was not
 necessary.

---
 .../src/components/BoardActions/Filters.jsx   |   2 -
 client/src/components/Boards/Boards.jsx       | 198 +++++++++---------
 client/src/components/Card/ActionsStep.jsx    |   6 -
 client/src/components/CardModal/CardModal.jsx |  52 +----
 .../src/components/LabelsStep/LabelsStep.jsx  |   6 -
 client/src/components/List/List.jsx           |  20 +-
 client/src/containers/BoardsContainer.js      |   1 -
 7 files changed, 107 insertions(+), 178 deletions(-)

diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx
index 80a7a6e..c4e61c6 100644
--- a/client/src/components/BoardActions/Filters.jsx
+++ b/client/src/components/BoardActions/Filters.jsx
@@ -25,7 +25,6 @@ const Filters = React.memo(
     onLabelUpdate,
     onLabelMove,
     onLabelDelete,
-    // onCopyCard,
   }) => {
     const [t] = useTranslation();
 
@@ -122,7 +121,6 @@ Filters.propTypes = {
   onLabelUpdate: PropTypes.func.isRequired,
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
-  // onCopyCard: PropTypes.func.isRequired,
 };
 
 export default Filters;
diff --git a/client/src/components/Boards/Boards.jsx b/client/src/components/Boards/Boards.jsx
index fda6102..fad2047 100755
--- a/client/src/components/Boards/Boards.jsx
+++ b/client/src/components/Boards/Boards.jsx
@@ -14,118 +14,115 @@ import EditStep from './EditStep';
 
 import styles from './Boards.module.scss';
 
-const Boards = React.memo(
-  ({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete, onCopyCard }) => {
-    const tabsWrapper = useRef(null);
+const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
+  const tabsWrapper = useRef(null);
 
-    const handleWheel = useCallback(({ deltaY }) => {
-      tabsWrapper.current.scrollBy({
-        left: deltaY,
-      });
-    }, []);
+  const handleWheel = useCallback(({ deltaY }) => {
+    tabsWrapper.current.scrollBy({
+      left: deltaY,
+    });
+  }, []);
 
-    const handleDragStart = useCallback(() => {
-      closePopup();
-    }, []);
+  const handleDragStart = useCallback(() => {
+    closePopup();
+  }, []);
 
-    const handleDragEnd = useCallback(
-      ({ draggableId, source, destination }) => {
-        if (!destination || source.index === destination.index) {
-          return;
-        }
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
 
-        onMove(draggableId, destination.index);
-      },
-      [onMove],
-    );
+      onMove(draggableId, destination.index);
+    },
+    [onMove],
+  );
 
-    const handleUpdate = useCallback(
-      (id, data) => {
-        onUpdate(id, data);
-      },
-      [onUpdate],
-    );
+  const handleUpdate = useCallback(
+    (id, data) => {
+      onUpdate(id, data);
+    },
+    [onUpdate],
+  );
 
-    const handleDelete = useCallback(
-      (id) => {
-        onDelete(id);
-      },
-      [onDelete],
-    );
+  const handleDelete = useCallback(
+    (id) => {
+      onDelete(id);
+    },
+    [onDelete],
+  );
 
-    const AddPopup = usePopup(AddStep);
-    const EditPopup = usePopup(EditStep);
+  const AddPopup = usePopup(AddStep);
+  const EditPopup = usePopup(EditStep);
 
-    const itemsNode = items.map((item, index) => (
-      <Draggable
-        key={item.id}
-        draggableId={item.id}
-        index={index}
-        isDragDisabled={!item.isPersisted || !canEdit}
-      >
-        {({ innerRef, draggableProps, dragHandleProps }) => (
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
-            <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
-              {item.isPersisted ? (
-                <>
-                  <Link
-                    {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-                    to={Paths.BOARDS.replace(':id', item.id)}
-                    title={item.name}
-                    className={styles.link}
-                  >
-                    {item.name}
-                  </Link>
-                  {canEdit && (
-                    <EditPopup
-                      defaultData={pick(item, 'name')}
-                      onUpdate={(data) => handleUpdate(item.id, data)}
-                      onDelete={() => handleDelete(item.id)}
-                      onCopyCard={onCopyCard}
-                    >
-                      <Button className={classNames(styles.editButton, styles.target)}>
-                        <Icon fitted name="pencil" size="small" />
-                      </Button>
-                    </EditPopup>
-                  )}
-                </>
-              ) : (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <span {...dragHandleProps} className={styles.link}>
+  const itemsNode = items.map((item, index) => (
+    <Draggable
+      key={item.id}
+      draggableId={item.id}
+      index={index}
+      isDragDisabled={!item.isPersisted || !canEdit}
+    >
+      {({ innerRef, draggableProps, dragHandleProps }) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
+          <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
+            {item.isPersisted ? (
+              <>
+                <Link
+                  {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                  to={Paths.BOARDS.replace(':id', item.id)}
+                  title={item.name}
+                  className={styles.link}
+                >
                   {item.name}
-                </span>
-              )}
-            </div>
+                </Link>
+                {canEdit && (
+                  <EditPopup
+                    defaultData={pick(item, 'name')}
+                    onUpdate={(data) => handleUpdate(item.id, data)}
+                    onDelete={() => handleDelete(item.id)}
+                  >
+                    <Button className={classNames(styles.editButton, styles.target)}>
+                      <Icon fitted name="pencil" size="small" />
+                    </Button>
+                  </EditPopup>
+                )}
+              </>
+            ) : (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <span {...dragHandleProps} className={styles.link}>
+                {item.name}
+              </span>
+            )}
           </div>
-        )}
-      </Draggable>
-    ));
-
-    return (
-      <div className={styles.wrapper} onWheel={handleWheel}>
-        <div ref={tabsWrapper} className={styles.tabsWrapper}>
-          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-            <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
-              {({ innerRef, droppableProps, placeholder }) => (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <div {...droppableProps} ref={innerRef} className={styles.tabs}>
-                  {itemsNode}
-                  {placeholder}
-                  {canEdit && (
-                    <AddPopup onCreate={onCreate} onCopyCard={onCopyCard}>
-                      <Button icon="plus" className={styles.addButton} />
-                    </AddPopup>
-                  )}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
         </div>
+      )}
+    </Draggable>
+  ));
+
+  return (
+    <div className={styles.wrapper} onWheel={handleWheel}>
+      <div ref={tabsWrapper} className={styles.tabsWrapper}>
+        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+          <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+            {({ innerRef, droppableProps, placeholder }) => (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                {itemsNode}
+                {placeholder}
+                {canEdit && (
+                  <AddPopup onCreate={onCreate}>
+                    <Button icon="plus" className={styles.addButton} />
+                  </AddPopup>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 
 Boards.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -135,7 +132,6 @@ Boards.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
-  onCopyCard: PropTypes.func.isRequired,
 };
 
 Boards.defaultProps = {
diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
index 4dd97de..f1401ce 100644
--- a/client/src/components/Card/ActionsStep.jsx
+++ b/client/src/components/Card/ActionsStep.jsx
@@ -132,7 +132,6 @@ const ActionsStep = React.memo(
               onUserSelect={onUserAdd}
               onUserDeselect={onUserRemove}
               onBack={handleBack}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.LABELS:
@@ -147,7 +146,6 @@ const ActionsStep = React.memo(
               onMove={onLabelMove}
               onDelete={onLabelDelete}
               onBack={handleBack}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT_DUE_DATE:
@@ -157,7 +155,6 @@ const ActionsStep = React.memo(
               onUpdate={handleDueDateUpdate}
               onBack={handleBack}
               onClose={onClose}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT_STOPWATCH:
@@ -167,7 +164,6 @@ const ActionsStep = React.memo(
               onUpdate={handleStopwatchUpdate}
               onBack={handleBack}
               onClose={onClose}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.MOVE:
@@ -180,7 +176,6 @@ const ActionsStep = React.memo(
               onBoardFetch={onBoardFetch}
               onBack={handleBack}
               onClose={onClose}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.DELETE:
@@ -191,7 +186,6 @@ const ActionsStep = React.memo(
               buttonContent="action.deleteCard"
               onConfirm={onDelete}
               onBack={handleBack}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.COPY:
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index eadcd8c..a6f885f 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -259,7 +259,6 @@ const CardModal = React.memo(
                             currentUserIds={userIds}
                             onUserSelect={onUserAdd}
                             onUserDeselect={onUserRemove}
-                            onCopyCard={onCopyCard}
                           >
                             <User name={user.name} avatarUrl={user.avatarUrl} />
                           </BoardMembershipsPopup>
@@ -274,7 +273,6 @@ const CardModal = React.memo(
                         currentUserIds={userIds}
                         onUserSelect={onUserAdd}
                         onUserDeselect={onUserRemove}
-                        onCopyCard={onCopyCard}
                       >
                         <button
                           type="button"
@@ -306,7 +304,6 @@ const CardModal = React.memo(
                             onUpdate={onLabelUpdate}
                             onMove={onLabelMove}
                             onDelete={onLabelDelete}
-                            onCopyCard={onCopyCard}
                           >
                             <Label name={label.name} color={label.color} />
                           </LabelsPopup>
@@ -325,7 +322,6 @@ const CardModal = React.memo(
                         onUpdate={onLabelUpdate}
                         onMove={onLabelMove}
                         onDelete={onLabelDelete}
-                        onCopyCard={onCopyCard}
                       >
                         <button
                           type="button"
@@ -346,15 +342,11 @@ const CardModal = React.memo(
                     </div>
                     <span className={styles.attachment}>
                       {canEdit ? (
-                        <DueDateEditPopup
-                          defaultValue={dueDate}
-                          onUpdate={handleDueDateUpdate}
-                          onCopyCard={onCopyCard}
-                        >
-                          <DueDate value={dueDate} onCopyCard={onCopyCard} />
+                        <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
+                          <DueDate value={dueDate} />
                         </DueDateEditPopup>
                       ) : (
-                        <DueDate value={dueDate} onCopyCard={onCopyCard} />
+                        <DueDate value={dueDate} />
                       )}
                     </span>
                   </div>
@@ -372,18 +364,10 @@ const CardModal = React.memo(
                           defaultValue={stopwatch}
                           onUpdate={handleStopwatchUpdate}
                         >
-                          <Stopwatch
-                            startedAt={stopwatch.startedAt}
-                            total={stopwatch.total}
-                            onCopyCard={onCopyCard}
-                          />
+                          <Stopwatch startedAt={stopwatch.startedAt} total={stopwatch.total} />
                         </StopwatchEditPopup>
                       ) : (
-                        <Stopwatch
-                          startedAt={stopwatch.startedAt}
-                          total={stopwatch.total}
-                          onCopyCard={onCopyCard}
-                        />
+                        <Stopwatch startedAt={stopwatch.startedAt} total={stopwatch.total} />
                       )}
                     </span>
                     {canEdit && (
@@ -409,11 +393,7 @@ const CardModal = React.memo(
                   <Icon name="align justify" className={styles.moduleIcon} />
                   <div className={styles.moduleHeader}>{t('common.description')}</div>
                   {canEdit ? (
-                    <DescriptionEdit
-                      defaultValue={description}
-                      onUpdate={handleDescriptionUpdate}
-                      onCopyCard={onCopyCard}
-                    >
+                    <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
                         <button
                           type="button"
@@ -453,7 +433,6 @@ const CardModal = React.memo(
                     onUpdate={onTaskUpdate}
                     onMove={onTaskMove}
                     onDelete={onTaskDelete}
-                    onCopyCard={onCopyCard}
                   />
                 </div>
               </div>
@@ -471,7 +450,6 @@ const CardModal = React.memo(
                     onCoverUpdate={handleCoverUpdate}
                     onGalleryOpen={handleGalleryOpen}
                     onGalleryClose={handleGalleryClose}
-                    onCopyCard={onCopyCard}
                   />
                 </div>
               </div>
@@ -489,7 +467,6 @@ const CardModal = React.memo(
               onCommentCreate={onCommentActivityCreate}
               onCommentUpdate={onCommentActivityUpdate}
               onCommentDelete={onCommentActivityDelete}
-              onCopyCard={onCopyCard}
             />
           </Grid.Column>
           {canEdit && (
@@ -501,7 +478,6 @@ const CardModal = React.memo(
                   currentUserIds={userIds}
                   onUserSelect={onUserAdd}
                   onUserDeselect={onUserRemove}
-                  onCopyCard={onCopyCard}
                 >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="user outline" className={styles.actionIcon} />
@@ -517,18 +493,13 @@ const CardModal = React.memo(
                   onUpdate={onLabelUpdate}
                   onMove={onLabelMove}
                   onDelete={onLabelDelete}
-                  onCopyCard={onCopyCard}
                 >
                   <Button fluid className={styles.actionButton}>
                     <Icon name="bookmark outline" className={styles.actionIcon} />
                     {t('common.labels')}
                   </Button>
                 </LabelsPopup>
-                <DueDateEditPopup
-                  defaultValue={dueDate}
-                  onUpdate={handleDueDateUpdate}
-                  onCopyCard={onCopyCard}
-                >
+                <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="calendar check outline" className={styles.actionIcon} />
                     {t('common.dueDate', {
@@ -536,17 +507,13 @@ const CardModal = React.memo(
                     })}
                   </Button>
                 </DueDateEditPopup>
-                <StopwatchEditPopup
-                  defaultValue={stopwatch}
-                  onUpdate={handleStopwatchUpdate}
-                  onCopyCard={onCopyCard}
-                >
+                <StopwatchEditPopup defaultValue={stopwatch} onUpdate={handleStopwatchUpdate}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="clock outline" className={styles.actionIcon} />
                     {t('common.stopwatch')}
                   </Button>
                 </StopwatchEditPopup>
-                <AttachmentAddPopup onCreate={onAttachmentCreate} onCopyCard={onCopyCard}>
+                <AttachmentAddPopup onCreate={onAttachmentCreate}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="attach" className={styles.actionIcon} />
                     {t('common.attachment')}
@@ -573,7 +540,6 @@ const CardModal = React.memo(
                   onMove={onMove}
                   onTransfer={onTransfer}
                   onBoardFetch={onBoardFetch}
-                  onCopyCard={onCopyCard}
                 >
                   <Button
                     fluid
diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx
index 77e95b2..aeabc4d 100755
--- a/client/src/components/LabelsStep/LabelsStep.jsx
+++ b/client/src/components/LabelsStep/LabelsStep.jsx
@@ -32,7 +32,6 @@ const LabelsStep = React.memo(
     onMove,
     onDelete,
     onBack,
-    onCopyCard,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
@@ -119,7 +118,6 @@ const LabelsStep = React.memo(
               }}
               onCreate={onCreate}
               onBack={handleBack}
-              onCopyCard={onCopyCard}
             />
           );
         case StepTypes.EDIT: {
@@ -132,7 +130,6 @@ const LabelsStep = React.memo(
                 onUpdate={(data) => handleUpdate(currentItem.id, data)}
                 onDelete={() => handleDelete(currentItem.id)}
                 onBack={handleBack}
-                onCopyCard={onCopyCard}
               />
             );
           }
@@ -183,7 +180,6 @@ const LabelsStep = React.memo(
                         onSelect={() => handleSelect(item.id)}
                         onDeselect={() => handleDeselect(item.id)}
                         onEdit={() => handleEdit(item.id)}
-                        onCopyCard={onCopyCard}
                       />
                     ))}
                     {placeholder}
@@ -231,14 +227,12 @@ LabelsStep.propTypes = {
   onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func,
-  onCopyCard: PropTypes.func,
 };
 
 LabelsStep.defaultProps = {
   title: 'common.labels',
   canEdit: true,
   onBack: undefined,
-  onCopyCard: undefined,
 };
 
 export default LabelsStep;
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index e6253aa..dd140fb 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -16,18 +16,7 @@ import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-ic
 import styles from './List.module.scss';
 
 const List = React.memo(
-  ({
-    id,
-    index,
-    name,
-    isPersisted,
-    cardIds,
-    canEdit,
-    onUpdate,
-    onDelete,
-    onCardCreate,
-    onCopyCard,
-  }) => {
+  ({ id, index, name, isPersisted, cardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
     const [selectedOption, setSelectedOption] = useState('name');
@@ -134,8 +123,6 @@ const List = React.memo(
                     onSort={onSort}
                     selectedOption={selectedOption}
                     setSelectedOption={setSelectedOption}
-                    onCopyCard={onCopyCard}
-                    id={id}
                   >
                     <Button className={classNames(styles.headerButton, styles.target)}>
                       <Icon fitted name="pencil" size="small" />
@@ -183,11 +170,6 @@ List.propTypes = {
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCardCreate: PropTypes.func.isRequired,
-  onCopyCard: PropTypes.func,
-};
-
-List.defaultProps = {
-  onCopyCard: undefined,
 };
 
 export default List;
diff --git a/client/src/containers/BoardsContainer.js b/client/src/containers/BoardsContainer.js
index d0e6aee..fcca8ec 100755
--- a/client/src/containers/BoardsContainer.js
+++ b/client/src/containers/BoardsContainer.js
@@ -25,7 +25,6 @@ const mapDispatchToProps = (dispatch) =>
       onMove: entryActions.moveBoard,
       onDelete: entryActions.deleteBoard,
       onSort: entryActions.sortBoard,
-      onCopyCard: entryActions.copyCard,
     },
     dispatch,
   );

From 1ba1f472f6d7d6bb246350c7a099b0b3147bbfcf Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Wed, 31 May 2023 10:15:30 +0200
Subject: [PATCH 14/17] Code cleanup. Removed unnecessary code.

---
 client/src/components/CardCopyStep/CardCopyStep.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 4765381..889faac 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -158,7 +158,6 @@ const CardCopyStep = React.memo(
 );
 
 CardCopyStep.propTypes = {
-  id: PropTypes.string,
   // eslint-disable-next-line react/forbid-prop-types
   description: PropTypes.string,
   /* eslint-disable react/forbid-prop-types */
@@ -176,7 +175,6 @@ CardCopyStep.propTypes = {
 CardCopyStep.defaultProps = {
   onBack: undefined,
   description: undefined,
-  id: undefined,
 };
 
 export default CardCopyStep;

From 02195d734fa58d21e7f42162f23e08998e2b416d Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Wed, 31 May 2023 14:20:53 +0200
Subject: [PATCH 15/17] Fixed translations for all strings in sv and en
 locales.

---
 client/src/locales/en/core.js |  2 +-
 client/src/locales/sv/core.js | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index ffaf538..c325709 100644
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@@ -138,10 +138,10 @@ export default {
       seconds: 'Seconds',
       selectBoard: 'Select board',
       selectList: 'Select list',
-      sortList: 'Sort list',
       selectPermissions_title: 'Select Permissions',
       selectProject: 'Select project',
       settings: 'Settings',
+      sortList: 'Sort list',
       stopwatch: 'Stopwatch',
       subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
       taskActions_title: 'Task Actions',
diff --git a/client/src/locales/sv/core.js b/client/src/locales/sv/core.js
index 6fea429..fe78065 100644
--- a/client/src/locales/sv/core.js
+++ b/client/src/locales/sv/core.js
@@ -13,6 +13,7 @@ export default {
 
   translation: {
     common: {
+      aboutPlanka: 'Om Planka',
       account: 'Konto',
       actions: 'Åtgärder',
       addAttachment_title: 'Bifoga',
@@ -49,6 +50,9 @@ export default {
       background: 'Bakgrund',
       board: 'Tavla',
       boardNotFound_title: 'Tavla Ej Funnen',
+      canComment: 'Kan kommentera',
+      canEditContentOfBoard: 'Kan ändra innehåll för tavla',
+      canOnlyViewBoard: 'Kan bara titta på tavla',
       cardActions_title: 'Kortåtgärder',
       cardNotFound_title: 'Kort Ej Funnet',
       cardOrActionAreDeleted: 'Kort eller åtgärd är borttagen',
@@ -73,14 +77,18 @@ export default {
       deleteTask_title: 'Ta Bort Uppgift',
       deleteUser_title: 'Ta Bort Användare',
       description: 'Beskrivning',
+      detectAutomatically: 'Upptäck automatiskt',
       dropFileToUpload: 'Släpp en fil för att ladda upp',
+      editor: 'Fileditor',
       editAttachment_title: 'Redigera Bilaga',
       editAvatar_title: 'Redigera Avatar',
       editBoard_title: 'Redigera Tavla',
       editDueDate_title: 'Redigera Förfallodatum',
       editEmail_title: 'Redigera E-mail',
+      editInformation_title: 'Ändra Information',
       editLabel_title: 'Redigera Etikett',
       editPassword_title: 'Redigera Lösenord',
+      editPermissions_title: 'Ändra behörigheter',
       editStopwatch_title: 'Redigera Timer',
       editUsername_title: 'Redigera Användarnamn',
       email: 'E-mail',
@@ -94,10 +102,13 @@ export default {
       filterByLabels_title: 'Filtrera Efter Etiketter',
       filterByMembers_title: 'Filtrera Efter Medlemmar',
       fromComputer_title: 'Från dator',
+      fromTrello: 'Från Trello',
       general: 'Allmänt',
       hours: 'Timmar',
+      importBoard_title: 'Importera Tavla',
       invalidCurrentPassword: 'Ogiltigt nuvarande lösenord',
       labels: 'Etiketter',
+      language: 'Språk',
       leaveBoard_title: 'Lämna Tavla',
       leaveProject_title: 'Lämna Projekt',
       list: 'Lista',
@@ -127,9 +138,13 @@ export default {
       projectNotFound_title: 'Projekt Ej Funnet',
       removeManager_title: 'Ta Bort Projektledare',
       removeMember_title: 'Ta Bort Medlem',
+      searchLabels: 'Sök etiketter...',
+      searchMembers: 'Sök medlemmar...',
+      searchUsers: 'Sök användare...',
       seconds: 'Sekunder',
       selectBoard: 'Välj tavla',
       selectList: 'Välj lista',
+      selectPermissions_title: 'Välj behörigheter',
       selectProject: 'Välj projekt',
       settings: 'Inställningar',
       sortList: 'Sortera listan',
@@ -149,6 +164,8 @@ export default {
       username: 'Användarnamn',
       usernameAlreadyInUse: 'Användarnamnet används redan',
       users: 'Användare',
+      version: 'Version',
+      viewer: 'Visare',
       writeComment: 'Skriv en kommentar...',
     },
 
@@ -160,6 +177,7 @@ export default {
       addCard_title: 'Lägg Till Kort',
       addComment: 'Lägg till kommentar',
       addList: 'Lägg till lista',
+      addMember: 'Lääg till medlem',
       addMoreDetailedDescription: 'Lägg till en mer detaljerad beskrivning',
       addTask: 'Lägg till uppgift',
       addToCard: 'Lägg till i kort',
@@ -192,9 +210,12 @@ export default {
       editDescription_title: 'Redigera Beskrivning',
       editEmail_title: 'Redigera E-mail',
       editPassword_title: 'Redigera Lösenord',
+      editPermissions: 'Ändra behörigheter',
       editStopwatch_title: 'Redigera Timer',
       editTitle_title: 'Redigera Titel',
       editUsername_title: 'Redigera Användarnamn',
+      hideDetails: 'Dölj detaljer',
+      import: 'Importera',
       leaveBoard: 'Lämna tavla',
       leaveProject: 'Lämna projekt',
       logOut_title: 'Logga ut',
@@ -210,6 +231,7 @@ export default {
       removeMember: 'Ta bort medlem',
       save: 'Spara',
       showAllAttachments: 'Visa alla bilagor ({{hidden}} dolda)',
+      showDetails: 'Visa detaljer',
       showFewerAttachments: 'Visa färre bilagor',
       sortByCreatedAt: ' Sortera på skapad',
       sortByCreatorUserIdList: ' Sortera på skapad av',

From 18b0ad726833755471019562ffd208ba949dca69 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Thu, 1 Jun 2023 16:29:08 +0200
Subject: [PATCH 16/17] Removed copying of dueDate since null values are not
 supported.

---
 client/src/components/Card/ActionsStep.jsx          | 4 +++-
 client/src/components/CardCopyStep/CardCopyStep.jsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
index f1401ce..fee9d40 100644
--- a/client/src/components/Card/ActionsStep.jsx
+++ b/client/src/components/Card/ActionsStep.jsx
@@ -61,7 +61,9 @@ const ActionsStep = React.memo(
     defaultPath.listId = card.listId;
     defaultPath.cardId = card.id;
     defaultPath.name = card.name;
-    defaultPath.dueDate = card.dueDate;
+    if (card.dueDate !== null) {
+      defaultPath.dueDate = card.dueDate;
+    }
     defaultPath.stopwatch = card.stopwatch;
     defaultPath.labels = card.labels;
     defaultPath.boardMemberships = boardMemberships;
diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 889faac..8d4b1cf 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -35,7 +35,7 @@ const CardCopyStep = React.memo(
       attachments: defaultPath.attachments,
       labels: defaultPath.labels,
       users: defaultPath.users,
-      dueDate: defaultPath.dueDate,
+      // dueDate: defaultPath.dueDate,
       ...defaultPath,
     }));
 

From dd26e13af61595f52792f4159f1a1eb71442be50 Mon Sep 17 00:00:00 2001
From: Jens Frost <jens@aveo.se>
Date: Thu, 1 Jun 2023 16:56:10 +0200
Subject: [PATCH 17/17] Fixed bug where cards without dueDate were not copied.

---
 client/src/components/Card/ActionsStep.jsx          | 6 ++++++
 client/src/components/CardCopyStep/CardCopyStep.jsx | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
index fee9d40..f2c12c0 100644
--- a/client/src/components/Card/ActionsStep.jsx
+++ b/client/src/components/Card/ActionsStep.jsx
@@ -64,6 +64,12 @@ const ActionsStep = React.memo(
     if (card.dueDate !== null) {
       defaultPath.dueDate = card.dueDate;
     }
+    if (card.dueDate === null || card.dueDate === undefined) {
+      // eslint-disable-next-line no-param-reassign
+      if (defaultPath.dueDate) {
+        delete defaultPath.dueDate;
+      }
+    }
     defaultPath.stopwatch = card.stopwatch;
     defaultPath.labels = card.labels;
     defaultPath.boardMemberships = boardMemberships;
diff --git a/client/src/components/CardCopyStep/CardCopyStep.jsx b/client/src/components/CardCopyStep/CardCopyStep.jsx
index 8d4b1cf..544e98b 100644
--- a/client/src/components/CardCopyStep/CardCopyStep.jsx
+++ b/client/src/components/CardCopyStep/CardCopyStep.jsx
@@ -25,6 +25,11 @@ const CardCopyStep = React.memo(
       });
     }
 
+    if (defaultPath.dueDate === null || defaultPath.dueDate === undefined) {
+      // eslint-disable-next-line no-param-reassign
+      delete defaultPath.dueDate;
+    }
+
     const [path, handleFieldChange] = useForm(() => ({
       projectId: null,
       boardId: null,
@@ -35,7 +40,6 @@ const CardCopyStep = React.memo(
       attachments: defaultPath.attachments,
       labels: defaultPath.labels,
       users: defaultPath.users,
-      // dueDate: defaultPath.dueDate,
       ...defaultPath,
     }));