Added Ability to add Due Dates to Cards

actions/update-card/index.ts

@@ -16,7 +16,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
 
   if (!userId || !orgId) return { error: 'Unauthorized' };
 
-  const { id, boardId, ...values } = data;
+  const { id, boardId, startedAt, dueDate, ...values } = data;
   let card;
 
   try {
@@ -31,6 +31,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       },
       data: {
         ...values,
+        dueDate: dueDate,
       },
     });
 

actions/update-card/schema.ts

@@ -22,5 +22,15 @@ export const UpdateCard = z.object({
         message: 'Title must be at least 3 characters',
       })
   ),
+  dueDate: z.optional(
+    z.date({
+      invalid_type_error: 'Due date must be a date',
+    })
+  ),
+  startedAt: z.optional(
+    z.date({
+      invalid_type_error: 'Due date must be a date',
+    })
+  ),
   id: z.string(),
 });

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -2,8 +2,10 @@
 
 import { Draggable } from '@hello-pangea/dnd';
 import { Card } from '@prisma/client';
+import { format } from 'date-fns';
 
 import { useCardModal } from '@/hooks/use-card-modal';
+import { Calendar } from 'lucide-react';
 
 interface CardItemProps {
   index: number;
@@ -25,6 +27,10 @@ export const CardItem = ({ index, data }: CardItemProps) => {
           className='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>
         </div>
       )}
     </Draggable>

components/modals/card-modal/actions.tsx

@@ -12,6 +12,7 @@ import { copyCard } from '@/actions/copy-card';
 
 import { CardWithList } from '@/types';
 import { useCardModal } from '@/hooks/use-card-modal';
+import { DatePicker } from '@/components/ui/date-picker';
 
 interface ActionsProps {
   data: CardWithList;
@@ -78,6 +79,15 @@ export const Actions = ({ data }: ActionsProps) => {
         <Copy className='mr-2 h-4 w-4' />
         Copy
       </Button>
+      <DatePicker
+        variant='gray'
+        className='w-full justify-start text-black'
+        size='inline'
+        placeholder='Add Due Date'
+        afterSelectText='Due '
+        boardId={params.boardId as string}
+        card={data}
+      />
       <Button
         onClick={onDelete}
         disabled={isLoadingDelete}

components/modals/card-modal/index.tsx

@@ -34,7 +34,7 @@ export const CardModal = () => {
         {!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
         <div className='grid grid-cols-1 md:grid-cols-4 md:gap-4'>
           <div className='col-span-3'>
-            <div className='w-full space-y-6'>
+            <div className='w-full space-y-10'>
               {!cardData ? (
                 <Description.Skeleton />
               ) : (

components/ui/calendar.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

components/ui/date-picker.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { updateCard } from '@/actions/update-card';
+import { useAction } from '@/hooks/use-action';
+import { CardWithList } from '@/types';
+
+interface DatePickerProps {
+  variant?:
+    | 'outline'
+    | 'default'
+    | 'gray'
+    | 'destructive'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
+    | 'primary'
+    | 'transparent';
+  className?: string;
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'inline';
+  placeholder?: string;
+  afterSelectText?: string;
+  boardId?: string;
+  card?: CardWithList;
+}
+
+export function DatePicker({
+  variant,
+  className,
+  size,
+  placeholder,
+  afterSelectText,
+  boardId,
+  card,
+}: DatePickerProps) {
+  const [date, setDate] = React.useState<Date>();
+
+  const { execute, isLoading } = useAction(updateCard, {
+    onSuccess: () => {
+      toast.success('Due date updated');
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  React.useEffect(() => {
+    if (card?.dueDate) {
+      setDate(card.dueDate);
+    }
+  }, [card?.dueDate]);
+
+  const onBlur = () => {
+    if (!date || !boardId || !card) return;
+
+    execute({
+      id: card.id,
+      boardId,
+      dueDate: date,
+    })
+
+    setDate(date);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={variant ?? 'outline'}
+          className={cn(
+            'w-[280px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+            className
+          )}
+          size={size}
+          disabled={isLoading}
+        >
+          <CalendarIcon className='mr-2 h-4 w-4' />
+          {date ? (
+            afterSelectText + format(date, 'PP')
+          ) : (
+            <span>{placeholder ? placeholder : 'Pick a date'}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-auto p-0' onBlur={onBlur}>
+        <Calendar
+          mode='single'
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

prisma/schema.prisma

@@ -42,10 +42,12 @@ model List {
 }
 
 model Card {
-  id          String  @id @default(uuid())
+  id          String    @id @default(uuid())
   title       String
   order       Int
-  description String? @db.Text
+  description String?   @db.Text
+  dueDate     DateTime?
+  startedAt   DateTime?
 
   listId String
   list   List   @relation(fields: [listId], references: [id], onDelete: Cascade)