chore: store setup

web/components/issue-layouts/list/list.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from "react";
 import { IIssue } from "types";
 import { IssueListItem } from "./item";
+import { observer } from "mobx-react-lite";
 
 export interface IIssueListView {
   issues: IIssue[];
   groupId: string;
 }
 
-export const IssueListView: FC<IIssueListView> = (props) => {
+export const IssueListView: FC<IIssueListView> = observer((props) => {
   const { issues = [], groupId } = props;
   return (
     <div>
@@ -16,4 +17,4 @@ export const IssueListView: FC<IIssueListView> = (props) => {
       ))}
     </div>
   );
-};
+});

web/components/issue-layouts/list/root.tsx

@@ -31,7 +31,7 @@ export const IssueListViewRoot = observer(() => {
                     />
                   </Disclosure.Button>
                   <Disclosure.Panel className="px-4 pt-4 pb-2">
-                    <IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId}></IssueListView>
+                    <IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId} />
                   </Disclosure.Panel>
                 </>
               )}

web/components/issue-layouts/properties/priority-select.tsx

@@ -3,22 +3,23 @@ import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { IIssue } from "types";
+import { observer } from "mobx-react-lite";
 
 export interface IIssuePrioritySelect {
   issue: IIssue;
   groupId: string;
 }
 
-export const IssuePrioritySelect: FC<IIssuePrioritySelect> = (props) => {
+export const IssuePrioritySelect: FC<IIssuePrioritySelect> = observer((props) => {
   const { issue, groupId } = props;
 
-  const { issueFilters: issueFilterStore } = useMobxStore();
+  const { issueView: issueViewStore, issueFilters: issueFilterStore } = useMobxStore();
   const priorityList = issueFilterStore.issueRenderFilters.priority;
 
   const selected = priorityList.find((p) => p.key === issue.priority);
 
   const changePriority = (selectedPriority: any) => {
-    console.log("selectedPriority", selectedPriority);
+    issueViewStore.updateIssues(groupId, issue.id, { priority: selectedPriority.key });
   };
 
   return (
@@ -58,4 +59,4 @@ export const IssuePrioritySelect: FC<IIssuePrioritySelect> = (props) => {
       </div>
     </Listbox>
   );
-};
+});

web/store/issue-views/Issues.ts

@@ -94,6 +94,7 @@ class IssueViewStore implements IIssueViewStore {
       getIssuesForModulesAsync: action,
       getIssuesForCyclesAsync: action,
       getIssuesForViewsAsync: action,
+      updateIssues: action,
       // computed
       getIssues: computed,
     });
@@ -142,6 +143,97 @@ class IssueViewStore implements IIssueViewStore {
     return null;
   }
 
+  updateIssues = (group_id: string | null, issue_id: string | null, data: any) => {
+    const currentWorkspaceId: string | null = this.rootStore.issueFilters.workspaceId;
+    const currentProjectId: string | null = this.rootStore.issueFilters.projectId;
+    const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
+    const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
+    const currentViewId: string | null = this.rootStore.issueFilters.viewId;
+    const currentView: TIssueViews | null = this.rootStore.issueFilters.issueView;
+    const currentLayout: TIssueLayouts | null | undefined = this.rootStore.issueFilters.issueLayout;
+
+    if (!currentView || !currentWorkspaceId || !currentLayout || !issue_id) return null;
+
+    if (currentView === "my_issues") {
+      if (group_id) {
+        this.issues = {
+          ...this.issues,
+          [currentWorkspaceId]: {
+            ...this?.issues?.[currentWorkspaceId],
+            my_issues: {
+              ...this?.issues?.[currentWorkspaceId]?.my_issues,
+              [currentLayout]: {
+                ...this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout],
+                [group_id]: this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout]?.[group_id].map(
+                  (item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })
+                ),
+              },
+            },
+          },
+        };
+      } else {
+        this.issues = {
+          ...this.issues,
+          [currentWorkspaceId]: {
+            ...this?.issues?.[currentWorkspaceId],
+            my_issues: {
+              ...this?.issues?.[currentWorkspaceId]?.my_issues,
+              [currentLayout]: this?.issues?.[currentWorkspaceId]?.my_issues?.[currentLayout].map((item: any) =>
+                item.id === issue_id ? { ...item, ...data } : { ...item }
+              ),
+            },
+          },
+        };
+      }
+    }
+
+    if (!currentProjectId) return null;
+    if (currentView) {
+      if (group_id) {
+        this.issues = {
+          ...this.issues,
+          [currentWorkspaceId]: {
+            ...this?.issues?.[currentWorkspaceId],
+            project_issues: {
+              ...this?.issues?.[currentWorkspaceId]?.project_issues,
+              [currentProjectId]: {
+                ...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId],
+                [currentView]: {
+                  ...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues,
+                  [currentLayout]: {
+                    ...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[currentLayout],
+                    [group_id]: this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[
+                      currentLayout
+                    ]?.[group_id].map((item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })),
+                  },
+                },
+              },
+            },
+          },
+        };
+      } else {
+        this.issues = {
+          ...this.issues,
+          [currentWorkspaceId]: {
+            ...this?.issues?.[currentWorkspaceId],
+            project_issues: {
+              ...this?.issues?.[currentWorkspaceId]?.project_issues,
+              [currentProjectId]: {
+                ...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId],
+                [currentView]: {
+                  ...this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues,
+                  [currentLayout]: this?.issues?.[currentWorkspaceId]?.project_issues?.[currentProjectId]?.issues?.[
+                    currentLayout
+                  ].map((item: any) => (item.id === issue_id ? { ...item, ...data } : { ...item })),
+                },
+              },
+            },
+          },
+        };
+      }
+    }
+  };
+
   // fetching my issues
   getMyIssuesAsync = async (workspaceId: string, fetchFilterToggle: boolean = true) => {
     try {

web/store/issue-views/issue_data.ts

@@ -1,15 +1,8 @@
 import { renderDateFormat } from "helpers/date-time.helper";
 
 export type TStateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
-export const issueStateGroupKeys: TStateGroup[] = [
-  "backlog",
-  "unstarted",
-  "started",
-  "completed",
-  "cancelled",
-];
 
-export const filtersPriority: { key: string; title: string }[] = [
+export const priorities: { key: string; title: string }[] = [
   { key: "urgent", title: "Urgent" },
   { key: "high", title: "High" },
   { key: "medium", title: "Medium" },
@@ -17,7 +10,7 @@ export const filtersPriority: { key: string; title: string }[] = [
   { key: "none", title: "None" },
 ];
 
-export const filterStateGroup: { key: TStateGroup; title: string }[] = [
+export const stateGroups: { key: TStateGroup; title: string }[] = [
   { key: "backlog", title: "Backlog" },
   { key: "unstarted", title: "Unstarted" },
   { key: "started", title: "Started" },
@@ -25,7 +18,7 @@ export const filterStateGroup: { key: TStateGroup; title: string }[] = [
   { key: "cancelled", title: "Cancelled" },
 ];
 
-export const filtersStartDate: { key: string; title: string }[] = [
+export const startDateOptions: { key: string; title: string }[] = [
   { key: "last_week", title: "Last Week" },
   { key: "2_weeks_from_now", title: "2 weeks from now" },
   { key: "1_month_from_now", title: "1 month from now" },
@@ -33,7 +26,7 @@ export const filtersStartDate: { key: string; title: string }[] = [
   { key: "custom", title: "Custom" },
 ];
 
-export const filtersDueDate: { key: string; title: string }[] = [
+export const dueDateOptions: { key: string; title: string }[] = [
   { key: "last_week", title: "Last Week" },
   { key: "2_weeks_from_now", title: "2 weeks from now" },
   { key: "1_month_from_now", title: "1 month from now" },
@@ -41,7 +34,7 @@ export const filtersDueDate: { key: string; title: string }[] = [
   { key: "custom", title: "Custom" },
 ];
 
-export const displayPropertyGroupBy: { key: string; title: string }[] = [
+export const groupByOptions: { key: string; title: string }[] = [
   { key: "state", title: "States" },
   { key: "state_detail.group", title: "State Groups" },
   { key: "priority", title: "Priority" },
@@ -51,7 +44,7 @@ export const displayPropertyGroupBy: { key: string; title: string }[] = [
   { key: "created_by", title: "Created By" },
 ];
 
-export const displayPropertyOrderBy: { key: string; title: string }[] = [
+export const orderByOptions: { key: string; title: string }[] = [
   { key: "sort_order", title: "Manual" },
   { key: "created_at", title: "Last Created" },
   { key: "updated_at", title: "Last Updated" },
@@ -59,7 +52,7 @@ export const displayPropertyOrderBy: { key: string; title: string }[] = [
   { key: "priority", title: "Priority" },
 ];
 
-export const displayPropertyIssueType: { key: string; title: string }[] = [
+export const issueTypes: { key: string; title: string }[] = [
   { key: "all", title: "All" },
   { key: "active", title: "Active Issues" },
   { key: "backlog", title: "Backlog Issues" },
@@ -112,30 +105,14 @@ export const issueFilterVisibilityData: any = {
       },
     },
   },
-  others: {
+  issues: {
     layout: ["list", "kanban", "calendar", "spreadsheet", "gantt_chart"],
     filters: {
       list: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
       kanban: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
       calendar: ["priority", "state", "assignees", "created_by", "labels"],
-      spreadsheet: [
+      spreadsheet: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-        "priority",
+      gantt_chart: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "due_date",
-      ],
-      gantt_chart: [
-        "priority",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "due_date",
-      ],
     },
     display_properties: {
       list: true,
@@ -176,15 +153,11 @@ export const issueFilterVisibilityData: any = {
   },
 };
 
-export const handleIssueParamsDateFormat = (
+export const handleIssueParamsDateFormat = (key: string, start_date: any | null, target_date: any | null) => {
-  key: string,
-  start_date: any | null,
-  target_date: any | null
-) => {
   if (key === "last_week")
-    return `${renderDateFormat(
+    return `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after,${renderDateFormat(
-      new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
+      new Date()
-    )};after,${renderDateFormat(new Date())};before`;
+    )};before`;
 
   if (key === "2_weeks_from_now")
     return `${renderDateFormat(new Date())};after,

web/store/issue-views/issue_filters.ts

@@ -196,7 +196,6 @@ class IssueFilterStore implements IIssueFilterStore {
   loader: boolean = false;
   error: any | null = null;
 
-  myUserId: string | null = null;
   workspaceId: string | null = null;
   projectId: string | null = null;
   moduleId: string | null = null;
@@ -305,25 +304,30 @@ class IssueFilterStore implements IIssueFilterStore {
   // computed
   get issueLayout() {
     if (!this.workspaceId) return null;
-    if (!this.projectId) return this.issueFilters?.[this.workspaceId]?.my_issue_properties?.display_filters?.layout;
+    if (!this.projectId)
+      return this.issueFilters?.[this.workspaceId]?.my_issue_properties?.display_filters?.layout || null;
     if (this.projectId)
-      return this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
+      return (
-        ?.layout;
+        this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
+          ?.layout || null
+      );
   }
 
   get workspaceProjects() {
     if (!this.workspaceId) return null;
-    return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.projects;
+    return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.projects || null;
   }
   get workspaceLabels() {
     if (!this.workspaceId) return null;
-    return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.labels;
+    return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.labels || null;
   }
 
   get projectStates() {
     if (!this.workspaceId || !this.projectId) return null;
-    return this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.project_properties?.[this.projectId]
+    return (
-      ?.states;
+      this.issueRenderFilters?.workspace_properties?.[this.workspaceId]?.project_properties?.[this.projectId]?.states ||
+      null
+    );
   }
 
   getProjectStateById = (stateId: string) => {