makeplane · sriramveeraghanta · Oct 9, 2023 · Oct 5, 2023
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
@@ -36,18 +36,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId || !moduleId) return;
 
-      const newValues = moduleFilterStore.userModuleFilters?.[key] ?? [];
+      const newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
 
       if (Array.isArray(value)) {
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
         });
       } else {
-        if (moduleFilterStore.userModuleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        if (moduleFilterStore.moduleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
 
-      moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
         [key]: newValues,
       });
     },
@@ -76,7 +76,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
       />
       <FiltersDropdown title="Filters">
         <FilterSelection
-          filters={moduleFilterStore.userModuleFilters}
+          filters={moduleFilterStore.moduleFilters}
           handleFiltersUpdate={handleFiltersUpdate}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
           projectId={projectId?.toString() ?? ""}

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module-root.tsx
@@ -14,7 +14,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
 
   const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
 
-  const userFilters = moduleFilterStore.userModuleFilters;
+  const userFilters = moduleFilterStore.moduleFilters;
 
   // filters whose value not null or empty array
   const appliedFilters: IIssueFilterOptions = {};
@@ -31,17 +31,17 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
 
     // remove all values of the key if value is null
     if (!value) {
-      moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
         [key]: null,
       });
       return;
     }
 
     // remove the passed value from the key
-    let newValues = moduleFilterStore.userModuleFilters?.[key] ?? [];
+    let newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
 
-    moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
       [key]: newValues,
     });
   };
@@ -54,7 +54,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
       newFilters[key as keyof IIssueFilterOptions] = null;
     });
 
-    moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), {
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), {
       ...newFilters,
     });
   };

diff --git a/web/components/issues/issue-layouts/module-all-layouts.tsx b/web/components/issues/issue-layouts/module-all-layouts.tsx
@@ -18,18 +18,23 @@ export const ModuleAllLayouts: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { module: moduleStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
-
-  useSWR(workspaceSlug && projectId ? `MODULE_ISSUES` : null, async () => {
+  const {
+    module: moduleStore,
+    moduleFilter: moduleFilterStore,
+    project: projectStore,
+    issueFilter: issueFilterStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && moduleId ? `MODULE_ISSUES_${moduleId.toString()}` : null, async () => {
     if (workspaceSlug && projectId && moduleId) {
       await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
 
       await projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString());
       await projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString());
       await projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
 
-      await moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
       await moduleStore.fetchModuleIssues(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+      await moduleFilterStore.fetchModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
     }
   });
 

diff --git a/web/constants/issue.ts b/web/constants/issue.ts
@@ -225,7 +225,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "project", "priority", "labels", null],
-        sub_group_by: ["state_detail.group", "project", "priority", "labels", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },
@@ -255,7 +254,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by", null],
-        sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },

diff --git a/web/store/module_filters.ts b/web/store/module_filters.ts
@@ -6,16 +6,17 @@ import { ModuleService } from "services/modules.service";
 import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 // types
 import { RootStore } from "./root";
-import { IIssueFilterOptions, TIssueParams } from "types";
+import { IIssueFilterOptions, IModule, TIssueParams } from "types";
 
 export interface IModuleFilterStore {
   loader: boolean;
   error: any | null;
-  userModuleFilters: IIssueFilterOptions;
+  moduleFilters: IIssueFilterOptions;
   defaultFilters: IIssueFilterOptions;
 
   // action
-  updateUserModuleFilters: (
+  fetchModuleFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+  updateModuleFilters: (
     workspaceSlug: string,
     projectId: string,
     moduleId: string,
@@ -31,7 +32,7 @@ class ModuleFilterStore implements IModuleFilterStore {
   error: any | null = null;
 
   // observables
-  userModuleFilters: IIssueFilterOptions = {};
+  moduleFilters: IIssueFilterOptions = {};
   defaultFilters: IIssueFilterOptions = {};
 
   // root store
@@ -48,10 +49,11 @@ class ModuleFilterStore implements IModuleFilterStore {
 
       // observables
       defaultFilters: observable.ref,
-      userModuleFilters: observable.ref,
+      moduleFilters: observable.ref,
 
       // actions
-      updateUserModuleFilters: action,
+      fetchModuleFilters: action,
+      updateModuleFilters: action,
 
       // computed
       appliedFilters: computed,
@@ -77,17 +79,17 @@ class ModuleFilterStore implements IModuleFilterStore {
   get appliedFilters(): TIssueParams[] | null {
     const userDisplayFilters = this.rootStore.issueFilter.userDisplayFilters;
 
-    if (!this.userModuleFilters || !userDisplayFilters) return null;
+    if (!this.moduleFilters || !userDisplayFilters) return null;
 
     let filteredRouteParams: any = {
-      priority: this.userModuleFilters?.priority || undefined,
-      state_group: this.userModuleFilters?.state_group || undefined,
-      state: this.userModuleFilters?.state || undefined,
-      assignees: this.userModuleFilters?.assignees || undefined,
-      created_by: this.userModuleFilters?.created_by || undefined,
-      labels: this.userModuleFilters?.labels || undefined,
-      start_date: this.userModuleFilters?.start_date || undefined,
-      target_date: this.userModuleFilters?.target_date || undefined,
+      priority: this.moduleFilters?.priority || undefined,
+      state_group: this.moduleFilters?.state_group || undefined,
+      state: this.moduleFilters?.state || undefined,
+      assignees: this.moduleFilters?.assignees || undefined,
+      created_by: this.moduleFilters?.created_by || undefined,
+      labels: this.moduleFilters?.labels || undefined,
+      start_date: this.moduleFilters?.start_date || undefined,
+      target_date: this.moduleFilters?.target_date || undefined,
       group_by: userDisplayFilters?.group_by || "state",
       order_by: userDisplayFilters?.order_by || "-created_at",
       sub_group_by: userDisplayFilters?.sub_group_by || undefined,
@@ -106,20 +108,48 @@ class ModuleFilterStore implements IModuleFilterStore {
     return filteredRouteParams;
   }
 
-  updateUserModuleFilters = async (
+  fetchModuleFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.moduleFilters = response.view_props?.filters ?? {};
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to fetch module details in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateModuleFilters = async (
     workspaceSlug: string,
     projectId: string,
     moduleId: string,
     filterToUpdate: Partial<IIssueFilterOptions>
   ) => {
     const newFilters = {
-      ...this.userModuleFilters,
+      ...this.moduleFilters,
       ...filterToUpdate,
     };
 
     try {
       runInAction(() => {
-        this.userModuleFilters = newFilters;
+        this.moduleFilters = newFilters;
       });
 
       this.moduleService.patchModule(
@@ -134,7 +164,7 @@ class ModuleFilterStore implements IModuleFilterStore {
         this.rootStore.user.currentUser
       );
     } catch (error) {
-      this.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
+      this.fetchModuleFilters(workspaceSlug, projectId, moduleId);
 
       runInAction(() => {
         this.error = error;

diff --git a/web/store/modules.ts b/web/store/modules.ts
@@ -178,7 +178,6 @@ class ModuleStore implements IModuleStore {
           ...this.moduleDetails,
           [moduleId]: response,
         };
-        this.rootStore.moduleFilter.userModuleFilters = response.view_props?.filters ?? {};
         this.loader = false;
         this.error = null;
       });
@@ -343,7 +342,6 @@ class ModuleStore implements IModuleStore {
       this.rootStore.project.setProjectId(projectId);
 
       const params = this.rootStore?.issueFilter?.appliedFilters;
-      console.log("params", params);
       const issueResponse = await this.moduleService.getModuleIssuesWithParams(
         workspaceSlug,
         projectId,