diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 00c8a944..1786ca85 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -5,13 +5,13 @@ import { getDate } from "./CalenderComponent/util"; import Month from "./CalenderComponent/Month"; import GlobalContext from "./context/GlobalContext"; import CalendarHeader from "./CalenderComponent/CalendarHeader"; -import EventModal from "./CalenderComponent/EventModal"; +import EventDetails from "./CalenderComponent/EventDetails"; import SidebarCalendar from "./CalenderComponent/SidebarCalendar"; import WeeklyView from "./CalenderComponent/WeeklyView"; import DailyView from "./CalenderComponent/DailyView"; export default function Calendar(){ - const{ monthIndex , showEventModal,setShowEventModal,Current_view, weekOffset,dateOffset } = useContext(GlobalContext); + const{ monthIndex , showEventModal,Current_view, weekOffset,dateOffset } = useContext(GlobalContext); const [currentMonth,setCurrentMonth]= useState(getMonth()); const [currentWeek,setCurrentWeek]= useState(getWeek(weekOffset)); const [displayDate,setDisplayDate]= useState(getDate(dateOffset)); @@ -31,7 +31,7 @@ export default function Calendar(){ return(
- { showEventModal && } + { showEventModal && }
diff --git a/src/components/Calendar/CalenderComponent/CalendarHeader.tsx b/src/components/Calendar/CalenderComponent/CalendarHeader.tsx index daeebe14..26c70727 100644 --- a/src/components/Calendar/CalenderComponent/CalendarHeader.tsx +++ b/src/components/Calendar/CalenderComponent/CalendarHeader.tsx @@ -78,7 +78,7 @@ export default function CalendarHeader() { {Isopen && - + {drop_down_list.map((view_name,idx) => (

{ - const events = filteredEvents.filter((evt: Event) => dayjs(evt.day).format("DD-MM-YY") === date.format("DD-MM-YY")); + const events = filteredEvents.filter((evt: Event) => dayjs(evt.startDateTime).format("DD-MM-YY") === date.format("DD-MM-YY")); setDayEvents(events); }, [filteredEvents, date]); function getCurrentDate() { - return date.format("DD-MM-YY") === dayjs().format("DD-MM-YY") ? 'bg-blue-700 text-white rounded-full ' : ''; + return date.format("DD-MM-YY") === dayjs().format("DD-MM-YY") ? 'text-white bg-blue-700 rounded-full ' : ''; } function getCurrentDay() { - return date.format("DD-MM-YY") === dayjs().format("DD-MM-YY") ? 'text-blue-600' : ''; + return date.format("DD-MM-YY") === dayjs().format("DD-MM-YY") ? 'text-blue-700' : ''; } function handleTimeSelected(time: string, i: number) { @@ -36,63 +43,18 @@ export default function DailyView({ date }: { date: any }) { setTimeTo(time_list[i + 1]); } } - - function getCurrentTimeIndicatorPosition() { - const currentTime = dayjs(); - if (date.format("DD-MM-YY") === currentTime.format("DD-MM-YY")) { - const nowInMinutes = currentTime.hour() * 60 + currentTime.minute(); - const closestTimeIndex = time_list.findIndex(time => { - const [hours, minutes] = time.split(/[: ]/); - const isPM = time.includes("PM"); - let timeInMinutes = parseInt(hours) % 12 * 60 + (parseInt(minutes) || 0); - if (isPM) timeInMinutes += 12 * 60; - return timeInMinutes >= nowInMinutes; - }); - - if (closestTimeIndex > -1 && time_list[closestTimeIndex]) { - const closestTime = time_list[closestTimeIndex]; - const [hours, minutes] = closestTime.split(/[: ]/); - const isPM = closestTime.includes("PM"); - let timeInMinutes = parseInt(hours) % 12 * 60 + (parseInt(minutes) || 0); - if (isPM) timeInMinutes += 12 * 60; - const offset = nowInMinutes - timeInMinutes; - const topPosition = closestTimeIndex * 56 + (offset / 60) * 56; - return topPosition; - } - } - return null; + function displayColor(label:string){ + return labelsClasses.get(label); } - const currentTimeIndicatorPosition = getCurrentTimeIndicatorPosition(); - return ( -

+

{date.format('ddd').toUpperCase()}

-

{date.date()}

+

{date.format('DD')}

- -
{ - setShowEventModal(true); - setDaySelected(date); - }} - className='flex-1 cursor-pointer'> - {dayEvents.map((evt: selectedDayEvent, idx) => ( - (evt.timeFrom === "From" || evt.timeTo === "to") && ( -
setSelectedEvent(evt)} - key={idx} - className={`bg-${evt.label}-300 w-40 border border-gray-600 hover:bg-${evt.label}-400 cursor-pointer p-1 mx-2 text-gray-600 text-xs rounded mb-1 truncate`} - > - {evt.title} -
- ) - ))} -
-
{time_list.map((time: string, i: number) => ( @@ -100,35 +62,27 @@ export default function DailyView({ date }: { date: any }) { ))}
- {currentTimeIndicatorPosition !== null && ( -
-
-
- )} + {time_list.map((time: string, i: number) => (
{ - setShowEventModal(true); setDaySelected(date); handleTimeSelected(time, i); }} key={i} className='h-14 w-full border border-gray-300'> -
+
{dayEvents.map((evt: selectedDayEvent, idx) => ( - (evt.timeFrom === time) && ( + (dayjs(evt.startDateTime).format('hh:00 A')=== time) && (
setSelectedEvent(evt)} + className={`bg-${displayColor(evt.type)}-300 hover:bg-${displayColor(evt.type)}-400 cursor-pointer p-1 mx-2 text-gray-600 text-xs rounded mb-1 truncate`} + onClick={() => { + setSelectedEvent(evt) + setShowEventModal(true) + }} > - {evt.title} + {evt.job.company.name}
) ))} diff --git a/src/components/Calendar/CalenderComponent/EventDetails.tsx b/src/components/Calendar/CalenderComponent/EventDetails.tsx new file mode 100644 index 00000000..22a60549 --- /dev/null +++ b/src/components/Calendar/CalenderComponent/EventDetails.tsx @@ -0,0 +1,117 @@ +import React,{useContext,useState} from 'react' +import GlobalContext from '../context/GlobalContext'; +import dayjs from 'dayjs'; +import { labelsClasses } from '../context/ContextWrapper'; + +export default function EventDetails() { + const { setShowEventModal, daySelected, selectedEvent} = useContext(GlobalContext); + + const [description, setDescription] = useState(selectedEvent ? selectedEvent.metadata : ""); + const [selectedLabel, setSelectedLabel] = useState<[string, string]>(selectedEvent ? [selectedEvent.type, labelsClasses.get(selectedEvent.type) || ""] : ["", ""]); + const [timeFrom,setTimeFrom] = useState(selectedEvent ? dayjs(selectedEvent.startDateTime).format('hh:00 A') : "from") + const [timeTo,setTimeTo] = useState(selectedEvent ? dayjs(selectedEvent.endDateTime).format('hh:00 A') : "to") + const [checked,setChecked] = useState(selectedEvent ? selectedEvent.visibleToRecruiter : false) + const [companyName,setCompanyName] = useState(selectedEvent ? selectedEvent.job.company.name : "") + const [role,setRole] = useState(selectedEvent ? selectedEvent.job.role : "") + const [recruitmentType,setRecruitmentType] = useState(selectedEvent ? selectedEvent.job.season.type : "") + const [roundNumber,setRoundNumber] = useState(selectedEvent ? selectedEvent.roundNumber : 1) + + function visibilityStatus(check:boolean){ + return check ? "Yes" : "No"; + } + + return ( +
+
+
+ + drag_handle + + +
+
+
+ + + schedule + +

{daySelected.format("dddd, MMMM DD")}

+
+
+

{timeFrom}

+
+

-

+
+

{timeTo}

+
+
+ {description && + segment + } + + {description &&{description}} + + visibility + + Visible to Recruiter : + {visibilityStatus(checked)} + + label + +
+ + {selectedLabel[0]} +
+ + + work + +
+ Type : +
+ + {recruitmentType} + + + +
+ Company : +
+ {companyName} +
+ Role : +
+ + {role} +
+ Round : +
+ + {roundNumber} +
+
+
+ +
+
+
+ ); +} + diff --git a/src/components/Calendar/CalenderComponent/EventModal.tsx b/src/components/Calendar/CalenderComponent/EventModal.tsx deleted file mode 100644 index 21e1a7f8..00000000 --- a/src/components/Calendar/CalenderComponent/EventModal.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import React, { useContext, useState, MouseEvent,useEffect } from 'react'; -import GlobalContext from '../context/GlobalContext'; -import { time_list } from './WeekDay'; - -const labelsClasses: string[] = ["green", "red", "indigo", "gray", "blue", "purple"]; - -interface CalendarEvent { - title: string; - description: string; - label: string; - day: number | null; - timeFrom: string; - timeTo: string; - id: string | number; -} - -export default function EventModal() { - const { setShowEventModal, daySelected, dispatchCallEvents, selectedEvent,timeFrom,timeTo,setTimeFrom,setTimeTo } = useContext(GlobalContext); - - const [title, setTitle] = useState(selectedEvent ? selectedEvent.title : ""); - const [description, setDescription] = useState(selectedEvent ? selectedEvent.description : ""); - const [selectedLabel, setSelectedLabel] = useState(selectedEvent ? labelsClasses.find(lbl => lbl === selectedEvent.label) || labelsClasses[0] : labelsClasses[0]); - const [timeSelector, setTimeSelector] = useState(false); - const [showTimeList, setShowTimeList] = useState<{ from: boolean, to: boolean }>({ from: false, to: false }); - - - - function handleTimeChange(time: string, type: 'from' | 'to') { - if (type === 'from') { - setTimeFrom(time); - } else { - setTimeTo(time); - } - setShowTimeList({ from: false, to: false }); - } - - function handleSubmit(e: MouseEvent) { - e.preventDefault(); - const calendarEvent: CalendarEvent = { - title, - description, - label: selectedLabel, - day: daySelected ? daySelected.valueOf() : null, - timeFrom: timeFrom !== null ? timeFrom : "", - timeTo: timeTo !== null ? timeTo : "", - id: selectedEvent ? selectedEvent.id : Date.now(), - }; - if (selectedEvent) { - dispatchCallEvents({ type: 'update', payload: calendarEvent }); - } else { - dispatchCallEvents({ type: 'push', payload: calendarEvent }); - } - setShowEventModal(false); - } - function removeTime(){ - setTimeFrom('from') - setTimeTo('to') - setTimeSelector(false) - } - - return ( -
-
-
- - drag_handle - -
- {selectedEvent && ( - { - dispatchCallEvents({ type: "delete", payload: selectedEvent }); - setShowEventModal(false); - }} - className="material-icons-outlined text-gray-400 cursor-pointer hover:text-red-500 hover:bg-red-200 rounded-full p-2"> - delete - - )} -
- -
-
-
- setTitle(e.target.value)} - /> - - schedule - - {daySelected &&

{daySelected.format("dddd, MMMM DD")}

} - {(!timeSelector && timeFrom=="from") ? ( - - ) : ( - - )} - {(timeSelector||timeFrom!="from") && -
-
-

setShowTimeList({ ...showTimeList, from: true })} - className="rounded bg-gray-200 text-sm w-20 pl-2 border border-transparent p-1 hover:border-gray-500 hover:cursor-pointer" - >{timeFrom}

- {showTimeList.from && ( -
- {time_list.map((time, idx) => ( -

handleTimeChange(time, 'from')} - key={idx} - className="py-2 min-w-32 text-left pl-2 hover:bg-gray-100 hover:cursor-pointer" - >{time}

- ))} -
- )} -
-

-

-
-

setShowTimeList({ ...showTimeList, to: true })} - className="rounded bg-gray-200 text-sm pl-2 w-20 border border-transparent p-1 hover:border-gray-500 hover:cursor-pointer" - >{timeTo}

- {showTimeList.to && ( -
- {time_list.map((time, idx) => ( -

handleTimeChange(time, 'to')} - key={idx} - className="py-2 min-w-32 text-left pl-2 hover:bg-gray-100 hover:cursor-pointer" - >{time}

- ))} -
- )} -
-
- } - - segment - - setDescription(e.target.value)} - /> - - bookmark_border - -
- {labelsClasses.map((labelClass, i) => ( - setSelectedLabel(labelClass)} - className={`bg-${labelClass}-500 w-6 h-6 rounded-full flex items-center justify-center cursor-pointer`} - > - {selectedLabel === labelClass && ( - - check - - )} - - ))} -
-
-
-
- -
-
-
- ); -} diff --git a/src/components/Calendar/CalenderComponent/Labels.tsx b/src/components/Calendar/CalenderComponent/Labels.tsx index 7811512a..2cbf2c79 100644 --- a/src/components/Calendar/CalenderComponent/Labels.tsx +++ b/src/components/Calendar/CalenderComponent/Labels.tsx @@ -1,23 +1,28 @@ import React, { useContext } from 'react' import GlobalContext from '../context/GlobalContext' +import { labelsClasses } from '../context/ContextWrapper'; - +let colors = "text-green-400 text-red-400 text-indigo-400 text-gray-400 text-blue-400 text-purple-400" export default function Labels() { const { labels ,updateLabel} = useContext(GlobalContext); return (

Label

- {labels.map(({label: lbl,checked},idx) => - - )} + {Array.from(labelsClasses.entries()).map(([label, color], idx) => { + const checked = labels.find(lbl => lbl.label === label)?.checked || false; + return ( + + ); + })} ) } diff --git a/src/components/Calendar/CalenderComponent/MonthDay.tsx b/src/components/Calendar/CalenderComponent/MonthDay.tsx index a5f76e7f..233bae60 100644 --- a/src/components/Calendar/CalenderComponent/MonthDay.tsx +++ b/src/components/Calendar/CalenderComponent/MonthDay.tsx @@ -2,21 +2,26 @@ import React,{useContext, useEffect, useState} from 'react' import dayjs from 'dayjs'; import GlobalContext from '../context/GlobalContext'; import { selectedDayEvent } from '../context/GlobalContext'; +import { labelsClasses } from '../context/ContextWrapper'; interface Event{ - day:any, + startDateTime:any, + endDateTime:any, rowIdx:any, } +let colors = "bg-green-300 bg-red-300 bg-indigo-300 bg-gray-300 bg-blue-300 bg-purple-300" +let hover_colors = "hover:bg-green-400 hover:bg-red-400 hover:bg-indigo-400 hover:bg-gray-400 hover:bg-blue-400 hover:bg-purple-400" export default function Day({day,rowIdx}:{day:any,rowIdx:any}) { const [dayEvents,setDayEvents] = useState([]) - const{ setShowEventModal , setDaySelected , filteredEvents , setSelectedEvent ,monthIndex }= + const{ setShowEventModal , setDaySelected , setSelectedEvent ,monthIndex,filteredEvents }= useContext(GlobalContext) + useEffect(() => { - const events = filteredEvents.filter((evt:Event) => dayjs(evt.day).format("DD-MM-YY") === day.format("DD-MM-YY")); + const events = filteredEvents.filter((evt:Event) => dayjs(evt.startDateTime).format("DD-MM-YY") === day.format("DD-MM-YY")); setDayEvents(events) },[filteredEvents,day]); @@ -32,21 +37,19 @@ export default function Day({day,rowIdx}:{day:any,rowIdx:any}) { :'opacity-50'; } - useEffect(() => { - getCurrentMonth() - console.log(day.format("MM")) - },[monthIndex]); + function displayColor(label:string){ + return labelsClasses.get(label); + } return (
+ className='border border-gray-300 flex flex-col max-h-40'>
{rowIdx ===0 && (

{day.format('ddd').toUpperCase()}

)}

{ - setShowEventModal(true); setDaySelected(day); }} className={`text-sm p-1 my-1 font-semibold text-center hover:cursor-pointer hover:bg-slate-300 hover:rounded-full hover:text-black ${getCurrentDay()} ${getCurrentMonth()}`}> @@ -55,16 +58,18 @@ export default function Day({day,rowIdx}:{day:any,rowIdx:any}) {

{ - setShowEventModal(true); setDaySelected(day); }} - className='flex-1 cursor-pointer'> + className='flex-1 overflow-y-auto'> {dayEvents.map((evt:selectedDayEvent,idx) => (
setSelectedEvent(evt)} + onClick={() => { + setSelectedEvent(evt) + setShowEventModal(true) + }} key={idx} - className={`bg-${evt.label}-300 hover:bg-${evt.label}-400 cursor-pointer p-1 mx-2 text-gray-600 text-sm rounded mb-1 truncate`}> - {evt.title} + className={`bg-${displayColor(evt.type)}-300 hover:bg-${displayColor(evt.type)}-400 ${getCurrentMonth()} event_block cursor-pointer p-1 mx-2 text-gray-600 text-sm rounded mb-1 truncate`}> + {evt.job && evt.job.company && evt.job.company.name ? evt.job.company.name : evt.id}
))}
diff --git a/src/components/Calendar/CalenderComponent/SidebarCalendar.tsx b/src/components/Calendar/CalenderComponent/SidebarCalendar.tsx index 2adf1e20..7fd0c4fa 100644 --- a/src/components/Calendar/CalenderComponent/SidebarCalendar.tsx +++ b/src/components/Calendar/CalenderComponent/SidebarCalendar.tsx @@ -6,7 +6,7 @@ import Labels from './Labels' export default function SidebarCalendar() { return ( -