Add placeholder for ui to provide more detail on task card

frontend/package.json

@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.9.1",
+    "react-datepicker": "^4.23.0",
     "react-datetime-picker": "^5.5.3",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",

frontend/pnpm-lock.yaml

@@ -101,6 +101,9 @@ dependencies:
   react-bootstrap:
     specifier: ^2.9.1
     version: 2.9.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+  react-datepicker:
+    specifier: ^4.23.0
+    version: 4.23.0(react-dom@18.2.0)(react@18.2.0)
   react-datetime-picker:
     specifier: ^5.5.3
     version: 5.5.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
@@ -3473,6 +3476,22 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /react-datepicker@4.23.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-w+msqlOZ14v6H1UknTKtZw/dw9naFMgAOspf59eY130gWpvy5dvKj/bgsFICDdvxB7PtKWxDcbGlAqCloY1d2A==}
+    peerDependencies:
+      react: ^16.9.0 || ^17 || ^18
+      react-dom: ^16.9.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.8
+      classnames: 2.3.2
+      date-fns: 2.30.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-onclickoutside: 6.13.0(react-dom@18.2.0)(react@18.2.0)
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /react-datetime-picker@5.5.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-bWGEPwGrZjaXTB8P4pbTSDygctLaqTWp0nNibaz8po+l4eTh9gv3yiJ+n4NIcpIJDqZaQJO57Bnij2rAFVQyLw==}
     peerDependencies:
@@ -3520,6 +3539,10 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+    dev: false
+
   /react-fit@1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-y/TYovCCBzfIwRJsbLj0rH4Es40wPQhU5GPPq9GlbdF09b0OdzTdMSkBza0QixSlgFzTm6dkM7oTFzaVvaBx+w==}
     peerDependencies:
@@ -3565,6 +3588,30 @@ packages:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
     dev: false
 
+  /react-onclickoutside@6.13.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==}
+    peerDependencies:
+      react: ^15.5.x || ^16.x || ^17.x || ^18.x
+      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-fast-compare: 3.2.2
+      warning: 4.0.3
+    dev: false
+
   /react-redux@7.2.9(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
     peerDependencies:

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -1,16 +1,14 @@
 import { useState } from "react";
-import  { useEffect } from "react";
-import { BsFillTrashFill } from "react-icons/bs";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { TaskDetailModal } from "./taskDetailModal";
+import { GoChecklist, GoArchive } from "react-icons/go";
 
 export function TaskCard({ task, deleteTask, updateTask }) {
+  // State to track if the mouse is over the task card
   const [mouseIsOver, setMouseIsOver] = useState(false);
-  // console.log(task.challenge);
-  // console.log(task.importance);
-  // console.log(task.difficulty);
 
+  // DnD Kit hook for sortable items
   const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: task.id,
     data: {
@@ -18,67 +16,156 @@ export function TaskCard({ task, deleteTask, updateTask }) {
       task,
     },
   });
+
+  // Style for the task card, adjusting for dragging animation
   const style = {
     transition,
     transform: CSS.Transform.toString(transform),
   };
 
+  // ---- DESC AND TAG ---- */
 
+  // Tags
+  const tags =
+    task.tags.length > 0 ? (
+      <div className="flex flex-wrap mx-3 mt-4">
+        {task.tags.map((tag, index) => (
+          <div
+            key={index}
+            className={`text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 bg-${tag.color}-200 text-${tag.color}-700 rounded-full`}>
+            {tag.label}
+          </div>
+        ))}
+      </div>
+    ) : null;
 
-  {
+  // difficulty?
-    /* If card is dragged */
+  const difficultyTag = task.difficulty ? (
-  }
+    <span
+      className={`text-[10px] inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-full ${
+        task.difficulty === 1
+          ? "bg-blue-200 text-blue-700"
+          : task.difficulty === 2
+          ? "bg-green-200 text-green-700"
+          : task.difficulty === 3
+          ? "bg-yellow-200 text-yellow-700"
+          : task.difficulty === 4
+          ? "bg-purple-200 text-purple-700"
+          : "bg-red-200 text-red-700"
+      }`}>
+      difficulty
+    </span>
+  ) : null;
+
+  // Due Date
+  const dueDateTag =
+    task.end_event && new Date(task.end_event) > new Date()
+      ? (() => {
+          const daysUntilDue = Math.ceil((new Date(task.end_event) - new Date()) / (1000 * 60 * 60 * 24));
+
+          let colorClass =
+            daysUntilDue >= 365
+              ? "gray-200"
+              : daysUntilDue >= 30
+              ? "blue-200"
+              : daysUntilDue >= 7
+              ? "green-200"
+              : daysUntilDue > 0
+              ? "yellow-200"
+              : "red-200";
+
+          const formattedDueDate =
+            daysUntilDue >= 365
+              ? new Date(task.end_event).toLocaleDateString("en-US", {
+                  day: "numeric",
+                  month: "short",
+                  year: "numeric",
+                })
+              : 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`}>
+              Due: {formattedDueDate}
+            </span>
+          );
+        })()
+      : null;
+
+  // Subtask count
+  const subtaskCountTag = task.subtaskCount ? (
+    <span className="bg-green-200 text-green-600 text-[10px] font-xl font-bold me-2 px-2.5 py-0.5 rounded">
+      <GoChecklist /> {task.subtaskCount}
+    </span>
+  ) : null;
+
+  // ---- DRAG STATE ---- */
+
+  // If the card is being dragged
   if (isDragging) {
     return (
       <div
         ref={setNodeRef}
         style={style}
-        className="
+        className="opacity-30 bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400 cursor-grab relative"
-        opacity-30
-      bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400  cursor-grab relative
-      "
       />
     );
   }
 
+  // If the card is not being dragged
   return (
     <div>
+      {/* Task Detail Modal */}
       <TaskDetailModal
         taskId={task.id}
         title={task.content}
         description={task.description}
         tags={task.tags}
         difficulty={task.difficulty}
-    f    challenge={task.challenge}
+        challenge={task.challenge}
         importance={task.importance}
+        updateTask={updateTask}
       />
+
+      {/* -------- Task Card -------- */}
       <div
         ref={setNodeRef}
         {...attributes}
         {...listeners}
         style={style}
-        className="justify-center items-center flex text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
+        className="justify-center flex flex-col text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
         onMouseEnter={() => {
           setMouseIsOver(true);
         }}
         onMouseLeave={() => {
           setMouseIsOver(false);
         }}>
-        <p
+        {/* -------- Task Content -------- */}
-          className={`p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white`}
+        {/* Tags */}
-          onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
+        {tags}
-          {task.content}
+        <div>
-        </p>
+          {/* Title */}
-
+          <p
-        {mouseIsOver && (
+            className={`p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl bg-white font-semibold`}
-          <button
+            onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
-            onClick={() => {
+            {task.content}
-              deleteTask(task.id);
+          </p>
-            }}
+          {/* -------- Archive Task Button -------- */}
-            className="stroke-white absolute right-0 top-1/2 rounded-full bg-white -translate-y-1/2 bg-columnBackgroundColor p-2 hover:opacity-100 ">
+          {mouseIsOver && (
-            <BsFillTrashFill />
+            <button
-          </button>
+              onClick={() => {
-        )}
+                deleteTask(task.id);
+              }}
+              className="stroke-white absolute right-0 top-1/2 rounded-full bg-white -translate-y-1/2 bg-columnBackgroundColor p-2 hover:opacity-100 ">
+              <GoArchive />
+            </button>
+          )}
+        </div>
+        {/* Description */}
+        <div className="flex flex-wrap mb-4 mx-3 space-x-1">
+          {difficultyTag}
+          {dueDateTag}
+          {subtaskCountTag}
+        </div>
       </div>
     </div>
   );

frontend/src/components/kanbanBoard/taskDetailModal.jsx

@@ -2,14 +2,19 @@ import { useState } from "react";
 import { FaTasks, FaRegListAlt } from "react-icons/fa";
 import { FaPlus } from "react-icons/fa6";
 import { TbChecklist } from "react-icons/tb";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 
-export function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) {
+export function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId, updateTask }) {
   const [isChallengeChecked, setChallengeChecked] = useState(challenge);
   const [isImportantChecked, setImportantChecked] = useState(importance);
   const [currentDifficulty, setCurrentDifficulty] = useState(difficulty);
-  // console.log(currentDifficulty);
+  const [selectedTags, setSelectedTags] = useState([]);
-  // console.log(isChallengeChecked);
+  const [dateStart, setDateStart] = useState(new Date());
-  // console.log(isImportantChecked);
+  const [dateEnd, setDateEnd] = useState(new Date());
+  const [startDateEnabled, setStartDateEnabled] = useState(false);
+  const [endDateEnabled, setEndDateEnabled] = useState(false);
+  const [isTaskComplete, setTaskComplete] = useState(false);
 
   const handleChallengeChange = () => {
     setChallengeChecked(!isChallengeChecked);
@@ -23,6 +28,51 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
     setCurrentDifficulty(parseInt(event.target.value, 10));
   };
 
+  const handleTagChange = (tag) => {
+    const isSelected = selectedTags.includes(tag);
+    setSelectedTags(isSelected ? selectedTags.filter((selectedTag) => selectedTag !== tag) : [...selectedTags, tag]);
+  };
+
+  const handleStartDateChange = () => {
+    if (!isTaskComplete) {
+      setStartDateEnabled(!startDateEnabled);
+    }
+  };
+
+  const handleEndDateChange = () => {
+    if (!isTaskComplete) {
+      setEndDateEnabled(!endDateEnabled);
+    }
+  };
+
+  const handleTaskCompleteChange = () => {
+    if (isTaskComplete) {
+      setTaskComplete(false);
+    } else {
+      setTaskComplete(true);
+      setStartDateEnabled(false);
+      setEndDateEnabled(false);
+    }
+  };
+
+  // Existing tags
+  const existingTags = tags.map((tag, index) => (
+    <div
+      key={index}
+      className={`text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 bg-${tag.color}-200 text-${tag.color}-700 rounded-full`}>
+      {tag.label}
+    </div>
+  ));
+
+  // Selected tags
+  const selectedTagElements = selectedTags.map((tag, index) => (
+    <div
+      key={index}
+      className={`text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 bg-${tag.color}-200 text-${tag.color}-700 rounded-full`}>
+      {tag.label}
+    </div>
+  ));
+
   return (
     <dialog id={`task_detail_modal_${taskId}`} className="modal">
       <div className="modal-box w-4/5 max-w-3xl">
@@ -38,7 +88,6 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
             <p className="text-xs">{title}</p>
           </div>
         </div>
-
         {/* Tags */}
         <div className="flex flex-col py-2 pb-4">
           <div className="flex flex-row space-x-5">
@@ -46,19 +95,81 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
               <label tabIndex={0} className="btn-md border-2 rounded-xl m-1 py-1">
                 + Add Tags
               </label>
-              <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+              <ul tabIndex={0} className="dropdown-content z-[10] menu p-2 shadow bg-base-100 rounded-box w-52">
-                <li>
+                {tags.map((tag, index) => (
-                  <a>
+                  <li key={index}>
-                    <input type="checkbox" checked="checked" className="checkbox checkbox-sm" />
+                    <label className="cursor-pointer space-x-2">
-                    Item 2
+                      <input
-                  </a>
+                        type="checkbox"
-                </li>
+                        checked={selectedTags.includes(tag)}
+                        className="checkbox checkbox-sm"
+                        onChange={() => handleTagChange(tag)}
+                      />
+                      {tag.label}
+                    </label>
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
-          <div className="flex flex-nowrap overflow-x-auto"></div>
+          <div className="flex flex-nowrap overflow-x-auto">
+            {existingTags}
+            {selectedTagElements}
+          </div>
+        </div>
+        {/* Date Picker */}
+        <div className="flex flex-col space-y-2 mb-2">
+          {/* Start */}
+          <div className="flex flex-row items-center">
+            <div>
+              <p className="text-xs font-bold">Start At</p>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  checked={startDateEnabled}
+                  className="checkbox checkbox-xs"
+                  onChange={handleStartDateChange}
+                />
+                <div className={`rounded p-2 shadow border-2 ${!startDateEnabled && "opacity-50"}`}>
+                  <DatePicker
+                    selected={dateStart}
+                    onChange={(date) => setDateStart(date)}
+                    disabled={!startDateEnabled}
+                  />
+                </div>
+              </div>
+            </div>
+            {/* Complete? */}
+            <div className="mx-4">
+              <div className="flex items-center space-x-2 mt-4">
+                <div className="flex-1 flex-row card shadow border-2 p-2 pr-2">
+                  <p className="text-md mx-2">Complete</p>
+                  <input
+                    type="checkbox"
+                    checked={isTaskComplete}
+                    className="checkbox checkbox-xl"
+                    onChange={handleTaskCompleteChange}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* End */}
+          <div>
+            <p className="text-xs font-bold">End At</p>
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={endDateEnabled}
+                className="checkbox checkbox-xs"
+                onChange={handleEndDateChange}
+              />
+              <div className={`rounded p-2 shadow border-2 ${!endDateEnabled && "opacity-50"}`}>
+                <DatePicker selected={dateEnd} onChange={(date) => setDateEnd(date)} disabled={!endDateEnabled} />
+              </div>
+            </div>
+          </div>
         </div>
-
         {/* Description */}
         <div className="flex flex-col gap-2">
           <h2 className="font-bold">
@@ -71,7 +182,6 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
             {description}
           </textarea>
         </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">
@@ -123,7 +233,6 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
             </div>
           </div>
         </div>
-
         {/* Subtask */}
         <div className="flex flex-col pt-2">
           <h2 className="font-bold">
@@ -140,7 +249,6 @@ export function TaskDetailModal({ title, description, tags, difficulty, challeng
             </button>
           </div>
         </div>
-
         <form method="dialog">
           <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">X</button>
         </form>