diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx index dc93751d4..33b1e3ef2 100644 --- a/apps/app/components/core/calendar-view/calendar.tsx +++ b/apps/app/components/core/calendar-view/calendar.tsx @@ -26,7 +26,7 @@ import { import { Popover, Transition } from "@headlessui/react"; import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd"; import StrictModeDroppable from "components/dnd/StrictModeDroppable"; -import { CustomMenu } from "components/ui"; +import { CustomMenu, Spinner } from "components/ui"; // icon import { CheckIcon, @@ -35,6 +35,8 @@ import { ChevronRightIcon, PlusIcon, } from "@heroicons/react/24/outline"; +// hooks +import useIssuesView from "hooks/use-issues-view"; // services import issuesService from "services/issues.service"; import cyclesService from "services/cycles.service"; @@ -67,6 +69,8 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; + const { params } = useIssuesView(); + const [calendarDateRange, setCalendarDateRange] = useState({ startDate: startOfWeek(currentDate), endDate: lastDayOfWeek(currentDate), @@ -82,11 +86,13 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null, workspaceSlug && projectId ? () => - issuesService.getIssuesWithParams( - workspaceSlug as string, - projectId as string, - targetDateFilter - ) + issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, { + ...params, + target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat( + calendarDateRange.endDate + )};before`, + group_by: null, + }) : null ); @@ -100,7 +106,13 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { workspaceSlug as string, projectId as string, cycleId as string, - targetDateFilter + { + ...params, + target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat( + calendarDateRange.endDate + )};before`, + group_by: null, + } ) : null ); @@ -115,7 +127,13 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { workspaceSlug as string, projectId as string, moduleId as string, - targetDateFilter + { + ...params, + target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat( + calendarDateRange.endDate + )};before`, + group_by: null, + } ) : null ); @@ -132,7 +150,11 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays; - const calendarIssues = cycleCalendarIssues ?? moduleCalendarIssues ?? projectCalendarIssues; + const calendarIssues = cycleId + ? cycleCalendarIssues + : moduleId + ? moduleCalendarIssues + : projectCalendarIssues; const currentViewDaysData = currentViewDays.map((date: Date) => { const filterIssue = @@ -203,11 +225,11 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { }); }; - return ( + return calendarIssues ? ( -
+
-
+
{({ open }) => ( <> @@ -227,8 +249,8 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => { leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1" > - -
+ +
{yearOptions.map((year) => ( ))}
-
+
{monthOptions.map((month) => (
-
+
+ = ({ addIssueToDate }) => { {weeks.map((date, index) => (
= ({ addIssueToDate }) => {
+ ) : ( +
+ +
); }; diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx index cbabb23a1..cda745a23 100644 --- a/apps/app/components/core/issues-view-filter.tsx +++ b/apps/app/components/core/issues-view-filter.tsx @@ -137,50 +137,54 @@ export const IssuesFilterView: React.FC = () => {
-
-

Group by

- option.key === groupByProperty)?.name ?? - "Select" - } - width="lg" - > - {GROUP_BY_OPTIONS.map((option) => - issueView === "kanban" && option.key === null ? null : ( - setGroupByProperty(option.key)} - > - {option.name} - - ) - )} - -
-
-

Order by

- option.key === orderBy)?.name ?? - "Select" - } - width="lg" - > - {ORDER_BY_OPTIONS.map((option) => - groupByProperty === "priority" && option.key === "priority" ? null : ( - { - setOrderBy(option.key); - }} - > - {option.name} - - ) - )} - -
+ {issueView !== "calendar" && ( + <> +
+

Group by

+ option.key === groupByProperty) + ?.name ?? "Select" + } + width="lg" + > + {GROUP_BY_OPTIONS.map((option) => + issueView === "kanban" && option.key === null ? null : ( + setGroupByProperty(option.key)} + > + {option.name} + + ) + )} + +
+
+

Order by

+ option.key === orderBy)?.name ?? + "Select" + } + width="lg" + > + {ORDER_BY_OPTIONS.map((option) => + groupByProperty === "priority" && option.key === "priority" ? null : ( + { + setOrderBy(option.key); + }} + > + {option.name} + + ) + )} + +
+ + )}

Issue type

{ ))}
-
-

Show empty states

- -
-
- - -
-
-
-

Display Properties

-
- {Object.keys(properties).map((key) => { - if (key === "estimate" && !isEstimateActive) return null; - return ( + {issueView !== "calendar" && ( + <> +
+

Show empty states

- ); - })} -
+
+
+ + +
+ + )}
+ {issueView !== "calendar" && ( +
+

Display Properties

+
+ {Object.keys(properties).map((key) => { + if (key === "estimate" && !isEstimateActive) return null; + + return ( + + ); + })} +
+
+ )}
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx index 6c80945c9..c661f5de5 100644 --- a/apps/app/components/core/issues-view.tsx +++ b/apps/app/components/core/issues-view.tsx @@ -396,41 +396,40 @@ export const IssuesView: React.FC = ({ handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} /> - {issueView !== "calendar" && ( - <> -
- - {areFiltersApplied && ( - { - if (viewId) { - setFilters({}, true); - setToastAlert({ - title: "View updated", - message: "Your view has been updated", - type: "success", - }); - } else - setCreateViewModal({ - query: filters, - }); - }} - className="flex items-center gap-2 text-sm" - > - {!viewId && } - {viewId ? "Update" : "Save"} view - - )} -
+ <> +
+ {areFiltersApplied && ( -
+ { + if (viewId) { + setFilters({}, true); + setToastAlert({ + title: "View updated", + message: "Your view has been updated", + type: "success", + }); + } else + setCreateViewModal({ + query: filters, + }); + }} + className="flex items-center gap-2 text-sm" + > + {!viewId && } + {viewId ? "Update" : "Save"} view + )} - - )} +
+ {areFiltersApplied && ( +
+ )} + + {(provided, snapshot) => ( diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx index ff17007ab..9d9135362 100644 --- a/apps/app/contexts/issue-view.context.tsx +++ b/apps/app/contexts/issue-view.context.tsx @@ -297,6 +297,14 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> = }, }); } + if (property === "calendar") { + dispatch({ + type: "SET_GROUP_BY_PROPERTY", + payload: { + groupByProperty: null, + }, + }); + } if (!workspaceSlug || !projectId) return;