diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx index 3e37b586f7..ce1b45a9bf 100644 --- a/web/components/cycles/cycle-mobile-header.tsx +++ b/web/components/cycles/cycle-mobile-header.tsx @@ -156,6 +156,8 @@ export const CycleMobileHeader = () => { layoutDisplayFiltersOptions={ activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined } + displayFilters={issueFilters?.displayFilters ?? {}} + handleDisplayFiltersUpdate={handleDisplayFilters} labels={projectLabels} memberIds={projectMemberIds ?? undefined} states={projectStates} diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx index c26be96064..4e9c37c9d0 100644 --- a/web/components/headers/cycle-issues.tsx +++ b/web/components/headers/cycle-issues.tsx @@ -241,6 +241,8 @@ export const CycleIssuesHeader: React.FC = observer(() => { layoutDisplayFiltersOptions={ activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined } + displayFilters={issueFilters?.displayFilters ?? {}} + handleDisplayFiltersUpdate={handleDisplayFilters} labels={projectLabels} memberIds={projectMemberIds ?? undefined} states={projectStates} diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx index 1ec2a5d2cb..a6a35d16f6 100644 --- a/web/components/headers/global-issues.tsx +++ b/web/components/headers/global-issues.tsx @@ -117,6 +117,8 @@ export const GlobalIssuesHeader: React.FC = observer(() => { layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet} filters={issueFilters?.filters ?? {}} handleFiltersUpdate={handleFiltersUpdate} + displayFilters={issueFilters?.displayFilters ?? {}} + handleDisplayFiltersUpdate={handleDisplayFilters} labels={workspaceLabels ?? undefined} memberIds={workspaceMemberIds ?? undefined} /> diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx index 119cb9a944..a433bead50 100644 --- a/web/components/headers/module-issues.tsx +++ b/web/components/headers/module-issues.tsx @@ -239,6 +239,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => { { { { { = observer((props) => { )} - {/* issue type */} - {isDisplayFilterEnabled("type") && ( -
- - handleDisplayFiltersUpdate({ - type: val, - }) - } - /> -
- )} - {/* Options */} {layoutDisplayFiltersOptions?.extra_options.access && (
diff --git a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx index 3f45946e08..61ed05a241 100644 --- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx +++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; import { Search, X } from "lucide-react"; -import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types"; +import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types"; // hooks import { FilterAssignees, @@ -16,6 +16,7 @@ import { FilterTargetDate, FilterCycle, FilterModule, + FilterIssueType, } from "@/components/issues"; import { ILayoutDisplayFiltersOptions } from "@/constants/issue"; import { useAppRouter } from "@/hooks/store"; @@ -25,6 +26,8 @@ import { useAppRouter } from "@/hooks/store"; type Props = { filters: IIssueFilterOptions; + displayFilters?: IIssueDisplayFilterOptions | undefined; + handleDisplayFiltersUpdate?: (updatedDisplayFilter: Partial) => void; handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void; layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined; labels?: IIssueLabel[] | undefined; @@ -37,6 +40,8 @@ type Props = { export const FilterSelection: React.FC = observer((props) => { const { filters, + displayFilters, + handleDisplayFiltersUpdate, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, @@ -52,6 +57,9 @@ export const FilterSelection: React.FC = observer((props) => { const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter); + const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) => + Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter); + return (
@@ -187,7 +195,19 @@ export const FilterSelection: React.FC = observer((props) => { />
)} - + {/* issue type */} + {isDisplayFilterEnabled("type") && displayFilters && handleDisplayFiltersUpdate && ( +
+ + handleDisplayFiltersUpdate({ + type: val, + }) + } + /> +
+ )} {/* start_date */} {isFilterEnabled("start_date") && (
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx index 72df560a9b..956aa0d295 100644 --- a/web/components/issues/issues-mobile-header.tsx +++ b/web/components/issues/issues-mobile-header.tsx @@ -132,6 +132,8 @@ export const IssuesMobileHeader = observer(() => { { { } filters={issueFilters?.filters ?? {}} handleFiltersUpdate={handleFiltersUpdate} + displayFilters={issueFilters?.displayFilters ?? {}} + handleDisplayFiltersUpdate={handleDisplayFilters} states={states} labels={workspaceLabels} memberIds={members} diff --git a/web/components/profile/profile-issues-mobile-header.tsx b/web/components/profile/profile-issues-mobile-header.tsx index 657aab0a0c..6088d0194f 100644 --- a/web/components/profile/profile-issues-mobile-header.tsx +++ b/web/components/profile/profile-issues-mobile-header.tsx @@ -147,6 +147,8 @@ const ProfileIssuesMobileHeader = observer(() => { } filters={issueFilters?.filters ?? {}} handleFiltersUpdate={handleFiltersUpdate} + displayFilters={issueFilters?.displayFilters ?? {}} + handleDisplayFiltersUpdate={handleDisplayFilters} states={states} labels={workspaceLabels} memberIds={members}