github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: issue and properties filter dropdown improvement (#4733)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-06-07 19:33:13 +05:30 committed by GitHub
parent 17ce1bceb6
commit de8da176d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/cycles/cycle-mobile-header.tsx
View File

@ -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}

2
web/components/headers/cycle-issues.tsx
View File

@ -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}

2
web/components/headers/global-issues.tsx
View File

@ -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}
/>

2
web/components/headers/module-issues.tsx
View File

@ -239,6 +239,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/headers/project-draft-issues.tsx
View File

@ -138,6 +138,8 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/headers/project-issues.tsx
View File

@ -182,6 +182,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/headers/project-view-issues.tsx
View File

@ -216,6 +216,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/issues/archived-issues-header.tsx
View File

@ -77,6 +77,8 @@ export const ArchivedIssuesHeader: FC = observer(() => {
<FilterSelection
filters={issueFilters?.filters || {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
}

15
web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
View File

@ -7,7 +7,6 @@ import {
FilterDisplayProperties,
FilterExtraOptions,
FilterGroupBy,
FilterIssueType,
FilterOrderBy,
FilterSubGroupBy,
} from "@/components/issues";
@ -111,20 +110,6 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
</div>
)}
{/* issue type */}
{isDisplayFilterEnabled("type") && (
<div className="py-2">
<FilterIssueType
selectedIssueType={displayFilters?.type}
handleUpdate={(val) =>
handleDisplayFiltersUpdate({
type: val,
})
}
/>
</div>
)}
{/* Options */}
{layoutDisplayFiltersOptions?.extra_options.access && (
<div className="py-2">

24
web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View File

@ -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<IIssueDisplayFilterOptions>) => 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<Props> = observer((props) => {
const {
filters,
displayFilters,
handleDisplayFiltersUpdate,
handleFiltersUpdate,
layoutDisplayFiltersOptions,
labels,
@ -52,6 +57,9 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
return (
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="bg-custom-background-100 p-2.5 pb-0">
@ -187,7 +195,19 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
/>
</div>
)}
{/* issue type */}
{isDisplayFilterEnabled("type") && displayFilters && handleDisplayFiltersUpdate && (
<div className="py-2">
<FilterIssueType
selectedIssueType={displayFilters.type}
handleUpdate={(val) =>
handleDisplayFiltersUpdate({
type: val,
})
}
/>
</div>
)}
{/* start_date */}
{isFilterEnabled("start_date") && (
<div className="py-2">

2
web/components/issues/issues-mobile-header.tsx
View File

@ -132,6 +132,8 @@ export const IssuesMobileHeader = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/modules/module-mobile-header.tsx
View File

@ -134,6 +134,8 @@ export const ModuleMobileHeader = observer(() => {
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}

2
web/components/profile/profile-issues-filter.tsx
View File

@ -113,6 +113,8 @@ export const ProfileIssuesFilter = observer(() => {
}
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
states={states}
labels={workspaceLabels}
memberIds={members}

2
web/components/profile/profile-issues-mobile-header.tsx
View File

@ -147,6 +147,8 @@ const ProfileIssuesMobileHeader = observer(() => {
}
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
states={states}
labels={workspaceLabels}
memberIds={members}