feat: added checkbox on card detail section enable to mark the card a…

…s DONE and UNDONE
zidoro · Jul 13, 2020 · 65b9e53 · 65b9e53
1 parent 5735d59
commit 65b9e53
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 9 deletions.
diff --git a/app/src/routes/Tasks/TaskDetails/TaskDetails.tsx b/app/src/routes/Tasks/TaskDetails/TaskDetails.tsx
@@ -11,6 +11,8 @@ import {
   editTaskCard,
   editTaskCardText,
   removeTaskCard,
+  setTaskCardDone,
+  setTaskCardNotDone,
 } from "store";
 import { ElectronContext } from "contexts";
 import autoSize from "autosize";
@@ -21,6 +23,7 @@ import {
   StyledDescriptionWrappper,
   StyledDescriptionFormatHelp,
 } from "styles";
+import { Checkbox } from "components";
 
 import CloseButton from "./CloseButton";
 import DeleteButton from "./DeleteButton";
@@ -113,6 +116,17 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
       []
     );
 
+    const setTaskCardDoneCallback = useCallback(
+      (e) => {
+        if (e.currentTarget.checked) {
+          dispatch(setTaskCardDone(listId, card?._id));
+        } else {
+          dispatch(setTaskCardNotDone(listId, card?._id));
+        }
+      },
+      [dispatch, listId, card]
+    );
+
     const editDescriptionCallback = useCallback(
       () => setEditingDescription(true),
       []
@@ -186,6 +200,11 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
               onClick={editDescriptionCallback}
             />
           )}
+          <Checkbox
+            label="Done"
+            checked={card?.done}
+            onChange={setTaskCardDoneCallback}
+          />
         </StyledDescriptionWrappper>
 
         <DeleteButton onClick={onCardDeleteAction} />

diff --git a/app/src/store/tasks/actions.ts b/app/src/store/tasks/actions.ts
@@ -13,6 +13,7 @@ import {
   SET_TASK_LIST_PRIORITY,
   SET_TASK_CARD_DONE,
   SKIP_TASK_CARD,
+  SET_TASK_CARD_NOT_DONE,
 } from "./types";
 
 export const addTaskList = (title: TaskTypes["title"]): TasksActionTypes => {
@@ -100,6 +101,16 @@ export const setTaskCardDone = (
   };
 };
 
+export const setTaskCardNotDone = (
+  listId?: TaskTypes["_id"],
+  cardId?: CardTypes["_id"]
+): TasksActionTypes => {
+  return {
+    type: SET_TASK_CARD_NOT_DONE,
+    payload: { listId, cardId },
+  };
+};
+
 export const skipTaskCard = (listId?: TaskTypes["_id"]): TasksActionTypes => {
   return {
     type: SKIP_TASK_CARD,

diff --git a/app/src/store/tasks/reducer.ts b/app/src/store/tasks/reducer.ts
@@ -15,6 +15,7 @@ import {
   CardTypes,
   SET_TASK_CARD_DONE,
   SKIP_TASK_CARD,
+  SET_TASK_CARD_NOT_DONE,
 } from "./types";
 import undoable from "redux-undo";
 
@@ -166,6 +167,26 @@ const tasksReducer = (state = initialState, action: TasksActionTypes) => {
 
       return newState;
     }
+    case SET_TASK_CARD_NOT_DONE: {
+      const newState = state.map((list) => {
+        if (list._id === action.payload.listId) {
+          const cards = list.cards.map((card) => {
+            if (card._id === action.payload.cardId) {
+              return {
+                ...card,
+                done: false,
+              };
+            }
+            return card;
+          });
+
+          return { ...list, cards };
+        }
+        return list;
+      });
+
+      return newState;
+    }
     case SKIP_TASK_CARD: {
       const newState = state.map((list) => {
         if (list._id === action.payload.listId) {

diff --git a/app/src/store/tasks/types.ts b/app/src/store/tasks/types.ts
@@ -29,6 +29,7 @@ export const EDIT_TASK_CARD_TEXT = `${tasks} EDIT_TASK_CARD_TEXT`;
 export const EDIT_TASK_CARD_DESCRIPTION = `${tasks} EDIT_TASK_CARD_DESCRIPTION`;
 
 export const SET_TASK_CARD_DONE = `${tasks} SET_TASK_CARD_DONE`;
+export const SET_TASK_CARD_NOT_DONE = `${tasks} SET_TASK_CARD_NOT_DONE`;
 export const SKIP_TASK_CARD = `${tasks} SKIP_TASK_CARD`;
 
 export type TasksActionTypes = {

diff --git a/app/src/styles/components/checkbox.ts b/app/src/styles/components/checkbox.ts
@@ -17,7 +17,7 @@ export const StyledCheckboxBox = styled.span`
   border: 2px solid var(--color-border-secondary);
   background-color: var(--color-bg-tertiary);
 
-  box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.16);
+  box-shadow: 0 0 0 0 rgba(var(--color-green-rgb), 0.16);
 
   transition: ${themes.transition};
 
@@ -50,8 +50,8 @@ export const StyledCheckbox = styled.label<{ disabled?: boolean }>`
   }
 
   & > input:checked + ${StyledCheckboxBox} {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary);
+    border-color: var(--color-green);
+    background-color: var(--color-green);
   }
 
   & > input:checked + ${StyledCheckboxBox}::after {
@@ -60,26 +60,26 @@ export const StyledCheckbox = styled.label<{ disabled?: boolean }>`
   }
 
   & > input:checked ~ ${StyledCheckboxLabel} {
-    color: var(--color-primary);
+    color: var(--color-green);
   }
 
   &:hover ${StyledCheckboxBox} {
     box-shadow: ${(p) =>
       p.disabled
-        ? "0 0 0 0.2rem rgba(var(--color-primary-rgb), 0)"
-        : "0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.16)"};
+        ? "0 0 0 0.2rem rgba(var(--color-green-rgb), 0)"
+        : "0 0 0 0.2rem rgba(var(--color-green-rgb), 0.16)"};
   }
 
   &:active ${StyledCheckboxBox} {
     box-shadow: ${(p) =>
       p.disabled
-        ? "0 0 0 0.4rem rgba(var(--color-primary-rgb), 0)"
-        : "0 0 0 0.4rem rgba(var(--color-primary-rgb), 0.16)"};
+        ? "0 0 0 0.4rem rgba(var(--color-green-rgb), 0)"
+        : "0 0 0 0.4rem rgba(var(--color-green-rgb), 0.16)"};
   }
 
   &:hover ${StyledCheckboxLabel}, &:focus ${StyledCheckboxLabel} {
     color: ${(p) =>
-      p.disabled ? "var(--color-disabled-text)" : "var(--color-primary)"};
+      p.disabled ? "var(--color-disabled-text)" : "var(--color-green)"};
   }
 
   ${StyledCheckboxLabel} {

diff --git a/app/src/styles/routes/tasks/details.ts b/app/src/styles/routes/tasks/details.ts
@@ -118,6 +118,7 @@ export const StyledDescriptionArea = styled(StyledTextArea)`
   grid-column: 1 / -1;
 
   min-height: 7.2rem;
+  max-height: 15.4rem;
   background-color: var(--color-bg-secondary);
 `;
 
@@ -141,6 +142,7 @@ export const StyledDescriptionFormatHelp = styled.a`
 export const StyledDescriptionPreviewer = styled.div<{ hasValue?: boolean }>`
   width: 100%;
   min-height: 7.2rem;
+  max-height: 20rem;
 
   padding: 0.5rem 1rem;
   padding-bottom: 1rem;