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

chore: cycle and module sidebar stats filter (#594)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-30 01:31:43 +05:30 committed by GitHub
parent 6a40dd911f
commit dcf8b562d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -630,10 +630,13 @@ export const IssuesView: React.FC<Props> = ({
if (!label) return null; if (!label) return null;
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-1">
<div <div
className="w-4 h-4 rounded-full" className="h-2 w-2 rounded-full"
style={{ backgroundColor: label.color }} style={{
backgroundColor:
label.color && label.color !== "" ? label.color : "#000000",
}}
/> />
{label.name} {label.name}
</div> </div>

28
apps/app/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -12,6 +12,7 @@ import issuesServices from "services/issues.service";
import projectService from "services/project.service"; import projectService from "services/project.service";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
import useIssuesView from "hooks/use-issues-view";
// components // components
import { SingleProgressStats } from "components/core"; import { SingleProgressStats } from "components/core";
// ui // ui
@ -49,6 +50,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
const { filters, setFilters } = useIssuesView();
const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees"); const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
const { data: issueLabels } = useSWR<IIssueLabels[]>( const { data: issueLabels } = useSWR<IIssueLabels[]>(
@ -128,8 +131,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
States States
</Tab> </Tab>
</Tab.List> </Tab.List>
<Tab.Panels className="flex w-full items-center justify-between p-1"> <Tab.Panels className="flex w-full items-center justify-between pt-1">
<Tab.Panel as="div" className="flex w-full flex-col text-xs "> <Tab.Panel as="div" className="flex w-full flex-col text-xs">
{members?.map((member, index) => { {members?.map((member, index) => {
const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id)); const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed"); const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@ -146,6 +149,15 @@ export const SidebarProgressStats: React.FC<Props> = ({
} }
completed={completeArray.length} completed={completeArray.length}
total={totalArray.length} total={totalArray.length}
onClick={() => {
if (filters.assignees?.includes(member.member.id))
setFilters({
assignees: filters.assignees?.filter((a) => a !== member.member.id),
});
else
setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
}}
selected={filters.assignees?.includes(member.member.id)}
/> />
); );
} }
@ -177,7 +189,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
"" ""
)} )}
</Tab.Panel> </Tab.Panel>
<Tab.Panel as="div" className="flex w-full flex-col "> <Tab.Panel as="div" className="w-full space-y-1">
{issueLabels?.map((label, index) => { {issueLabels?.map((label, index) => {
const totalArray = issues?.filter((i) => i.labels?.includes(label.id)); const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed"); const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@ -189,7 +201,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
title={ title={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <span
className="block h-3 w-3 rounded-full " className="block h-3 w-3 rounded-full"
style={{ style={{
backgroundColor: backgroundColor:
label.color && label.color !== "" ? label.color : "#000000", label.color && label.color !== "" ? label.color : "#000000",
@ -200,6 +212,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
} }
completed={completeArray.length} completed={completeArray.length}
total={totalArray.length} total={totalArray.length}
onClick={() => {
if (filters.labels?.includes(label.id))
setFilters({
labels: filters.labels?.filter((l) => l !== label.id),
});
else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
}}
selected={filters.labels?.includes(label.id)}
/> />
); );
} }

4
apps/app/components/core/sidebar/single-progress-stats.tsx
View File

@ -18,14 +18,14 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
selected = false, selected = false,
}) => ( }) => (
<div <div
className={`flex w-full items-center justify-between py-3 text-xs ${ className={`flex w-full items-center justify-between rounded p-2 text-xs ${
onClick ? "cursor-pointer hover:bg-gray-100" : "" onClick ? "cursor-pointer hover:bg-gray-100" : ""
} ${selected ? "bg-gray-100" : ""}`} } ${selected ? "bg-gray-100" : ""}`}
onClick={onClick} onClick={onClick}
> >
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div> <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
<div className="flex w-1/2 items-center justify-end gap-1 px-2"> <div className="flex w-1/2 items-center justify-end gap-1 px-2">
<div className="flex h-5 items-center justify-center gap-1 "> <div className="flex h-5 items-center justify-center gap-1">
<span className="h-4 w-4 "> <span className="h-4 w-4 ">
<ProgressBar value={completed} maxValue={total} /> <ProgressBar value={completed} maxValue={total} />
</span> </span>

9
apps/app/components/views/form.tsx
View File

@ -225,10 +225,13 @@ export const ViewForm: React.FC<Props> = ({
const label = issueLabels?.find((l) => l.id === labelId); const label = issueLabels?.find((l) => l.id === labelId);
if (!label) return null; if (!label) return null;
return ( return (
<div className="flex items-center gap-2 rounded-full border bg-white px-1.5 py-1 text-xs"> <div className="flex items-center gap-1 rounded-full border bg-white px-1.5 py-1 text-xs">
<div <div
className="h-4 w-4 rounded-full" className="h-2 w-2 rounded-full"
style={{ backgroundColor: label.color }} style={{
backgroundColor:
label.color && label.color !== "" ? label.color : "#000000",
}}
/> />
{label.name} {label.name}
</div> </div>