From 1092229cee0253768507b510b022090fb6b11e83 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 28 Aug 2024 16:52:02 +0530
Subject: [PATCH 1/2] Add display filters and display properties to create view
 dialog

---
 .../display-filters-selection.tsx             |  30 ++---
 web/core/components/views/form.tsx            | 121 ++++++++++++------
 web/core/components/workspace/views/form.tsx  |  38 +++++-
 3 files changed, 131 insertions(+), 58 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index a3007658cc3..cf85f21bae6 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -78,22 +78,20 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* sub-group by */}
-      {isDisplayFilterEnabled("sub_group_by") &&
-        displayFilters?.group_by !== null &&
-        displayFilters?.layout === "kanban" && (
-          <div className="py-2">
-            <FilterSubGroupBy
-              displayFilters={displayFilters}
-              handleUpdate={(val) =>
-                handleDisplayFiltersUpdate({
-                  sub_group_by: val,
-                })
-              }
-              subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
-              ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
-            />
-          </div>
-        )}
+      {isDisplayFilterEnabled("sub_group_by") && displayFilters?.layout === "kanban" && (
+        <div className="py-2">
+          <FilterSubGroupBy
+            displayFilters={displayFilters}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                sub_group_by: val,
+              })
+            }
+            subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+            ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
+          />
+        </div>
+      )}
 
       {/* order by */}
       {isDisplayFilterEnabled("order_by") && !isEmpty(layoutDisplayFiltersOptions?.display_filters?.order_by) && (
diff --git a/web/core/components/views/form.tsx b/web/core/components/views/form.tsx
index 93b3fcbc2e8..e195099dc15 100644
--- a/web/core/components/views/form.tsx
+++ b/web/core/components/views/form.tsx
@@ -5,12 +5,12 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Layers } from "lucide-react";
 // types
-import { IProjectView, IIssueFilterOptions } from "@plane/types";
+import { IProjectView, IIssueFilterOptions, IIssueDisplayProperties, IIssueDisplayFilterOptions } from "@plane/types";
 // ui
 import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, TextArea } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
-import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
+import { AppliedFiltersList, DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
 import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 import { EViewAccess } from "@/constants/views";
@@ -34,7 +34,7 @@ const defaultValues: Partial<IProjectView> = {
   description: "",
   access: EViewAccess.PUBLIC,
   display_properties: getComputedDisplayProperties(),
-  display_filters: getComputedDisplayFilters(),
+  display_filters: { ...getComputedDisplayFilters(), group_by: "state" },
 };
 
 export const ProjectViewForm: React.FC<Props> = observer((props) => {
@@ -224,46 +224,87 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
             <AccessController control={control} />
             <Controller
               control={control}
-              name="display_filters.layout"
-              render={({ field: { onChange, value } }) => (
-                <LayoutDropDown
-                  onChange={(selectedValue: EIssueLayoutTypes) => onChange(selectedValue)}
-                  value={value}
-                />
-              )}
-            />
-            <Controller
-              control={control}
-              name="filters"
-              render={({ field: { onChange, value: filters } }) => (
-                <FiltersDropdown title="Filters" tabIndex={3}>
-                  <FilterSelection
-                    filters={filters ?? {}}
-                    handleFiltersUpdate={(key, value) => {
-                      const newValues = filters?.[key] ?? [];
+              name="display_filters"
+              render={({ field: { onChange: onDisplayFiltersChange, value: displayFilters } }) => (
+                <>
+                  {/* layout dropdown */}
+                  <LayoutDropDown
+                    onChange={(selectedValue: EIssueLayoutTypes) =>
+                      onDisplayFiltersChange({
+                        ...displayFilters,
+                        layout: selectedValue,
+                      })
+                    }
+                    value={displayFilters.layout}
+                  />
+
+                  {/* filters dropdown */}
+                  <Controller
+                    control={control}
+                    name="filters"
+                    render={({ field: { onChange, value: filters } }) => (
+                      <FiltersDropdown title="Filters" tabIndex={3}>
+                        <FilterSelection
+                          filters={filters ?? {}}
+                          handleFiltersUpdate={(key, value) => {
+                            const newValues = filters?.[key] ?? [];
+
+                            if (Array.isArray(value)) {
+                              value.forEach((val) => {
+                                if (!newValues.includes(val)) newValues.push(val);
+                              });
+                            } else {
+                              if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                              else newValues.push(value);
+                            }
 
-                      if (Array.isArray(value)) {
-                        value.forEach((val) => {
-                          if (!newValues.includes(val)) newValues.push(val);
-                        });
-                      } else {
-                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-                        else newValues.push(value);
-                      }
+                            onChange({
+                              ...filters,
+                              [key]: newValues,
+                            });
+                          }}
+                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[displayFilters.layout]}
+                          labels={projectLabels ?? undefined}
+                          memberIds={projectMemberIds ?? undefined}
+                          states={projectStates}
+                          cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                          moduleViewDisabled={!currentProjectDetails?.module_view}
+                        />
+                      </FiltersDropdown>
+                    )}
+                  />
 
-                      onChange({
-                        ...filters,
-                        [key]: newValues,
-                      });
-                    }}
-                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.list}
-                    labels={projectLabels ?? undefined}
-                    memberIds={projectMemberIds ?? undefined}
-                    states={projectStates}
-                    cycleViewDisabled={!currentProjectDetails?.cycle_view}
-                    moduleViewDisabled={!currentProjectDetails?.module_view}
+                  {/* display filters dropdown */}
+                  <Controller
+                    control={control}
+                    name="display_properties"
+                    render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
+                      <FiltersDropdown title="Display">
+                        <DisplayFiltersSelection
+                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[displayFilters.layout]}
+                          displayFilters={displayFilters ?? {}}
+                          handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+                            onDisplayFiltersChange({
+                              ...displayFilters,
+                              ...updatedDisplayFilter,
+                            });
+                          }}
+                          displayProperties={displayProperties ?? {}}
+                          handleDisplayPropertiesUpdate={(
+                            updatedDisplayProperties: Partial<IIssueDisplayProperties>
+                          ) => {
+                            onDisplayPropertiesChange({
+                              ...displayProperties,
+                              ...updatedDisplayProperties,
+                            });
+                          }}
+                          cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                          moduleViewDisabled={!currentProjectDetails?.module_view}
+                        />
+                      </FiltersDropdown>
+                    )}
                   />
-                </FiltersDropdown>
+                </>
               )}
             />
           </div>
diff --git a/web/core/components/workspace/views/form.tsx b/web/core/components/workspace/views/form.tsx
index 9f792df3bc0..6fce455a825 100644
--- a/web/core/components/workspace/views/form.tsx
+++ b/web/core/components/workspace/views/form.tsx
@@ -4,11 +4,11 @@ import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // types
-import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // components
-import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
+import { AppliedFiltersList, DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 import { EViewAccess } from "@/constants/views";
@@ -155,6 +155,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex gap-2">
             <AccessController control={control} />
+            {/* filters dropdown */}
             <Controller
               control={control}
               name="filters"
@@ -186,6 +187,39 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                 </FiltersDropdown>
               )}
             />
+
+            {/* display filters dropdown */}
+            <Controller
+              control={control}
+              name="display_filters"
+              render={({ field: { onChange: onDisplayFiltersChange, value: displayFilters } }) => (
+                <Controller
+                  control={control}
+                  name="display_properties"
+                  render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
+                    <FiltersDropdown title="Display">
+                      <DisplayFiltersSelection
+                        layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                        displayFilters={displayFilters ?? {}}
+                        handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+                          onDisplayFiltersChange({
+                            ...displayFilters,
+                            ...updatedDisplayFilter,
+                          });
+                        }}
+                        displayProperties={displayProperties ?? {}}
+                        handleDisplayPropertiesUpdate={(updatedDisplayProperties: Partial<IIssueDisplayProperties>) => {
+                          onDisplayPropertiesChange({
+                            ...displayProperties,
+                            ...updatedDisplayProperties,
+                          });
+                        }}
+                      />
+                    </FiltersDropdown>
+                  )}
+                />
+              )}
+            />
           </div>
           {selectedFilters && Object.keys(selectedFilters).length > 0 && (
             <div>

From 87513922ca1c61609deb63157ba07210e6c289dd Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 28 Aug 2024 16:57:19 +0530
Subject: [PATCH 2/2] revert back display filter selection change

---
 .../display-filters-selection.tsx             | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index cf85f21bae6..a3007658cc3 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -78,20 +78,22 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* sub-group by */}
-      {isDisplayFilterEnabled("sub_group_by") && displayFilters?.layout === "kanban" && (
-        <div className="py-2">
-          <FilterSubGroupBy
-            displayFilters={displayFilters}
-            handleUpdate={(val) =>
-              handleDisplayFiltersUpdate({
-                sub_group_by: val,
-              })
-            }
-            subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
-            ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
-          />
-        </div>
-      )}
+      {isDisplayFilterEnabled("sub_group_by") &&
+        displayFilters?.group_by !== null &&
+        displayFilters?.layout === "kanban" && (
+          <div className="py-2">
+            <FilterSubGroupBy
+              displayFilters={displayFilters}
+              handleUpdate={(val) =>
+                handleDisplayFiltersUpdate({
+                  sub_group_by: val,
+                })
+              }
+              subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+              ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
+            />
+          </div>
+        )}
 
       {/* order by */}
       {isDisplayFilterEnabled("order_by") && !isEmpty(layoutDisplayFiltersOptions?.display_filters?.order_by) && (