Merge pull request #1910 from tijlleenders/vin/1400/reschedule

reschedule feature
tijlleenders · May 28, 2024 · 4c89da8 · 4c89da8
2 parents 24f7276 + 4a02219
commit 4c89da8
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 271 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "dexie-export-import": "^4.0.7",
     "i18next": "^21.6.11",
     "i18next-browser-languagedetector": "^6.1.3",
-    "moment": "^2.29.2",
+    "moment": "^2.30.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.4",

diff --git a/src/Interfaces/IScheduler.ts b/src/Interfaces/IScheduler.ts
@@ -43,8 +43,8 @@ export interface ISchedulerInputGoal {
     afterTime?: number;
     beforeTime?: number;
     onDays?: string[];
-    notOn?: blockedSlotOfTask[];
   };
+  notOn?: blockedSlotOfTask[];
   repeat?: string;
   budget?: {
     minPerDay?: number;

diff --git a/src/common/Icon.tsx b/src/common/Icon.tsx
@@ -648,6 +648,14 @@ const Icon: React.FC<IconProps> = ({ title, active }) => {
         </svg>
       );
 
+    case "Clock":
+      return (
+        <svg viewBox="0 0 1024 1024" fill={color2} height="40" width="40">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
+          <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z" />
+        </svg>
+      );
+
     default:
       return null;
   }

diff --git a/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss b/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss
@@ -7,7 +7,7 @@
   .goal-action {
     width: unset !important;
     border: none;
-    border-radius: 0 !important;
+    border-radius: 0;
     cursor: pointer;
     background: var(--bottom-nav-color) !important;
   }
@@ -37,7 +37,7 @@
     border-radius: 0 0 0 28px !important;
   }
   .goal-action:last-child {
-    border-radius: 0 0 28px 0 !important;
+    border-radius: 0 0 28px 0;
   }
 
   .goal-action-archive {

diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx
@@ -20,6 +20,7 @@ import { displayToast, lastAction, focusTaskTitle } from "@src/store";
 import { addTask, completeTask, forgetTask, getTaskByGoalId } from "@src/api/TasksAPI";
 
 import "./index.scss";
+import { displayReschedule } from "@src/store/TaskState";
 import { GoalTiming } from "./GoalTiming";
 import { TaskOptions } from "./TaskOptions";
 import { updateImpossibleGoals } from "./updateImpossibleGoals";
@@ -53,6 +54,7 @@ export const MyTimeline: React.FC<MyTimelineProps> = ({ day, myTasks, taskDetail
   const setShowToast = useSetRecoilState(displayToast);
   const setLastAction = useSetRecoilState(lastAction);
   const setTaskTitle = useSetRecoilState(focusTaskTitle);
+  const setOpenReschedule = useSetRecoilState(displayReschedule);
 
   const [displayOptionsIndex, setDisplayOptionsIndex] = useState("root");
 
@@ -103,25 +105,30 @@ export const MyTimeline: React.FC<MyTimelineProps> = ({ day, myTasks, taskDetail
     if (day === "Today") {
       const taskItem = await getTaskByGoalId(task.goalid);
       if (!taskItem) {
+        console.log("task not found");
+
         await addTask({
           id: uuidv4(),
           goalId: task.goalid,
           title: task.title,
-          completedTodayIds: [task.taskid],
+          completedTodayIds: [],
           forgotToday:
             actionName === "Skip" ? [`${getHrFromDateString(task.start)}-${getHrFromDateString(task.deadline)}`] : [],
           completedToday: actionName === "Done" ? Number(task.duration) : 0,
           lastForget: actionName === "Skip" ? new Date().toLocaleDateString() : "",
           lastCompleted: actionName === "Done" ? new Date().toLocaleDateString() : "",
           hoursSpent: 0,
-          completedTodayTimings: [
-            {
-              goalid: task.goalid,
-              start: task.start,
-              deadline: task.deadline,
-            },
-          ],
-          blockedSlots: [], // actionName === "Reschedule" ? [{ start: task.start, end: task.deadline }] : [],
+          completedTodayTimings:
+            actionName === "Done"
+              ? [
+                  {
+                    goalid: task.goalid,
+                    start: task.start,
+                    deadline: task.deadline,
+                  },
+                ]
+              : [],
+          blockedSlots: [],
         });
         // if (actionName === "Reschedule") {
         //   setOpenReschedule({ ...task });
@@ -133,7 +140,7 @@ export const MyTimeline: React.FC<MyTimelineProps> = ({ day, myTasks, taskDetail
       } else if (actionName === "Skip") {
         await forgetTask(taskItem.id, `${getHrFromDateString(task.start)}-${getHrFromDateString(task.deadline)}`, task);
       } else if (actionName === "Reschedule") {
-        // setOpenReschedule({ ...task });
+        setOpenReschedule(task);
       }
       if (actionName === "Done") {
         await doneSound.play();
@@ -147,6 +154,8 @@ export const MyTimeline: React.FC<MyTimelineProps> = ({ day, myTasks, taskDetail
       } else if (actionName === "Skip") {
         await forgetSound.play();
         setLastAction("TaskSkipped");
+      } else if (actionName === "Reschedule") {
+        setOpenReschedule({ ...task });
       }
     } else {
       setShowToast({ open: true, message: "Let's focus on Today :)", extra: "" });

diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss
@@ -1,108 +1,15 @@
-.rescheduleModal {
-  hr {
-    margin: 0;
-    color: #d9d9d9;
-    opacity: 1;
+.interactables-modal.reschedule-modal {
+  .header-title {
+    text-align: left;
   }
+  .reschedule-options {
+    display: grid;
+    grid-template-columns: 2fr 2fr;
 
-  .ant-modal-content {
-    padding: 0 0 24px 0 !important;
-    border: none !important;
-    border-radius: 28px !important;
-
-    .selected {
-      border: none;
-      background: var(--bottom-nav-color);
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    }
-    .booked {
-      background: var(--bottom-nav-color);
-    }
-  }
-
-  .list {
-    margin: 0 16px;
-    padding: 8px 8px 16px 8px;
-    border-left: 0;
-    border-right: 0;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    display: flex;
-    gap: 20px;
-
-    .res-card {
-      border-radius: 8px;
-      background: transparent;
-      border: 1px solid #d9d9d9;
-      padding: 10px 15px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      text-align: center;
-      min-width: 75px;
-      align-items: center;
-    }
-
-    p {
-      margin: 0;
-      font-size: 1.286em;
-      font-weight: 500;
-      white-space: nowrap;
-    }
-
-    .res-card > p:last-child {
-      font-weight: 500;
-    }
-
-    .res-card.selected > p:last-child {
-      font-weight: 700;
-      color: var(--bottom-nav-text-color);
-    }
-  }
-
-  .slot-batch {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    div {
-      display: flex;
-      gap: 10px;
+    .goal-action:last-child {
+      border-top: 2px solid var(--default-border-color);
+      grid-column: 1 / -1;
+      border-radius: 0 0 28px 28px;
     }
   }
-
-  .slot-card {
-    border-radius: 8px;
-    background: transparent;
-    border: 1px solid #d9d9d9;
-    padding: 10px 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    text-align: center;
-    min-width: 50px;
-    align-items: center;
-
-    sup {
-      top: -1em;
-      font-size: 0.5em;
-    }
-  }
-
-  .slot-card.selected {
-    font-weight: 600;
-  }
-
-  .action-btn {
-    margin-top: 16px;
-    background: var(--primary-background);
-  }
-
-  div:has(.action-btn) {
-    text-align: center;
-  }
-
-  .task-card {
-    width: 150px;
-  }
 }