dev: calendar view layout revamp

web/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -20,18 +20,15 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           {
             id: "issues_closed",
             color: "rgb(var(--color-primary-100))",
-            data: MONTHS_LIST.map((month) => ({
-              x: month.label.substring(0, 3),
+            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+              x: month.shortTitle,
               y:
-                defaultAnalytics.issue_completed_month_wise.find(
-                  (data) => data.month === month.value
-                )?.count || 0,
+                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
+                0,
             })),
           },
         ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map(
-          (data) => data.count
-        )}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
         height="300px"
         colors={(datum) => datum.color}
         curve="monotoneX"

web/components/core/views/all-views.tsx

@@ -14,7 +14,7 @@ import useUser from "hooks/use-user";
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
 import { AllLists, AllBoards, CalendarView, SpreadsheetView, GanttChartView } from "components/core";
-import { KanBanLayout } from "components/issues/issue-layouts";
+import { CalendarLayout, KanBanLayout } from "components/issues";
 // ui
 import { EmptyState, Spinner } from "components/ui";
 // icons
@@ -31,6 +31,7 @@ import { STATES_LIST } from "constants/fetch-keys";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+import { observer } from "mobx-react-lite";
 
 type Props = {
   addIssueToDate: (date: string) => void;
@@ -58,22 +59,7 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const AllViews: React.FC<Props> = ({
-  addIssueToDate,
-  addIssueToGroup,
-  disableUserActions,
-  dragDisabled = false,
-  emptyState,
-  handleIssueAction,
-  handleDraftIssueAction,
-  handleOnDragEnd,
-  openIssuesListModal,
-  removeIssue,
-  disableAddIssueOption = false,
-  trashBox,
-  setTrashBox,
-  viewProps,
-}) => {
+export const AllViews: React.FC<Props> = observer(({ trashBox, setTrashBox }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
     workspaceSlug: string;
@@ -84,10 +70,7 @@ export const AllViews: React.FC<Props> = ({
 
   const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
 
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const { groupedIssues, isEmpty, displayFilters } = viewProps;
+  const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
@@ -106,8 +89,6 @@ export const AllViews: React.FC<Props> = ({
     [trashBox, setTrashBox]
   );
 
-  const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
-
   useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
     if (workspaceSlug && projectId) {
       await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
@@ -120,121 +101,11 @@ export const AllViews: React.FC<Props> = ({
     }
   });
 
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
   return (
-    // <DragDropContext onDragEnd={handleOnDragEnd}>
-    //   <StrictModeDroppable droppableId="trashBox">
-    //     {(provided, snapshot) => (
-    //       <div
-    //         className={`${
-    //           trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-    //         } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
-    //           snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
-    //         } transition duration-300`}
-    //         ref={provided.innerRef}
-    //         {...provided.droppableProps}
-    //       >
-    //         <TrashIcon className="h-4 w-4" />
-    //         Drop here to delete the issue.
-    //       </div>
-    //     )}
-    //   </StrictModeDroppable>
-    //   {groupedIssues ? (
-    //     !isEmpty ||
-    //     displayFilters?.layout === "kanban" ||
-    //     displayFilters?.layout === "calendar" ||
-    //     displayFilters?.layout === "gantt_chart" ? (
-    //       <>
-    //         {displayFilters?.layout === "list" ? (
-    //           <AllLists
-    //             states={states}
-    //             addIssueToGroup={addIssueToGroup}
-    //             handleIssueAction={handleIssueAction}
-    //             handleDraftIssueAction={handleDraftIssueAction}
-    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-    //             removeIssue={removeIssue}
-    //             myIssueProjectId={myIssueProjectId}
-    //             handleMyIssueOpen={handleMyIssueOpen}
-    //             disableUserActions={disableUserActions}
-    //             disableAddIssueOption={disableAddIssueOption}
-    //             user={user}
-    //             userAuth={memberRole}
-    //             viewProps={viewProps}
-    //           />
-    //         ) : displayFilters?.layout === "kanban" ? (
-    //           <AllBoards
-    //             addIssueToGroup={addIssueToGroup}
-    //             disableUserActions={disableUserActions}
-    //             disableAddIssueOption={disableAddIssueOption}
-    //             dragDisabled={dragDisabled}
-    //             handleIssueAction={handleIssueAction}
-    //             handleDraftIssueAction={handleDraftIssueAction}
-    //             handleTrashBox={handleTrashBox}
-    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-    //             myIssueProjectId={myIssueProjectId}
-    //             handleMyIssueOpen={handleMyIssueOpen}
-    //             removeIssue={removeIssue}
-    //             states={states}
-    //             user={user}
-    //             userAuth={memberRole}
-    //             viewProps={viewProps}
-    //           />
-    //         ) : displayFilters?.layout === "calendar" ? (
-    //           <CalendarView
-    //             handleIssueAction={handleIssueAction}
-    //             addIssueToDate={addIssueToDate}
-    //             disableUserActions={disableUserActions}
-    //             user={user}
-    //             userAuth={memberRole}
-    //           />
-    //         ) : displayFilters?.layout === "spreadsheet" ? (
-    //           <SpreadsheetView
-    //             handleIssueAction={handleIssueAction}
-    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-    //             disableUserActions={disableUserActions}
-    //             user={user}
-    //             userAuth={memberRole}
-    //           />
-    //         ) : (
-    //           displayFilters?.layout === "gantt_chart" && <GanttChartView disableUserActions={disableUserActions} />
-    //         )}
-    //       </>
-    //     ) : router.pathname.includes("archived-issues") ? (
-    //       <EmptyState
-    //         title="Archived Issues will be shown here"
-    //         description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
-    //         image={emptyIssueArchive}
-    //         primaryButton={{
-    //           text: "Go to Automation Settings",
-    //           onClick: () => {
-    //             router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
-    //           },
-    //         }}
-    //       />
-    //     ) : (
-    //       <EmptyState
-    //         title={emptyState.title}
-    //         description={emptyState.description}
-    //         image={emptyIssue}
-    //         primaryButton={
-    //           emptyState.primaryButton
-    //             ? {
-    //                 icon: emptyState.primaryButton.icon,
-    //                 text: emptyState.primaryButton.text,
-    //                 onClick: emptyState.primaryButton.onClick,
-    //               }
-    //             : undefined
-    //         }
-    //         secondaryButton={emptyState.secondaryButton}
-    //       />
-    //     )
-    //   ) : (
-    //     <div className="flex h-full w-full items-center justify-center">
-    //       <Spinner />
-    //     </div>
-    //   )}
-    // </DragDropContext>
     <div className="relative w-full h-full overflow-auto">
-      <KanBanLayout />
+      {activeLayout === "kanban" ? <KanBanLayout /> : activeLayout === "calendar" ? <CalendarLayout /> : null}
     </div>
   );
-};
+});

web/components/issue-layouts/filters/filters-selection.tsx

@@ -90,7 +90,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
 
   return (
     <div className="w-full h-full flex flex-col overflow-hidden">
-      <div className="p-2.5 bg-custom-background-100 sticky top-0 z-[1]">
+      <div className="p-2.5 bg-custom-background-100">
         <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input

web/components/issue-layouts/layout-selection.tsx

@@ -19,9 +19,8 @@ export const LayoutSelection: React.FC<Props> = (props) => {
   return (
     <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
-        <Tooltip tooltipContent={layout.title}>
+        <Tooltip key={layout.key} tooltipContent={layout.title}>
           <button
-            key={layout.key}
             type="button"
             className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
               selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""

web/components/issues/index.ts

@@ -8,6 +8,7 @@ export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./form";
 export * from "./gantt-chart";
+export * from "./issue-layouts";
 export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";

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

@@ -0,0 +1,54 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
+// ui
+import { Spinner } from "components/ui";
+// types
+import { ICalendarWeek } from "./types";
+import { IIssueGroupedStructure } from "store/issue";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+};
+
+export const CalendarChart: React.FC<Props> = observer((props) => {
+  const { issues } = props;
+
+  const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const calendarPayload = calendarStore.calendarPayload;
+
+  const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
+
+  if (!calendarPayload)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <div className="h-full w-full flex flex-col overflow-hidden">
+        <CalendarHeader />
+        <CalendarWeekHeader />
+        <div className="h-full w-full overflow-y-auto">
+          {calendarLayout === "month" ? (
+            <div className="h-full w-full grid grid-cols-1">
+              {allWeeksOfActiveMonth &&
+                Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                  <CalendarWeekDays key={weekIndex} week={week} issues={issues} />
+                ))}
+            </div>
+          ) : (
+            <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+});