From 514ae94f439db26718d4062474905e88ab8745f4 Mon Sep 17 00:00:00 2001
From: Ahmad <103906421+ahmadk953@users.noreply.github.com>
Date: Thu, 7 Nov 2024 20:29:32 -0500
Subject: [PATCH] Added Started At Date Field

---
 README.md                                     |  2 +-
 actions/update-card/index.ts                  |  1 +
 .../board/[boardId]/_components/card-item.tsx | 20 ++++++++----
 components/modals/card-modal/actions.tsx      | 11 +++++++
 components/ui/date-picker.tsx                 | 32 ++++++++++++++-----
 5 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index dc093b1..d0c3abc 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Currently, there is no documentation or wiki available but there will be one add
 
 This will be published on the site some time soon but for now, the roadmap will be listed here.
 
-- [ ] Finish adding started at date feature
+- [x] Finish adding started at date field
 - [x] Pagination for Audit Logs page
 - [ ] Board sorting options (Boards Page)
 - [ ] Add real-time collaboration
diff --git a/actions/update-card/index.ts b/actions/update-card/index.ts
index f63b8d1..d2560dc 100644
--- a/actions/update-card/index.ts
+++ b/actions/update-card/index.ts
@@ -32,6 +32,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       data: {
         ...values,
         dueDate: dueDate,
+        startedAt: startedAt,
       },
     });
 
diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx
index c8911f8..fc789d6 100644
--- a/app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx
+++ b/app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx
@@ -24,15 +24,21 @@ export const CardItem = ({ index, data }: CardItemProps) => {
           ref={provided.innerRef}
           role='button'
           onClick={() => cardModal.onOpen(data.id)}
-          className='truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
+          className='space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
         >
           {data.title}
-          <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
-            <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
-            {data?.dueDate
-              ? 'Due: ' + format(data.dueDate, 'PP')
-              : 'No Due Date'}
-          </div>
+          {data?.dueDate && (
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+              <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
+              Due: {format(data.dueDate, 'PP')}
+            </div>
+          )}
+          {data?.startedAt && (
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+              <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
+              Started: {format(data.startedAt, 'PP')}
+            </div>
+          )}
         </div>
       )}
     </Draggable>
diff --git a/components/modals/card-modal/actions.tsx b/components/modals/card-modal/actions.tsx
index c6306b9..1384b41 100644
--- a/components/modals/card-modal/actions.tsx
+++ b/components/modals/card-modal/actions.tsx
@@ -80,6 +80,7 @@ export const Actions = ({ data }: ActionsProps) => {
         Copy
       </Button>
       <DatePicker
+        type='dueDate'
         variant='gray'
         className='w-full justify-start text-black'
         size='inline'
@@ -88,6 +89,16 @@ export const Actions = ({ data }: ActionsProps) => {
         boardId={params.boardId as string}
         card={data}
       />
+      <DatePicker
+        type='startedAtDate'
+        variant='gray'
+        className='w-full justify-start text-black'
+        size='inline'
+        placeholder='Add Started Date'
+        afterSelectText='Started '
+        boardId={params.boardId as string}
+        card={data}
+      />
       <Button
         onClick={onDelete}
         disabled={isLoadingDelete}
diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
index 66be92f..1e149c4 100644
--- a/components/ui/date-picker.tsx
+++ b/components/ui/date-picker.tsx
@@ -18,6 +18,7 @@ import { useAction } from '@/hooks/use-action';
 import { CardWithList } from '@/types';
 
 interface DatePickerProps {
+  type: 'dueDate' | 'startedAtDate';
   variant?:
     | 'outline'
     | 'default'
@@ -37,6 +38,7 @@ interface DatePickerProps {
 }
 
 export function DatePicker({
+  type,
   variant,
   className,
   size,
@@ -49,7 +51,7 @@ export function DatePicker({
 
   const { execute, isLoading } = useAction(updateCard, {
     onSuccess: () => {
-      toast.success('Due date updated');
+      toast.success('Date updated');
     },
     onError: (error) => {
       toast.error(error);
@@ -57,19 +59,33 @@ export function DatePicker({
   });
 
   React.useEffect(() => {
-    if (card?.dueDate) {
+    if (card?.dueDate && type === 'dueDate') {
       setDate(card.dueDate);
     }
-  }, [card?.dueDate]);
+
+    if (card?.startedAt && type === 'startedAtDate') {
+      setDate(card.startedAt);
+    }
+  }, [card?.startedAt, card?.dueDate, type]);
 
   const onBlur = () => {
     if (!date || !boardId || !card) return;
 
-    execute({
-      id: card.id,
-      boardId,
-      dueDate: date,
-    });
+    if (type === 'dueDate') {
+      execute({
+        id: card.id,
+        boardId,
+        dueDate: date,
+      });
+    }
+
+    if (type === 'startedAtDate') {
+      execute({
+        id: card.id,
+        boardId,
+        startedAt: date,
+      });
+    }
 
     setDate(date);
   };