From 0aa93739efb4d330630fe474533d73e42ac95781 Mon Sep 17 00:00:00 2001 From: ody4 Date: Tue, 12 Jul 2022 19:33:26 +0200 Subject: [PATCH 01/42] test modifications --- src/components/task-list/task-list-header.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 4e8cdb66b..332303227 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -59,6 +59,14 @@ export const TaskListHeaderDefault: React.FC<{ >  To +
+  By +
); From bf56cb05b71db79683fae9e669d33d3f4e63d718 Mon Sep 17 00:00:00 2001 From: ody4 Date: Tue, 12 Jul 2022 23:06:11 +0200 Subject: [PATCH 02/42] test modifications --- src/components/other/tooltip.tsx | 3 +++ src/components/task-list/task-list-header.tsx | 8 ++++---- src/components/task-list/task-list-table.tsx | 9 +++++++++ src/types/public-types.ts | 2 ++ 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/other/tooltip.tsx b/src/components/other/tooltip.tsx index 7542a14eb..9d2849d8e 100644 --- a/src/components/other/tooltip.tsx +++ b/src/components/other/tooltip.tsx @@ -140,6 +140,9 @@ export const StandardTooltipContent: React.FC<{

{!!task.progress && `Progress: ${task.progress} %`}

+

+ {`Description: ${task.description}`} +

); }; diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 332303227..59e271e40 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -27,7 +27,7 @@ export const TaskListHeaderDefault: React.FC<{ minWidth: rowWidth, }} > -  Name +  Nom
-  From +  Début
-  To +  Fin
-  By +  Assigné à
diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index b165f6002..bcd1a2fce 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -107,6 +107,15 @@ export const TaskListTableDefault: React.FC<{ >  {toLocaleDateString(t.end, dateTimeOptions)} +
+  {t.assignedUser} +
); })} diff --git a/src/types/public-types.ts b/src/types/public-types.ts index f4c641a6b..cd09b11c1 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -30,6 +30,8 @@ export interface Task { dependencies?: string[]; hideChildren?: boolean; displayOrder?: number; + assignedUser?:string; + description?:string; } export interface EventOption { From 9beec69a229e65248851aaf16a9b3edf1a182803 Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 13 Jul 2022 00:18:10 +0200 Subject: [PATCH 03/42] test modifications --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index aeca7dc81..46dbdfe5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gantt-task-react", - "version": "0.3.8", + "version": "0.3.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "gantt-task-react", - "version": "0.3.8", + "version": "0.3.9", "license": "MIT", "devDependencies": { "@testing-library/jest-dom": "^5.16.4", From 6f1550bc0a92dd6152288f29526e87976b6f8865 Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 13 Jul 2022 02:02:12 +0200 Subject: [PATCH 04/42] modify package --- src/components/task-list/task-list-table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index bcd1a2fce..d6dd21e22 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -114,7 +114,7 @@ export const TaskListTableDefault: React.FC<{ maxWidth: rowWidth, }} > -  {t.assignedUser} +  {t.assignedUser}{toLocaleDateString(t.end, dateTimeOptions)} kkk ); From 2133b5d74d73cc7b2fd054794ea57ba191d09283 Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 13 Jul 2022 02:10:03 +0200 Subject: [PATCH 05/42] modify package --- src/components/task-list/task-list-table.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index d6dd21e22..adcfa5914 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -114,8 +114,9 @@ export const TaskListTableDefault: React.FC<{ maxWidth: rowWidth, }} > -  {t.assignedUser}{toLocaleDateString(t.end, dateTimeOptions)} kkk +  assignedTo + ); })} From 4db481958c7e5d1ba556920794331044acf7fb5f Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 13 Jul 2022 02:18:21 +0200 Subject: [PATCH 06/42] modify package --- src/components/task-list/task-list-table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index adcfa5914..1d194e77a 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -105,7 +105,7 @@ export const TaskListTableDefault: React.FC<{ maxWidth: rowWidth, }} > -  {toLocaleDateString(t.end, dateTimeOptions)} +  {"toLocaleDateString(t.end, dateTimeOptions)"}
-  assignedTo +   {`assignedTo: ${t.assignedUser}`}
From e64c7592d0eb406f6657ece11e7dbc0d03bf8351 Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 13 Jul 2022 02:30:21 +0200 Subject: [PATCH 07/42] modify package --- src/components/task-list/task-list-table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index 1d194e77a..e121571c8 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -105,7 +105,7 @@ export const TaskListTableDefault: React.FC<{ maxWidth: rowWidth, }} > -  {"toLocaleDateString(t.end, dateTimeOptions)"} +  {toLocaleDateString(t.end, dateTimeOptions)}
-   {`assignedTo: ${t.assignedUser}`} +   {t.assignedUser}
From ea5fda062d1616f90b450d79e7c523918f0ea2d1 Mon Sep 17 00:00:00 2001 From: ody4 Date: Tue, 19 Jul 2022 23:38:19 +0200 Subject: [PATCH 08/42] add new columns --- src/components/gantt/gantt.tsx | 10 + src/components/task-list/task-list-header.tsx | 153 ++++++++---- src/components/task-list/task-list-table.tsx | 234 +++++++++++------- src/components/task-list/task-list.tsx | 9 +- src/types/public-types.ts | 23 +- 5 files changed, 293 insertions(+), 136 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index b90483f3d..9dd80933d 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -24,6 +24,14 @@ import { HorizontalScroll } from "../other/horizontal-scroll"; import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper"; import styles from "./gantt.module.css"; +const COLUMNLIST = [ + { columnName: 'Code', isVisible: true, columnWithArrow: true, toShow: (task:Task) => {return task.id} }, + { columnName: 'Nom', isVisible: true, toShow: (task:Task) => {return task.name} }, + { columnName: 'Début', isVisible: true, isDate:true, toShow: (task:Task) => {return task.start} }, + { columnName: 'Fin', isVisible: true, isDate:true, toShow: (task:Task) => {return task.end} }, + { columnName: 'Assigné à', isVisible: true, toShow: (task:Task) => {return task.assignedUser} }, +]; + export const Gantt: React.FunctionComponent = ({ tasks, headerHeight = 50, @@ -58,6 +66,7 @@ export const Gantt: React.FunctionComponent = ({ TooltipContent = StandardTooltipContent, TaskListHeader = TaskListHeaderDefault, TaskListTable = TaskListTableDefault, + columnList = COLUMNLIST, onDateChange, onProgressChange, onDoubleClick, @@ -444,6 +453,7 @@ export const Gantt: React.FunctionComponent = ({ horizontalContainerClass: styles.horizontalContainer, selectedTask, taskListRef, + columnList, setSelectedTask: handleSelectedTask, onExpanderClick: handleExpanderClick, TaskListHeader, diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 59e271e40..7759370e4 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { ColumnVisibility } from "../../types/public-types"; import styles from "./task-list-header.module.css"; export const TaskListHeaderDefault: React.FC<{ @@ -6,7 +7,10 @@ export const TaskListHeaderDefault: React.FC<{ rowWidth: string; fontFamily: string; fontSize: string; -}> = ({ headerHeight, fontFamily, fontSize, rowWidth }) => { + columnList: ColumnVisibility[]; +}> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList}) => { + + return (
-
-  Nom -
-
-
-  Début -
-
-
-  Fin -
-
-  Assigné à -
+ {columnList.map(columnVisibility => { + if(columnVisibility.isVisible === true) { + return ( +
+  {columnVisibility.columnName} +
+ ) + } + else { + return(
); + } + })}
+ + //
+ // {columnList.map(columnVisibility => { + // return ( + //
+ //  Nom + //
+ //
+ // ); + // })} + //
+ + //
+ //
+ //
+ //  Nom + //
+ //
+ //
+ //  Début + //
+ //
+ //
+ //  Fin + //
+ //
+ //  Assigné à + //
+ //
+ //
); }; diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index e121571c8..117183698 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -1,19 +1,19 @@ import React, { useMemo } from "react"; import styles from "./task-list-table.module.css"; -import { Task } from "../../types/public-types"; +import { ColumnVisibility, Task } from "../../types/public-types"; const localeDateStringCache = {}; const toLocaleDateStringFactory = (locale: string) => - (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => { - const key = date.toString(); - let lds = localeDateStringCache[key]; - if (!lds) { - lds = date.toLocaleDateString(locale, dateTimeOptions); - localeDateStringCache[key] = lds; - } - return lds; - }; + (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => { + const key = date.toString(); + let lds = localeDateStringCache[key]; + if (!lds) { + lds = date.toLocaleDateString(locale, dateTimeOptions); + localeDateStringCache[key] = lds; + } + return lds; + }; const dateTimeOptions: Intl.DateTimeFormatOptions = { weekday: "short", year: "numeric", @@ -21,6 +21,7 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = { day: "numeric", }; + export const TaskListTableDefault: React.FC<{ rowHeight: number; rowWidth: string; @@ -29,6 +30,7 @@ export const TaskListTableDefault: React.FC<{ locale: string; tasks: Task[]; selectedTaskId: string; + columnList: ColumnVisibility[]; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; }> = ({ @@ -38,88 +40,148 @@ export const TaskListTableDefault: React.FC<{ fontFamily, fontSize, locale, + columnList, onExpanderClick, }) => { - const toLocaleDateString = useMemo( - () => toLocaleDateStringFactory(locale), - [locale] - ); + const toLocaleDateString = useMemo( + () => toLocaleDateStringFactory(locale), + [locale] + ); - return ( -
- {tasks.map(t => { - let expanderSymbol = ""; - if (t.hideChildren === false) { - expanderSymbol = "▼"; - } else if (t.hideChildren === true) { - expanderSymbol = "▶"; - } + return ( +
+ {tasks.map(t => { + let expanderSymbol = ""; + if (t.hideChildren === false) { + expanderSymbol = "▼"; + } else if (t.hideChildren === true) { + expanderSymbol = "▶"; + } - return ( -
+ return (
-
-
{ + if (columnVisibility.isVisible === true) { + if (columnVisibility.columnWithArrow === true) { + return ( +
+ +
+
onExpanderClick(t)} + > + {expanderSymbol} +
+
{ columnVisibility.toShow(t)?.toString() }
+
+ +
+ ); + } else { + return ( +
+  { columnVisibility.isDate === true ? toLocaleDateString((columnVisibility.toShow(t) as Date), dateTimeOptions) : columnVisibility.toShow(t)} +
+ ); } - onClick={() => onExpanderClick(t)} - > - {expanderSymbol} -
-
{t.name}
-
-
-
-  {toLocaleDateString(t.start, dateTimeOptions)} -
-
-  {toLocaleDateString(t.end, dateTimeOptions)} -
-
-   {t.assignedUser} + } + else { + return (
); + } + })}
+ -
- ); - })} -
- ); -}; + + //
+ + //
+ //
+ //
onExpanderClick(t)} + // > + // {expanderSymbol} + //
+ //
{t.name}
+ //
+ //
+ //
+ //  {toLocaleDateString(t.start, dateTimeOptions)} + //
+ //
+ //  {toLocaleDateString(t.end, dateTimeOptions)} + //
+ //
+ //   {t.assignedUser} + //
+ + //
+ ); + + + })} +
+ ); + }; diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx index bbfed4365..6bb38edb8 100644 --- a/src/components/task-list/task-list.tsx +++ b/src/components/task-list/task-list.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useRef } from "react"; import { BarTask } from "../../types/bar-task"; -import { Task } from "../../types/public-types"; +import { Task, ColumnVisibility } from "../../types/public-types"; + export type TaskListProps = { headerHeight: number; @@ -17,11 +18,13 @@ export type TaskListProps = { selectedTask: BarTask | undefined; setSelectedTask: (task: string) => void; onExpanderClick: (task: Task) => void; + columnList: ColumnVisibility[]; TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string; + columnList: ColumnVisibility[]; }>; TaskListTable: React.FC<{ rowHeight: number; @@ -31,6 +34,7 @@ export type TaskListProps = { locale: string; tasks: Task[]; selectedTaskId: string; + columnList: ColumnVisibility[]; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; }>; @@ -52,6 +56,7 @@ export const TaskList: React.FC = ({ taskListRef, horizontalContainerClass, TaskListHeader, + columnList, TaskListTable, }) => { const horizontalContainerRef = useRef(null); @@ -66,6 +71,7 @@ export const TaskList: React.FC = ({ fontFamily, fontSize, rowWidth, + columnList, }; const selectedTaskId = selectedTask ? selectedTask.id : ""; const tableProps = { @@ -76,6 +82,7 @@ export const TaskList: React.FC = ({ tasks, locale, selectedTaskId: selectedTaskId, + columnList, setSelectedTask, onExpanderClick, }; diff --git a/src/types/public-types.ts b/src/types/public-types.ts index cd09b11c1..c91847154 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -30,8 +30,18 @@ export interface Task { dependencies?: string[]; hideChildren?: boolean; displayOrder?: number; - assignedUser?:string; - description?:string; + assignedUser?: string; + approver?: string; + informed?: string; + duration?: number; + description?: string; + parent?: string; + estimatedAmount?: number; + spentAmount?: number; + code?: string; + createdBy?: string; + isCompleted?: boolean; + } export interface EventOption { @@ -141,6 +151,15 @@ export interface StylingOption { }>; } +export type ColumnVisibility = { + columnName: string; + isVisible: boolean; + isDate?: boolean; + readonly toShow:(task: Task) => string | undefined | Date; + columnWithArrow?: boolean; +}; + export interface GanttProps extends EventOption, DisplayOption, StylingOption { tasks: Task[]; + columnList: ColumnVisibility[]; } From 21589aeee853730ea8e581f0faf8b5a5b8ff74fc Mon Sep 17 00:00:00 2001 From: ody4 Date: Wed, 20 Jul 2022 01:56:06 +0200 Subject: [PATCH 09/42] add new columns --- src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.tsx b/src/index.tsx index 47e8b63a4..b209a6035 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,4 +6,5 @@ export type { StylingOption, DisplayOption, EventOption, + ColumnVisibility, } from "./types/public-types"; From 688c7753ba2f08e7044709c1117297681ccad991 Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 15:54:55 -0600 Subject: [PATCH 10/42] styling side bar --- src/components/task-list/task-list-header.tsx | 94 ++----------------- src/components/task-list/task-list-table.tsx | 8 +- src/types/public-types.ts | 2 + 3 files changed, 12 insertions(+), 92 deletions(-) diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 7759370e4..2f867f57a 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -8,9 +8,8 @@ export const TaskListHeaderDefault: React.FC<{ fontFamily: string; fontSize: string; columnList: ColumnVisibility[]; -}> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList}) => { - - + headerTitle: string; +}> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList, headerTitle}) => { return (
+
+ {headerTitle} +
- - //
- // {columnList.map(columnVisibility => { - // return ( - //
- //  Nom - //
- //
- // ); - // })} - //
- - //
- //
- //
- //  Nom - //
- //
- //
- //  Début - //
- //
- //
- //  Fin - //
- //
- //  Assigné à - //
- //
- //
); }; diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index 117183698..f65df986f 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -75,7 +75,7 @@ export const TaskListTableDefault: React.FC<{ if (columnVisibility.columnWithArrow === true) { return (
-  { columnVisibility.isDate === true ? toLocaleDateString((columnVisibility.toShow(t) as Date), dateTimeOptions) : columnVisibility.toShow(t)} +  { columnVisibility.isDate === true ? toLocaleDateString((columnVisibility.toShow(t) as Date), dateTimeOptions) : columnVisibility.toShow(t)}
); } @@ -119,7 +119,7 @@ export const TaskListTableDefault: React.FC<{ })}
- + //
string | undefined | Date; From 0a2cd92feae05e817332f4ecddb0379b1dc6eb62 Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 16:49:24 -0600 Subject: [PATCH 11/42] styling side bar --- src/components/gantt/gantt.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 9dd80933d..f4783a800 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -25,11 +25,11 @@ import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper"; import styles from "./gantt.module.css"; const COLUMNLIST = [ - { columnName: 'Code', isVisible: true, columnWithArrow: true, toShow: (task:Task) => {return task.id} }, - { columnName: 'Nom', isVisible: true, toShow: (task:Task) => {return task.name} }, - { columnName: 'Début', isVisible: true, isDate:true, toShow: (task:Task) => {return task.start} }, - { columnName: 'Fin', isVisible: true, isDate:true, toShow: (task:Task) => {return task.end} }, - { columnName: 'Assigné à', isVisible: true, toShow: (task:Task) => {return task.assignedUser} }, + { columnName: 'Code', headerCellClass: '', cellClass: '', isVisible: true, columnWithArrow: true, toShow: (task:Task) => {return task.id} }, + { columnName: 'Nom', headerCellClass: '', cellClass: '', isVisible: true, toShow: (task:Task) => {return task.name} }, + { columnName: 'Début', headerCellClass: '', cellClass: '', isVisible: true, isDate:true, toShow: (task:Task) => {return task.start} }, + { columnName: 'Fin', headerCellClass: '', cellClass: '', isVisible: true, isDate:true, toShow: (task:Task) => {return task.end} }, + { columnName: 'Assigné à', headerCellClass: '', cellClass: '', isVisible: true, toShow: (task:Task) => {return task.assignedUser} }, ]; export const Gantt: React.FunctionComponent = ({ From f40fc586aa19e6be3abfabc59e18b14937628d85 Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 16:52:30 -0600 Subject: [PATCH 12/42] styling side bar --- src/types/public-types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 2ac897a05..2ae2dca23 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -134,6 +134,7 @@ export interface StylingOption { rowWidth: string; fontFamily: string; fontSize: string; + headerTitle: string; }>; TaskListTable?: React.FC<{ rowHeight: number; From 7d4ec910f1dcb10275516d95d13e7a0bd489cf5b Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 16:55:28 -0600 Subject: [PATCH 13/42] styling side bar --- src/components/task-list/task-list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx index 6bb38edb8..3e969d549 100644 --- a/src/components/task-list/task-list.tsx +++ b/src/components/task-list/task-list.tsx @@ -25,6 +25,7 @@ export type TaskListProps = { fontFamily: string; fontSize: string; columnList: ColumnVisibility[]; + headerTitle: string; }>; TaskListTable: React.FC<{ rowHeight: number; From e1454b2bd8faa07e4955b34d29b8cc707562f01e Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 16:58:09 -0600 Subject: [PATCH 14/42] styling side bar --- src/components/task-list/task-list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx index 3e969d549..fbcee694b 100644 --- a/src/components/task-list/task-list.tsx +++ b/src/components/task-list/task-list.tsx @@ -73,6 +73,7 @@ export const TaskList: React.FC = ({ fontSize, rowWidth, columnList, + headerTitle, }; const selectedTaskId = selectedTask ? selectedTask.id : ""; const tableProps = { From 999e0824ef7c8bf282b8897827d5cf8dc63bfb1f Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 17:07:08 -0600 Subject: [PATCH 15/42] styling side bar --- src/components/task-list/task-list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/task-list/task-list.tsx b/src/components/task-list/task-list.tsx index fbcee694b..709762edc 100644 --- a/src/components/task-list/task-list.tsx +++ b/src/components/task-list/task-list.tsx @@ -58,6 +58,7 @@ export const TaskList: React.FC = ({ horizontalContainerClass, TaskListHeader, columnList, + headerTitle, TaskListTable, }) => { const horizontalContainerRef = useRef(null); From 8b7b0935d3f68e38d5270726c4bfbd0bfd678cc8 Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 17:12:52 -0600 Subject: [PATCH 16/42] styling side bar --- src/components/task-list/task-list-header.tsx | 11 ++++++----- src/components/task-list/task-list.tsx | 5 ++--- src/types/public-types.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 2f867f57a..0456c55fd 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -8,8 +8,9 @@ export const TaskListHeaderDefault: React.FC<{ fontFamily: string; fontSize: string; columnList: ColumnVisibility[]; - headerTitle: string; -}> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList, headerTitle}) => { + // headerTitle: string; +// }> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList, headerTitle}) => { +}> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList}) => { return (
-
- {headerTitle} -
+ {/*
*/} + {/* {headerTitle}*/} + {/*
*/}
; TaskListTable: React.FC<{ rowHeight: number; @@ -58,7 +58,6 @@ export const TaskList: React.FC = ({ horizontalContainerClass, TaskListHeader, columnList, - headerTitle, TaskListTable, }) => { const horizontalContainerRef = useRef(null); @@ -74,7 +73,7 @@ export const TaskList: React.FC = ({ fontSize, rowWidth, columnList, - headerTitle, + // headerTitle, }; const selectedTaskId = selectedTask ? selectedTask.id : ""; const tableProps = { diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 2ae2dca23..07c0f366f 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -134,7 +134,7 @@ export interface StylingOption { rowWidth: string; fontFamily: string; fontSize: string; - headerTitle: string; + // headerTitle: string; }>; TaskListTable?: React.FC<{ rowHeight: number; From 9848d003657ae3121734dbcf7a7ba925a406508b Mon Sep 17 00:00:00 2001 From: oleksandr Date: Tue, 6 Dec 2022 17:22:30 -0600 Subject: [PATCH 17/42] styling side bar --- src/components/task-list/task-list-header.tsx | 5 ----- src/components/task-list/task-list.tsx | 2 -- src/types/public-types.ts | 1 - 3 files changed, 8 deletions(-) diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index 0456c55fd..a52aa20b9 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -8,8 +8,6 @@ export const TaskListHeaderDefault: React.FC<{ fontFamily: string; fontSize: string; columnList: ColumnVisibility[]; - // headerTitle: string; -// }> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList, headerTitle}) => { }> = ({ headerHeight, fontFamily, fontSize, rowWidth, columnList}) => { return (
- {/*
*/} - {/* {headerTitle}*/} - {/*
*/}
; TaskListTable: React.FC<{ rowHeight: number; @@ -73,7 +72,6 @@ export const TaskList: React.FC = ({ fontSize, rowWidth, columnList, - // headerTitle, }; const selectedTaskId = selectedTask ? selectedTask.id : ""; const tableProps = { diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 07c0f366f..2ac897a05 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -134,7 +134,6 @@ export interface StylingOption { rowWidth: string; fontFamily: string; fontSize: string; - // headerTitle: string; }>; TaskListTable?: React.FC<{ rowHeight: number; From f18cb90e9544110dc46b84a2902596552d850f38 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 12:50:23 -0600 Subject: [PATCH 18/42] Hide triangles. --- src/components/task-item/project/project.tsx | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 5a47ba90b..391e2852f 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -27,7 +27,7 @@ export const Project: React.FC = ({ task, isSelected }) => { task.x2 - 15, task.y + task.height / 2 - 1, ].join(","); - + let showTriangles = task.barCornerRadius < 6; return ( = ({ task, isSelected }) => { rx={task.barCornerRadius} fill={processColor} /> - - - } + {showTriangles && + />} ); }; From 7a06752af0eb0869f8db9530babbe15c16777d6b Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 13:50:37 -0600 Subject: [PATCH 19/42] Fix ColumnHeaders. --- src/components/task-item/project/project.tsx | 7 +++++++ src/components/task-list/task-list-header.tsx | 2 +- src/types/public-types.ts | 8 ++++---- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/task-item/project/project.tsx b/src/components/task-item/project/project.tsx index 391e2852f..23cafbf1d 100644 --- a/src/components/task-item/project/project.tsx +++ b/src/components/task-item/project/project.tsx @@ -28,6 +28,12 @@ export const Project: React.FC = ({ task, isSelected }) => { task.y + task.height / 2 - 1, ].join(","); let showTriangles = task.barCornerRadius < 6; + let showAvatar = false; + if (task.assignedUser !== undefined) { + showAvatar = true; + } + let avatarX = task.x1 + 30; + let avatarY = task.y + task.height / 2 - 10; return ( = ({ task, isSelected }) => { points={projectRightTriangle} fill={barColor} />} + {showAvatar && } ); }; diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx index a52aa20b9..1c9ae79f3 100644 --- a/src/components/task-list/task-list-header.tsx +++ b/src/components/task-list/task-list-header.tsx @@ -24,7 +24,7 @@ export const TaskListHeaderDefault: React.FC<{ }} > {columnList.map(columnVisibility => { - if(columnVisibility.isVisible === true) { + if(columnVisibility.isVisible || columnVisibility.isVisible === undefined) { return (
string | undefined | Date; + toShow:(task: Task) => string | undefined | Date; columnWithArrow?: boolean; }; export interface GanttProps extends EventOption, DisplayOption, StylingOption { tasks: Task[]; - columnList: ColumnVisibility[]; + columnList?: ColumnVisibility[]; } From 541c8d178f3dbebda79fdb267fd74e573b90ea2c Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 14:02:58 -0600 Subject: [PATCH 20/42] Add assigned User. --- package.json | 2 +- src/components/task-item/bar/bar-display.tsx | 9 +++++++++ src/components/task-item/bar/bar-small.tsx | 1 + src/components/task-item/bar/bar.tsx | 1 + 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a0097baa7..6ad784b10 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.3.9", + "version": "0.3.10", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/task-item/bar/bar-display.tsx b/src/components/task-item/bar/bar-display.tsx index 174e1ed17..65e9a7812 100644 --- a/src/components/task-item/bar/bar-display.tsx +++ b/src/components/task-item/bar/bar-display.tsx @@ -18,6 +18,7 @@ type BarDisplayProps = { progressSelectedColor: string; }; onMouseDown: (event: React.MouseEvent) => void; + assignedUser?: string; }; export const BarDisplay: React.FC = ({ x, @@ -30,6 +31,7 @@ export const BarDisplay: React.FC = ({ barCornerRadius, styles, onMouseDown, + assignedUser, }) => { const getProcessColor = () => { return isSelected ? styles.progressSelectedColor : styles.progressColor; @@ -38,6 +40,12 @@ export const BarDisplay: React.FC = ({ const getBarColor = () => { return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor; }; + let showAvatar = false; + if (assignedUser !== undefined) { + showAvatar = true; + } + let avatarX = x + 30; + let avatarY = y + height / 2 - 10; return ( @@ -60,6 +68,7 @@ export const BarDisplay: React.FC = ({ rx={barCornerRadius} fill={getProcessColor()} /> + {showAvatar && } ); }; diff --git a/src/components/task-item/bar/bar-small.tsx b/src/components/task-item/bar/bar-small.tsx index 56f43432f..ac045bbb8 100644 --- a/src/components/task-item/bar/bar-small.tsx +++ b/src/components/task-item/bar/bar-small.tsx @@ -32,6 +32,7 @@ export const BarSmall: React.FC = ({ onMouseDown={e => { isDateChangeable && onEventStart("move", task, e); }} + assignedUser={task.assignedUser} /> {isProgressChangeable && ( diff --git a/src/components/task-item/bar/bar.tsx b/src/components/task-item/bar/bar.tsx index 7e6ce5b96..c191a6545 100644 --- a/src/components/task-item/bar/bar.tsx +++ b/src/components/task-item/bar/bar.tsx @@ -35,6 +35,7 @@ export const Bar: React.FC = ({ onMouseDown={e => { isDateChangeable && onEventStart("move", task, e); }} + assignedUser={task.assignedUser} /> {isDateChangeable && ( From 9e5e4309a629aff54f50f422564a7a2e6634824f Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 15:04:37 -0600 Subject: [PATCH 21/42] Fix progress. --- src/components/task-item/bar/bar-display.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/task-item/bar/bar-display.tsx b/src/components/task-item/bar/bar-display.tsx index 65e9a7812..bd7a3ed93 100644 --- a/src/components/task-item/bar/bar-display.tsx +++ b/src/components/task-item/bar/bar-display.tsx @@ -46,7 +46,14 @@ export const BarDisplay: React.FC = ({ } let avatarX = x + 30; let avatarY = y + height / 2 - 10; - + let progressCornerRadius = barCornerRadius; + let progressHeight = height; + let progressY = y + if (progressWidth < 20) { + progressCornerRadius = 50; + progressHeight = height / 3; + progressY = progressY + progressHeight + } return ( = ({ {showAvatar && } From 615cdb6cdf84a2cd7e626f0f61efd8491047911f Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 15:29:52 -0600 Subject: [PATCH 22/42] Calendar to narrow. --- src/components/calendar/calendar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index a001188ea..2456b94cf 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -176,9 +176,10 @@ export const Calendar: React.FC = ({ const dates = dateSetup.dates; for (let i = 0; i < dates.length; i++) { const date = dates[i]; - const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date + const bottomValue = `${date .getDate() .toString()}`; + const bottomValueWeekDay = `${getLocalDayOfWeek(date, locale, "narrow")}`; bottomValues.push( = ({ x={columnWidth * i + columnWidth * 0.5} className={styles.calendarBottomText} > - {bottomValue} + {bottomValueWeekDay} {bottomValue} ); if ( From 487351838c26d7861b437798501cfd004dcb69c5 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 17:35:17 -0600 Subject: [PATCH 23/42] Calendar to narrow. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6ad784b10..d902f33f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.3.10", + "version": "0.3.11", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", From e612ef695a6dea678df5097fdc79bfe44a8146aa Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Wed, 7 Dec 2022 17:53:35 -0600 Subject: [PATCH 24/42] Calendar to narrow. --- src/components/grid/grid.module.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/grid/grid.module.css b/src/components/grid/grid.module.css index 964303f22..d0ae4aead 100644 --- a/src/components/grid/grid.module.css +++ b/src/components/grid/grid.module.css @@ -2,10 +2,6 @@ fill: #fff; } -.gridRow:nth-child(even) { - fill: #f5f5f5; -} - .gridRowLine { stroke: #ebeff2; } From 7d9494c0fc8d68e4db79c79bcf597213e396d9cb Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 13:27:22 -0600 Subject: [PATCH 25/42] Calendar to narrow. --- src/components/calendar/calendar.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index 2456b94cf..6bb89a304 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -334,15 +334,17 @@ export const Calendar: React.FC = ({ [topValues, bottomValues] = getCalendarValuesForHour(); } return ( - - - {bottomValues} {topValues} - +
+ + + {bottomValues} {topValues} + +
); }; From d3c9e324bdbd306cafe388be79931e45e8261e5e Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 13:35:16 -0600 Subject: [PATCH 26/42] Calendar to narrow. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d902f33f0..1bc6e421c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.3.11", + "version": "0.3.12", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", From f9310307a78be239ec53f2f5663f6b9572a1b48f Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 13:38:20 -0600 Subject: [PATCH 27/42] Calendar to narrow. --- src/components/calendar/calendar.tsx | 6 ++---- src/components/gantt/task-gantt.tsx | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index 6bb89a304..d90748333 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -334,8 +334,7 @@ export const Calendar: React.FC = ({ [topValues, bottomValues] = getCalendarValuesForHour(); } return ( -
- + = ({ className={styles.calendarHeader} /> {bottomValues} {topValues} - -
+ ); }; diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx index 73a76688f..0b59a9a72 100644 --- a/src/components/gantt/task-gantt.tsx +++ b/src/components/gantt/task-gantt.tsx @@ -43,14 +43,16 @@ export const TaskGantt: React.FC = ({ ref={verticalGanttContainerRef} dir="ltr" > - - - +
+ + + +
Date: Thu, 8 Dec 2022 15:50:08 -0600 Subject: [PATCH 28/42] Calendar to narrow. --- package.json | 2 +- src/components/gantt/task-gantt.tsx | 22 ++++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 1bc6e421c..a0ff53e13 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.3.12", + "version": "0.3.13", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx index 0b59a9a72..63f0cf79a 100644 --- a/src/components/gantt/task-gantt.tsx +++ b/src/components/gantt/task-gantt.tsx @@ -62,16 +62,18 @@ export const TaskGantt: React.FC = ({ : { width: gridProps.svgWidth } } > - - - - +
+ + + + +
); From 4faac928fbc5f501950711a4c6ac073b40cbe69e Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 16:06:02 -0600 Subject: [PATCH 29/42] Calendar to narrow. --- src/components/gantt/task-gantt-content.tsx | 64 +++++++++++---------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index 33326df92..09f76e685 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -261,42 +261,44 @@ export const TaskGanttContent: React.FC = ({ }; return ( - - - {tasks.map(task => { - return task.barChildren.map(child => { +
+ + + {tasks.map(task => { + return task.barChildren.map(child => { + return ( + + ); + }); + })} + + + {tasks.map(task => { return ( - ); - }); - })} - - - {tasks.map(task => { - return ( - - ); - })} + })} + - +
); }; From 9f39861f831696c5c6549c35c0c50da16d5d1b07 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 16:13:22 -0600 Subject: [PATCH 30/42] Calendar to narrow. --- src/components/gantt/task-gantt-content.tsx | 64 ++++++++++----------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index 09f76e685..33326df92 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -261,44 +261,42 @@ export const TaskGanttContent: React.FC = ({ }; return ( -
- - - {tasks.map(task => { - return task.barChildren.map(child => { - return ( - - ); - }); - })} - - - {tasks.map(task => { + + + {tasks.map(task => { + return task.barChildren.map(child => { return ( - ); - })} - + }); + })} + + + {tasks.map(task => { + return ( + + ); + })} -
+ ); }; From e524c5fa7655845c53db2d4f66593181fb34eb86 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 16:34:17 -0600 Subject: [PATCH 31/42] Add margin. --- src/components/gantt/gantt.tsx | 2 ++ src/components/grid/grid-body.tsx | 4 +++- src/types/public-types.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index f4783a800..6a821d9f4 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -35,6 +35,7 @@ const COLUMNLIST = [ export const Gantt: React.FunctionComponent = ({ tasks, headerHeight = 50, + marginTop = 0, columnWidth = 60, listCellWidth = "155px", rowHeight = 50, @@ -404,6 +405,7 @@ export const Gantt: React.FunctionComponent = ({ dates: dateSetup.dates, todayColor, rtl, + marginTop, }; const calendarProps: CalendarProps = { dateSetup, diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 18e6f2b00..76e94fc3d 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -11,6 +11,7 @@ export type GridBodyProps = { columnWidth: number; todayColor: string; rtl: boolean; + marginTop: number; }; export const GridBody: React.FC = ({ tasks, @@ -20,6 +21,7 @@ export const GridBody: React.FC = ({ columnWidth, todayColor, rtl, + marginTop, }) => { let y = 0; const gridRows: ReactChild[] = []; @@ -54,7 +56,7 @@ export const GridBody: React.FC = ({ className={styles.gridRowLine} /> ); - y += rowHeight; + y += rowHeight + marginTop; } const now = new Date(); diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 68bf5c5ab..620c785fd 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -121,6 +121,7 @@ export interface StylingOption { projectBackgroundSelectedColor?: string; milestoneBackgroundColor?: string; milestoneBackgroundSelectedColor?: string; + marginTop?: number; arrowColor?: string; arrowIndent?: number; todayColor?: string; From f5af08edaaaeef98425b11d64f99390a7bbb738e Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 17:32:19 -0600 Subject: [PATCH 32/42] Revert "Add margin." This reverts commit e524c5fa7655845c53db2d4f66593181fb34eb86. --- src/components/gantt/gantt.tsx | 2 -- src/components/grid/grid-body.tsx | 4 +--- src/types/public-types.ts | 1 - 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 6a821d9f4..f4783a800 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -35,7 +35,6 @@ const COLUMNLIST = [ export const Gantt: React.FunctionComponent = ({ tasks, headerHeight = 50, - marginTop = 0, columnWidth = 60, listCellWidth = "155px", rowHeight = 50, @@ -405,7 +404,6 @@ export const Gantt: React.FunctionComponent = ({ dates: dateSetup.dates, todayColor, rtl, - marginTop, }; const calendarProps: CalendarProps = { dateSetup, diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 76e94fc3d..18e6f2b00 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -11,7 +11,6 @@ export type GridBodyProps = { columnWidth: number; todayColor: string; rtl: boolean; - marginTop: number; }; export const GridBody: React.FC = ({ tasks, @@ -21,7 +20,6 @@ export const GridBody: React.FC = ({ columnWidth, todayColor, rtl, - marginTop, }) => { let y = 0; const gridRows: ReactChild[] = []; @@ -56,7 +54,7 @@ export const GridBody: React.FC = ({ className={styles.gridRowLine} /> ); - y += rowHeight + marginTop; + y += rowHeight; } const now = new Date(); diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 620c785fd..68bf5c5ab 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -121,7 +121,6 @@ export interface StylingOption { projectBackgroundSelectedColor?: string; milestoneBackgroundColor?: string; milestoneBackgroundSelectedColor?: string; - marginTop?: number; arrowColor?: string; arrowIndent?: number; todayColor?: string; From 0969e8ab38385a9ae39859c7ddca9a1cd1137c19 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 17:32:59 -0600 Subject: [PATCH 33/42] Revert "Revert "Add margin."" This reverts commit f5af08edaaaeef98425b11d64f99390a7bbb738e. --- src/components/gantt/gantt.tsx | 2 ++ src/components/grid/grid-body.tsx | 4 +++- src/types/public-types.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index f4783a800..6a821d9f4 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -35,6 +35,7 @@ const COLUMNLIST = [ export const Gantt: React.FunctionComponent = ({ tasks, headerHeight = 50, + marginTop = 0, columnWidth = 60, listCellWidth = "155px", rowHeight = 50, @@ -404,6 +405,7 @@ export const Gantt: React.FunctionComponent = ({ dates: dateSetup.dates, todayColor, rtl, + marginTop, }; const calendarProps: CalendarProps = { dateSetup, diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 18e6f2b00..76e94fc3d 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -11,6 +11,7 @@ export type GridBodyProps = { columnWidth: number; todayColor: string; rtl: boolean; + marginTop: number; }; export const GridBody: React.FC = ({ tasks, @@ -20,6 +21,7 @@ export const GridBody: React.FC = ({ columnWidth, todayColor, rtl, + marginTop, }) => { let y = 0; const gridRows: ReactChild[] = []; @@ -54,7 +56,7 @@ export const GridBody: React.FC = ({ className={styles.gridRowLine} /> ); - y += rowHeight; + y += rowHeight + marginTop; } const now = new Date(); diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 68bf5c5ab..620c785fd 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -121,6 +121,7 @@ export interface StylingOption { projectBackgroundSelectedColor?: string; milestoneBackgroundColor?: string; milestoneBackgroundSelectedColor?: string; + marginTop?: number; arrowColor?: string; arrowIndent?: number; todayColor?: string; From 43a200cb262d6141897253c97d3447db0d4fe25a Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 17:35:51 -0600 Subject: [PATCH 34/42] Add margin. --- src/components/grid/grid-body.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 76e94fc3d..9b2fad390 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -56,7 +56,7 @@ export const GridBody: React.FC = ({ className={styles.gridRowLine} /> ); - y += rowHeight + marginTop; + y += rowHeight; } const now = new Date(); @@ -71,7 +71,7 @@ export const GridBody: React.FC = ({ x1={tickX} y1={0} x2={tickX} - y2={y} + y2={y + marginTop} className={styles.gridTick} /> ); From 743db2c034eddf2b9224ac09e76c9f5d056b4e30 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 17:43:29 -0600 Subject: [PATCH 35/42] Add margin. --- src/components/grid/grid-body.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 9b2fad390..ba2c49cd9 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -94,7 +94,7 @@ export const GridBody: React.FC = ({ x={tickX} y={0} width={columnWidth} - height={y} + height={y + marginTop} fill={todayColor} /> ); From 146c4d7339ea51cc978db58788e9d87757737b11 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 17:53:14 -0600 Subject: [PATCH 36/42] Calendar to narrow. --- src/components/grid/grid-body.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index ba2c49cd9..13c821dc9 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -23,7 +23,7 @@ export const GridBody: React.FC = ({ rtl, marginTop, }) => { - let y = 0; + let y = marginTop; const gridRows: ReactChild[] = []; const rowLines: ReactChild[] = [ = ({ x1={tickX} y1={0} x2={tickX} - y2={y + marginTop} + y2={y} className={styles.gridTick} /> ); @@ -94,7 +94,7 @@ export const GridBody: React.FC = ({ x={tickX} y={0} width={columnWidth} - height={y + marginTop} + height={y} fill={todayColor} /> ); From c42221d0929fc2ea53be1a33537af080b024f603 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 18:12:25 -0600 Subject: [PATCH 37/42] Add margin. --- src/components/gantt/gantt.tsx | 3 ++- src/helpers/bar-helper.ts | 28 ++++++++++++++++++---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 6a821d9f4..96efdcfd8 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -149,7 +149,8 @@ export const Gantt: React.FunctionComponent = ({ projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, - milestoneBackgroundSelectedColor + milestoneBackgroundSelectedColor, + marginTop, ) ); }, [ diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts index ba5f987c9..95523e3b7 100644 --- a/src/helpers/bar-helper.ts +++ b/src/helpers/bar-helper.ts @@ -20,7 +20,8 @@ export const convertToBarTasks = ( projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, - milestoneBackgroundSelectedColor: string + milestoneBackgroundSelectedColor: string, + marginTop: number ) => { let barTasks = tasks.map((t, i) => { return convertToBarTask( @@ -42,7 +43,8 @@ export const convertToBarTasks = ( projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, - milestoneBackgroundSelectedColor + milestoneBackgroundSelectedColor, + marginTop ); }); @@ -80,7 +82,8 @@ const convertToBarTask = ( projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, - milestoneBackgroundSelectedColor: string + milestoneBackgroundSelectedColor: string, + marginTop: number ): BarTask => { let barTask: BarTask; switch (task.type) { @@ -95,7 +98,8 @@ const convertToBarTask = ( barCornerRadius, handleWidth, milestoneBackgroundColor, - milestoneBackgroundSelectedColor + milestoneBackgroundSelectedColor, + marginTop ); break; case "project": @@ -112,7 +116,8 @@ const convertToBarTask = ( projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, - projectBackgroundSelectedColor + projectBackgroundSelectedColor, + marginTop ); break; default: @@ -129,7 +134,8 @@ const convertToBarTask = ( barProgressColor, barProgressSelectedColor, barBackgroundColor, - barBackgroundSelectedColor + barBackgroundSelectedColor, + marginTop ); break; } @@ -149,7 +155,8 @@ const convertToBar = ( barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, - barBackgroundSelectedColor: string + barBackgroundSelectedColor: string, + marginTop: number ): BarTask => { let x1: number; let x2: number; @@ -172,7 +179,7 @@ const convertToBar = ( task.progress, rtl ); - const y = taskYCoordinate(index, rowHeight, taskHeight); + const y = taskYCoordinate(index, rowHeight, taskHeight) + marginTop; const hideChildren = task.type === "project" ? task.hideChildren : undefined; const styles = { @@ -210,10 +217,11 @@ const convertToMilestone = ( barCornerRadius: number, handleWidth: number, milestoneBackgroundColor: string, - milestoneBackgroundSelectedColor: string + milestoneBackgroundSelectedColor: string, + marginTop: number, ): BarTask => { const x = taskXCoordinate(task.start, dates, columnWidth); - const y = taskYCoordinate(index, rowHeight, taskHeight); + const y = taskYCoordinate(index, rowHeight, taskHeight) + marginTop; const x1 = x - taskHeight * 0.5; const x2 = x + taskHeight * 0.5; From 69da238f8c3756c3c74bd545d9fd88f997e41eca Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 18:21:54 -0600 Subject: [PATCH 38/42] Add margin. --- src/components/grid/grid-body.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 13c821dc9..42e1572fb 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -35,12 +35,19 @@ export const GridBody: React.FC = ({ className={styles.gridRowLine} />, ]; + let i = 0; for (const task of tasks) { + let yTmp = y; + if (i === 0) { + //set first row rectangle y to 0 to fill first row completely including marginTop + yTmp = 0; + } + i++; gridRows.push( Date: Thu, 8 Dec 2022 18:31:15 -0600 Subject: [PATCH 39/42] Add margin. --- src/components/gantt/gantt.tsx | 2 +- src/components/grid/grid-body.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 96efdcfd8..70ee52f85 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -475,7 +475,7 @@ export const Gantt: React.FunctionComponent = ({ gridProps={gridProps} calendarProps={calendarProps} barProps={barProps} - ganttHeight={ganttHeight} + ganttHeight={ganttHeight + marginTop * 2 } scrollY={scrollY} scrollX={scrollX} /> diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx index 42e1572fb..a326e0f3a 100644 --- a/src/components/grid/grid-body.tsx +++ b/src/components/grid/grid-body.tsx @@ -36,11 +36,18 @@ export const GridBody: React.FC = ({ />, ]; let i = 0; + let tasksLength = tasks.length; for (const task of tasks) { let yTmp = y; + let tmpHeight = rowHeight; if (i === 0) { //set first row rectangle y to 0 to fill first row completely including marginTop yTmp = 0; + tmpHeight = rowHeight + marginTop; + } + // set last row to fill margin + if (i === (tasksLength - 1)) { + tmpHeight = rowHeight + marginTop; } i++; gridRows.push( @@ -49,7 +56,7 @@ export const GridBody: React.FC = ({ x="0" y={yTmp} width={svgWidth} - height={rowHeight} + height={tmpHeight} className={styles.gridRow} /> ); From 4b84af5d62e49fddfb9a2aab042d5edc5da442ac Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 18:34:56 -0600 Subject: [PATCH 40/42] Add margin. --- src/components/gantt/gantt.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 70ee52f85..25c4ca49c 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -462,6 +462,7 @@ export const Gantt: React.FunctionComponent = ({ TaskListHeader, TaskListTable, }; + let tmpGanttHeight = ganttHeight + marginTop; return (
= ({ gridProps={gridProps} calendarProps={calendarProps} barProps={barProps} - ganttHeight={ganttHeight + marginTop * 2 } + ganttHeight={tmpGanttHeight} scrollY={scrollY} scrollX={scrollX} /> From ecf5821d811f12c505bdbfffcbee2fb995e3d6a3 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 19:20:23 -0600 Subject: [PATCH 41/42] Add margin. --- src/components/gantt/gantt.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 25c4ca49c..96efdcfd8 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -462,7 +462,6 @@ export const Gantt: React.FunctionComponent = ({ TaskListHeader, TaskListTable, }; - let tmpGanttHeight = ganttHeight + marginTop; return (
= ({ gridProps={gridProps} calendarProps={calendarProps} barProps={barProps} - ganttHeight={tmpGanttHeight} + ganttHeight={ganttHeight} scrollY={scrollY} scrollX={scrollX} /> From 034bd467b74aaa0e5f9214c075cd74bf25e32790 Mon Sep 17 00:00:00 2001 From: Vladyslav Shcherbyna Date: Thu, 8 Dec 2022 19:27:03 -0600 Subject: [PATCH 42/42] Add margin. --- src/components/gantt/gantt.tsx | 1 + src/components/gantt/task-gantt-content.tsx | 1 + src/components/gantt/task-gantt.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 96efdcfd8..f748f5e40 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -433,6 +433,7 @@ export const Gantt: React.FunctionComponent = ({ arrowIndent, svgWidth, rtl, + marginTop, setGanttEvent, setFailedTask, setSelectedTask: handleSelectedTask, diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index 33326df92..f83e1a364 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -27,6 +27,7 @@ export type TaskGanttContentProps = { fontSize: string; fontFamily: string; rtl: boolean; + marginTop: number; setGanttEvent: (value: GanttEvent) => void; setFailedTask: (value: BarTask | null) => void; setSelectedTask: (taskId: string) => void; diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx index 63f0cf79a..3a7639b45 100644 --- a/src/components/gantt/task-gantt.tsx +++ b/src/components/gantt/task-gantt.tsx @@ -66,7 +66,7 @@ export const TaskGantt: React.FC = ({