feat: cycle gantt view option added (#1083)

This commit is contained in:
Anmol Singh Bhatia 2023-05-19 18:08:47 +05:30 committed by GitHub
parent f2c8bdba34
commit 186b5b5500
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 3 deletions

View File

@ -74,7 +74,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
/> />
<span>Completed cycles are not editable.</span> <span>Completed cycles are not editable.</span>
</div> </div>
{cycleView === "list" ? ( {cycleView === "list" && (
<div> <div>
{completedCycles.completed_cycles.map((cycle) => ( {completedCycles.completed_cycles.map((cycle) => (
<div className="hover:bg-brand-surface-2"> <div className="hover:bg-brand-surface-2">
@ -90,7 +90,8 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
</div> </div>
))} ))}
</div> </div>
) : ( )}
{cycleView === "board" && (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{completedCycles.completed_cycles.map((cycle) => ( {completedCycles.completed_cycles.map((cycle) => (
<SingleCycleCard <SingleCycleCard
@ -103,6 +104,14 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
))} ))}
</div> </div>
)} )}
{cycleView === "gantt" && (
<EmptyState
type="cycle"
title="Create New Cycle"
description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
imgURL={emptyCycle}
/>
)}
</div> </div>
) : ( ) : (
<EmptyState <EmptyState

View File

@ -15,7 +15,7 @@ import {
// ui // ui
import { EmptyState, Loader } from "components/ui"; import { EmptyState, Loader } from "components/ui";
// icons // icons
import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import { ChartBarIcon, ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
import emptyCycle from "public/empty-state/empty-cycle.svg"; import emptyCycle from "public/empty-state/empty-cycle.svg";
// types // types
import { import {
@ -132,6 +132,15 @@ export const CyclesView: React.FC<Props> = ({
> >
<Squares2X2Icon className="h-4 w-4 text-brand-secondary" /> <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
</button> </button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
cycleView === "gantt" ? "bg-brand-surface-2" : ""
} hover:bg-brand-surface-2`}
onClick={() => setCycleView("gantt")}
>
<ChartBarIcon className="h-4 w-4 text-brand-secondary" />
</button>
</div> </div>
)} )}
</div> </div>
@ -153,6 +162,14 @@ export const CyclesView: React.FC<Props> = ({
type="current" type="current"
/> />
)} )}
{cycleView === "gantt" && (
<EmptyState
type="cycle"
title="Create New Cycle"
description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
imgURL={emptyCycle}
/>
)}
</Tab.Panel> </Tab.Panel>
<Tab.Panel as="div" className="mt-7 space-y-5"> <Tab.Panel as="div" className="mt-7 space-y-5">
{currentAndUpcomingCycles?.current_cycle?.[0] ? ( {currentAndUpcomingCycles?.current_cycle?.[0] ? (
@ -183,6 +200,14 @@ export const CyclesView: React.FC<Props> = ({
type="upcoming" type="upcoming"
/> />
)} )}
{cycleView === "gantt" && (
<EmptyState
type="cycle"
title="Create New Cycle"
description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
imgURL={emptyCycle}
/>
)}
</Tab.Panel> </Tab.Panel>
<Tab.Panel as="div" className="mt-7 space-y-5"> <Tab.Panel as="div" className="mt-7 space-y-5">
<CompletedCycles <CompletedCycles
@ -208,6 +233,14 @@ export const CyclesView: React.FC<Props> = ({
type="draft" type="draft"
/> />
)} )}
{cycleView === "gantt" && (
<EmptyState
type="cycle"
title="Create New Cycle"
description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
imgURL={emptyCycle}
/>
)}
</Tab.Panel> </Tab.Panel>
</Tab.Panels> </Tab.Panels>
</Tab.Group> </Tab.Group>