chore: implemented CRUD operations in all the layouts (#2505)

* chore: basic crud operations added to the list view

* refactor: cycle details page

* refactor: module details page

* chore: added quick actions to kanban issue block

* chore: implement quick actions in calendar layout

* fix: custom menu component

* chore: separate quick action dropdowns implemented

* style: loader for calendar

* fix: build errors

web/components/issues/issue-layouts/calendar/roots/module-root.tsx

@@ -1,15 +1,24 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CalendarChart } from "components/issues";
+import { CalendarChart, ModuleIssueQuickActions } from "components/issues";
 // types
 import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
 
 export const ModuleCalendarLayout: React.FC = observer(() => {
-  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+  const {
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
 
   // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
@@ -26,12 +35,45 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
 
   const issues = moduleIssueStore.getIssues;
 
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
   return (
     <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
       <DragDropContext onDragEnd={onDragEnd}>
         <CalendarChart
           issues={issues as IIssueGroupedStructure | null}
           layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          quickActions={(issue) => (
+            <ModuleIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+              handleRemoveFromModule={async () => handleIssues(issue.target_date ?? "", issue, "remove")}
+            />
+          )}
         />
       </DragDropContext>
     </div>