plankanban · robsonvnt · Apr 22, 2024 · Apr 22, 2024
diff --git a/client/README.md b/client/README.md
@@ -1 +1,3 @@
-# Planka client
+# Frontend
+
+The Planka frontend uses a combination of React, Redux, and Saga for state management and side effects, providing a rich and responsive user experience.
diff --git a/client/src/actions/cards.js b/client/src/actions/cards.js
@@ -49,6 +49,13 @@ updateCard.success = (card) => ({
   },
 });
 
+updateCard.archive_success = (card) => ({
+  type: ActionTypes.CARD_ARCHIVE__SUCCESS,
+  payload: {
+    card,
+  },
+});
+
 updateCard.failure = (id, error) => ({
   type: ActionTypes.CARD_UPDATE__FAILURE,
   payload: {

diff --git a/client/src/components/Boards/EditStep.jsx b/client/src/components/Boards/EditStep.jsx
@@ -6,7 +6,7 @@ import { Button, Form } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm, useSteps } from '../../hooks';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './EditStep.module.scss';
 
@@ -54,7 +54,7 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onClose }) => {
 
   if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
+      <ConfirmStep
         title="common.deleteBoard"
         content="common.areYouSureYouWantToDeleteThisBoard"
         buttonContent="action.deleteBoard"

diff --git a/client/src/components/Card/ActionsStep.jsx b/client/src/components/Card/ActionsStep.jsx
@@ -11,9 +11,10 @@ import LabelsStep from '../LabelsStep';
 import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './ActionsStep.module.scss';
+import { CardStatus } from '../../constants/Enums';
 
 const StepTypes = {
   USERS: 'USERS',
@@ -22,6 +23,7 @@ const StepTypes = {
   EDIT_STOPWATCH: 'EDIT_STOPWATCH',
   MOVE: 'MOVE',
   DELETE: 'DELETE',
+  ARCHIVE: 'ARCHIVE',
 };
 
 const ActionsStep = React.memo(
@@ -48,6 +50,7 @@ const ActionsStep = React.memo(
     onLabelMove,
     onLabelDelete,
     onClose,
+    onArchive,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
@@ -82,6 +85,10 @@ const ActionsStep = React.memo(
       onClose();
     }, [onDuplicate, onClose]);
 
+    const handleArchiveClick = useCallback(() => {
+      openStep(StepTypes.ARCHIVE);
+    }, [openStep]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
@@ -162,14 +169,24 @@ const ActionsStep = React.memo(
           );
         case StepTypes.DELETE:
           return (
-            <DeleteStep
+            <ConfirmStep
               title="common.deleteCard"
               content="common.areYouSureYouWantToDeleteThisCard"
               buttonContent="action.deleteCard"
               onConfirm={onDelete}
               onBack={handleBack}
             />
           );
+        case StepTypes.ARCHIVE:
+          return (
+            <ConfirmStep
+              title="common.archiveCard_title"
+              content="common.areYouSureYouWantToArchiveThisCard"
+              buttonContent="action.archiveCard"
+              onConfirm={onArchive}
+              onBack={handleBack}
+            />
+          );
         default:
       }
     }
@@ -218,6 +235,11 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleArchiveClick}>
+              {t('action.archiveCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
               {t('action.deleteCard', {
                 context: 'title',
@@ -255,6 +277,7 @@ ActionsStep.propTypes = {
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
+  onArchive: PropTypes.func.isRequired,
 };
 
 export default ActionsStep;
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
@@ -17,6 +17,7 @@ import DueDate from '../DueDate';
 import Stopwatch from '../Stopwatch';
 
 import styles from './Card.module.scss';
+import { CardStatus } from '../../constants/Enums';
 
 const Card = React.memo(
   ({
@@ -81,6 +82,13 @@ const Card = React.memo(
       [onUpdate],
     );
 
+    const handleArchiveClick = useCallback(() => {
+      onUpdate({
+        status: CardStatus.ARCHIVED,
+      });
+      onClose();
+    }, [onUpdate]);
+
     const handleNameEdit = useCallback(() => {
       nameEdit.current.open();
     }, []);
@@ -197,6 +205,7 @@ const Card = React.memo(
                         onLabelUpdate={onLabelUpdate}
                         onLabelMove={onLabelMove}
                         onLabelDelete={onLabelDelete}
+                        onArchive={handleArchiveClick}
                       >
                         <Button className={classNames(styles.actionsButton, styles.target)}>
                           <Icon fitted name="pencil" size="small" />

diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx
@@ -9,7 +9,7 @@ import { Markdown } from '../../../lib/custom-ui';
 import getDateFormat from '../../../utils/get-date-format';
 import CommentEdit from './CommentEdit';
 import User from '../../User';
-import DeleteStep from '../../DeleteStep';
+import ConfirmStep from '../../ConfirmStep';
 
 import styles from './ItemComment.module.scss';
 
@@ -23,7 +23,7 @@ const ItemComment = React.memo(
       commentEdit.current.open();
     }, []);
 
-    const DeletePopup = usePopup(DeleteStep);
+    const DeletePopup = usePopup(ConfirmStep);
 
     return (
       <Comment>

diff --git a/client/src/components/CardModal/Attachments/EditStep.jsx b/client/src/components/CardModal/Attachments/EditStep.jsx
@@ -6,7 +6,7 @@ import { Button, Form } from 'semantic-ui-react';
 import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useForm, useSteps } from '../../../hooks';
-import DeleteStep from '../../DeleteStep';
+import ConfirmStep from '../../ConfirmStep';
 
 import styles from './EditStep.module.scss';
 
@@ -54,7 +54,7 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onClose }) => {
 
   if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
+      <ConfirmStep
         title="common.deleteAttachment"
         content="common.areYouSureYouWantToDeleteThisAttachment"
         buttonContent="action.deleteAttachment"

diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
@@ -23,9 +23,10 @@ import LabelsStep from '../LabelsStep';
 import DueDateEditStep from '../DueDateEditStep';
 import StopwatchEditStep from '../StopwatchEditStep';
 import CardMoveStep from '../CardMoveStep';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './CardModal.module.scss';
+import { CardStatus } from '../../constants/Enums';
 
 const CardModal = React.memo(
   ({
@@ -141,6 +142,13 @@ const CardModal = React.memo(
       });
     }, [isSubscribed, onUpdate]);
 
+    const handleArchiveClick = useCallback(() => {
+      onUpdate({
+        status: CardStatus.ARCHIVED,
+      });
+      onClose();
+    }, [onUpdate, onClose]);
+
     const handleDuplicateClick = useCallback(() => {
       onDuplicate();
       onClose();
@@ -168,7 +176,7 @@ const CardModal = React.memo(
     const DueDateEditPopup = usePopup(DueDateEditStep);
     const StopwatchEditPopup = usePopup(StopwatchEditStep);
     const CardMovePopup = usePopup(CardMoveStep);
-    const DeletePopup = usePopup(DeleteStep);
+    const DeletePopup = usePopup(ConfirmStep);
 
     const userIds = users.map((user) => user.id);
     const labelIds = labels.map((label) => label.id);
@@ -506,6 +514,19 @@ const CardModal = React.memo(
                   <Icon name="copy outline" className={styles.actionIcon} />
                   {t('action.duplicate')}
                 </Button>
+
+                <DeletePopup
+                  title="common.archiveCard"
+                  content="common.areYouSureYouWantToArchiveThisCard"
+                  buttonContent="action.archiveCard"
+                  onConfirm={handleArchiveClick}
+                >
+                  <Button fluid className={styles.actionButton}>
+                    <Icon name="archive icon" className={styles.actionIcon} />
+                    {t('action.archive')}
+                  </Button>
+                </DeletePopup>
+
                 <DeletePopup
                   title="common.deleteCard"
                   content="common.areYouSureYouWantToDeleteThisCard"

diff --git a/client/src/components/CardModal/Tasks/ActionsStep.jsx b/client/src/components/CardModal/Tasks/ActionsStep.jsx
@@ -5,7 +5,7 @@ import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';
 
 import { useSteps } from '../../../hooks';
-import DeleteStep from '../../DeleteStep';
+import ConfirmStep from '../../ConfirmStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -28,7 +28,7 @@ const ActionsStep = React.memo(({ onNameEdit, onDelete, onClose }) => {
 
   if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
+      <ConfirmStep
         title="common.deleteTask"
         content="common.areYouSureYouWantToDeleteThisTask"
         buttonContent="action.deleteTask"

diff --git a/.../src/components/DeleteStep/DeleteStep.jsx → ...rc/components/ConfirmStep/ConfirmStep.jsx b/.../src/components/DeleteStep/DeleteStep.jsx → ...rc/components/ConfirmStep/ConfirmStep.jsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
-import styles from './DeleteStep.module.scss';
+import styles from './ConfirmStep.module.scss';
 
-const DeleteStep = React.memo(({ title, content, buttonContent, onConfirm, onBack }) => {
+const ConfirmStep = React.memo(({ title, content, buttonContent, onConfirm, onBack }) => {
   const [t] = useTranslation();
 
   return (
@@ -24,16 +24,16 @@ const DeleteStep = React.memo(({ title, content, buttonContent, onConfirm, onBac
   );
 });
 
-DeleteStep.propTypes = {
+ConfirmStep.propTypes = {
   title: PropTypes.string.isRequired,
   content: PropTypes.string.isRequired,
   buttonContent: PropTypes.string.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onBack: PropTypes.func,
 };
 
-DeleteStep.defaultProps = {
+ConfirmStep.defaultProps = {
   onBack: undefined,
 };
 
-export default DeleteStep;
+export default ConfirmStep;
diff --git a/...ponents/DeleteStep/DeleteStep.module.scss → ...nents/ConfirmStep/ConfirmStep.module.scss b/...ponents/DeleteStep/DeleteStep.module.scss → ...nents/ConfirmStep/ConfirmStep.module.scss
diff --git a/client/src/components/ConfirmStep/index.js b/client/src/components/ConfirmStep/index.js
@@ -0,0 +1,3 @@
+import ConfirmStep from './ConfirmStep';
+
+export default ConfirmStep;
diff --git a/client/src/components/DeleteStep/index.js b/client/src/components/DeleteStep/index.js
diff --git a/client/src/components/LabelsStep/EditStep.jsx b/client/src/components/LabelsStep/EditStep.jsx
@@ -8,7 +8,7 @@ import { Popup } from '../../lib/custom-ui';
 import { useForm, useSteps } from '../../hooks';
 import LabelColors from '../../constants/LabelColors';
 import Editor from './Editor';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './EditStep.module.scss';
 
@@ -46,7 +46,7 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onBack }) => {
 
   if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
+      <ConfirmStep
         title="common.deleteLabel"
         content="common.areYouSureYouWantToDeleteThisLabel"
         buttonContent="action.deleteLabel"

diff --git a/client/src/components/List/ActionsStep.jsx b/client/src/components/List/ActionsStep.jsx
@@ -5,7 +5,7 @@ import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -33,7 +33,7 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
 
   if (step && step.type === StepTypes.DELETE) {
     return (
-      <DeleteStep
+      <ConfirmStep
         title="common.deleteList"
         content="common.areYouSureYouWantToDeleteThisList"
         buttonContent="action.deleteList"

diff --git a/client/src/components/Memberships/ActionsStep.jsx b/client/src/components/Memberships/ActionsStep.jsx
@@ -6,7 +6,7 @@ import { Button } from 'semantic-ui-react';
 
 import { useSteps } from '../../hooks';
 import User from '../User';
-import DeleteStep from '../DeleteStep';
+import ConfirmStep from '../ConfirmStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -71,7 +71,7 @@ const ActionsStep = React.memo(
         }
         case StepTypes.DELETE:
           return (
-            <DeleteStep
+            <ConfirmStep
               title={membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle}
               content={
                 membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent

diff --git a/client/src/components/ProjectSettingsModal/GeneralPane/GeneralPane.jsx b/client/src/components/ProjectSettingsModal/GeneralPane/GeneralPane.jsx
@@ -5,14 +5,14 @@ import { Button, Divider, Header, Tab } from 'semantic-ui-react';
 import { usePopup } from '../../../lib/popup';
 
 import InformationEdit from './InformationEdit';
-import DeleteStep from '../../DeleteStep';
+import ConfirmStep from '../../ConfirmStep';
 
 import styles from './GeneralPane.module.scss';
 
 const GeneralPane = React.memo(({ name, onUpdate, onDelete }) => {
   const [t] = useTranslation();
 
-  const DeletePopup = usePopup(DeleteStep);
+  const DeletePopup = usePopup(ConfirmStep);
 
   return (
     <Tab.Pane attached={false} className={styles.wrapper}>

diff --git a/client/src/components/UsersModal/Item/ActionsStep.jsx b/client/src/components/UsersModal/Item/ActionsStep.jsx
@@ -10,7 +10,7 @@ import UserInformationEditStep from '../../UserInformationEditStep';
 import UserUsernameEditStep from '../../UserUsernameEditStep';
 import UserEmailEditStep from '../../UserEmailEditStep';
 import UserPasswordEditStep from '../../UserPasswordEditStep';
-import DeleteStep from '../../DeleteStep';
+import ConfirmStep from '../../ConfirmStep';
 
 import styles from './ActionsStep.module.scss';
 
@@ -110,7 +110,7 @@ const ActionsStep = React.memo(
           );
         case StepTypes.DELETE:
           return (
-            <DeleteStep
+            <ConfirmStep
               title="common.deleteUser"
               content="common.areYouSureYouWantToDeleteThisUser"
               buttonContent="action.deleteUser"

diff --git a/client/src/constants/ActionTypes.js b/client/src/constants/ActionTypes.js
@@ -201,6 +201,7 @@ export default {
   CARD_DELETE__SUCCESS: 'CARD_DELETE__SUCCESS',
   CARD_DELETE__FAILURE: 'CARD_DELETE__FAILURE',
   CARD_DELETE_HANDLE: 'CARD_DELETE_HANDLE',
+  CARD_ARCHIVE__SUCCESS: 'CARD_ARCHIVE__SUCCESS',
 
   /* Tasks */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ConfirmStep from './ConfirmStep';

		export default ConfirmStep;