import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // headless ui import { Disclosure, Transition } from "@headlessui/react"; // icons import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; // services import workspaceService from "services/workspace.service"; import stateService from "services/state.service"; // hooks import useIssuesProperties from "hooks/use-issue-properties"; import useIssueView from "hooks/use-issue-view"; // components import SingleListIssue from "components/common/list-view/single-issue"; // ui import { CustomMenu, Spinner } from "components/ui"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import { IIssue, IWorkspaceMember } from "types"; // fetch-keys import { WORKSPACE_MEMBERS, STATE_LIST } from "constants/fetch-keys"; type Props = { issues: IIssue[]; openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void; openIssuesListModal: () => void; removeIssueFromCycle: (bridgeId: string) => void; setPreloadedData: React.Dispatch< React.SetStateAction< | (Partial & { actionType: "createIssue" | "edit" | "delete"; }) | null > >; }; const CyclesListView: React.FC = ({ issues, openCreateIssueModal, openIssuesListModal, removeIssueFromCycle, setPreloadedData, }) => { const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string); const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues); const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const { data: states } = useSWR( workspaceSlug && projectId ? STATE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null ); if (issueView !== "list") return <>; return (
{Object.keys(groupedByIssues).map((singleGroup) => { const stateId = selectedGroup === "state_detail.name" ? states?.find((s) => s.name === singleGroup)?.id ?? null : null; return ( {({ open }) => (
{selectedGroup !== null ? (

{singleGroup === null || singleGroup === "null" ? selectedGroup === "priority" && "No priority" : addSpaceIfCamelCase(singleGroup)}

) : (

All Issues

)}

{groupedByIssues[singleGroup as keyof IIssue].length}

{groupedByIssues[singleGroup] ? ( groupedByIssues[singleGroup].length > 0 ? ( groupedByIssues[singleGroup].map((issue) => { const assignees = [ ...(issue?.assignees_list ?? []), ...(issue?.assignees ?? []), ]?.map((assignee) => { const tempPerson = people?.find( (p) => p.member.id === assignee )?.member; return { avatar: tempPerson?.avatar, first_name: tempPerson?.first_name, email: tempPerson?.email, }; }); return ( openCreateIssueModal(issue, "edit")} removeIssue={() => removeIssueFromCycle(issue.bridge ?? "")} /> ); }) ) : (

No issues.

) ) : (
)}
Add issue } optionsPosition="left" noBorder > { openCreateIssueModal(); if (selectedGroup !== null) { setPreloadedData({ state: stateId !== null ? stateId : undefined, [selectedGroup]: singleGroup, actionType: "createIssue", }); } }} > Create new openIssuesListModal()}> Add an existing issue
)}
); })}
); }; export default CyclesListView;