feat: draft tab and cycle sidebar update

This commit is contained in:
Anmol Singh Bhatia 2023-03-01 11:58:30 +05:30
parent 7ab6eb7b48
commit 8a941d0d14
3 changed files with 97 additions and 42 deletions

View file

@ -34,6 +34,8 @@ import {
PROJECT_ISSUES_LIST,
PROJECT_DETAILS,
CYCLE_DETAILS,
CYCLE_COMPLETE_LIST,
CYCLE_CURRENT_AND_UPCOMING_LIST,
} from "constants/fetch-keys";
const SingleCycle: React.FC<UserAuth> = (props) => {
@ -78,6 +80,40 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
: null
);
const { data: currentAndUpcomingCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
workspaceSlug && projectId
? () =>
cycleServices.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
: null
);
const { data: completedCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cycleServices.getCompletedCycles(workspaceSlug as string, projectId as string)
: null
);
const checkForInProgress = currentAndUpcomingCycles?.current_cycle?.filter(
(c) => c.id === cycleDetails?.id
);
const checkForUpcoming = currentAndUpcomingCycles?.upcoming_cycle?.filter(
(c) => c.id === cycleDetails?.id
);
const checkForInCompleted = completedCycles?.completed_cycles?.filter(
(c) => c.id === cycleDetails?.id
);
const cycleStatus =
checkForInCompleted && checkForInCompleted.length > 0
? "completed"
: checkForInProgress && checkForInProgress.length > 0
? "current"
: checkForUpcoming && checkForUpcoming.length > 0
? "upcoming"
: "draft";
const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
workspaceSlug && projectId && cycleId
@ -218,6 +254,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
</div>
)}
<CycleDetailsSidebar
cycleStatus={cycleStatus}
issues={cycleIssuesArray ?? []}
cycle={cycleDetails}
isOpen={cycleSidebar}

View file

@ -25,7 +25,11 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { SelectCycleType } from "types";
import type { NextPage, GetServerSidePropsContext } from "next";
// fetching keys
import { CYCLE_CURRENT_AND_UPCOMING_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
import {
CYCLE_CURRENT_AND_UPCOMING_LIST,
CYCLE_DRAFT_LIST,
PROJECT_DETAILS,
} from "constants/fetch-keys";
const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
() => import("components/cycles").then((a) => a.CompletedCyclesList),
@ -54,6 +58,13 @@ const ProjectCycles: NextPage = () => {
: null
);
const { data: draftCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
: null
);
const { data: currentAndUpcomingCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
workspaceSlug && projectId
@ -112,22 +123,29 @@ const ProjectCycles: NextPage = () => {
<Tab.Group>
<Tab.List
as="div"
className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
className="flex justify-between items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
`w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Upcoming
</Tab>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
`w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Completed
</Tab>
<Tab
className={({ selected }) =>
` w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Draft
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5">
@ -145,6 +163,14 @@ const ProjectCycles: NextPage = () => {
/>
</Tab.Panel>
</Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5">
<CyclesList
cycles={draftCycles?.draft_cycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle}
type="upcoming"
/>
</Tab.Panel>
</Tab.Group>
</div>
</div>