chore: filters dropdown

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

@@ -10,58 +10,65 @@ import {
   FilterGroupBy,
   FilterIssueType,
   FilterOrderBy,
+  FilterSubGroupBy,
 } from "components/issue-layouts";
 // helpers
-import { issueFilterVisibilityData } from "helpers/issue.helper";
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 export const DisplayFiltersSelection = observer(() => {
   const { issueFilter: issueFilterStore } = useMobxStore();
 
   const isDisplayFilterEnabled = (displayFilter: string) =>
-    issueFilterVisibilityData.issues.display_filters[issueFilterStore.userDisplayFilters.layout ?? "list"].includes(
-      displayFilter
-    );
+    ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.display_filters[
+      issueFilterStore.userDisplayFilters.layout ?? "list"
+    ].includes(displayFilter);
 
   return (
-    <div className="w-full h-full overflow-hidden select-none relative flex flex-col divide-y divide-custom-border-200 px-0.5">
-      {/* <div className="flex-shrink-0 p-2 text-sm">Search container</div> */}
-      <div className="w-full h-full overflow-hidden overflow-y-auto relative pb-2 divide-y divide-custom-border-200">
-        {/* display properties */}
-        {issueFilterVisibilityData.issues.display_properties[issueFilterStore.userDisplayFilters.layout ?? "list"] && (
-          <div className="pb-2 px-2">
-            <FilterDisplayProperties />
-          </div>
-        )}
+    <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
+      {/* display properties */}
+      {ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.display_properties[
+        issueFilterStore.userDisplayFilters.layout ?? "list"
+      ] && (
+        <div className="py-2">
+          <FilterDisplayProperties />
+        </div>
+      )}
 
-        {/* group by */}
-        {isDisplayFilterEnabled("group_by") && (
-          <div className="py-1 px-2">
-            <FilterGroupBy />
-          </div>
-        )}
+      {/* group by */}
+      {isDisplayFilterEnabled("group_by") && (
+        <div className="py-2">
+          <FilterGroupBy />
+        </div>
+      )}
 
-        {/* order by */}
-        {isDisplayFilterEnabled("order_by") && (
-          <div className="py-1 px-2">
-            <FilterOrderBy />
-          </div>
-        )}
+      {/* sub-group by */}
+      {isDisplayFilterEnabled("sub_group_by") && (
+        <div className="py-2">
+          <FilterSubGroupBy />
+        </div>
+      )}
 
-        {/* issue type */}
-        {isDisplayFilterEnabled("issue_type") && (
-          <div className="py-1 px-2">
-            <FilterIssueType />
-          </div>
-        )}
+      {/* order by */}
+      {isDisplayFilterEnabled("order_by") && (
+        <div className="py-2">
+          <FilterOrderBy />
+        </div>
+      )}
 
-        {/* Options */}
-        {issueFilterVisibilityData.issues.extra_options[issueFilterStore.userDisplayFilters.layout ?? "list"]
-          .access && (
-          <div className="pt-1 px-2">
-            <FilterExtraOptions />
-          </div>
-        )}
-      </div>
+      {/* issue type */}
+      {isDisplayFilterEnabled("issue_type") && (
+        <div className="py-2">
+          <FilterIssueType />
+        </div>
+      )}
+
+      {/* Options */}
+      {ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.extra_options[issueFilterStore.userDisplayFilters.layout ?? "list"]
+        .access && (
+        <div className="py-2">
+          <FilterExtraOptions />
+        </div>
+      )}
     </div>
   );
 });

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

@@ -28,14 +28,14 @@ export const FilterDisplayProperties = observer(() => {
   };
 
   return (
-    <div>
+    <>
       <FilterHeader
         title="Display Properties"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="flex items-center gap-2 flex-wrap mx-1 mt-1">
+        <div className="flex items-center gap-2 flex-wrap mt-1">
           {ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
             <button
               key={displayProperty.key}
@@ -56,6 +56,6 @@ export const FilterDisplayProperties = observer(() => {
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 });

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

@@ -6,10 +6,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 
 // components
 import { FilterHeader, FilterOption } from "components/issue-layouts";
-// helpers
-import { issueFilterVisibilityData } from "helpers/issue.helper";
 // constants
-import { ISSUE_EXTRA_OPTIONS } from "constants/issue";
+import { ISSUE_EXTRA_OPTIONS, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 export const FilterExtraOptions = observer(() => {
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -18,19 +16,19 @@ export const FilterExtraOptions = observer(() => {
   const { issueFilter: issueFilterStore } = store;
 
   const isExtraOptionEnabled = (option: string) =>
-    issueFilterVisibilityData.issues.extra_options[
+    ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.extra_options[
       issueFilterStore.userDisplayFilters.layout ?? "list"
     ].values.includes(option);
 
   return (
-    <div>
+    <>
       <FilterHeader
         title="Extra Options"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="space-y-[2px] pt-1">
+        <div>
           {ISSUE_EXTRA_OPTIONS.map((option) => {
             if (!isExtraOptionEnabled(option.key)) return null;
 
@@ -44,6 +42,6 @@ export const FilterExtraOptions = observer(() => {
           })}
         </div>
       )}
-    </div>
+    </>
   );
 });

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

@@ -6,8 +6,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader } from "../helpers/filter-header";
-import { FilterOption } from "../helpers/filter-option";
+import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
 import { TIssueGroupByOptions } from "types";
 // constants
@@ -33,14 +32,14 @@ export const FilterGroupBy = observer(() => {
   };
 
   return (
-    <div>
+    <>
       <FilterHeader
-        title="Group By"
+        title="Group by"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="space-y-1 pt-1">
+        <div>
           {ISSUE_GROUP_BY_OPTIONS.map((groupBy) => (
             <FilterOption
               key={groupBy?.key}
@@ -52,6 +51,6 @@ export const FilterGroupBy = observer(() => {
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 });

web/components/issue-layouts/display-filters/index.ts

@@ -4,3 +4,4 @@ export * from "./extra-options";
 export * from "./group-by";
 export * from "./issue-type";
 export * from "./order-by";
+export * from "./sub-group-by";

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

@@ -6,8 +6,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader } from "../helpers/filter-header";
-import { FilterOption } from "../helpers/filter-option";
+import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
 import { TIssueTypeFilters } from "types";
 // constants
@@ -33,14 +32,14 @@ export const FilterIssueType = observer(() => {
   };
 
   return (
-    <div>
+    <>
       <FilterHeader
         title="Issue Type"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="space-y-1 pt-1">
+        <div>
           {ISSUE_FILTER_OPTIONS.map((issueType) => (
             <FilterOption
               key={issueType?.key}
@@ -52,6 +51,6 @@ export const FilterIssueType = observer(() => {
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 });

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

@@ -6,8 +6,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FilterHeader } from "../helpers/filter-header";
-import { FilterOption } from "../helpers/filter-option";
+import { FilterHeader, FilterOption } from "components/issue-layouts";
 // types
 import { TIssueOrderByOptions } from "types";
 // constants
@@ -33,14 +32,14 @@ export const FilterOrderBy = observer(() => {
   };
 
   return (
-    <div>
+    <>
       <FilterHeader
-        title={"Order By"}
+        title="Order by"
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
       {previewEnabled && (
-        <div className="space-y-[2px] pt-1">
+        <div>
           {ISSUE_ORDER_BY_OPTIONS.map((orderBy) => (
             <FilterOption
               key={orderBy?.key}
@@ -52,6 +51,6 @@ export const FilterOrderBy = observer(() => {
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 });

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

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { FilterHeader, FilterOption } from "components/issue-layouts";
+// types
+import { TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+export const FilterSubGroupBy = observer(() => {
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const store = useMobxStore();
+  const { issueFilter: issueFilterStore } = store;
+
+  const handleSubGroupBy = (value: TIssueGroupByOptions) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        sub_group_by: value,
+      },
+    });
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title="Sub-group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.map((subGroupBy) => {
+            if (
+              issueFilterStore.userDisplayFilters.group_by !== null &&
+              issueFilterStore.userDisplayFilters.sub_group_by === issueFilterStore.userDisplayFilters.group_by
+            )
+              return null;
+
+            return (
+              <FilterOption
+                key={subGroupBy?.key}
+                isChecked={issueFilterStore?.userDisplayFilters?.sub_group_by === subGroupBy?.key ? true : false}
+                onClick={() => handleSubGroupBy(subGroupBy.key)}
+                title={subGroupBy.title}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});