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: refactor apply/ clear filter implementation in All Issues.

Browse Source
This commit is contained in:
Prateek Shourya 2023-12-27 17:40:36 +05:30
parent 03f90be188
commit 024822d54f
10 changed files with 140 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/components/issues/issue-layouts/filters/applied-filters/date.tsx
View File

@ -11,10 +11,11 @@ import { DATE_FILTER_OPTIONS } from "constants/filters";
type Props = {
handleRemove: (val: string) => void;
values: string[];
disableClearOption?: boolean;
};
export const AppliedDateFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
const { handleRemove, values, disableClearOption } = props;
const getDateLabel = (value: string): string => {
let dateLabel = "";
@ -40,13 +41,15 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
{values.map((date) => (
<div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<span className="normal-case">{getDateLabel(date)}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
))}
</>

60
web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View File

@ -24,13 +24,23 @@ type Props = {
members?: IUserLite[] | undefined;
projects?: IProject[] | undefined;
states?: IState[] | undefined;
disableClearFilterOptions?: (keyof IIssueFilterOptions)[];
};
const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
const dateFilters = ["start_date", "target_date"];
export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
const {
appliedFilters,
handleClearAllFilters,
handleRemoveFilter,
labels,
members,
projects,
states,
disableClearFilterOptions,
} = props;
if (!appliedFilters) return null;
@ -52,16 +62,22 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
<div className="flex flex-wrap items-center gap-1">
{membersFilters.includes(filterKey) && (
<AppliedMembersFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
members={members}
values={value}
/>
)}
{dateFilters.includes(filterKey) && (
<AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
<AppliedDateFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
values={value}
/>
)}
{filterKey === "labels" && (
<AppliedLabelsFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter("labels", val)}
labels={labels}
values={value}
@ -69,12 +85,14 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
)}
{filterKey === "priority" && (
<AppliedPriorityFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter("priority", val)}
values={value}
/>
)}
{filterKey === "state" && states && (
<AppliedStateFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter("state", val)}
states={states}
values={value}
@ -82,36 +100,42 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
)}
{filterKey === "state_group" && (
<AppliedStateGroupFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter("state_group", val)}
values={value}
/>
)}
{filterKey === "project" && (
<AppliedProjectFilters
disableClearOption={disableClearFilterOptions?.includes(filterKey)}
handleRemove={(val) => handleRemoveFilter("project", val)}
projects={projects}
values={value}
/>
)}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
</button>
{!disableClearFilterOptions?.includes(filterKey) && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
</button>
)}
</div>
</div>
);
})}
<button
type="button"
onClick={handleClearAllFilters}
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
>
Clear all
<X size={12} strokeWidth={2} />
</button>
</div>
{(!disableClearFilterOptions || disableClearFilterOptions.length === 0) && (
<button
type="button"
onClick={handleClearAllFilters}
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
>
Clear all
<X size={12} strokeWidth={2} />
</button>
)}
</div>
);
});

19
web/components/issues/issue-layouts/filters/applied-filters/label.tsx
View File

@ -9,10 +9,11 @@ type Props = {
handleRemove: (val: string) => void;
labels: IIssueLabel[] | undefined;
values: string[];
disableClearOption?: boolean;
};
export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
const { handleRemove, labels, values } = props;
const { handleRemove, labels, values, disableClearOption } = props;
return (
<>
@ -30,13 +31,15 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
}}
/>
<span className="normal-case">{labelDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
);
})}

19
web/components/issues/issue-layouts/filters/applied-filters/members.tsx
View File

@ -9,10 +9,11 @@ type Props = {
handleRemove: (val: string) => void;
members: IUserLite[] | undefined;
values: string[];
disableClearOption?: boolean;
};
export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
const { handleRemove, members, values } = props;
const { handleRemove, members, values, disableClearOption } = props;
return (
<>
@ -25,13 +26,15 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
<div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
<span className="normal-case">{memberDetails.display_name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(memberId)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(memberId)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
);
})}

19
web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
View File

@ -9,10 +9,11 @@ import { TIssuePriorities } from "types";
type Props = {
handleRemove: (val: string) => void;
values: string[];
disableClearOption?: boolean;
};
export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
const { handleRemove, values, disableClearOption } = props;
return (
<>
@ -20,13 +21,15 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
<div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
{priority}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
))}
</>

19
web/components/issues/issue-layouts/filters/applied-filters/project.tsx
View File

@ -10,10 +10,11 @@ type Props = {
handleRemove: (val: string) => void;
projects: IProject[] | undefined;
values: string[];
disableClearOption?: boolean;
};
export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
const { handleRemove, projects, values } = props;
const { handleRemove, projects, values, disableClearOption } = props;
return (
<>
@ -34,13 +35,15 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
</span>
)}
<span className="normal-case">{projectDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(projectId)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(projectId)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
);
})}

12
web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
@ -9,10 +10,16 @@ import { AppliedFiltersList } from "components/issues";
import { IIssueFilterOptions } from "types";
import { EFilterType } from "store/issues/types";
export const GlobalViewsAppliedFiltersRoot = observer(() => {
type Props = {
disableClearFilterOptions?: (keyof IIssueFilterOptions)[];
};
export const GlobalViewsAppliedFiltersRoot: React.FC<Props> = observer((props) => {
const { disableClearFilterOptions } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string };
// mobx store
const {
project: { workspaceProjects },
workspace: { workspaceLabels },
@ -83,6 +90,7 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
disableClearFilterOptions={disableClearFilterOptions}
/>
{/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (

19
web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
View File

@ -8,10 +8,11 @@ import { TStateGroups } from "types";
type Props = {
handleRemove: (val: string) => void;
values: string[];
disableClearOption?: boolean;
};
export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
const { handleRemove, values, disableClearOption } = props;
return (
<>
@ -19,13 +20,15 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
<div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
{stateGroup}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateGroup)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateGroup)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
))}
</>

19
web/components/issues/issue-layouts/filters/applied-filters/state.tsx
View File

@ -10,10 +10,11 @@ type Props = {
handleRemove: (val: string) => void;
states: IState[];
values: string[];
disableClearOption: boolean | undefined;
};
export const AppliedStateFilters: React.FC<Props> = observer((props) => {
const { handleRemove, states, values } = props;
const { handleRemove, states, values, disableClearOption } = props;
return (
<>
@ -26,13 +27,15 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
<div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
{stateDetails.name}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
</button>
{!disableClearOption && (
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
</button>
)}
</div>
);
})}

12
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View File

@ -110,7 +110,17 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
</div>
) : (
<>
<GlobalViewsAppliedFiltersRoot />
<GlobalViewsAppliedFiltersRoot
disableClearFilterOptions={
type === "assigned"
? ["assignees"]
: type === "created"
? ["created_by"]
: type === "subscribed"
? ["subscriber"]
: undefined
}
/>
{Object.keys(getIssues ?? {}).length == 0 ? (
<>{/* <GlobalViewEmptyState /> */}</>