// react import React from "react"; // next import Link from "next/link"; // swr import useSWR from "swr"; // headless ui import { Disclosure, Transition, Menu } from "@headlessui/react"; // services import cycleServices from "lib/services/cycles.service"; // hooks import useUser from "lib/hooks/useUser"; // ui import { CustomMenu, Spinner } from "ui"; // icons import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; import { CalendarDaysIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types"; // fetch keys import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // constants import { addSpaceIfCamelCase, findHowManyDaysLeft, renderShortNumericDateFormat, } from "constants/common"; import workspaceService from "lib/services/workspace.service"; type Props = { groupedByIssues: { [key: string]: IIssue[]; }; properties: Properties; selectedGroup: NestedKeyOf | null; openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void; openIssuesListModal: (cycleId: string) => void; removeIssueFromCycle: (bridgeId: string) => void; }; const CyclesListView: React.FC = ({ groupedByIssues, selectedGroup, openCreateIssueModal, openIssuesListModal, properties, removeIssueFromCycle, }) => { const { activeWorkspace, activeProject } = useUser(); const { data: people } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); return (
{Object.keys(groupedByIssues).map((singleGroup) => ( {({ 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: IIssue) => { 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 (
{properties.priority && (
{/* {getPriorityIcon(issue.priority ?? "")} */} {issue.priority ?? "None"}
Priority
{issue.priority ?? "None"}
)} {properties.state && (
{addSpaceIfCamelCase(issue?.state_detail.name)}
State
{issue?.state_detail.name}
)} {properties.start_date && (
{issue.start_date ? renderShortNumericDateFormat(issue.start_date) : "N/A"}
Started at
{renderShortNumericDateFormat(issue.start_date ?? "")}
)} {properties.target_date && (
{issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
Target date
{renderShortNumericDateFormat(issue.target_date ?? "")}
{issue.target_date && (issue.target_date < new Date().toISOString() ? `Target date has passed by ${findHowManyDaysLeft( issue.target_date )} days` : findHowManyDaysLeft(issue.target_date) <= 3 ? `Target date is in ${findHowManyDaysLeft( issue.target_date )} days` : "Target date")}
)} openCreateIssueModal(issue, "edit")} > Edit removeIssueFromCycle(issue.bridge ?? "")} > Remove from cycle Delete permanently
); }) ) : (

No issues.

) ) : (
)}
)}
))}
// // // // //