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: allow guest/ viewer to clear applied filters in project issues.

Browse Source
This commit is contained in:
Prateek Shourya 2023-12-27 13:31:33 +05:30
parent 2898765454
commit 3dae871d23
6 changed files with 56 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { import {
AppliedDateFilters, AppliedDateFilters,
@ -16,8 +15,6 @@ import { X } from "lucide-react";
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types // types
import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types"; import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
type Props = { type Props = {
appliedFilters: IIssueFilterOptions; appliedFilters: IIssueFilterOptions;
@ -35,16 +32,10 @@ const dateFilters = ["start_date", "target_date"];
export const AppliedFiltersList: React.FC<Props> = observer((props) => { 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 } = props;
const {
user: { currentProjectRole },
} = useMobxStore();
if (!appliedFilters) return null; if (!appliedFilters) return null;
if (Object.keys(appliedFilters).length === 0) return null; if (Object.keys(appliedFilters).length === 0) return null;
const isEditingAllowed = currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
return ( return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100"> <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
{Object.entries(appliedFilters).map(([key, value]) => { {Object.entries(appliedFilters).map(([key, value]) => {
@ -61,7 +52,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
<div className="flex flex-wrap items-center gap-1"> <div className="flex flex-wrap items-center gap-1">
{membersFilters.includes(filterKey) && ( {membersFilters.includes(filterKey) && (
<AppliedMembersFilters <AppliedMembersFilters
editable={isEditingAllowed}
handleRemove={(val) => handleRemoveFilter(filterKey, val)} handleRemove={(val) => handleRemoveFilter(filterKey, val)}
members={members} members={members}
values={value} values={value}
@ -72,7 +62,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
)} )}
{filterKey === "labels" && ( {filterKey === "labels" && (
<AppliedLabelsFilters <AppliedLabelsFilters
editable={isEditingAllowed}
handleRemove={(val) => handleRemoveFilter("labels", val)} handleRemove={(val) => handleRemoveFilter("labels", val)}
labels={labels} labels={labels}
values={value} values={value}
@ -80,14 +69,12 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
)} )}
{filterKey === "priority" && ( {filterKey === "priority" && (
<AppliedPriorityFilters <AppliedPriorityFilters
editable={isEditingAllowed}
handleRemove={(val) => handleRemoveFilter("priority", val)} handleRemove={(val) => handleRemoveFilter("priority", val)}
values={value} values={value}
/> />
)} )}
{filterKey === "state" && states && ( {filterKey === "state" && states && (
<AppliedStateFilters <AppliedStateFilters
editable={isEditingAllowed}
handleRemove={(val) => handleRemoveFilter("state", val)} handleRemove={(val) => handleRemoveFilter("state", val)}
states={states} states={states}
values={value} values={value}
@ -101,35 +88,30 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
)} )}
{filterKey === "project" && ( {filterKey === "project" && (
<AppliedProjectFilters <AppliedProjectFilters
editable={isEditingAllowed}
handleRemove={(val) => handleRemoveFilter("project", val)} handleRemove={(val) => handleRemoveFilter("project", val)}
projects={projects} projects={projects}
values={value} values={value}
/> />
)} )}
{isEditingAllowed && ( <button
<button type="button"
type="button" className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" onClick={() => handleRemoveFilter(filterKey, null)}
onClick={() => handleRemoveFilter(filterKey, null)} >
> <X size={12} strokeWidth={2} />
<X size={12} strokeWidth={2} /> </button>
</button>
)}
</div> </div>
</div> </div>
); );
})} })}
{isEditingAllowed && ( <button
<button type="button"
type="button" onClick={handleClearAllFilters}
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"
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
Clear all <X size={12} strokeWidth={2} />
<X size={12} strokeWidth={2} /> </button>
</button> </div>
)}
</div>
); );
}); });

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

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

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

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

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

@ -9,11 +9,10 @@ import { TIssuePriorities } from "types";
type Props = { type Props = {
handleRemove: (val: string) => void; handleRemove: (val: string) => void;
values: string[]; values: string[];
editable: boolean | undefined;
}; };
export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values, editable } = props; const { handleRemove, values } = props;
return ( return (
<> <>
@ -21,15 +20,13 @@ 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"> <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`} /> <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
{priority} {priority}
{editable && ( <button
<button type="button"
type="button" className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" onClick={() => handleRemove(priority)}
onClick={() => handleRemove(priority)} >
> <X size={10} strokeWidth={2} />
<X size={10} strokeWidth={2} /> </button>
</button>
)}
</div> </div>
))} ))}
</> </>

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

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

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

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