chore: updating filters, display_filter and display properties

web/components/issue-layouts/display-filters/display-properties.tsx

@@ -13,6 +13,10 @@ export const FilterDisplayProperties = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleDisplayProperties = (key: string, value: boolean) => {
+    issueFilterStore.handleUserFilter("display_properties", key, !value);
+  };
+
   return (
     <div>
       <FilterHeader
@@ -32,6 +36,12 @@ export const FilterDisplayProperties = observer(() => {
                     ? `bg-custom-primary-200 border-custom-primary-200 text-white`
                     : `hover:bg-custom-border-100 border-custom-border-100`
                 }`}
+                onClick={() =>
+                  handleDisplayProperties(
+                    _displayProperties?.key,
+                    issueFilterStore?.userFilters?.display_properties?.[_displayProperties?.key]
+                  )
+                }
               >
                 {_displayProperties?.title}
               </div>

web/components/issue-layouts/display-filters/extra-options.tsx

@@ -14,6 +14,10 @@ export const FilterExtraOptions = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleExtraOptions = (key: string, value: boolean) => {
+    issueFilterStore.handleUserFilter("display_filters", key, !value);
+  };
+
   return (
     <div>
       <FilterHeader
@@ -33,6 +37,12 @@ export const FilterExtraOptions = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() =>
+                  handleExtraOptions(
+                    _extraProperties?.key,
+                    issueFilterStore?.userFilters?.display_filters?.[_extraProperties?.key]
+                  )
+                }
                 title={_extraProperties.title}
               />
             ))}

web/components/issue-layouts/display-filters/group-by.tsx

@@ -14,6 +14,10 @@ export const FilterGroupBy = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleGroupBy = (key: string, value: string) => {
+    issueFilterStore.handleUserFilter("display_filters", key, value);
+  };
+
   return (
     <div>
       <FilterHeader
@@ -33,6 +37,7 @@ export const FilterGroupBy = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleGroupBy("group_by", _groupBy?.key)}
                 title={_groupBy.title}
                 multiple={false}
               />

web/components/issue-layouts/display-filters/issue-type.tsx

@@ -14,6 +14,10 @@ export const FilterIssueType = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleIssueType = (key: string, value: string) => {
+    issueFilterStore.handleUserFilter("display_filters", key, value);
+  };
+
   return (
     <div>
       <FilterHeader
@@ -33,6 +37,7 @@ export const FilterIssueType = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleIssueType("type", _issueType?.key)}
                 title={_issueType.title}
                 multiple={false}
               />

web/components/issue-layouts/display-filters/order-by.tsx

@@ -14,6 +14,10 @@ export const FilterOrderBy = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleOrderBy = (key: string, value: string) => {
+    issueFilterStore.handleUserFilter("display_filters", key, value);
+  };
+
   return (
     <div>
       <FilterHeader
@@ -33,6 +37,7 @@ export const FilterOrderBy = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleOrderBy("order_by", _orderBy?.key)}
                 title={_orderBy.title}
                 multiple={false}
               />

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

@@ -34,10 +34,20 @@ export const FilterAssignees = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"Assignees"}
+        title={`Assignees (${issueFilterStore?.projectMembers?.length || 0})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -54,6 +64,7 @@ export const FilterAssignees = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleFilter("assignees", _member?.member?.id)}
                 icon={
                   <MemberIcons
                     display_name={_member?.member.display_name}

web/components/issue-layouts/filters/created-by.tsx

@@ -17,10 +17,20 @@ export const FilterCreatedBy = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"Created By"}
+        title={`Created By (${issueFilterStore?.projectMembers?.length || 0})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -37,6 +47,7 @@ export const FilterCreatedBy = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleFilter("created_by", _member?.member?.id)}
                 icon={
                   <MemberIcons
                     display_name={_member?.member.display_name}

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

@@ -22,10 +22,20 @@ export const FilterLabels = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"labels"}
+        title={`Labels (${issueFilterStore?.projectLabels?.length || 0})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -42,6 +52,7 @@ export const FilterLabels = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleFilter("labels", _label?.id)}
                 icon={<LabelIcons color={_label.color} />}
                 title={_label.name}
               />

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

@@ -56,10 +56,20 @@ export const FilterPriority = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"Priority"}
+        title={`Priority (${issueFilterStore?.issueRenderFilters?.priority.length || 0})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -76,14 +86,15 @@ export const FilterPriority = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleFilter("priority", _priority?.key)}
                 icon={<PriorityIcons priority={_priority.key} />}
                 title={_priority.title}
               />
             ))}
           <div className="pl-[32px] flex items-center gap-2 py-[6px] text-xs text-custom-primary-100">
-            <div>View more</div>
             <div>View less</div>
-            <div>View all</div>
+            <div>View more</div>
+            {/* TODO: <div>View all</div> */}
           </div>
         </div>
       )}

web/components/issue-layouts/filters/start-date.tsx

@@ -16,10 +16,15 @@ export const FilterStartDate = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value = [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"Start Date"}
+        title={`Start Date (${issueFilterStore?.issueRenderFilters?.start_date?.length})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -30,7 +35,13 @@ export const FilterStartDate = observer(() => {
             issueFilterStore?.issueRenderFilters?.start_date.map((_startDate) => (
               <FilterOption
                 key={_startDate?.key}
-                isChecked={false}
+                isChecked={
+                  issueFilterStore?.userFilters?.filters?.start_date != null &&
+                  issueFilterStore?.userFilters?.filters?.start_date.includes(_startDate?.key)
+                    ? true
+                    : false
+                }
+                onClick={() => handleFilter("start_date", _startDate?.key)}
                 title={_startDate.title}
                 multiple={false}
               />

web/components/issue-layouts/filters/state-group.tsx

@@ -89,10 +89,20 @@ export const FilterStateGroup = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"State Group"}
+        title={`State Group (${issueFilterStore?.issueRenderFilters?.state_group?.length})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -109,6 +119,7 @@ export const FilterStateGroup = observer(() => {
                     ? true
                     : false
                 }
+                onClick={() => handleFilter("state_group", _stateGroup?.key)}
                 icon={<StateGroupIcons stateGroup={_stateGroup.key} />}
                 title={_stateGroup.title}
               />

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

@@ -19,10 +19,26 @@ export const FilterState = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value =
+      issueFilterStore?.userFilters?.filters?.[key] != null
+        ? issueFilterStore?.userFilters?.filters?.[key].includes(value)
+          ? issueFilterStore?.userFilters?.filters?.[key].filter((p: string) => p != value)
+          : [...issueFilterStore?.userFilters?.filters?.[key], value]
+        : [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
+  const countAllState = issueStateGroupKeys
+    .map((_stateGroup) => issueFilterStore?.projectStates?.[_stateGroup].length || 0)
+    .reduce((sum: number, currentValue: number) => sum + currentValue, 0);
+
+  console.log("countAllState", countAllState);
+
   return (
     <div>
       <FilterHeader
-        title={"State"}
+        title={`State (${countAllState})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -42,6 +58,7 @@ export const FilterState = observer(() => {
                       ? true
                       : false
                   }
+                  onClick={() => handleFilter("state", _state?.id)}
                   icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
                   title={_state?.name}
                 />

web/components/issue-layouts/filters/target-date.tsx

@@ -16,10 +16,15 @@ export const FilterTargetDate = observer(() => {
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
+  const handleFilter = (key: string, value: string) => {
+    const _value = [value];
+    issueFilterStore.handleUserFilter("filters", key, _value);
+  };
+
   return (
     <div>
       <FilterHeader
-        title={"Target Date"}
+        title={`Target Date (${issueFilterStore?.issueRenderFilters?.due_date.length})`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -30,7 +35,13 @@ export const FilterTargetDate = observer(() => {
             issueFilterStore?.issueRenderFilters?.due_date.map((_targetDate) => (
               <FilterOption
                 key={_targetDate?.key}
-                isChecked={false}
+                isChecked={
+                  issueFilterStore?.userFilters?.filters?.target_date != null &&
+                  issueFilterStore?.userFilters?.filters?.target_date.includes(_targetDate?.key)
+                    ? true
+                    : false
+                }
+                onClick={() => handleFilter("target_date", _targetDate?.key)}
                 title={_targetDate.title}
                 multiple={false}
               />

web/components/issue-layouts/helpers/filter-option.tsx

@@ -7,10 +7,20 @@ interface IFilterOption {
   icon?: React.ReactNode;
   title: string;
   multiple?: boolean;
+  onClick?: () => void;
 }
 
-export const FilterOption = ({ isChecked, icon, title, multiple = true }: IFilterOption) => (
+export const FilterOption = ({
-  <div className="flex items-center gap-3 cursor-pointer rounded p-[6px] py-[5px] transition-all hover:bg-custom-border-100">
+  isChecked,
+  icon,
+  title,
+  multiple = true,
+  onClick,
+}: IFilterOption) => (
+  <div
+    className="flex items-center gap-3 cursor-pointer rounded p-[6px] py-[5px] transition-all hover:bg-custom-border-100"
+    onClick={onClick}
+  >
     <div
       className={`flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center border border-custom-border-300 bg-custom-background-90 ${
         isChecked ? `bg-custom-primary-300 text-white` : ``

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

@@ -40,55 +40,22 @@ export const LayoutSelection = observer(() => {
     },
   ];
 
-  const handleLayoutSelection = (layout: TIssueLayouts) => {
+  const handleLayoutSelection = (_layoutKey: string) => {
-    if (!issueFilterStore.workspaceId) return;
+    issueFilterStore.handleUserFilter("display_filters", "layout", _layoutKey);
-    if (issueFilterStore.issueView === "my_issues") {
-      issueStore.getMyIssuesAsync(issueFilterStore.workspaceId, issueFilterStore.issueView, layout);
-      return;
-    }
-
-    if (!issueFilterStore.projectId) return;
-    if (issueFilterStore.issueView === "issues") {
-      issueStore.getProjectIssuesAsync(
-        issueFilterStore.workspaceId,
-        issueFilterStore.projectId,
-        issueFilterStore.issueView,
-        layout
-      );
-      return;
-    }
-    if (issueFilterStore.issueView === "modules" && issueFilterStore.moduleId) {
-      issueStore.getIssuesForModulesAsync(
-        issueFilterStore.workspaceId,
-        issueFilterStore.projectId,
-        issueFilterStore.moduleId,
-        issueFilterStore.issueView,
-        layout
-      );
-      return;
-    }
-    if (issueFilterStore.issueView === "cycles" && issueFilterStore.cycleId) {
-      issueStore.getIssuesForCyclesAsync(
-        issueFilterStore.workspaceId,
-        issueFilterStore.projectId,
-        issueFilterStore.cycleId,
-        issueFilterStore.issueView,
-        layout
-      );
-      return;
-    }
-    if (issueFilterStore.issueView === "views" && issueFilterStore.viewId) {
-      issueStore.getIssuesForViewsAsync(
-        issueFilterStore.workspaceId,
-        issueFilterStore.projectId,
-        issueFilterStore.viewId,
-        issueFilterStore.issueView,
-        layout
-      );
-      return;
-    }
   };
 
+  console.log("----");
+  console.log("workspace_id", issueFilterStore.workspaceId);
+  console.log("project_id", issueFilterStore.projectId);
+  console.log("module_id", issueFilterStore.moduleId);
+  console.log("cycle_id", issueFilterStore.cycleId);
+  console.log("view_id", issueFilterStore.viewId);
+
+  console.log("issue_view", issueFilterStore.issueView);
+  console.log("issue_layout", issueFilterStore.issueLayout);
+
+  console.log("----");
+
   return (
     <div className="relative flex items-center p-1 rounded gap-1 bg-custom-background-80">
       {layoutSelectionFilters.map((_layout) => (

web/pages/kanban.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-// swr
-import useSWR from "swr";
 // components
 import { IssueKanBanViewRoot } from "components/issue-layouts/kanban";
 import { LayoutSelection } from "components/issue-layouts/layout-selection";
@@ -18,140 +16,29 @@ const KanBanViewRoot = () => {
   const projectSlug: string = "08d59d96-9dfb-40e5-aa30-ecc66319450f";
   const moduleSlug: string = "05613afc-29ea-4fd8-a025-a3cdfed209d1";
   const cycleSlug: string = "1f66a767-00d1-422c-8f8f-6925282b7249";
-  const viewSlug: string = "1f66a767-00d1-422c-8f8f-6925282b7249";
+  const viewSlug: string = "64e6ecca-80ca-4f7c-8476-d650fca9d5b9";
 
   const store: RootStore = useMobxStore();
   const { issueFilters: issueFilterStore, issueView: issueViewStore } = store;
 
   React.useEffect(() => {
     const init = async () => {
+      console.log("started--->");
       // my issues under a workspace
-      // console.log("started--->");
+      // await issueViewStore.getMyIssuesAsync(workspaceSlug);
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug, "my_issues", "list");
+
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug, "my_issues", "kanban");
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug, "my_issues", "calendar");
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug, "my_issues", "spreadsheet");
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug, "my_issues", "gantt");
       // project issues under and workspace and project
-      // await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug, "issues", "list");
+      await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug);
-      await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug, "issues", "kanban");
+
-      // await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug, "issues", "calendar");
-      // await issueViewStore.getProjectIssuesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   "issues",
-      //   "spreadsheet"
-      // );
-      // await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug, "issues", "gantt");
       // module issues under and workspace and project
-      // await issueViewStore.getIssuesForModulesAsync(
+      // await issueViewStore.getIssuesForModulesAsync(workspaceSlug, projectSlug, moduleSlug);
-      //   workspaceSlug,
+
-      //   projectSlug,
-      //   moduleSlug,
-      //   "modules",
-      //   "list"
-      // );
-      // await issueViewStore.getIssuesForModulesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   moduleSlug,
-      //   "modules",
-      //   "kanban"
-      // );
-      // await issueViewStore.getIssuesForModulesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   moduleSlug,
-      //   "modules",
-      //   "calendar"
-      // );
-      // await issueViewStore.getIssuesForModulesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   moduleSlug,
-      //   "modules",
-      //   "spreadsheet"
-      // );
-      // await issueViewStore.getIssuesForModulesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   moduleSlug,
-      //   "modules",
-      //   "gantt"
-      // );
       // cycle issues under and workspace and project
-      // await issueViewStore.getIssuesForCyclesAsync(
+      // await issueViewStore.getIssuesForCyclesAsync(workspaceSlug, projectSlug, cycleSlug);
-      //   workspaceSlug,
+
-      //   projectSlug,
-      //   cycleSlug,
-      //   "cycles",
-      //   "list"
-      // );
-      // await issueViewStore.getIssuesForCyclesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   cycleSlug,
-      //   "cycles",
-      //   "kanban"
-      // );
-      // await issueViewStore.getIssuesForCyclesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   cycleSlug,
-      //   "cycles",
-      //   "calendar"
-      // );
-      // await issueViewStore.getIssuesForCyclesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   cycleSlug,
-      //   "cycles",
-      //   "spreadsheet"
-      // );
-      // await issueViewStore.getIssuesForCyclesAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   cycleSlug,
-      //   "cycles",
-      //   "gantt"
-      // );
       // cycle issues under and workspace and project
-      // await issueViewStore.getIssuesForViewsAsync(
+      // await issueViewStore.getIssuesForViewsAsync(workspaceSlug, projectSlug, viewSlug);
-      //   workspaceSlug,
+      console.log("ended--->");
-      //   projectSlug,
-      //   viewSlug,
-      //   "views",
-      //   "list"
-      // );
-      // await issueViewStore.getIssuesForViewsAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   viewSlug,
-      //   "views",
-      //   "kanban"
-      // );
-      // await issueViewStore.getIssuesForViewsAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   viewSlug,
-      //   "views",
-      //   "calendar"
-      // );
-      // await issueViewStore.getIssuesForViewsAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   viewSlug,
-      //   "views",
-      //   "spreadsheet"
-      // );
-      // await issueViewStore.getIssuesForViewsAsync(
-      //   workspaceSlug,
-      //   projectSlug,
-      //   viewSlug,
-      //   "views",
-      //   "gantt"
-      // );
-      // console.log("ended--->");
     };
 
     init();
@@ -160,10 +47,7 @@ const KanBanViewRoot = () => {
   return (
     <div className="w-screen min-h-[600px] h-screen">
       <div className="w-full h-full relative flex flex-col overflow-hidden">
-        <div
+        <div className="flex-shrink-0 h-[60px] border-b border-gray-200">
-          className="flex-shrink-0 h-[60px] border-b border-gray-200"
-          // style={{ writingMode: "vertical-lr" }}
-        >
           <div className="w-full h-full p-2 px-5 relative flex justify-between items-center gap-2">
             <div>
               <div>Filter Header</div>
@@ -179,6 +63,7 @@ const KanBanViewRoot = () => {
             </div>
           </div>
         </div>
+        <div className="flex-shrink-0 border-b border-gray-200">Hello</div>
         <div className="w-full h-full relative overflow-hidden">
           <IssueKanBanViewRoot />
         </div>

web/services/views.service.ts

@@ -11,7 +11,7 @@ const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 const trackEvent =
   process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
 
-class ViewServices extends APIService {
+export class ViewServices extends APIService {
   constructor() {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }

web/store/issue-views/Issues.ts

@@ -48,37 +48,22 @@ export interface IIssueViewStore {
   // computed
   getIssues: IIssues | null | undefined;
   // actions
-  getMyIssuesAsync: (
+  getMyIssuesAsync: (workspaceId: string) => null | Promise<any>;
-    workspaceId: string,
+  getProjectIssuesAsync: (workspaceId: string, projectId: string) => null | Promise<any>;
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => null | Promise<any>;
-  getProjectIssuesAsync: (
-    workspaceId: string,
-    projectId: string,
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => null | Promise<any>;
   getIssuesForModulesAsync: (
     workspaceId: string,
     projectId: string,
-    moduleId: string,
+    moduleId: string
-    _view: TIssueViews,
-    _layout: TIssueLayouts
   ) => null | Promise<any>;
   getIssuesForCyclesAsync: (
     workspaceId: string,
     projectId: string,
-    cycleId: string,
+    cycleId: string
-    _view: TIssueViews,
-    _layout: TIssueLayouts
   ) => null | Promise<any>;
   getIssuesForViewsAsync: (
     workspaceId: string,
     projectId: string,
-    viewId: string,
+    viewId: string
-    _view: TIssueViews,
-    _layout: TIssueLayouts
   ) => null | Promise<any>;
 }
 
@@ -159,7 +144,7 @@ class IssueViewStore implements IIssueViewStore {
   }
 
   // fetching my issues
-  getMyIssuesAsync = async (workspaceId: string, _view: TIssueViews, _layout: TIssueLayouts) => {
+  getMyIssuesAsync = async (workspaceId: string) => {
     try {
       this.loader = true;
       this.error = null;
@@ -171,8 +156,7 @@ class IssueViewStore implements IIssueViewStore {
         null,
         null,
         null,
-        _view,
+        "my_issues"
-        _layout
       );
       const issuesResponse = await this.userService.userIssues(workspaceId, filteredParams);
 
@@ -183,7 +167,8 @@ class IssueViewStore implements IIssueViewStore {
             ...this?.issues[workspaceId],
             my_issues: {
               ...this?.issues[workspaceId]?.my_issues,
-              [_layout as string]: issuesResponse,
+              [this.rootStore?.issueFilters?.userFilters?.display_filters?.layout as string]:
+                issuesResponse,
             },
           },
         };
@@ -205,12 +190,7 @@ class IssueViewStore implements IIssueViewStore {
   };
 
   // fetching project issues
-  getProjectIssuesAsync = async (
+  getProjectIssuesAsync = async (workspaceId: string, projectId: string) => {
-    workspaceId: string,
-    projectId: string,
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => {
     try {
       this.loader = true;
       this.error = null;
@@ -222,8 +202,7 @@ class IssueViewStore implements IIssueViewStore {
         null,
         null,
         null,
-        _view,
+        "issues"
-        _layout
       );
       const issuesResponse = await this.issueService.getIssuesWithParams(
         workspaceId,
@@ -242,7 +221,8 @@ class IssueViewStore implements IIssueViewStore {
                 ...this?.issues?.[workspaceId]?.project_issues?.[projectId],
                 issues: {
                   ...this?.issues[workspaceId]?.project_issues?.[projectId]?.issues,
-                  [_layout as string]: issuesResponse,
+                  [this.rootStore?.issueFilters?.userFilters?.display_filters?.layout as string]:
+                    issuesResponse,
                 },
               },
             },
@@ -266,13 +246,7 @@ class IssueViewStore implements IIssueViewStore {
   };
 
   // fetching project issues for modules
-  getIssuesForModulesAsync = async (
+  getIssuesForModulesAsync = async (workspaceId: string, projectId: string, moduleId: string) => {
-    workspaceId: string,
-    projectId: string,
-    moduleId: string,
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => {
     try {
       this.loader = true;
       this.error = null;
@@ -288,8 +262,7 @@ class IssueViewStore implements IIssueViewStore {
         moduleId,
         null,
         null,
-        _view,
+        "modules"
-        _layout
       );
       const issuesResponse = await this.modulesService.getModuleIssuesWithParams(
         workspaceId,
@@ -311,7 +284,8 @@ class IssueViewStore implements IIssueViewStore {
                   ...this?.issues[workspaceId]?.project_issues?.[projectId]?.modules,
                   [moduleId]: {
                     ...this?.issues[workspaceId]?.project_issues?.[projectId]?.modules?.[moduleId],
-                    [_layout as string]: issuesResponse,
+                    [this.rootStore?.issueFilters?.userFilters?.display_filters?.layout as string]:
+                      issuesResponse,
                   },
                 },
               },
@@ -336,13 +310,7 @@ class IssueViewStore implements IIssueViewStore {
   };
 
   // fetching project issues for cycles
-  getIssuesForCyclesAsync = async (
+  getIssuesForCyclesAsync = async (workspaceId: string, projectId: string, cycleId: string) => {
-    workspaceId: string,
-    projectId: string,
-    cycleId: string,
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => {
     try {
       this.loader = true;
       this.error = null;
@@ -358,8 +326,7 @@ class IssueViewStore implements IIssueViewStore {
         null,
         cycleId,
         null,
-        _view,
+        "cycles"
-        _layout
       );
       const issuesResponse = await this.cyclesService.getCycleIssuesWithParams(
         workspaceId,
@@ -381,7 +348,8 @@ class IssueViewStore implements IIssueViewStore {
                   ...this?.issues[workspaceId]?.project_issues?.[projectId]?.cycles,
                   [cycleId]: {
                     ...this?.issues[workspaceId]?.project_issues?.[projectId]?.cycles?.[cycleId],
-                    [_layout as string]: issuesResponse,
+                    [this.rootStore?.issueFilters?.userFilters?.display_filters?.layout as string]:
+                      issuesResponse,
                   },
                 },
               },
@@ -406,13 +374,7 @@ class IssueViewStore implements IIssueViewStore {
   };
 
   // fetching project issues for views
-  getIssuesForViewsAsync = async (
+  getIssuesForViewsAsync = async (workspaceId: string, projectId: string, viewId: string) => {
-    workspaceId: string,
-    projectId: string,
-    viewId: string,
-    _view: TIssueViews,
-    _layout: TIssueLayouts
-  ) => {
     try {
       this.loader = true;
       this.error = null;
@@ -424,8 +386,7 @@ class IssueViewStore implements IIssueViewStore {
         null,
         null,
         viewId,
-        _view,
+        "views"
-        _layout
       );
       const issuesResponse = await this.issueService.getIssuesWithParams(
         workspaceId,
@@ -446,7 +407,8 @@ class IssueViewStore implements IIssueViewStore {
                   ...this?.issues[workspaceId]?.project_issues?.[projectId]?.views,
                   [viewId]: {
                     ...this?.issues[workspaceId]?.project_issues?.[projectId]?.views?.[viewId],
-                    [_layout as string]: issuesResponse,
+                    [this.rootStore?.issueFilters?.userFilters?.display_filters?.layout as string]:
+                      issuesResponse,
                   },
                 },
               },