Add ID and time saved to board. Changed modal size

tuckner · Jan 4, 2024 · 3a64848 · 3a64848
1 parent 15fb961
commit 3a64848
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 26 deletions.
diff --git a/src/components/Board/AddTask.tsx b/src/components/Board/AddTask.tsx
@@ -94,13 +94,15 @@ export default function AddTask({ handleClose, tasks }: Props) {
                   name: tasks.name,
                   description: tasks.description,
                   category: tasks.category,
+                  time_saved: tasks.time_saved,
                   techniques: tasks.techniques,
                   subtasks: tasks.subtasks,
                 }
               : {
                   id: generateRandomNumber(),
                   name: "",
                   description: "",
+                  time_saved: "",
                   category: selectedColumn,
                   techniques: [],
                   subtasks: [],

diff --git a/src/components/Board/TaskDetails.tsx b/src/components/Board/TaskDetails.tsx
@@ -92,9 +92,14 @@ export default function TaskDetails({
               )}
             </div>
           </div>
+          <div className="text-sm my-2">
+            <p>A{tasks.id}</p>
+          </div>
+          {tasks.time_saved && (
           <div className="text-xs text-gray my-2">
-            <p>ID: A{tasks.id}</p>
+            <p>Time saved: {tasks.time_saved}</p>
           </div>
+          )}
           <div>
             <p className="text-sm my-4">
               <Linkify as="p" options={linkoptions}>

diff --git a/src/components/Board/TaskItem.tsx b/src/components/Board/TaskItem.tsx
@@ -35,37 +35,44 @@ export default function TaskItem({ tasks, index }: Props) {
               className="hover:opacity-60 shadow-lg  
               cursor-pointer bg-white dark:bg-secondary mb-4 rounded-lg py-6 px-4"
             >
-              <p className="font-bold text-sm">{tasks.name} </p>
-              <p className="pt-2 text-xs text-gray font-bold">
-                {" "}
-                {tasks.subtasks.length} workflows
-              </p>
               <div className="hidden">
                 {tasks.subtasks.map((subtask, index) => (
                   <div key={index}>
-                    <p className="pt-2 text-xs text-gray font-bold">
+                    <p className="text-xs text-gray font-bold">
                       {" "}
                       {subtask.title}
                     </p>
                   </div>
                 ))}
               </div>
-              <div className="pt-2 text-xs text-gray content-end font-bold">
-                {" "}
-                <div className="flex justify-end">
-                  <BsCircleFill
-                    className=""
-                    onClick={handleOpenModal}
-                    style={{
-                      color:
-                        tasks.subtasks.length === 1
-                          ? "#e6e22e"
-                          : tasks.subtasks.length >= 2
-                          ? "#238823"
-                          : "#e64747",
-                    }}
-                  />
-                </div>
+              <div className="flex justify-between">
+                <p className="font-bold">{tasks.name}</p>
+                <p className="pt-2 text-xs text-slate font-bold">
+                  {" "}
+                  A{tasks.id}
+                </p>
+              </div>
+              {tasks.time_saved && (
+                <p className="pt-2 text-xs text-gray font-bold">
+                    {" "}
+                    Time saved: {tasks.time_saved}
+                </p>
+              )}
+              <div className="flex justify-between items-center pt-10">
+                <p className="text-xs text-gray font-bold">
+                  {tasks.subtasks.length} workflows
+                </p>
+                <BsCircleFill
+                  onClick={handleOpenModal}
+                  style={{
+                    color:
+                      tasks.subtasks.length === 1
+                        ? "#e6e22e"
+                        : tasks.subtasks.length >= 2
+                        ? "#238823"
+                        : "#e64747",
+                  }}
+                />
               </div>
             </div>
           );

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -26,9 +26,9 @@ export default function Modal({
             className={`z-30 rounded-lg ${
               showDowndrop
                 ? " w-72 p-2 top-[13rem]"
-                : `${!isMobile && 'w-[22rem]'} w-[28rem] p-6  top-[50%]` 
-            }  fixed bg-white dark:bg-secondary 
-            -translate-y-[50%] -translate-x-[50%] left-[50%] rounded-lg`}
+                : `${!isMobile && 'w-[22rem]'} w-[34rem] p-6 top-[50%]`
+            } overflow-auto fixed bg-white dark:bg-secondary 
+            max-h-[calc(100vh-10rem)] -translate-y-[50%] -translate-x-[50%] left-[50%]`}
           >
             {children}
           </div>

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -9,6 +9,7 @@ export interface IBoard {
       name: string;
       description: string;
       category: string;
+      time_saved: string;
       techniques: string[];
       subtasks: {  id:string,
         title: string;
@@ -26,6 +27,7 @@ export interface IColumn {
     name: string;
     description: string;
     category: string;
+    time_saved: string;
     techniques: string[];
     subtasks: {
       id:string,
@@ -40,6 +42,7 @@ export interface ITask {
   name: string;
   description: string;
   category: string;
+  time_saved: string;
   techniques: string[];
   subtasks: {
     id:string,