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"; // components import { SingleProgressStats } from "components/core"; // ui import { Avatar } from "components/ui"; // icons import User from "public/user.png"; // types import { IIssue, IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; // types type Props = { issues: IIssue[]; }; export const ActiveCycleProgressStats: React.FC = ({ issues }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "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; default: return 0; } }; return ( { switch (i) { case 0: return setTab("Assignees"); case 1: return setTab("Labels"); default: return setTab("Assignees"); } }} > `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Assignees `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > Labels {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} /> ); } })} {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} /> ); } })}
); };