From 0611ff221fee16e51058457f728cbdbfe7156cfc Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Fri, 8 Dec 2023 12:45:08 +0530
Subject: [PATCH] fix: calendar filters and handled kanban issue empty state
 dnd error

---
 .../calendar/base-calendar-root.tsx           |  5 +-
 .../issue-layouts/calendar/calendar.tsx       | 18 ++++++-
 .../issue-layouts/calendar/day-tile.tsx       | 26 ++++++++--
 .../calendar/dropdowns/options-dropdown.tsx   | 47 ++++++++++++-------
 .../issues/issue-layouts/calendar/header.tsx  | 20 +++++++-
 .../calendar/roots/cycle-root.tsx             |  2 -
 .../calendar/roots/module-root.tsx            |  2 -
 .../calendar/roots/project-root.tsx           |  2 -
 .../calendar/roots/project-view-root.tsx      |  2 -
 .../issue-layouts/calendar/week-days.tsx      | 32 +++++++++----
 .../issues/issue-layouts/kanban/default.tsx   | 30 ++++++------
 11 files changed, 127 insertions(+), 59 deletions(-)

diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index e4aa079b5..c1fcaad62 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -16,7 +16,6 @@ import {
   IViewIssuesFilterStore,
   IViewIssuesStore,
 } from "store/issues";
-import { IIssueCalendarViewStore } from "store/issue";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EIssueActions } from "../types";
 import { IGroupedIssues } from "store/issues/types";
@@ -28,7 +27,6 @@ interface IBaseCalendarRoot {
     | IModuleIssuesFilterStore
     | ICycleIssuesFilterStore
     | IViewIssuesFilterStore;
-  calendarViewStore: IIssueCalendarViewStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
     [EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
@@ -77,13 +75,14 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
       <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
         <DragDropContext onDragEnd={onDragEnd}>
           <CalendarChart
+            issuesFilterStore={issuesFilterStore}
             issues={issues}
             groupedIssueIds={groupedIssueIds}
             layout={displayFilters?.calendar?.layout}
             showWeekends={displayFilters?.calendar?.show_weekends ?? false}
             quickActions={(issue, customActionButton) => (
               <QuickActions
-              customActionButton={customActionButton}
+                customActionButton={customActionButton}
                 issue={issue}
                 handleDelete={async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.DELETE)}
                 handleUpdate={
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 0240a8ebe..7b9787f81 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -10,8 +10,19 @@ import { Spinner } from "@plane/ui";
 import { ICalendarWeek } from "./types";
 import { IIssue } from "types";
 import { IGroupedIssues, IIssueResponse } from "store/issues/types";
+import {
+  ICycleIssuesFilterStore,
+  IModuleIssuesFilterStore,
+  IProjectIssuesFilterStore,
+  IViewIssuesFilterStore,
+} from "store/issues";
 
 type Props = {
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
   issues: IIssueResponse | undefined;
   groupedIssueIds: IGroupedIssues;
   layout: "month" | "week" | undefined;
@@ -27,7 +38,8 @@ type Props = {
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
-  const { issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } = props;
+  const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
+    props;
 
   const { calendar: calendarStore } = useMobxStore();
 
@@ -45,7 +57,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   return (
     <>
       <div className="h-full w-full flex flex-col overflow-hidden">
-        <CalendarHeader />
+        <CalendarHeader issuesFilterStore={issuesFilterStore} />
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
         <div className="h-full w-full overflow-y-auto">
           {layout === "month" && (
@@ -53,6 +65,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                   <CalendarWeekDays
+                    issuesFilterStore={issuesFilterStore}
                     key={weekIndex}
                     week={week}
                     issues={issues}
@@ -67,6 +80,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
           )}
           {layout === "week" && (
             <CalendarWeekDays
+              issuesFilterStore={issuesFilterStore}
               week={calendarStore.allDaysOfActiveWeek}
               issues={issues}
               groupedIssueIds={groupedIssueIds}
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 0bcf2d305..92af82495 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -11,8 +11,19 @@ import { renderDateFormat } from "helpers/date-time.helper";
 import { MONTHS_LIST } from "constants/calendar";
 import { IIssue } from "types";
 import { IGroupedIssues, IIssueResponse } from "store/issues/types";
+import {
+  ICycleIssuesFilterStore,
+  IModuleIssuesFilterStore,
+  IProjectIssuesFilterStore,
+  IViewIssuesFilterStore,
+} from "store/issues";
 
 type Props = {
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
   date: ICalendarDate;
   issues: IIssueResponse | undefined;
   groupedIssueIds: IGroupedIssues;
@@ -28,11 +39,18 @@ type Props = {
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
-  const { date, issues, groupedIssueIds, quickActions, enableQuickIssueCreate, quickAddCallback, viewId } = props;
+  const {
+    issuesFilterStore,
+    date,
+    issues,
+    groupedIssueIds,
+    quickActions,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    viewId,
+  } = props;
 
-  const { issueFilter: issueFilterStore } = useMobxStore();
-
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const issueIdList = groupedIssueIds ? groupedIssueIds[renderDateFormat(date.date)] : null;
 
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index f9fb48f21..61f61ca02 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -13,12 +13,29 @@ import { Check, ChevronUp } from "lucide-react";
 import { TCalendarLayouts } from "types";
 // constants
 import { CALENDAR_LAYOUTS } from "constants/calendar";
+import { EFilterType } from "store/issues/types";
+import {
+  ICycleIssuesFilterStore,
+  IModuleIssuesFilterStore,
+  IProjectIssuesFilterStore,
+  IViewIssuesFilterStore,
+} from "store/issues";
+
+interface ICalendarHeader {
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
+}
+
+export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((props) => {
+  const { issuesFilterStore } = props;
 
-export const CalendarOptionsDropdown: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
+  const { calendar: calendarStore } = useMobxStore();
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -35,18 +52,16 @@ export const CalendarOptionsDropdown: React.FC = observer(() => {
     ],
   });
 
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
-  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+  const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+  const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
   const handleLayoutChange = (layout: TCalendarLayouts) => {
     if (!workspaceSlug || !projectId) return;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        calendar: {
-          ...issueFilterStore.userDisplayFilters.calendar,
-          layout,
-        },
+    issuesFilterStore.updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        layout,
       },
     });
 
@@ -56,16 +71,14 @@ export const CalendarOptionsDropdown: React.FC = observer(() => {
   };
 
   const handleToggleWeekends = () => {
-    const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+    const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
     if (!workspaceSlug || !projectId) return;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
-      display_filters: {
-        calendar: {
-          ...issueFilterStore.userDisplayFilters.calendar,
-          show_weekends: !showWeekends,
-        },
+    issuesFilterStore.updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        show_weekends: !showWeekends,
       },
     });
   };
diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
index 034be98c4..ac54aa6d2 100644
--- a/web/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -6,8 +6,24 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "components/issues";
 // icons
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  ICycleIssuesFilterStore,
+  IModuleIssuesFilterStore,
+  IProjectIssuesFilterStore,
+  IViewIssuesFilterStore,
+} from "store/issues";
+
+interface ICalendarHeader {
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
+}
+
+export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
+  const { issuesFilterStore } = props;
 
-export const CalendarHeader: React.FC = observer(() => {
   const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
 
   const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
@@ -91,7 +107,7 @@ export const CalendarHeader: React.FC = observer(() => {
         >
           Today
         </button>
-        <CalendarOptionsDropdown />
+        <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} />
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 784e9a830..9830b871f 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -13,7 +13,6 @@ export const CycleCalendarLayout: React.FC = observer(() => {
   const {
     cycleIssues: cycleIssueStore,
     cycleIssuesFilter: cycleIssueFilterStore,
-    cycleIssueCalendarView: cycleIssueCalendarViewStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
@@ -62,7 +61,6 @@ export const CycleCalendarLayout: React.FC = observer(() => {
     <BaseCalendarRoot
       issueStore={cycleIssueStore}
       issuesFilterStore={cycleIssueFilterStore}
-      calendarViewStore={cycleIssueCalendarViewStore}
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
       viewId={cycleId.toString()}
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
index f4d33a7ec..bff618820 100644
--- a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -13,7 +13,6 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
   const {
     moduleIssues: moduleIssueStore,
     moduleIssuesFilter: moduleIssueFilterStore,
-    moduleIssueCalendarView: moduleIssueCalendarViewStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
@@ -56,7 +55,6 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     <BaseCalendarRoot
       issueStore={moduleIssueStore}
       issuesFilterStore={moduleIssueFilterStore}
-      calendarViewStore={moduleIssueCalendarViewStore}
       QuickActions={ModuleIssueQuickActions}
       issueActions={issueActions}
       viewId={moduleId}
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
index 1be4ed096..d5bbce1fc 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -14,7 +14,6 @@ export const CalendarLayout: React.FC = observer(() => {
 
   const {
     projectIssues: issueStore,
-    issueCalendarView: issueCalendarViewStore,
     projectIssuesFilter: projectIssueFiltersStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
@@ -49,7 +48,6 @@ export const CalendarLayout: React.FC = observer(() => {
     <BaseCalendarRoot
       issueStore={issueStore}
       issuesFilterStore={projectIssueFiltersStore}
-      calendarViewStore={issueCalendarViewStore}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       handleDragDrop={handleDragDrop}
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
index cab3203c7..c73b3b2f8 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -13,7 +13,6 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
   const {
     viewIssues: projectViewIssuesStore,
     viewIssuesFilter: projectIssueViewFiltersStore,
-    projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
@@ -50,7 +49,6 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     <BaseCalendarRoot
       issueStore={projectViewIssuesStore}
       issuesFilterStore={projectIssueViewFiltersStore}
-      calendarViewStore={projectViewIssueCalendarViewStore}
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       handleDragDrop={handleDragDrop}
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index 80db9b7b0..caa9fb239 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -1,7 +1,4 @@
 import { observer } from "mobx-react-lite";
-
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CalendarDayTile } from "components/issues";
 // helpers
@@ -10,8 +7,19 @@ import { renderDateFormat } from "helpers/date-time.helper";
 import { ICalendarDate, ICalendarWeek } from "./types";
 import { IIssue } from "types";
 import { IGroupedIssues, IIssueResponse } from "store/issues/types";
+import {
+  ICycleIssuesFilterStore,
+  IModuleIssuesFilterStore,
+  IProjectIssuesFilterStore,
+  IViewIssuesFilterStore,
+} from "store/issues";
 
 type Props = {
+  issuesFilterStore:
+    | IProjectIssuesFilterStore
+    | IModuleIssuesFilterStore
+    | ICycleIssuesFilterStore
+    | IViewIssuesFilterStore;
   issues: IIssueResponse | undefined;
   groupedIssueIds: IGroupedIssues;
   week: ICalendarWeek | undefined;
@@ -27,12 +35,19 @@ type Props = {
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
-  const { issues, groupedIssueIds, week, quickActions, enableQuickIssueCreate, quickAddCallback, viewId } = props;
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    week,
+    quickActions,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    viewId,
+  } = props;
 
-  const { issueFilter: issueFilterStore } = useMobxStore();
-
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
-  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+  const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+  const showWeekends = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
   if (!week) return null;
 
@@ -47,6 +62,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
         return (
           <CalendarDayTile
+            issuesFilterStore={issuesFilterStore}
             key={renderDateFormat(date.date)}
             date={date}
             issues={issues}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index a174e8eea..ac6f177bd 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -147,22 +147,22 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   </div>
                 )}
               </Droppable>
-            </div>
 
-            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky bottom-0 z-[0]">
-              {enableQuickIssueCreate && (
-                <KanBanQuickAddIssueForm
-                  formKey="name"
-                  groupId={getValueFromObject(_list, listKey) as string}
-                  subGroupId={sub_group_id}
-                  prePopulatedData={{
-                    ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
-                    ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
-                  }}
-                  quickAddCallback={quickAddCallback}
-                  viewId={viewId}
-                />
-              )}
+              <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky bottom-0 z-[0]">
+                {enableQuickIssueCreate && (
+                  <KanBanQuickAddIssueForm
+                    formKey="name"
+                    groupId={getValueFromObject(_list, listKey) as string}
+                    subGroupId={sub_group_id}
+                    prePopulatedData={{
+                      ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
+                      ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+                    }}
+                    quickAddCallback={quickAddCallback}
+                    viewId={viewId}
+                  />
+                )}
+              </div>
             </div>
 
             {/* {isDragStarted && isDragDisabled && (