thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: added filter 'created_by' (#524)

Browse Source 
* feat: clear filter button

* feat: added filter 'created_by'

* style: text align left for all the issues in filters dropdown
This commit is contained in:
Dakshesh Jain 2023-03-24 23:31:56 +05:30 committed by GitHub
parent 02f423bcb6
commit f3583f6415
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 251 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

342
apps/app/components/core/issues-view.tsx
View File

@ -418,109 +418,95 @@ export const IssuesView: React.FC<Props> = ({
isOpen={deleteIssueModal} isOpen={deleteIssueModal}
data={issueToDelete} data={issueToDelete}
/> />
<div className="mb-5 -mt-4 flex items-center justify-between gap-2"> <div className="mb-5 -mt-4">
<div className="flex flex-wrap items-center gap-3 text-xs"> <div className="flex items-center justify-between gap-2">
{Object.keys(filters).map((key) => { <div className="flex flex-wrap items-center gap-3 text-xs">
if (filters[key as keyof typeof filters] !== null) {Object.keys(filters).map((key) => {
return ( if (filters[key as keyof typeof filters] !== null)
<div key={key} className="flex items-center gap-x-2 rounded bg-white px-2 py-1"> return (
<span className="font-medium capitalize text-gray-500">{key}:</span> <div key={key} className="flex items-center gap-x-2 rounded bg-white px-2 py-1">
{filters[key as keyof IIssueFilterOptions] === null || <span className="font-medium capitalize text-gray-500">{key}:</span>
(filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? ( {filters[key as keyof IIssueFilterOptions] === null ||
<span>None</span> (filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? ( <span>None</span>
<div className="space-x-2"> ) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
{key === "state" <div className="space-x-2">
? filters.state?.map((stateId: any) => { {key === "state" ? (
const state = states?.find((s) => s.id === stateId); <div className="flex items-center gap-x-1">
{filters.state?.map((stateId: any) => {
const state = states?.find((s) => s.id === stateId);
return ( return (
<p <p
key={state?.id} key={state?.id}
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white" className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white"
style={{ style={{
color: state?.color, color: state?.color,
backgroundColor: `${state?.color}20`, backgroundColor: `${state?.color}20`,
}} }}
>
<span>
{getStateGroupIcon(
state?.group ?? "backlog",
"12",
"12",
state?.color
)}
</span>
<span>{state?.name ?? ""}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters(
{
state: filters.state?.filter((s: any) => s !== stateId),
},
!Boolean(viewId)
)
}
> >
<XMarkIcon className="h-3 w-3" /> <span>
</span> {getStateGroupIcon(
</p> state?.group ?? "backlog",
); "12",
}) "12",
: key === "priority" state?.color
? filters.priority?.map((priority: any) => ( )}
<p </span>
key={priority} <span>{state?.name ?? ""}</span>
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${ <span
priority === "urgent" className="cursor-pointer"
? "bg-red-100 text-red-600 hover:bg-red-100" onClick={() =>
: priority === "high" setFilters(
? "bg-orange-100 text-orange-500 hover:bg-orange-100" {
: priority === "medium" state: filters.state?.filter((s: any) => s !== stateId),
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100" },
: priority === "low" !Boolean(viewId)
? "bg-green-100 text-green-500 hover:bg-green-100" )
: "bg-gray-100" }
}`} >
<XMarkIcon className="h-3 w-3" />
</span>
</p>
);
})}
<button
type="button"
onClick={() =>
setFilters({
state: null,
})
}
> >
<span>{getPriorityIcon(priority)}</span> <XMarkIcon className="h-3 w-3" />
<span>{priority}</span> </button>
<span </div>
className="cursor-pointer" ) : key === "priority" ? (
onClick={() => <div className="flex items-center gap-x-1">
setFilters( {filters.priority?.map((priority: any) => (
{
priority: filters.priority?.filter(
(p: any) => p !== priority
),
},
!Boolean(viewId)
)
}
>
<XMarkIcon className="h-3 w-3" />
</span>
</p>
))
: key === "assignees"
? filters.assignees?.map((memberId: string) => {
const member = members?.find((m) => m.member.id === memberId)?.member;
return (
<p <p
key={memberId} key={priority}
className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize" className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${
priority === "urgent"
? "bg-red-100 text-red-600 hover:bg-red-100"
: priority === "high"
? "bg-orange-100 text-orange-500 hover:bg-orange-100"
: priority === "medium"
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
: priority === "low"
? "bg-green-100 text-green-500 hover:bg-green-100"
: "bg-gray-100"
}`}
> >
<Avatar user={member} /> <span>{getPriorityIcon(priority)}</span>
<span>{member?.first_name}</span> <span>{priority}</span>
<span <span
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
setFilters( setFilters(
{ {
assignees: filters.assignees?.filter( priority: filters.priority?.filter(
(p: any) => p !== memberId (p: any) => p !== priority
), ),
}, },
!Boolean(viewId) !Boolean(viewId)
@ -530,38 +516,150 @@ export const IssuesView: React.FC<Props> = ({
<XMarkIcon className="h-3 w-3" /> <XMarkIcon className="h-3 w-3" />
</span> </span>
</p> </p>
); ))}
}) <button
: (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")} type="button"
</div> onClick={() =>
) : ( setFilters({
<span className="capitalize">{filters[key as keyof typeof filters]}</span> priority: null,
)} })
</div> }
); >
})} <XMarkIcon className="h-3 w-3" />
</div> </button>
</div>
) : key === "assignees" ? (
<div className="flex items-center gap-x-1">
{filters.assignees?.map((memberId: string) => {
const member = members?.find((m) => m.member.id === memberId)?.member;
return (
<p
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
>
<Avatar user={member} />
<span>{member?.first_name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters(
{
assignees: filters.assignees?.filter(
(p: any) => p !== memberId
),
},
!Boolean(viewId)
)
}
>
<XMarkIcon className="h-3 w-3" />
</span>
</p>
);
})}
<button
type="button"
onClick={() =>
setFilters({
assignees: null,
})
}
>
<XMarkIcon className="h-3 w-3" />
</button>
</div>
) : (key as keyof IIssueFilterOptions) === "created_by" ? (
<div className="flex items-center gap-x-1">
{filters.created_by?.map((memberId: string) => {
const member = members?.find((m) => m.member.id === memberId)?.member;
return (
<p
key={memberId}
className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
>
<Avatar user={member} />
<span>{member?.first_name}</span>
<span
className="cursor-pointer"
onClick={() =>
setFilters(
{
assignees: filters.created_by?.filter(
(p: any) => p !== memberId
),
},
!Boolean(viewId)
)
}
>
<XMarkIcon className="h-3 w-3" />
</span>
</p>
);
})}
<button
type="button"
onClick={() =>
setFilters({
created_by: null,
})
}
>
<XMarkIcon className="h-3 w-3" />
</button>
</div>
) : (
(filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
)}
</div>
) : (
<span className="capitalize">{filters[key as keyof typeof filters]}</span>
)}
</div>
);
})}
</div>
{Object.keys(filters).length > 0 &&
nullFilters.length !== Object.keys(filters).length && (
<PrimaryButton
onClick={() => {
if (viewId) {
setFilters({}, true);
setToastAlert({
title: "View updated",
message: "Your view has been updated",
type: "success",
});
} else
setCreateViewModal({
query: filters,
});
}}
className="flex items-center gap-2 text-sm"
>
{!viewId && <PlusIcon className="h-4 w-4" />}
{viewId ? "Update" : "Save"} view
</PrimaryButton>
)}
</div>
{Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && ( {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
<PrimaryButton <button
onClick={() => { onClick={() =>
if (viewId) { setFilters({
setFilters({}, true); state: null,
setToastAlert({ priority: null,
title: "View updated", assignees: null,
message: "Your view has been updated", labels: null,
type: "success", })
}); }
} else className="mt-2 flex items-center gap-x-1 text-xs"
setCreateViewModal({
query: filters,
});
}}
className="flex items-center gap-2 text-sm"
> >
{!viewId && <PlusIcon className="h-4 w-4" />} <span>Clear all filters</span>
{viewId ? "Update" : "Save"} view <XMarkIcon className="h-4 w-4" />
</PrimaryButton> </button>
)} )}
</div> </div>
<DragDropContext onDragEnd={handleOnDragEnd}> <DragDropContext onDragEnd={handleOnDragEnd}>

2
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -130,7 +130,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
className={({ active }) => className={({ active }) =>
`${ `${
active || child.selected ? "bg-gray-100" : "text-gray-900" active || child.selected ? "bg-gray-100" : "text-gray-900"
} flex w-full items-center break-all rounded px-1 py-1.5 capitalize` } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize`
} }
> >
{child.label} {child.label}

23
apps/app/components/views/select-filters.tsx
View File

@ -119,6 +119,29 @@ export const SelectFilters: React.FC<Props> = ({
})) ?? []), })) ?? []),
], ],
}, },
{
id: "created_by",
label: "Created By",
value: members,
children: [
...(members?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
value: {
key: "created_by",
value: member.member.id,
},
selected: filters?.created_by?.includes(member.member.id),
})) ?? []),
],
},
]} ]}
/> />
); );

6
apps/app/constants/fetch-keys.ts
View File

@ -1,9 +1,10 @@
const paramsToKey = (params: any) => { const paramsToKey = (params: any) => {
const { state, priority, assignees } = params; const { state, priority, assignees, created_by } = params;
let stateKey = state ? state.split(",") : []; let stateKey = state ? state.split(",") : [];
let priorityKey = priority ? priority.split(",") : []; let priorityKey = priority ? priority.split(",") : [];
let assigneesKey = assignees ? assignees.split(",") : []; let assigneesKey = assignees ? assignees.split(",") : [];
let createdByKey = created_by ? created_by.split(",") : [];
const type = params.type ? params.type.toUpperCase() : "NULL"; const type = params.type ? params.type.toUpperCase() : "NULL";
const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL"; const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL"; const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
@ -12,8 +13,9 @@ const paramsToKey = (params: any) => {
stateKey = stateKey.sort().join("_"); stateKey = stateKey.sort().join("_");
priorityKey = priorityKey.sort().join("_"); priorityKey = priorityKey.sort().join("_");
assigneesKey = assigneesKey.sort().join("_"); assigneesKey = assigneesKey.sort().join("_");
createdByKey = createdByKey.sort().join("_");
return `${stateKey}_${priorityKey}_${assigneesKey}_${type}_${groupBy}_${orderBy}`; return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}`;
}; };
export const CURRENT_USER = "CURRENT_USER"; export const CURRENT_USER = "CURRENT_USER";

1
apps/app/contexts/issue-view.context.tsx
View File

@ -69,6 +69,7 @@ export const initialState: StateType = {
state: null, state: null,
issue__assignees__id: null, issue__assignees__id: null,
issue__labels__id: null, issue__labels__id: null,
created_by: null,
}, },
}; };

1
apps/app/hooks/use-issues-view.tsx
View File

@ -59,6 +59,7 @@ const useIssuesView = () => {
issue__labels__id: filters?.issue__labels__id issue__labels__id: filters?.issue__labels__id
? filters?.issue__labels__id.join(",") ? filters?.issue__labels__id.join(",")
: undefined, : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
}; };
const { data: projectIssues } = useSWR( const { data: projectIssues } = useSWR(

1
apps/app/types/issues.d.ts vendored
View File

@ -224,6 +224,7 @@ export interface IIssueFilterOptions {
issue__assignees__id: string[] | null; issue__assignees__id: string[] | null;
issue__labels__id: string[] | null; issue__labels__id: string[] | null;
priority: string[] | null; priority: string[] | null;
created_by: string[] | null;
} }
export type TIssueGroupByOptions = "state" | "priority" | "labels" | "created_by" | null; export type TIssueGroupByOptions = "state" | "priority" | "labels" | "created_by" | null;