diff --git a/web/components/core/views/calendar-view/calendar-header.tsx b/web/components/core/views/calendar-view/calendar-header.tsx index 271423cd4..fd69ed443 100644 --- a/web/components/core/views/calendar-view/calendar-header.tsx +++ b/web/components/core/views/calendar-view/calendar-header.tsx @@ -5,25 +5,12 @@ import { Popover, Transition } from "@headlessui/react"; // ui import { CustomMenu, ToggleSwitch } from "components/ui"; // icons -import { - CheckIcon, - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, -} from "@heroicons/react/24/outline"; +import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline"; // helpers import { - addMonths, - addSevenDaysToDate, formatDate, - getCurrentWeekEndDate, - getCurrentWeekStartDate, isSameMonth, isSameYear, - lastDayOfWeek, - startOfWeek, - subtract7DaysToDate, - subtractMonths, updateDateWithMonth, updateDateWithYear, } from "helpers/calendar.helper"; @@ -31,190 +18,136 @@ import { import { MONTHS_LIST, YEARS_LIST } from "constants/calendar"; type Props = { - isMonthlyView: boolean; - setIsMonthlyView: React.Dispatch>; currentDate: Date; setCurrentDate: React.Dispatch>; showWeekEnds: boolean; setShowWeekEnds: React.Dispatch>; - changeDateRange: (startDate: Date, endDate: Date) => void; }; export const CalendarHeader: React.FC = ({ - setIsMonthlyView, - isMonthlyView, currentDate, setCurrentDate, showWeekEnds, setShowWeekEnds, - changeDateRange, -}) => { - const updateDate = (date: Date) => { - setCurrentDate(date); +}) => ( +
+
+ + {({ open }) => ( + <> + +
+ {formatDate(currentDate, "Month")}{" "} + {formatDate(currentDate, "yyyy")} +
+ - changeDateRange(startOfWeek(date), lastDayOfWeek(date)); - }; - - return ( -
-
- - {({ open }) => ( - <> - -
- {formatDate(currentDate, "Month")}{" "} - {formatDate(currentDate, "yyyy")} + + +
+ {YEARS_LIST.map((year) => ( + + ))}
- +
+ {MONTHS_LIST.map((month) => ( + + ))} +
+ + + + )} + - - -
- {YEARS_LIST.map((year) => ( - - ))} -
-
- {MONTHS_LIST.map((month) => ( - - ))} -
- - - - )} - - -
- - -
-
- -
+
+
- } + const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1); + + setCurrentDate(nextMonthFirstDate); + }} > - { - setIsMonthlyView(true); - changeDateRange(startOfWeek(currentDate), lastDayOfWeek(currentDate)); - }} - className="w-52 text-sm text-custom-text-200" - > -
- Monthly View - -
- - { - setIsMonthlyView(false); - changeDateRange( - getCurrentWeekStartDate(currentDate), - getCurrentWeekEndDate(currentDate) - ); - }} - className="w-52 text-sm text-custom-text-200" - > -
- Weekly View - -
- -
-

Show weekends

- setShowWeekEnds(!showWeekEnds)} /> -
- + +
- ); -}; + +
+ + + + Options +
+ } + > +
+

Show weekends

+ setShowWeekEnds(!showWeekEnds)} /> +
+ +
+
+); export default CalendarHeader; diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx index f339f7cf2..7758f64cd 100644 --- a/web/components/core/views/calendar-view/calendar.tsx +++ b/web/components/core/views/calendar-view/calendar.tsx @@ -1,10 +1,6 @@ import React, { useEffect, useState } from "react"; - import { useRouter } from "next/router"; - import { mutate } from "swr"; - -// react-beautiful-dnd import { DragDropContext, DropResult } from "react-beautiful-dnd"; // services import issuesService from "services/issues.service"; @@ -50,31 +46,27 @@ export const CalendarView: React.FC = ({ userAuth, }) => { const [showWeekEnds, setShowWeekEnds] = useState(false); - const [currentDate, setCurrentDate] = useState(new Date()); - const [isMonthlyView, setIsMonthlyView] = useState(true); + + const { calendarIssues, mutateIssues, params, activeMonthDate, setActiveMonthDate } = + useCalendarIssuesView(); const [calendarDates, setCalendarDates] = useState({ - startDate: startOfWeek(currentDate), - endDate: lastDayOfWeek(currentDate), + startDate: startOfWeek(activeMonthDate), + endDate: lastDayOfWeek(activeMonthDate), }); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query; - const { calendarIssues, mutateIssues, params, displayFilters, setDisplayFilters } = - useCalendarIssuesView(); - - const totalDate = eachDayOfInterval({ - start: calendarDates.startDate, - end: calendarDates.endDate, - }); - - const onlyWeekDays = weekDayInterval({ - start: calendarDates.startDate, - end: calendarDates.endDate, - }); - - const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays; + const currentViewDays = showWeekEnds + ? eachDayOfInterval({ + start: calendarDates.startDate, + end: calendarDates.endDate, + }) + : weekDayInterval({ + start: calendarDates.startDate, + end: calendarDates.endDate, + }); const currentViewDaysData = currentViewDays.map((date: Date) => { const filterIssue = @@ -148,27 +140,12 @@ export const CalendarView: React.FC = ({ .then(() => mutate(fetchKey)); }; - const changeDateRange = (startDate: Date, endDate: Date) => { - setCalendarDates({ - startDate, - endDate, - }); - - setDisplayFilters({ - calendar_date_range: `${renderDateFormat(startDate)};after,${renderDateFormat( - endDate - )};before`, - }); - }; - useEffect(() => { - if (!displayFilters || displayFilters.calendar_date_range === "") - setDisplayFilters({ - calendar_date_range: `${renderDateFormat( - startOfWeek(currentDate) - )};after,${renderDateFormat(lastDayOfWeek(currentDate))};before`, - }); - }, [currentDate, displayFilters, setDisplayFilters]); + setCalendarDates({ + startDate: startOfWeek(activeMonthDate), + endDate: lastDayOfWeek(activeMonthDate), + }); + }, [activeMonthDate]); const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions; @@ -188,13 +165,10 @@ export const CalendarView: React.FC = ({ className="h-full rounded-lg p-8 text-custom-text-200" >
= ({ {weeks.map((date, index) => (
- - {isMonthlyView - ? formatDate(date, "eee").substring(0, 3) - : formatDate(date, "eee")} - - {!isMonthlyView && {formatDate(date, "d")}} + {formatDate(date, "eee").substring(0, 3)}
))}
@@ -239,7 +198,6 @@ export const CalendarView: React.FC = ({ date={date} handleIssueAction={handleIssueAction} addIssueToDate={addIssueToDate} - isMonthlyView={isMonthlyView} showWeekEnds={showWeekEnds} user={user} isNotAllowed={isNotAllowed} diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx index 3e38155f1..bee67b5cd 100644 --- a/web/components/core/views/calendar-view/single-date.tsx +++ b/web/components/core/views/calendar-view/single-date.tsx @@ -24,14 +24,13 @@ type Props = { issues: IIssue[]; }; addIssueToDate: (date: string) => void; - isMonthlyView: boolean; showWeekEnds: boolean; user: ICurrentUserResponse | undefined; isNotAllowed: boolean; }; export const SingleCalendarDate: React.FC = (props) => { - const { handleIssueAction, date, index, isMonthlyView, showWeekEnds, user, isNotAllowed } = props; + const { handleIssueAction, date, index, showWeekEnds, user, isNotAllowed } = props; const router = useRouter(); const { cycleId, moduleId } = router.query; @@ -51,8 +50,6 @@ export const SingleCalendarDate: React.FC = (props) => { ref={provided.innerRef} {...provided.droppableProps} className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-200 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${ - isMonthlyView ? "" : "pt-9" - } ${ showWeekEnds ? (index + 1) % 7 === 0 ? "" @@ -62,71 +59,72 @@ export const SingleCalendarDate: React.FC = (props) => { : "border-r" }`} > - {isMonthlyView && {formatDate(new Date(date.date), "d")}} - {totalIssues > 0 && - date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => ( - - {(provided, snapshot) => ( - handleIssueAction(issue, "edit")} - handleDeleteIssue={() => handleIssueAction(issue, "delete")} - user={user} - isNotAllowed={isNotAllowed} - /> - )} - - ))} - -
- setIsCreateIssueFormOpen(false)} - prePopulatedData={{ - target_date: date.date, - ...(cycleId && { cycle: cycleId.toString() }), - ...(moduleId && { module: moduleId.toString() }), + <> + {formatDate(new Date(date.date), "d")} + {totalIssues > 0 && + date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => ( + + {(provided, snapshot) => ( + handleIssueAction(issue, "edit")} + handleDeleteIssue={() => handleIssueAction(issue, "delete")} + user={user} + isNotAllowed={isNotAllowed} + /> + )} + + ))} +
-
- - {totalIssues > 4 && ( - - )} + setIsCreateIssueFormOpen(false)} + prePopulatedData={{ + target_date: date.date, + ...(cycleId && { cycle: cycleId.toString() }), + ...(moduleId && { module: moduleId.toString() }), + }} + /> +
-
- + )} + +
- - Add issue - -
+ +
- {provided.placeholder} + {provided.placeholder} +
)} diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx index 786d60413..6e961cd1e 100644 --- a/web/contexts/issue-view.context.tsx +++ b/web/contexts/issue-view.context.tsx @@ -48,7 +48,6 @@ type ReducerFunctionType = (state: StateType, action: ReducerActionType) => Stat export const initialState: StateType = { display_filters: { - calendar_date_range: "", group_by: null, layout: "list", order_by: "-created_at", diff --git a/web/helpers/calendar.helper.ts b/web/helpers/calendar.helper.ts index ea553e170..c037fca38 100644 --- a/web/helpers/calendar.helper.ts +++ b/web/helpers/calendar.helper.ts @@ -112,18 +112,6 @@ export const formatDate = (date: Date, format: string): string => { return formattedDate; }; -export const subtractMonths = (date: Date, numMonths: number) => { - const result = new Date(date); - result.setMonth(result.getMonth() - numMonths); - return result; -}; - -export const addMonths = (date: Date, numMonths: number) => { - const result = new Date(date); - result.setMonth(result.getMonth() + numMonths); - return result; -}; - export const updateDateWithYear = (yearString: string, date: Date) => { const year = parseInt(yearString); const month = date.getMonth(); diff --git a/web/hooks/use-calendar-issues-view.tsx b/web/hooks/use-calendar-issues-view.tsx index 289aed2ac..1f6f04ea8 100644 --- a/web/hooks/use-calendar-issues-view.tsx +++ b/web/hooks/use-calendar-issues-view.tsx @@ -1,4 +1,4 @@ -import { useContext } from "react"; +import { useContext, useState } from "react"; import { useRouter } from "next/router"; @@ -10,6 +10,8 @@ import { issueViewContext } from "contexts/issue-view.context"; import issuesService from "services/issues.service"; import cyclesService from "services/cycles.service"; import modulesService from "services/modules.service"; +// helpers +import { renderDateFormat } from "helpers/date-time.helper"; // types import { IIssue } from "types"; // fetch-keys @@ -23,13 +25,17 @@ import { const useCalendarIssuesView = () => { const { display_filters: displayFilters, - setDisplayFilters, filters, setFilters, resetFilterToDefault, setNewFilterDefaultView, } = useContext(issueViewContext); + const [activeMonthDate, setActiveMonthDate] = useState(new Date()); + + const firstDayOfMonth = new Date(activeMonthDate.getFullYear(), activeMonthDate.getMonth(), 1); + const lastDayOfMonth = new Date(activeMonthDate.getFullYear(), activeMonthDate.getMonth() + 1, 0); + const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query; @@ -41,7 +47,9 @@ const useCalendarIssuesView = () => { labels: filters?.labels ? filters?.labels.join(",") : undefined, created_by: filters?.created_by ? filters?.created_by.join(",") : undefined, start_date: filters?.start_date ? filters?.start_date.join(",") : undefined, - target_date: displayFilters?.calendar_date_range, + target_date: `${renderDateFormat(firstDayOfMonth)};after,${renderDateFormat( + lastDayOfMonth + )};before`, }; const { data: projectCalendarIssues, mutate: mutateProjectCalendarIssues } = useSWR( @@ -101,8 +109,8 @@ const useCalendarIssuesView = () => { : (projectCalendarIssues as IIssue[]); return { - displayFilters, - setDisplayFilters, + activeMonthDate, + setActiveMonthDate, calendarIssues: calendarIssues ?? [], mutateIssues: cycleId ? mutateCycleCalendarIssues diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts index ca5ce47ab..4cd6d63fd 100644 --- a/web/types/view-props.d.ts +++ b/web/types/view-props.d.ts @@ -42,7 +42,6 @@ export interface IIssueFilterOptions { } export interface IIssueDisplayFilterOptions { - calendar_date_range?: string; group_by?: TIssueGroupByOptions; layout?: TIssueViewOptions; order_by?: TIssueOrderByOptions;