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;
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<div
className="w-4 h-4 rounded-full"
style={{ backgroundColor: label.color }}
className="h-2 w-2 rounded-full"
style={{
backgroundColor:
label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>

24
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";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useIssuesView from "hooks/use-issues-view";
// components
import { SingleProgressStats } from "components/core";
// ui
@ -49,6 +50,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { filters, setFilters } = useIssuesView();
const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
const { data: issueLabels } = useSWR<IIssueLabels[]>(
@ -128,7 +131,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
States
</Tab>
</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">
{members?.map((member, index) => {
const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
@ -146,6 +149,15 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
completed={completeArray.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 as="div" className="flex w-full flex-col ">
<Tab.Panel as="div" className="w-full space-y-1">
{issueLabels?.map((label, index) => {
const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@ -200,6 +212,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
completed={completeArray.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)}
/>
);
}

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

@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
selected = false,
}) => (
<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" : ""
} ${selected ? "bg-gray-100" : ""}`}
onClick={onClick}

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);
if (!label) return null;
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
className="h-4 w-4 rounded-full"
style={{ backgroundColor: label.color }}
className="h-2 w-2 rounded-full"
style={{
backgroundColor:
label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>