From 39dd2ee126754b4db61eb8f81b2747a9c2d4df93 Mon Sep 17 00:00:00 2001
From: "vishalkondle.dev" <vishalkondle.dev@gmail.com>
Date: Sun, 7 Jul 2024 20:13:36 +0530
Subject: [PATCH] fix: event color | update and delete event

---
 app/(private)/calendar/page.tsx     | 147 +++++++++++++++++++++++-----
 components/Calendar/Event.tsx       |  54 +++++-----
 components/Calendar/SelectedDay.tsx |  80 ++++++++-------
 lib/constants.tsx                   |   3 +-
 models/Event.ts                     |  12 ++-
 5 files changed, 206 insertions(+), 90 deletions(-)

diff --git a/app/(private)/calendar/page.tsx b/app/(private)/calendar/page.tsx
index 9f8dece..9f1c922 100644
--- a/app/(private)/calendar/page.tsx
+++ b/app/(private)/calendar/page.tsx
@@ -13,19 +13,31 @@ import {
   Modal,
   Paper,
   rem,
+  Select,
+  SelectProps,
   Stack,
   Text,
   TextInput,
+  ThemeIcon,
 } from '@mantine/core';
 import { DatePicker, DatePickerInput, DateTimePicker, MonthPickerInput } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { useDisclosure, useMediaQuery, useViewportSize } from '@mantine/hooks';
-import { IconCalendar, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import {
+  IconCalendar,
+  IconCheck,
+  IconChevronLeft,
+  IconChevronRight,
+  IconTagFilled,
+  IconTrash,
+} from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useState } from 'react';
-import { apiCall, failure, success } from '@/lib/client_functions';
+import { apiCall, failure, openModal, success } from '@/lib/client_functions';
 import useFetchData from '@/hooks/useFetchData';
 import { SelectedDay } from '@/components/Calendar';
+import { COLORS } from '@/lib/constants';
+import { EventDocument } from '@/models/Event';
 
 const CalendarPage = () => {
   const [date, setDate] = useState<Date>(dayjs().startOf('day').toDate());
@@ -42,10 +54,12 @@ const CalendarPage = () => {
 
   const form = useForm({
     initialValues: {
+      _id: '',
       title: '',
       from: dayjs(date).set('hour', 9).toDate(),
       to: dayjs(date).set('hour', 10).toDate(),
       isAllDay: false,
+      color: 'blue',
     },
     validate: {
       title: (value) => (!value ? 'Title is required' : null),
@@ -54,7 +68,7 @@ const CalendarPage = () => {
     },
   });
 
-  const handleNewEvent = async (values: typeof form.values) => {
+  const handleEvent = async (values: typeof form.values) => {
     if (form.values.isAllDay) {
       values.from = dayjs(values.from).startOf('day').toDate();
       values.to = dayjs(values.to).endOf('day').toDate();
@@ -64,8 +78,13 @@ const CalendarPage = () => {
       return;
     }
     try {
-      await apiCall('/api/events', values, 'POST');
-      modalHandlers.close();
+      if (form.values._id) {
+        await apiCall('/api/events', values, 'PUT');
+      } else {
+        const { _id, ...rest } = values;
+        await apiCall('/api/events', rest, 'POST');
+      }
+      modalHandlers.toggle();
       form.reset();
       success('Event created successfully');
       refetch();
@@ -74,11 +93,45 @@ const CalendarPage = () => {
     }
   };
 
-  const newEvent = () => {
-    modalHandlers.open();
-    form.setFieldValue('from', dayjs(date).set('hour', 9).toDate());
-    form.setFieldValue('to', dayjs(date).set('hour', 10).toDate());
-    form.setFieldValue('isAllDay', false);
+  const newEvent = (time?: number) => {
+    form.reset();
+    if (time !== undefined) {
+      form.setFieldValue('from', dayjs(date).set('hour', time).toDate());
+      form.setFieldValue(
+        'to',
+        dayjs(date)
+          .set('hour', time + 1)
+          .toDate()
+      );
+    } else {
+      form.setFieldValue('from', dayjs(date).set('hour', 9).toDate());
+      form.setFieldValue('to', dayjs(date).set('hour', 10).toDate());
+    }
+    modalHandlers.toggle();
+  };
+
+  const handleOpenEvent = (event: EventDocument) => {
+    form.reset();
+    form.setFieldValue('from', dayjs(event.from).set('hour', 9).toDate());
+    form.setFieldValue('to', dayjs(event.to).set('hour', 10).toDate());
+    form.setFieldValue('isAllDay', event.isAllDay);
+    form.setFieldValue('title', event.title);
+    form.setFieldValue('color', event.color);
+    form.setFieldValue('_id', String(event?._id));
+    modalHandlers.toggle();
+  };
+
+  const handleDeleteEvent = () => {
+    openModal('Do you want to delete this event?', async () => {
+      try {
+        await apiCall(`/api/events?_id=${form.values._id}`, null, 'DELETE');
+        success('Event deleted successfully');
+        refetch();
+        modalHandlers.toggle();
+      } catch (error) {
+        failure(String(error) || 'Something went wrong');
+      }
+    });
   };
 
   const renderDay = (day: Date) => (
@@ -92,8 +145,8 @@ const CalendarPage = () => {
           .slice(0, 2)
           .map((event) => (
             <Badge
-              variant={dayjs(date).isSame(day, 'day') ? 'filled' : 'outline'}
-              color="blue"
+              variant="filled"
+              color={event?.color}
               radius={0}
               fullWidth
               key={String(event._id)}
@@ -121,17 +174,28 @@ const CalendarPage = () => {
     return (
       <Indicator
         size={18}
-        color="blue"
+        color="dark"
         offset={-2}
         disabled={!noOfEvents}
         label={noOfEvents}
         processing
+        zIndex={0}
       >
-        <div>{day.getDate()}</div>
+        <Text fw={dayjs().isSame(day, 'day') ? 900 : 400}>{day.getDate()}</Text>
       </Indicator>
     );
   };
 
+  const renderSelectOption: SelectProps['renderOption'] = ({ option, checked }) => (
+    <Group flex="1" gap="xs">
+      <ThemeIcon variant="transparent" color={option.value} size="xs">
+        <IconTagFilled />
+      </ThemeIcon>
+      {option.label}
+      {checked && <IconCheck style={{ marginInlineStart: 'auto' }} />}
+    </Group>
+  );
+
   if (loading) return <></>;
   return (
     <AppShell
@@ -198,28 +262,51 @@ const CalendarPage = () => {
             styles={{
               month: { width: '100%' },
               monthRow: { width: '100%' },
-              day: { width: '100%', height: rem((height * 0.54) / 5), padding: 0 },
+              day: { width: '100%', height: rem((height * 0.65) / 5), padding: 0 },
               levelsGroup: { minWidth: '100%' },
               calendarHeader: { visibility: 'hidden', display: 'none' },
             }}
           />
         </Paper>
-        <Modal opened={isModalOpened} onClose={modalHandlers.close} title="New Event">
-          <form onSubmit={form.onSubmit((values) => handleNewEvent(values))}>
+        <Modal
+          opened={isModalOpened}
+          onClose={() => {
+            modalHandlers.toggle();
+            form.reset();
+          }}
+          title={form.values?._id ? 'Edit Event' : 'New Event'}
+        >
+          <form onSubmit={form.onSubmit((values) => handleEvent(values))}>
             <Stack gap="xs">
-              <Group wrap="nowrap" align="center">
-                <TextInput
-                  type="text"
-                  placeholder="Title"
-                  w="100%"
-                  {...form.getInputProps('title')}
-                />
+              <TextInput
+                type="text"
+                placeholder="Title"
+                w="100%"
+                {...form.getInputProps('title')}
+              />
+              <Group justify="space-between" wrap="nowrap" align="center">
                 <Checkbox
                   {...form.getInputProps('isAllDay', { type: 'checkbox' })}
                   style={{ whiteSpace: 'nowrap' }}
                   size="md"
                   label="All day"
                 />
+                <Group wrap="nowrap" gap="xs">
+                  <ThemeIcon variant="transparent" color={form.values.color} size="sm">
+                    <IconTagFilled />
+                  </ThemeIcon>
+                  <Select
+                    placeholder="Select color"
+                    data={COLORS}
+                    renderOption={renderSelectOption}
+                    styles={{
+                      input: { textTransform: 'capitalize' },
+                      option: { textTransform: 'capitalize' },
+                    }}
+                    {...form.getInputProps('color')}
+                    allowDeselect={false}
+                  />
+                </Group>
               </Group>
               {form.values.isAllDay ? (
                 <Group wrap="nowrap">
@@ -256,7 +343,16 @@ const CalendarPage = () => {
                   />
                 </Group>
               )}
-              <Button type="submit">Submit</Button>
+              <Group wrap="nowrap">
+                <Button fullWidth type="submit">
+                  Submit
+                </Button>
+                {form.values?._id && (
+                  <ActionIcon size="lg" color="red">
+                    <IconTrash onClick={handleDeleteEvent} />
+                  </ActionIcon>
+                )}
+              </Group>
             </Stack>
           </form>
         </Modal>
@@ -268,6 +364,7 @@ const CalendarPage = () => {
           setDate={setDate}
           newEvent={newEvent}
           events={events}
+          handleOpenEvent={handleOpenEvent}
         />
       </AppShell.Aside>
     </AppShell>
diff --git a/components/Calendar/Event.tsx b/components/Calendar/Event.tsx
index 46afab2..fa18c9f 100644
--- a/components/Calendar/Event.tsx
+++ b/components/Calendar/Event.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@mantine/core';
-import { IconClock } from '@tabler/icons-react';
+import { Button, Tooltip } from '@mantine/core';
 import React from 'react';
 import { EventDocument } from '@/models/Event';
 
@@ -8,28 +7,35 @@ interface Props {
   height: number;
   maxHeight: number;
   title: string;
+  handleOpenEvent: (event: EventDocument) => void;
 }
 
-export const Event = ({ event, height, maxHeight, title }: Props) => (
-  <Button
-    key={String(event._id)}
-    variant="light"
-    radius={0}
-    style={{
-      //   display: 'flex',
-      position: 'relative',
-      cursor: 'pointer',
-      zIndex: 1,
-      whiteSpace: 'pre-wrap',
-    }}
-    fullWidth
-    onClick={() => {}}
-    title={title}
-    leftSection={<IconClock />}
-    mih={15}
-    h={height}
-    mah={maxHeight}
-  >
-    {event?.title}
-  </Button>
+export const Event = ({ event, height, maxHeight, title, handleOpenEvent }: Props) => (
+  <Tooltip key={String(event._id)} label={title}>
+    <Button
+      variant="filled"
+      bd="0.2px solid white"
+      radius={0}
+      style={{
+        display: 'flex',
+        position: 'relative',
+        cursor: 'pointer',
+        zIndex: 1,
+        whiteSpace: 'pre-wrap',
+      }}
+      fullWidth
+      onClick={(e) => {
+        e.stopPropagation();
+        handleOpenEvent(event);
+      }}
+      mih={15}
+      h={height}
+      mah={maxHeight}
+      color={event?.color}
+      w="fit-content"
+      maw={200}
+    >
+      {event?.title}
+    </Button>
+  </Tooltip>
 );
diff --git a/components/Calendar/SelectedDay.tsx b/components/Calendar/SelectedDay.tsx
index 9b5282c..08d7461 100644
--- a/components/Calendar/SelectedDay.tsx
+++ b/components/Calendar/SelectedDay.tsx
@@ -8,7 +8,7 @@ import {
   ScrollArea,
   Stack,
   Text,
-  ThemeIcon,
+  Tooltip,
 } from '@mantine/core';
 import {
   IconCalendar,
@@ -31,10 +31,11 @@ interface Props {
   setDate: (date: Date) => void;
   close: () => void;
   events?: EventDocument[];
-  newEvent: () => void;
+  newEvent: (time?: number) => void;
+  handleOpenEvent: (event: EventDocument) => void;
 }
 
-export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) => {
+export const SelectedDay = ({ date, setDate, close, newEvent, events, handleOpenEvent }: Props) => {
   const ref = useRef(null);
 
   useMemo(() => {
@@ -45,7 +46,7 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
 
   return (
     <>
-      <Group my="xs" justify="space-between">
+      <Group mb="xs" justify="space-between">
         <ActionIcon size="md" color="red" variant="outline" onClick={close}>
           <IconX />
         </ActionIcon>
@@ -79,7 +80,7 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
           </ActionIconGroup>
         </Group>
         <ActionIconGroup>
-          <ActionIcon size="md" color="green" variant="outline" onClick={newEvent}>
+          <ActionIcon size="md" color="green" variant="outline" onClick={() => newEvent()}>
             <IconPlus />
           </ActionIcon>
         </ActionIconGroup>
@@ -94,30 +95,33 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
                 dayjs(event?.to).add(1, 'day').startOf('day')
               )
           )
-          ?.map((event, id) => (
-            <Button
-              size="compact-md"
-              key={String(id)}
-              variant="light"
-              radius={0}
-              style={{
-                display: 'flex',
-                position: 'relative',
-                textAlign: 'left',
-                cursor: 'pointer',
-              }}
-              fullWidth
-              onClick={() => {}}
-              title={`${dayjs(event?.from).format('DD MMM YY')} - ${dayjs(event?.to).format('DD MMM YY')}`}
-              autoContrast
-              leftSection={<IconCalendar />}
+          ?.map((event) => (
+            <Tooltip
+              key={String(event._id)}
+              label={`${dayjs(event?.from).format('DD MMM YY')} - ${dayjs(event?.to).format('DD MMM YY')}`}
             >
-              {event?.title}
-            </Button>
+              <Button
+                size="compact-md"
+                variant="filled"
+                radius={0}
+                style={{
+                  display: 'flex',
+                  position: 'relative',
+                  textAlign: 'left',
+                  cursor: 'pointer',
+                }}
+                fullWidth
+                onClick={() => handleOpenEvent(event)}
+                leftSection={<IconCalendar />}
+                color={event?.color}
+              >
+                {event?.title}
+              </Button>
+            </Tooltip>
           ))
           .reverse()}
       </Stack>
-      <ScrollArea.Autosize mt="sm" h="auto" viewportRef={ref}>
+      <ScrollArea.Autosize pt="xs" h="auto" w="100%" viewportRef={ref} mx="auto">
         <Stack pt="md" gap={0}>
           {new Array(24).fill(0).map((_, i) => (
             <Blockquote
@@ -130,16 +134,20 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
               radius={0}
               ml="md"
               icon={
-                <ThemeIcon
-                  variant="filled"
-                  color={i > 5 && i < 18 ? 'yellow.7' : 'dark.4'}
-                  radius="xl"
-                >
-                  {hoursIcons[i]}
-                </ThemeIcon>
+                <Tooltip label={`Create event at ${i}:00`}>
+                  <ActionIcon
+                    variant="filled"
+                    color={i > 5 && i < 18 ? 'yellow.7' : 'dark.4'}
+                    radius="xl"
+                    style={{ zIndex: 2 }}
+                    onClick={() => newEvent(i)}
+                  >
+                    {hoursIcons[i]}
+                  </ActionIcon>
+                </Tooltip>
               }
             >
-              <Group wrap="nowrap" gap={0} align="self-start">
+              <Group pl="lg" w="100%" wrap="nowrap" gap={0} align="self-start">
                 {events
                   ?.filter(
                     (event) =>
@@ -152,7 +160,8 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
                       event={event}
                       height={dayjs(event?.to).diff(dayjs(event?.from), 'minutes')}
                       maxHeight={(24 - dayjs(event?.from).get('hour')) * 60}
-                      title={`${dayjs(event?.from).format('HH:mm')} - ${dayjs(event?.to).format('HH:mm')}`}
+                      title={`${event?.title} | ${dayjs(event?.from).format('HH:mm')} - ${dayjs(event?.to).format('HH:mm')}`}
+                      handleOpenEvent={handleOpenEvent}
                     />
                   ))}
                 {i === 0 &&
@@ -169,7 +178,8 @@ export const SelectedDay = ({ date, setDate, close, newEvent, events }: Props) =
                         event={event}
                         height={dayjs(event?.to).diff(dayjs(date).startOf('day'), 'minutes')}
                         maxHeight={(0 + dayjs(event?.to).get('hour')) * 60}
-                        title={`${dayjs(event?.from).format('DD MMM YY HH:mm')} - ${dayjs(event?.to).format('DD MMM YY HH:mm')}`}
+                        title={`${event?.title} | ${dayjs(event?.from).format('DD MMM YY HH:mm')} - ${dayjs(event?.to).format('DD MMM YY HH:mm')}`}
+                        handleOpenEvent={handleOpenEvent}
                       />
                     ))}
               </Group>
diff --git a/lib/constants.tsx b/lib/constants.tsx
index 2398b2f..406ee11 100644
--- a/lib/constants.tsx
+++ b/lib/constants.tsx
@@ -140,7 +140,6 @@ export const APPS: AppType[] = [
 export const COLORS = [
   'blue',
   'red',
-  'green',
   'indigo',
   'teal',
   'violet',
@@ -148,6 +147,8 @@ export const COLORS = [
   'cyan',
   'grape',
   'lime',
+  'orange',
+  'yellow',
 ];
 
 export const STYLES = {
diff --git a/models/Event.ts b/models/Event.ts
index 1cc2a79..bd42999 100644
--- a/models/Event.ts
+++ b/models/Event.ts
@@ -1,4 +1,5 @@
 import mongoose, { Model, model, models, Schema, Types } from 'mongoose';
+import { COLORS } from '@/lib/constants';
 
 export interface EventDocument extends Document {
   _id?: Types.ObjectId;
@@ -7,7 +8,7 @@ export interface EventDocument extends Document {
   from: Date;
   to: Date;
   isAllDay: boolean;
-  category?: mongoose.Types.ObjectId;
+  color: string;
 }
 
 const eventSchema = new Schema<EventDocument, {}>(
@@ -34,10 +35,11 @@ const eventSchema = new Schema<EventDocument, {}>(
       type: Boolean,
       default: false,
     },
-    category: {
-      type: Schema.Types.ObjectId,
-      ref: 'User',
-      default: null,
+    color: {
+      type: String,
+      enum: COLORS,
+      default: 'blue',
+      required: true,
     },
   },
   { timestamps: true }