Fix description and time

frontend/package.json

@@ -64,6 +64,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "vite": "^4.5.0"
   }

frontend/pnpm-lock.yaml

@@ -163,6 +163,12 @@ devDependencies:
   postcss:
     specifier: ^8.4.31
     version: 8.4.31
+  prettier:
+    specifier: ^3.1.0
+    version: 3.1.0
+  prettier-plugin-tailwindcss:
+    specifier: ^0.5.7
+    version: 0.5.7(prettier@3.1.0)
   tailwindcss:
     specifier: ^3.3.5
     version: 3.3.5
@@ -3339,6 +3345,67 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.7(prettier@3.1.0):
+    resolution: {integrity: sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.1.0
+    dev: true
+
+  /prettier@3.1.0:
+    resolution: {integrity: sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /prop-types-extra@1.1.1(react@18.2.0):
     resolution: {integrity: sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==}
     peerDependencies:

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -85,7 +85,10 @@ export function TaskCard({ task, deleteTask, updateTask }) {
                   month: "short",
                   year: "numeric",
                 })
-              : new Date(task.end_event).toLocaleDateString("en-US", { day: "numeric", month: "short" });
+              : new Date(task.end_event).toLocaleDateString("en-US", {
+                  day: "numeric",
+                  month: "short",
+                });
 
           return (
             <span className={`bg-${colorClass} text-[10px] font-xl font-bold px-2 py-1 rounded-full`}>
@@ -122,13 +125,15 @@ export function TaskCard({ task, deleteTask, updateTask }) {
       <TaskDetailModal
         taskId={task.id}
         title={task.content}
-        description={task.description}
+        description={task.notes}
         tags={task.tags}
         difficulty={task.difficulty}
         challenge={task.challenge}
         importance={task.importance}
         updateTask={updateTask}
         completed={task.completed}
+        start_event={task.start_event}
+        end_event={task.end_event}
       />
 
       {/* -------- Task Card -------- */}

frontend/src/components/kanbanBoard/taskDetailModal.jsx

@@ -16,26 +16,48 @@ export function TaskDetailModal({
   challenge,
   importance,
   taskId,
+  start_event,
+  end_event,
   updateTask,
   completed,
 }) {
+  if (importance >= 3) {
+    importance = true;
+  } else {
+    importance = false;
+  }
+
+  const s = formatAMPM(new Date(start_event));
+  const e = formatAMPM(new Date(end_event));
   const [isChallengeChecked, setChallengeChecked] = useState(challenge);
   const [isImportantChecked, setImportantChecked] = useState(importance);
   const [currentDifficulty, setCurrentDifficulty] = useState((difficulty - 1) * 25);
   const [selectedTags, setSelectedTags] = useState([]);
-  const [dateStart, setDateStart] = useState(new Date());
+  const [dateStart, setDateStart] = useState(new Date(start_event));
-  const [dateEnd, setDateEnd] = useState(new Date());
+  const [dateEnd, setDateEnd] = useState(new Date(end_event));
   const [startDateEnabled, setStartDateEnabled] = useState(false);
   const [endDateEnabled, setEndDateEnabled] = useState(false);
   const [isTaskComplete, setTaskComplete] = useState(completed);
-  const [starteventValue, setStartEventValue] = useState("10:00 PM");
+  const [starteventValue, setStartEventValue] = useState(e);
-  const [endeventValue, setEndEventValue] = useState("10:00 AM");
+  const [endeventValue, setEndEventValue] = useState(s);
   const [subtaskText, setSubtaskText] = useState("");
   const [subtasks, setSubtasks] = useState([]);
   const [currentTitle, setTitle] = useState(title);
   const [isTitleEditing, setTitleEditing] = useState(false);
-  const [isCheckboxStartTimeChecked, setCheckboxStartTimeChecked] = useState(false);
+  const [isDescriptionEditing, setDescriptionEditing] = useState(false);
-  const [isCheckboxEndTimeChecked, setCheckboxEndTimeChecked] = useState(false);
+  const [updatedDescription, setUpdatedDescription] = useState(description);
+
+  const handleDescriptionEditToggle = () => {
+    setDescriptionEditing(!isDescriptionEditing);
+  };
+
+  const handleDescriptionChange = async () => {
+    const data = {
+      notes: updatedDescription,
+    };
+    await updateTodoTaskPartial(taskId, data);
+    setDescriptionEditing(false);
+  };
 
   const handleTitleChange = async () => {
     const data = {
@@ -45,51 +67,113 @@ export function TaskDetailModal({
     setTitleEditing(false);
   };
 
-  const handleCheckboxStartTimeChange = () => {
+  {
-    setCheckboxStartTimeChecked(!isCheckboxStartTimeChecked);
+    /* -------- Time -------- */
-  };
+  }
 
-  const handleCheckboxEndTimeChange = () => {
+  function formatAMPM(date) {
-    setCheckboxEndTimeChecked(!isCheckboxEndTimeChecked);
+    var hours = date.getHours();
-  };
+    var minutes = date.getMinutes();
+    var ampm = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    var strTime = hours + ":" + minutes + " " + ampm;
+    return strTime;
+  }
 
-  const handleStartEventTimeChange = async (timeValue) => {
+  const handleStartEventTimeChange = async (startdate, starttime) => {
-    const formattedTime = convertToFormattedTime(timeValue);
+    if (!validateTimeFormat(starttime)) {
-    setStartEventValue(formattedTime);
+      console.error("Wrong time format");
-    console.log(formattedTime);
-    const data = {
-      startTime: formattedTime,
-    };
-    await updateTodoTaskPartial(taskId, data);
-  };
-
-  const handleEndEventTimeChange = async (timeValue) => {
-    const inputTime = event.target.value;
-    // Validate the input time format
-    if (!validateTimeFormat(inputTime)) {
-      // Display an error message or handle invalid format
-      console.error("Invalid time format. Please use HH:mm AM/PM");
       return;
     }
 
-    const formattedTime = convertToFormattedTime(timeValue);
+    // Format incoming date
-    setEndEventValue(formattedTime);
+    setDateStart(startdate);
+    setStartEventValue(starttime);
+    const formatDate = convertToFormattedDate(startdate);
+    // Format incoming time
+    const formatTime = convertToFormattedTime(starttime).slice(0, -1) + ":00.000000Z";
+    console.log(formatTime);
+    // Combine both of them
+    const formatDateTime = formatDate + formatTime;
+
     const data = {
-      endTime: formattedTime,
+      startTime: formatDateTime,
+    };
+    console.log(formatDateTime);
+    await updateTodoTaskPartial(taskId, data);
+  };
+
+  const handleEndEventTimeChange = async (enddate, endtime) => {
+    if (!validateTimeFormat(endtime)) {
+      console.error("Wrong time format");
+      return;
+    }
+
+    // Format incoming date
+    setDateEnd(enddate);
+    setEndEventValue(endtime);
+    const formatDate = convertToFormattedDate(enddate);
+    // Format incoming time
+    const formatTime = convertToFormattedTime(endtime);
+
+    // Combine both of them
+    const formatDateTime = formatDate + formatTime;
+
+    const data = {
+      startTime: formatDateTime,
     };
     await updateTodoTaskPartial(taskId, data);
   };
 
+  const convertToFormattedDate = (dateValue) => {
+    const formattedDate = format(dateValue, "yyyy-MM-dd'T'", {
+      timeZone: "UTC",
+    });
+    return formattedDate;
+  };
+
   const convertToFormattedTime = (timeValue) => {
-    const formattedTime = format(timeValue, "HH:mm:ss.SSSX", { timeZone: "UTC" });
+    // 2023-11-28 T [04:37:48.000000Z]
-    return formattedTime;
+    // 12:00 AM -> 12:00:00.000000Z
+    // 10:00 PM -> 22:00:00.000000Z
+
+    var hours = parseInt(timeValue.substr(0, 2));
+    if (timeValue.indexOf("AM") != -1 && hours == 12) {
+      timeValue = timeValue.replace("12", "0");
+    }
+    if (timeValue.indexOf("PM") != -1 && hours < 12) {
+      timeValue = timeValue.replace(hours, hours + 12);
+    }
+    const formattedTime = timeValue.replace(/(AM|PM)/, "");
+    const [formattedHours, restOfTime] = formattedTime.split(":");
+    const paddedHours = formattedHours.length === 1 ? `0${formattedHours}` : formattedHours;
+    console.log(`${paddedHours}:${restOfTime}`);
+    return `${paddedHours}:${restOfTime}`;
+  };
+
+  const handleStartDateChange = () => {
+    if (!isTaskComplete) {
+      setStartDateEnabled(!startDateEnabled);
+    }
+  };
+
+  const handleEndDateChange = () => {
+    if (!isTaskComplete) {
+      setEndDateEnabled(!endDateEnabled);
+    }
   };
 
   const validateTimeFormat = (time) => {
-    const timeFormatRegex = /^(0[1-9]|1[0-2]):[0-5][0-9] (AM|PM)$/i;
+    const timeFormatRegex = /^([1-9]|1[0-2]):[0-5][0-9]( |)(AM|PM)$/i;
     return timeFormatRegex.test(time);
   };
 
+  {
+    /* -------- END Time -------- */
+  }
+
   const handleChallengeChange = async () => {
     setChallengeChecked(!isChallengeChecked);
     const data = {
@@ -99,9 +183,14 @@ export function TaskDetailModal({
   };
 
   const handleImportantChange = async () => {
+    let important_num = 0;
+    if (isImportantChecked) {
+      important_num = 5;
+    }
+
     setImportantChecked(!isImportantChecked);
     const data = {
-      important: !isImportantChecked,
+      important: important_num,
     };
     await updateTodoTaskPartial(taskId, data);
   };
@@ -121,45 +210,6 @@ export function TaskDetailModal({
     ``;
   };
 
-  const handleStartDateValueChange = (date) => {
-    if (!isTaskComplete) {
-      setDateStart(date);
-      const formattedStartDate = convertToFormattedDate(date);
-      const data = {
-        startTime: formattedStartDate,
-      };
-      updateTodoTaskPartial(taskId, data);
-    }
-  };
-
-  const handleEndDateValueChange = (date) => {
-    if (!isTaskComplete) {
-      setDateEnd(date);
-      const formattedEndDate = convertToFormattedDate(date);
-      const data = {
-        endTime: formattedEndDate,
-      };
-      updateTodoTaskPartial(taskId, data);
-    }
-  };
-
-  const convertToFormattedDate = (dateValue) => {
-    const formattedDate = format(dateValue, "yyyy-MM-dd'T'", { timeZone: "UTC" });
-    return formattedDate;
-  };
-
-  const handleStartDateChange = () => {
-    if (!isTaskComplete) {
-      setStartDateEnabled(!startDateEnabled);
-    }
-  };
-
-  const handleEndDateChange = () => {
-    if (!isTaskComplete) {
-      setEndDateEnabled(!endDateEnabled);
-    }
-  };
-
   const handleTaskCompleteChange = async () => {
     let completed = false;
     if (isTaskComplete) {
@@ -193,7 +243,9 @@ export function TaskDetailModal({
     try {
       const updatedSubtasks = [...subtasks];
       updatedSubtasks[index].completed = !updatedSubtasks[index].completed;
-      await updateSubtask(updatedSubtasks[index].id, { completed: updatedSubtasks[index].completed });
+      await updateSubtask(updatedSubtasks[index].id, {
+        completed: updatedSubtasks[index].completed,
+      });
       setSubtasks(updatedSubtasks);
     } catch (error) {
       console.error("Error updating subtask:", error);
@@ -331,7 +383,11 @@ export function TaskDetailModal({
                   onChange={handleStartDateChange}
                 />
                 <div className={`rounded p-2 shadow border-2 ${!startDateEnabled && "opacity-50"}`}>
-                  <DatePicker selected={dateStart} onChange={handleStartDateValueChange} disabled={!startDateEnabled} />
+                  <DatePicker
+                    selected={dateStart}
+                    onChange={(dateStart) => setDateStart(dateStart)}
+                    disabled={!startDateEnabled}
+                  />
                 </div>
               </div>
             </div>
@@ -339,20 +395,19 @@ export function TaskDetailModal({
             {/* Start event time picker */}
             <div className="rounded mx-2 mt-4 flex flex-row items-center">
               {/* handleStartEventTimeChange */}
-              <input
-                type="checkbox"
-                checked={isCheckboxStartTimeChecked}
-                className="checkbox checkbox-xs bg-gray-400 mr-2"
-                onChange={handleCheckboxStartTimeChange}
-              />
               <input
                 type="text"
                 placeholder={starteventValue}
+                value={starteventValue}
+                onChange={(starteventValue) => setStartEventValue(starteventValue)}
                 className="input input-bordered w-full max-w-xs"
-                disabled={!isCheckboxStartTimeChecked}
+                disabled={!startDateEnabled}
               />
               <div className="rounded mx-2">
-                <button className="btn btn-sm" onClick={() => handleStartEventTimeChange(dateStart)}>
+                <button
+                  className="btn btn-sm"
+                  disabled={isTaskComplete}
+                  onClick={() => handleStartEventTimeChange(dateStart, starteventValue)}>
                   Update Time
                 </button>
               </div>
@@ -370,25 +425,22 @@ export function TaskDetailModal({
                 onChange={handleEndDateChange}
               />
               <div className={`rounded p-2 shadow border-2 ${!endDateEnabled && "opacity-50"}`}>
-                <DatePicker selected={dateEnd} onChange={handleEndDateValueChange} disabled={!endDateEnabled} />
+                <DatePicker selected={dateEnd} onChange={(dateEnd) => setDateEnd(dateEnd)} disabled={!endDateEnabled} />
               </div>
               {/* End event time picker */}
               <div className="rounded mx-2 flex flex-row items-center">
                 {/* handleEndEventTimeChange */}
-                <input
-                  type="checkbox"
-                  checked={isCheckboxEndTimeChecked}
-                  className="checkbox checkbox-xs bg-gray-400 mr-2"
-                  onChange={handleCheckboxEndTimeChange}
-                />
                 <input
                   type="text"
                   placeholder={endeventValue}
                   className="input input-bordered w-full max-w-xs"
-                  disabled={!isCheckboxEndTimeChecked}
+                  disabled={!endDateEnabled}
                 />
                 <div className="rounded mx-2">
-                  <button className="btn btn-sm" onClick={() => handleEndEventTimeChange(dateEnd)}>
+                  <button
+                    className="btn btn-sm"
+                    disabled={isTaskComplete}
+                    onClick={() => handleEndEventTimeChange(dateEnd, endeventValue)}>
                     Update Time
                   </button>
                 </div>
@@ -397,6 +449,24 @@ export function TaskDetailModal({
           </div>
         </div>
         {/* Description */}
+        {isDescriptionEditing ? (
+          <div className="flex flex-col gap-2">
+            <h2 className="font-bold">
+              <span className="flex gap-2">
+                <FaRegListAlt className="my-1" />
+                Description
+              </span>
+            </h2>
+            <textarea
+              className="textarea w-full"
+              value={updatedDescription}
+              onChange={(e) => setUpdatedDescription(e.target.value)}
+            />
+            <button className="btn btn-sm" onClick={handleDescriptionChange}>
+              Save
+            </button>
+          </div>
+        ) : (
           <div className="flex flex-col gap-2">
             <h2 className="font-bold">
               <span className="flex gap-2">
@@ -407,7 +477,10 @@ export function TaskDetailModal({
             <textarea className="textarea w-full" disabled>
               {description}
             </textarea>
+            <FaPencil className="cursor-pointer" onClick={handleDescriptionEditToggle} />
           </div>
+        )}
+
         {/* Difficulty, Challenge, and Importance */}
         <div className="flex flex-row space-x-3 my-4">
           <div className="flex-1 card shadow border-2 p-2">