thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

dev: redirection implementation on gantt blocks (#1104)

Browse Source
This commit is contained in:
guru_sainath 2023-05-21 18:37:26 +05:30 committed by GitHub
parent c8c195eab4
commit 83a0c8163f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/app/components/cycles/cycles-list-gantt-chart.tsx
View File

@ -1,5 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link";
import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// types // types
@ -10,6 +12,9 @@ type Props = {
}; };
export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => { export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// rendering issues on gantt sidebar // rendering issues on gantt sidebar
const GanttSidebarBlockView = ({ data }: any) => ( const GanttSidebarBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1"> <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 // rendering issues on gantt card
const GanttBlockView = ({ data }: { data: ICycle }) => ( const GanttBlockView = ({ data }: { data: ICycle }) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
<div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} /> <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden"> <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
{data?.name} <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date

24
apps/app/components/cycles/gantt-chart.tsx
View File

@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// hooks // hooks
@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
<div <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
className="flex-shrink-0 w-[4px] h-full" <div
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} 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 className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date

4
apps/app/components/gantt-chart/blocks/index.tsx
View File

@ -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="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"> <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>
</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="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"> <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> </div>
</div> </div>

23
apps/app/components/issues/gantt-chart.tsx
View File

@ -1,8 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// hooks // hooks
@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
<div <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
className="flex-shrink-0 w-[4px] h-full" <div
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} 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 className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date

24
apps/app/components/modules/gantt-chart.tsx
View File

@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// hooks // hooks
@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
<div <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
className="flex-shrink-0 w-[4px] h-full" <div
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} 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 className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date

27
apps/app/components/modules/modules-list-gantt-chart.tsx
View File

@ -1,5 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link";
import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// types // types
@ -12,6 +14,9 @@ type Props = {
}; };
export const ModulesListGanttChartView: FC<Props> = ({ modules }) => { export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// rendering issues on gantt sidebar // rendering issues on gantt sidebar
const GanttSidebarBlockView = ({ data }: any) => ( const GanttSidebarBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1"> <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 // rendering issues on gantt card
const GanttBlockView = ({ data }: { data: IModule }) => ( const GanttBlockView = ({ data }: { data: IModule }) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
<div <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
className="flex-shrink-0 w-[4px] h-full" <div
style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }} 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 className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date

24
apps/app/components/views/gantt-chart.tsx
View File

@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
// next imports
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
import { GanttChartRoot } from "components/gantt-chart"; import { GanttChartRoot } from "components/gantt-chart";
// hooks // hooks
@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex items-center w-full h-full overflow-hidden shadow-sm"> <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
<div <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
className="flex-shrink-0 w-[4px] h-full" <div
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} 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 className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
</div> {data?.name}
</div> </div>
</a>
</Link>
); );
// handle gantt issue start date and target date // handle gantt issue start date and target date