Add Calendar layout to Global Issues page

web/components/headers/global-issues.tsx

@@ -2,12 +2,12 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
 // constants
 import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
@@ -22,7 +22,7 @@ export const GlobalIssuesHeader: React.FC = observer(() => {
   const [createViewModal, setCreateViewModal] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
+  const { workspaceSlug, globalViewId, projectId } = router.query;
   // store hooks
   const {
     issuesFilter: { filters, updateFilters },
@@ -36,6 +36,22 @@ export const GlobalIssuesHeader: React.FC = observer(() => {
   } = useMember();
 
   const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+    // (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        globalViewId.toString(),
+      );
+    },
+    [workspaceSlug, updateFilters, globalViewId]
+  );
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
@@ -112,6 +128,11 @@ export const GlobalIssuesHeader: React.FC = observer(() => {
         </div>
         <div className="flex items-center gap-2">
           <>
+            <LayoutSelection
+              layouts={["calendar", "spreadsheet"]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
             <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isFiltersApplied}>
               <FilterSelection
                 layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -12,7 +12,7 @@
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // ui
 // types
-import { IQuickActionProps } from "../list/list-view-types";
+import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
 import { handleDragDrop } from "./utils";
 
 type CalendarStoreType =
@@ -73,36 +73,40 @@
     });
   };
 
+  const renderQuickActions: TRenderQuickActions = ({ issue, parentRef, customActionButton, placement }) => (
+    <QuickActions
+      parentRef={parentRef}
+      customActionButton={customActionButton}
+      issue={issue}
+      handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+      handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+      handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+      handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+      handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+      readOnly={!isEditingAllowed || isCompletedCycle}
+      placements={placement}
+    />
+  );
+
   return (
     <>
       <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
-        <CalendarChart
-          issuesFilterStore={issuesFilter}
-          issues={issueMap}
-          groupedIssueIds={groupedIssueIds}
-          layout={displayFilters?.calendar?.layout}
-          showWeekends={displayFilters?.calendar?.show_weekends ?? false}
-          quickActions={({ issue, parentRef, customActionButton, placement }) => (
-            <QuickActions
-              parentRef={parentRef}
-              customActionButton={customActionButton}
-              issue={issue}
-              handleDelete={async () => removeIssue(issue.project_id, issue.id)}
-              handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
-              handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
-              handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
-              handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
-              readOnly={!isEditingAllowed || isCompletedCycle}
-              placements={placement}
-            />
-          )}
-          addIssuesToView={addIssuesToView}
-          quickAddCallback={issues.quickAddIssue}
-          viewId={viewId}
-          readOnly={!isEditingAllowed || isCompletedCycle}
-          updateFilters={updateFilters}
-          handleDragAndDrop={handleDragAndDrop}
-        />
+        <DragDropContext onDragEnd={onDragEnd}>
+          <CalendarChart
+            issuesFilterStore={issuesFilter}
+            issues={issueMap}
+            groupedIssueIds={groupedIssueIds}
+            layout={displayFilters?.calendar?.layout}
+            showWeekends={displayFilters?.calendar?.show_weekends ?? false}
+            quickActions={renderQuickActions}
+            addIssuesToView={addIssuesToView}
+            quickAddCallback={issues.quickAddIssue}
+            viewId={viewId}
+            readOnly={!isEditingAllowed || isCompletedCycle}
+            updateFilters={updateFilters}
+            handleDragAndDrop={handleDragAndDrop}
+          />
+        </DragDropContext>
       </div>
     </>
   );

web/components/issues/issue-layouts/calendar/calendar-view.tsx

@@ -0,0 +1,151 @@
+import React, { useRef } from "react";
+import { DraggableLocation, DragDropContext, DropResult } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import {
+  TIssue,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueMap,
+  TGroupedIssues,
+  IIssueFilterOptions,
+  TIssueMap,
+  TIssueKanbanFilters,
+} from "@plane/types";
+// components
+import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { CalendarChart } from "@/components/issues";
+import { useProject } from "@/hooks/store";
+import { TRenderQuickActions } from "../list/list-view-types";
+import { handleDragDrop } from "./utils";
+import { IWorkspaceIssuesFilter } from "@/store/issue/workspace";
+// types
+//hooks
+
+type Props = {
+  // displayProperties: IIssueDisplayProperties;
+  // displayFilters: IIssueDisplayFilterOptions;
+  // handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  // issueIds: string[] | undefined;
+  // quickActions: TRenderQuickActions;
+  // updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  // openIssuesListModal?: (() => void) | null;
+  // quickAddCallback?: (
+  //   workspaceSlug: string,
+  //   projectId: string,
+  //   data: TIssue,
+  //   viewId?: string
+  // ) => Promise<TIssue | undefined>;
+  // viewId?: string;
+  // canEditProperties: (projectId: string | undefined) => boolean;
+  // enableQuickCreateIssue?: boolean;
+  // disableIssueCreation?: boolean;
+  // isWorkspaceLevel?: boolean;
+
+  // issues
+  issuesFilterStore: IWorkspaceIssuesFilter,
+  issues: TIssueMap,
+  // issueIds: string[],
+  groupedIssueIds: TGroupedIssues,
+  // Layout
+  // layout: "month" | "week" | undefined;
+  // showWeekends: boolean;
+  // handlers
+  quickActions: TRenderQuickActions;
+  quickAddIssues?: (
+  // quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  // handleDisplayFilterUpdate?: (
+  //   projectId: string,
+  //   filterType: EIssueFilterType,
+  //   filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  // ) => Promise<void>;
+  // updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  viewId?: string;
+  readOnly?: boolean;
+  updateFilters?: (
+    projectId: string,
+    filterType: EIssueFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  ) => Promise<void>
+  isWorkspaceLevel?: boolean;
+  // handleDragDrop?: (
+  //   source: DraggableLocation,
+  //   destination: DraggableLocation,
+  //   workspaceSlug: string | undefined,
+  //   projectId: string | undefined,
+  //   issueMap: IIssueMap,
+  //   issueWithIds: TGroupedIssues,
+  //   updateIssue?: ((projectId: string, issueId: string, data: TIssue) => Promise<void>) | undefined
+  // ) => Promise<void>
+};
+
+export const CalendarView: React.FC<Props> = observer((props: Props) => {
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    // layout,
+    // showWeekends,
+    quickActions,
+    quickAddIssues,
+    // updateIssue,
+    addIssuesToView,
+    viewId,
+    readOnly,
+    updateFilters,
+    isWorkspaceLevel = true
+  } = props;
+  // refs
+  const containerRef = useRef<HTMLTableElement | null>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+
+  const { currentProjectDetails } = useProject();
+
+  const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
+
+  const displayFilters = issuesFilterStore.issueFilters.displayFilters;
+  console.log("CalendarView.displayFilters", displayFilters)
+
+  const onDragEnd = async (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    if (handleDragDrop) {
+      await handleDragDrop
+    }
+  };
+
+  return (
+    <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
+      <div ref={containerRef} className="vertical-scrollbar horizontal-scrollbar scrollbar-lg h-full w-full bg-custom-background-100 pt-4">
+        <DragDropContext onDragEnd={onDragEnd}>
+          <CalendarChart
+            issuesFilterStore={issuesFilterStore}
+            issues={issues}
+            groupedIssueIds={groupedIssueIds}
+            layout={displayFilters?.calendar?.layout}
+            showWeekends={displayFilters?.calendar?.show_weekends ?? false}
+            quickActions={quickActions}
+            quickAddIssue={quickAddIssues}
+            addIssuesToView={addIssuesToView}
+            viewId={viewId}
+            // readOnly={!isEditingAllowed || isCompletedCycle}
+            readOnly={readOnly}
+            updateFilters={updateFilters}
+          />
+        </DragDropContext>
+      </div>
+    </div>
+  );
+});

web/components/issues/issue-layouts/calendar/index.ts

@@ -1,5 +1,6 @@
 export * from "./dropdowns";
 export * from "./roots";
+export * from "./calendar-view";
 export * from "./calendar";
 export * from "./types.d";
 export * from "./day-tile";