import React from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // headless ui import { Tab } from "@headlessui/react"; // services 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 import { Avatar } from "components/ui"; // icons import User from "public/user.png"; // types import { IIssue, IIssueLabels, IModule, UserAuth } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; // types type Props = { groupedIssues: any; issues: IIssue[]; module?: IModule; userAuth?: UserAuth; roundedTab?: boolean; noBackground?: boolean; }; const stateGroupColours: { [key: string]: string; } = { backlog: "#3f76ff", unstarted: "#ff9e9e", started: "#d687ff", cancelled: "#ff5353", completed: "#096e8d", }; export const SidebarProgressStats: React.FC = ({ groupedIssues, issues, module, userAuth, roundedTab, noBackground, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { filters, setFilters } = useIssuesView(); const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees"); const { data: issueLabels } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string) : null ); const { data: members } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null ); const currentValue = (tab: string | null) => { switch (tab) { case "Assignees": return 0; case "Labels": return 1; case "States": return 2; default: return 0; } }; return ( { switch (i) { case 0: return setTab("Assignees"); case 1: return setTab("Labels"); case 2: return setTab("States"); default: return setTab("Assignees"); } }} > `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Assignees `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Labels `w-full ${ roundedTab ? "rounded-3xl border border-brand-base" : "rounded" } px-3 py-1 text-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > States {members?.map((member, index) => { const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id)); const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed"); if (totalArray.length > 0) { return ( {member.member.first_name} } 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)} /> ); } })} {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
User
No assignee } completed={ issues?.filter( (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0 ).length } total={issues?.filter((i) => i?.assignees?.length === 0).length} /> ) : ( "" )}
{issueLabels?.map((label, index) => { const totalArray = issues?.filter((i) => i?.labels?.includes(label.id)); const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed"); if (totalArray.length > 0) { return ( {label?.name} } 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)} /> ); } })} {Object.keys(groupedIssues).map((group, index) => ( {group} } completed={groupedIssues[group]} total={issues.length} /> ))}
); };