import { useEffect, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { mutate } from "swr"; import { Controller, useForm } from "react-hook-form"; // services import { CalendarDaysIcon, ChartPieIcon, LinkIcon, PlusIcon, TrashIcon, } from "@heroicons/react/24/outline"; import modulesService from "services/modules.service"; // hooks import useToast from "hooks/use-toast"; // components import SelectLead from "components/project/modules/module-detail-sidebar/select-lead"; import SelectMembers from "components/project/modules/module-detail-sidebar/select-members"; import SelectStatus from "components/project/modules/module-detail-sidebar/select-status"; import ModuleLinkModal from "components/project/modules/module-link-modal"; //progress-bar import { CircularProgressbar } from "react-circular-progressbar"; import "react-circular-progressbar/dist/styles.css"; // ui import { Loader } from "components/ui"; // icons // helpers import { timeAgo } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; // types import { IModule, ModuleIssueResponse } from "types"; // fetch-keys import { MODULE_LIST } from "constants/fetch-keys"; const defaultValues: Partial = { members_list: [], start_date: new Date().toString(), target_date: new Date().toString(), status: null, }; type Props = { module?: IModule; isOpen: boolean; moduleIssues: ModuleIssueResponse[] | undefined; handleDeleteModule: () => void; }; const ModuleDetailSidebar: React.FC = ({ module, isOpen, moduleIssues, handleDeleteModule, }) => { const [moduleLinkModal, setModuleLinkModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; const { setToastAlert } = useToast(); const { reset, watch, control } = useForm({ defaultValues, }); useEffect(() => { if (module) reset({ ...module, members_list: module.members_list ?? module.members_detail?.map((m) => m.id), }); }, [module, reset]); const groupedIssues = { backlog: [], unstarted: [], started: [], cancelled: [], completed: [], ...groupBy(moduleIssues ?? [], "issue_detail.state_detail.group"), }; const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !module) return; modulesService .patchModule(workspaceSlug as string, projectId as string, module.id, data) .then((res) => { console.log(res); mutate(projectId && MODULE_LIST(projectId as string), (prevData) => (prevData ?? []).map((module) => { if (module.id === moduleId) return { ...module, ...data }; return module; }) ); }) .catch((e) => { console.log(e); }); }; return ( <> setModuleLinkModal(false)} module={module} />
{module ? ( <>

{module.name}

Progress

{groupedIssues.completed.length}/{moduleIssues?.length}

Start date

( { submitChanges({ start_date: e.target.value }); onChange(e.target.value); }} className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} />

End date

( { submitChanges({ target_date: e.target.value }); onChange(e.target.value); }} className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" /> )} />

Links

{module.link_module && module.link_module.length > 0 ? module.link_module.map((link) => (
{link.title}

Added {timeAgo(link.created_at)} ago by{" "} {link.created_by_detail.email}

)) : null}
) : (
)}
); }; export default ModuleDetailSidebar;