From 186b5b55000d39b9a4e34430cea49e54c7b3a56b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 18:08:47 +0530
Subject: [PATCH] feat: cycle gantt view option added (#1083)

---
 .../components/cycles/completed-cycles.tsx    | 13 +++++--
 apps/app/components/cycles/cycles-view.tsx    | 35 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/cycles/completed-cycles.tsx b/apps/app/components/cycles/completed-cycles.tsx
index 761eb8f3a..738b6c5fb 100644
--- a/apps/app/components/cycles/completed-cycles.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@@ -74,7 +74,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
               />
               <span>Completed cycles are not editable.</span>
             </div>
-            {cycleView === "list" ? (
+            {cycleView === "list" && (
               <div>
                 {completedCycles.completed_cycles.map((cycle) => (
                   <div className="hover:bg-brand-surface-2">
@@ -90,7 +90,8 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
                   </div>
                 ))}
               </div>
-            ) : (
+            )}
+            {cycleView === "board" && (
               <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
                 {completedCycles.completed_cycles.map((cycle) => (
                   <SingleCycleCard
@@ -103,6 +104,14 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
                 ))}
               </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>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 35677364d..da5ba6aee 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -15,7 +15,7 @@ import {
 // ui
 import { EmptyState, Loader } from "components/ui";
 // 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";
 // types
 import {
@@ -132,6 +132,15 @@ export const CyclesView: React.FC<Props> = ({
               >
                 <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
               </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>
@@ -153,6 +162,14 @@ export const CyclesView: React.FC<Props> = ({
                 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 as="div" className="mt-7 space-y-5">
             {currentAndUpcomingCycles?.current_cycle?.[0] ? (
@@ -183,6 +200,14 @@ export const CyclesView: React.FC<Props> = ({
                 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 as="div" className="mt-7 space-y-5">
             <CompletedCycles
@@ -208,6 +233,14 @@ export const CyclesView: React.FC<Props> = ({
                 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.Panels>
       </Tab.Group>