fix: calendar filters and handled kanban issue empty state dnd error

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,6 +75,7 @@ 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}

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}

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 = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
-
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
 
   const issueIdList = groupedIssueIds ? groupedIssueIds[renderDateFormat(date.date)] : null;
 

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,19 +52,17 @@ export const CalendarOptionsDropdown: React.FC = observer(() => {
     ],
   });
 
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
-  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+  const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
   const handleLayoutChange = (layout: TCalendarLayouts) => {
     if (!workspaceSlug || !projectId) return;
 
-    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+    issuesFilterStore.updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.DISPLAY_FILTERS, {
-      display_filters: {
       calendar: {
-          ...issueFilterStore.userDisplayFilters.calendar,
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
         layout,
       },
-      },
     });
 
     calendarStore.updateCalendarPayload(
@@ -56,17 +71,15 @@ 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(), {
+    issuesFilterStore.updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.DISPLAY_FILTERS, {
-      display_filters: {
       calendar: {
-          ...issueFilterStore.userDisplayFilters.calendar,
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
         show_weekends: !showWeekends,
       },
-      },
     });
   };
 

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>
   );

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()}

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}

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}

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}

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 = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
-
+  const showWeekends = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
-  const showWeekends = issueFilterStore.userDisplayFilters.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}

web/components/issues/issue-layouts/kanban/default.tsx

@@ -147,7 +147,6 @@ 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 && (
@@ -164,6 +163,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   />
                 )}
               </div>
+            </div>
 
             {/* {isDragStarted && isDragDisabled && (
               <div className="invisible group-hover:visible transition-all text-sm absolute top-12 bottom-10 left-0 right-0 bg-custom-background-100/40 text-center">