// react import React, { useState } from "react"; // next import Link from "next/link"; import { useRouter } from "next/router"; // swr import useSWR, { mutate } from "swr"; // react-beautiful-dnd import { DropResult } from "react-beautiful-dnd"; // layouots import AppLayout from "layouts/app-layout"; // components import CyclesListView from "components/project/cycles/list-view"; import CyclesBoardView from "components/project/cycles/board-view"; // services import issuesServices from "lib/services/issues.service"; import cycleServices from "lib/services/cycles.service"; import projectService from "lib/services/project.service"; // hooks import useUser from "lib/hooks/useUser"; import useIssuesFilter from "lib/hooks/useIssuesFilter"; import useIssuesProperties from "lib/hooks/useIssuesProperties"; // headless ui import { Popover, Transition } from "@headlessui/react"; // ui import { BreadcrumbItem, Breadcrumbs, CustomMenu } from "ui"; // icons import { Squares2X2Icon } from "@heroicons/react/20/solid"; import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react/24/outline"; // types import { CycleIssueResponse, IIssue, IssueResponse, NestedKeyOf, Properties, SelectIssue, SelectSprintType, } from "types"; // fetch-keys import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys"; // constants import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal"; import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal"; import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion"; import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; const groupByOptions: Array<{ name: string; key: NestedKeyOf | null }> = [ { name: "State", key: "state_detail.name" }, { name: "Priority", key: "priority" }, { name: "Created By", key: "created_by" }, { name: "None", key: null }, ]; const orderByOptions: Array<{ name: string; key: NestedKeyOf }> = [ { name: "Last created", key: "created_at" }, { name: "Last updated", key: "updated_at" }, { name: "Priority", key: "priority" }, ]; const filterIssueOptions: Array<{ name: string; key: "activeIssue" | "backlogIssue" | null; }> = [ { name: "All", key: null, }, { name: "Active Issues", key: "activeIssue", }, { name: "Backlog Issues", key: "backlogIssue", }, ]; type Props = {}; const SingleCycle: React.FC = () => { const [isIssueModalOpen, setIsIssueModalOpen] = useState(false); const [selectedCycle, setSelectedCycle] = useState(); const [selectedIssues, setSelectedIssues] = useState(); const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const [deleteIssue, setDeleteIssue] = useState(undefined); const { activeWorkspace, activeProject, cycles, issues } = useUser(); const router = useRouter(); const { cycleId } = router.query; const [properties, setProperties] = useIssuesProperties( activeWorkspace?.slug, activeProject?.id as string ); const { data: cycleIssues } = useSWR( activeWorkspace && activeProject && cycleId ? CYCLE_ISSUES(cycleId as string) : null, activeWorkspace && activeProject && cycleId ? () => cycleServices.getCycleIssues(activeWorkspace?.slug, activeProject?.id, cycleId as string) : null ); const cycleIssuesArray = cycleIssues?.map((issue) => { return { bridge: issue.id, ...issue.issue_details }; }); const { data: members } = useSWR( activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null, activeWorkspace && activeProject ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id) : null, { onErrorRetry(err, _, __, revalidate, revalidateOpts) { if (err?.status === 403) return; setTimeout(() => revalidate(revalidateOpts), 5000); }, } ); const partialUpdateIssue = (formData: Partial, issueId: string) => { if (!activeWorkspace || !activeProject) return; issuesServices .patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData) .then((response) => { mutate(CYCLE_ISSUES(cycleId as string)); }) .catch((error) => { console.log(error); }); }; const { issueView, setIssueView, groupByProperty, setGroupByProperty, groupedByIssues, setOrderBy, setFilterIssue, orderBy, filterIssue, } = useIssuesFilter(cycleIssuesArray ?? []); const openCreateIssueModal = ( issue?: IIssue, actionType: "create" | "edit" | "delete" = "create" ) => { const cycle = cycles?.find((cycle) => cycle.id === cycleId); if (cycle) { setSelectedCycle({ ...cycle, actionType: "create-issue", }); if (issue) setSelectedIssues({ ...issue, actionType }); setIsIssueModalOpen(true); } }; const openIssuesListModal = () => { setCycleIssuesListModal(true); }; const handleDragEnd = (result: DropResult) => { if (!result.destination) return; const { source, destination } = result; if (source.droppableId === destination.droppableId) return; if (activeWorkspace && activeProject) { // remove issue from the source cycle mutate( CYCLE_ISSUES(source.droppableId), (prevData) => prevData?.filter((p) => p.id !== result.draggableId.split(",")[0]), false ); // add issue to the destination cycle mutate(CYCLE_ISSUES(destination.droppableId)); issuesServices .removeIssueFromCycle( activeWorkspace.slug, activeProject.id, source.droppableId, result.draggableId.split(",")[0] ) .then((res) => { issuesServices .addIssueToCycle(activeWorkspace.slug, activeProject.id, destination.droppableId, { issue: result.draggableId.split(",")[1], }) .then((res) => { console.log(res); }) .catch((e) => { console.log(e); }); }) .catch((e) => { console.log(e); }); } // console.log(result); }; const removeIssueFromCycle = (bridgeId: string) => { if (activeWorkspace && activeProject) { mutate( CYCLE_ISSUES(cycleId as string), (prevData) => prevData?.filter((p) => p.id !== bridgeId), false ); issuesServices .removeIssueFromCycle(activeWorkspace.slug, activeProject.id, cycleId as string, bridgeId) .then((res) => { console.log(res); }) .catch((e) => { console.log(e); }); } }; return ( <> setCycleIssuesListModal(false)} issues={issues} cycleId={cycleId as string} /> setDeleteIssue(undefined)} isOpen={!!deleteIssue} data={issues?.results.find((issue) => issue.id === deleteIssue)} /> } left={ {cycles?.find((c) => c.id === cycleId)?.name} } className="ml-1.5" width="auto" > {cycles?.map((cycle) => ( {cycle.name} ))} } right={
{({ open }) => ( <> View

Group by

option.key === groupByProperty) ?.name ?? "Select" } width="auto" > {groupByOptions.map((option) => ( setGroupByProperty(option.key)} > {option.name} ))}

Order by

option.key === orderBy)?.name ?? "Select" } width="auto" > {orderByOptions.map((option) => groupByProperty === "priority" && option.key === "priority" ? null : ( setOrderBy(option.key)} > {option.name} ) )}

Issue type

option.key === filterIssue) ?.name ?? "Select" } width="auto" > {filterIssueOptions.map((option) => ( setFilterIssue(option.key)} > {option.name} ))}

Properties

{Object.keys(properties).map((key) => ( ))}
)}
} > {issueView === "list" ? ( ) : (
)}
); }; export default SingleCycle;