From 83a0c8163f107334cffb4364b078dba73355cf06 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 18:37:26 +0530
Subject: [PATCH] dev: redirection implementation on gantt blocks (#1104)

---
 .../cycles/cycles-list-gantt-chart.tsx        | 21 ++++++++++-----
 apps/app/components/cycles/gantt-chart.tsx    | 24 +++++++++--------
 .../components/gantt-chart/blocks/index.tsx   |  4 +--
 apps/app/components/issues/gantt-chart.tsx    | 23 ++++++++--------
 apps/app/components/modules/gantt-chart.tsx   | 24 +++++++++--------
 .../modules/modules-list-gantt-chart.tsx      | 27 ++++++++++++-------
 apps/app/components/views/gantt-chart.tsx     | 24 +++++++++--------
 7 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index ad298e79d7..9c8e922d29 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -10,6 +12,9 @@ type Props = {
 };
 
 export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -23,12 +28,14 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 04de7afb7f..44abc392bf 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 113ca8964a..98284cce8e 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -39,7 +39,7 @@ export const GanttChartBlocks: FC<{
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                        {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
@@ -54,7 +54,7 @@ export const GanttChartBlocks: FC<{
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                        {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index b35d4a7499..8fce3e96f7 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
-
+// next imports
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index 0d11da2c06..fa92964c1a 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index edff17a952..cb1c7bc075 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -12,6 +14,9 @@ type Props = {
 };
 
 export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -27,15 +32,17 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index 461f468357..dc81f70fa7 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date