style: cycle new ui (#1052)
* style: cycles new ui * chore: added progress bar for the high priority issues * fix: build fix * style: active cycle details, theming , padding and layout * style: cycle list and card styling * style: cycle card * fix: tooltip text overflow * fix: cycle mutation fix * style: cycle list and card view improvement, chore: code refactor * feat: view cycle button * style: cycle list and board view improvement * style: responsiveness added * feat: active cycle stats component, chore: code refactor * fix: active cycle divider fix, style: stats font color * fix: tooltip fix --------- Co-authored-by: kunal_17 <kunalvish17360@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
c49b0d6151
commit
559b0cc9c8
22 changed files with 1980 additions and 228 deletions
|
|
@ -1,23 +1,18 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Tab } from "@headlessui/react";
|
||||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// services
|
||||
import cycleService from "services/cycles.service";
|
||||
import projectService from "services/project.service";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
|
||||
import { CreateUpdateCycleModal, CyclesView } from "components/cycles";
|
||||
// ui
|
||||
import { Loader, PrimaryButton } from "components/ui";
|
||||
import { PrimaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
|
|
@ -29,25 +24,13 @@ import {
|
|||
CYCLE_CURRENT_AND_UPCOMING_LIST,
|
||||
CYCLE_DRAFT_LIST,
|
||||
PROJECT_DETAILS,
|
||||
CYCLE_DETAILS,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
|
||||
() => import("components/cycles").then((a) => a.CompletedCyclesList),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<Loader className="mb-5">
|
||||
<Loader.Item height="12rem" width="100%" />
|
||||
</Loader>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
const ProjectCycles: NextPage = () => {
|
||||
const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
|
||||
const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
|
||||
|
||||
const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "Upcoming");
|
||||
const [cycleView, setCycleView] = useState<string>("list");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
|
@ -73,6 +56,13 @@ const ProjectCycles: NextPage = () => {
|
|||
: null
|
||||
);
|
||||
|
||||
const { data: cyclesCompleteList } = useSWR(
|
||||
workspaceSlug && projectId ? CYCLE_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => cycleService.getCycles(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (createUpdateCycleModal) return;
|
||||
const timer = setTimeout(() => {
|
||||
|
|
@ -83,13 +73,16 @@ const ProjectCycles: NextPage = () => {
|
|||
|
||||
const currentTabValue = (tab: string | null) => {
|
||||
switch (tab) {
|
||||
case "Upcoming":
|
||||
case "All":
|
||||
return 0;
|
||||
case "Completed":
|
||||
case "Active":
|
||||
return 1;
|
||||
case "Drafts":
|
||||
case "Upcoming":
|
||||
return 2;
|
||||
|
||||
case "Completed":
|
||||
return 3;
|
||||
case "Drafts":
|
||||
return 4;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -126,101 +119,16 @@ const ProjectCycles: NextPage = () => {
|
|||
/>
|
||||
<div className="space-y-8 p-8">
|
||||
<div className="flex flex-col gap-5">
|
||||
{currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
|
||||
<h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>
|
||||
)}
|
||||
<div className="space-y-5">
|
||||
<CyclesList
|
||||
cycles={currentAndUpcomingCycles?.current_cycle}
|
||||
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
|
||||
setSelectedCycle={setSelectedCycle}
|
||||
type="current"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-5">
|
||||
<h3 className="text-3xl font-semibold text-brand-base">Other Cycles</h3>
|
||||
<div>
|
||||
<Tab.Group
|
||||
defaultIndex={currentTabValue(cycleTab)}
|
||||
onChange={(i) => {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return setCycleTab("Upcoming");
|
||||
case 1:
|
||||
return setCycleTab("Completed");
|
||||
case 2:
|
||||
return setCycleTab("Drafts");
|
||||
|
||||
default:
|
||||
return setCycleTab("Upcoming");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="flex items-center justify-start gap-4 text-base font-medium"
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Upcoming
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Completed
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Drafts
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel as="div" className="mt-8 space-y-5">
|
||||
<CyclesList
|
||||
cycles={currentAndUpcomingCycles?.upcoming_cycle}
|
||||
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
|
||||
setSelectedCycle={setSelectedCycle}
|
||||
type="upcoming"
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="mt-8 space-y-5">
|
||||
<CompletedCyclesList
|
||||
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
|
||||
setSelectedCycle={setSelectedCycle}
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="mt-8 space-y-5">
|
||||
<CyclesList
|
||||
cycles={draftCycles?.draft_cycles}
|
||||
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
|
||||
setSelectedCycle={setSelectedCycle}
|
||||
type="draft"
|
||||
/>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
|
||||
<CyclesView
|
||||
cycleView={cycleView}
|
||||
setCycleView={setCycleView}
|
||||
setSelectedCycle={setSelectedCycle}
|
||||
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
|
||||
cyclesCompleteList={cyclesCompleteList}
|
||||
currentAndUpcomingCycles={currentAndUpcomingCycles}
|
||||
draftCycles={draftCycles}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue