import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import Image from "next/image"; import { mutate } from "swr"; // react-hook-form import { useForm } from "react-hook-form"; import { Disclosure, Popover, Transition } from "@headlessui/react"; import DatePicker from "react-datepicker"; // icons import { CalendarDaysIcon, ChartPieIcon, ArrowLongRightIcon, TrashIcon, DocumentDuplicateIcon, UserCircleIcon, ChevronDownIcon, DocumentIcon, ExclamationCircleIcon, } from "@heroicons/react/24/outline"; // ui import { CustomMenu, Loader, ProgressBar } from "components/ui"; // hooks import useToast from "hooks/use-toast"; // services import cyclesService from "services/cycles.service"; // components import { SidebarProgressStats } from "components/core"; import ProgressChart from "components/core/sidebar/progress-chart"; import { DeleteCycleModal } from "components/cycles"; // helpers import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; import { renderDateFormat, renderShortDate } from "helpers/date-time.helper"; // types import { CycleIssueResponse, ICycle, IIssue } from "types"; // fetch-keys import { CYCLE_DETAILS } from "constants/fetch-keys"; type Props = { issues: IIssue[]; cycle: ICycle | undefined; isOpen: boolean; cycleIssues: CycleIssueResponse[]; cycleStatus: string; }; export const CycleDetailsSidebar: React.FC = ({ issues, cycle, isOpen, cycleIssues, cycleStatus, }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [startDateRange, setStartDateRange] = useState(new Date()); const [endDateRange, setEndDateRange] = useState(null); const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; const { setToastAlert } = useToast(); const defaultValues: Partial = { start_date: new Date().toString(), end_date: new Date().toString(), }; const groupedIssues = { backlog: [], unstarted: [], started: [], cancelled: [], completed: [], ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"), }; const { reset } = useForm({ defaultValues, }); const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !cycleId) return; mutate( CYCLE_DETAILS(cycleId as string), (prevData) => ({ ...(prevData as ICycle), ...data }), false ); cyclesService .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data) .then((res) => { console.log(res); mutate(CYCLE_DETAILS(cycleId as string)); }) .catch((e) => { console.log(e); }); }; const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`) .then(() => { setToastAlert({ type: "success", title: "Cycle link copied to clipboard", }); }) .catch(() => { setToastAlert({ type: "error", title: "Some error occurred", }); }); }; useEffect(() => { if (cycle) reset({ ...cycle, }); }, [cycle, reset]); const isStartValid = new Date(`${cycle?.start_date}`) <= new Date(); const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`); const progressPercentage = cycleIssues ? Math.round((groupedIssues.completed.length / cycleIssues?.length) * 100) : null; return ( <>
{cycle ? ( <>
{capitalizeFirstLetter(cycleStatus)}
{({ open }) => ( <> {renderShortDate(new Date(`${cycle?.start_date}`))} { submitChanges({ start_date: renderDateFormat(date), }); setStartDateRange(date); }} selectsStart startDate={startDateRange} endDate={endDateRange} maxDate={endDateRange} shouldCloseOnSelect inline /> )} {({ open }) => ( <> {renderShortDate(new Date(`${cycle?.end_date}`))} { submitChanges({ end_date: renderDateFormat(date), }); setEndDateRange(date); }} selectsEnd startDate={startDateRange} endDate={endDateRange} // minDate={startDateRange} inline /> )}

{cycle.name}

Copy Link setCycleDeleteModal(true)}> Delete
{cycle.description}
Lead
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( {cycle.owned_by.first_name} ) : ( {cycle.owned_by.first_name.charAt(0)} )} {cycle.owned_by.first_name}
Progress
{groupedIssues.completed.length}/{cycleIssues?.length}
{({ open }) => (
Progress {!open && cycleIssues && progressPercentage ? ( {progressPercentage ? `${progressPercentage}%` : ""} ) : ( "" )}
{isStartValid && isEndValid ? ( ) : (
Invalid date. Please enter valid date.
)}
{isStartValid && isEndValid ? (
Pending Issues -{" "} {cycleIssues?.length - groupedIssues.completed.length}{" "}
Ideal
Current
) : ( "" )}
)}
{({ open }) => (
Other Information
{issues.length > 0 ? ( ) : (
No issues found. Please add issue.
)}
{issues.length > 0 ? (
) : ( "" )}
)}
) : (
)}
); };