Skip to content

Commit f2a8a58

Browse files
rbessinrbessin
committed
#3661 fixed duplication issues
1 parent daffec2 commit f2a8a58

5 files changed

Lines changed: 68 additions & 173 deletions

File tree

‎src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/BlockedTaskBarView.tsx‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx‎

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55

66
import GanttTaskBarEdit from './GanttTaskBarEdit';
77
import GanttTaskBarView from './GanttTaskBarView';
8-
import { ArcherContainer } from 'react-archer';
9-
import { useRef } from 'react';
10-
import { ArcherContainerHandle } from 'react-archer/lib/ArcherContainer/ArcherContainer.types';
118
import {
129
GanttChange,
1310
GanttTask,
@@ -46,14 +43,11 @@ const GanttTaskBar = <T,>({
4643
highlightSubtaskComparator,
4744
highlightTaskComparator
4845
}: GanttTaskBarProps<T>) => {
49-
const archerRef = useRef<ArcherContainerHandle>(null);
50-
5146
const getStartCol = (start: Date) => {
5247
const startCol = days.findIndex((day) => dateToString(day) === dateToString(getMonday(start))) + 1;
5348
return startCol;
5449
};
5550

56-
// if the end date doesn't exist within the timeframe, have it span to the end
5751
const getEndCol = (end: Date) => {
5852
const endCol =
5953
days.findIndex((day) => dateToString(day) === dateToString(getMonday(end))) === -1
@@ -62,45 +56,34 @@ const GanttTaskBar = <T,>({
6256
return endCol;
6357
};
6458

65-
const handleChange = (change: GanttChange<T>) => {
66-
createChange(change);
67-
setTimeout(() => {
68-
if (archerRef.current) {
69-
archerRef.current.refreshScreen();
70-
}
71-
}, 100); // wait for the change to be added to the state and the DOM to update
72-
};
73-
7459
return (
75-
<ArcherContainer ref={archerRef} strokeColor="#ef4545">
76-
<div id={`gantt-task-${task.id}`}>
77-
{isEditMode ? (
78-
<GanttTaskBarEdit
79-
days={days}
80-
task={task}
81-
createChange={handleChange}
82-
getStartCol={getStartCol}
83-
getEndCol={getEndCol}
84-
onAddTaskPressed={onAddTaskPressed}
85-
/>
86-
) : (
87-
<GanttTaskBarView
88-
days={days}
89-
task={task}
90-
getStartCol={getStartCol}
91-
getEndCol={getEndCol}
92-
handleOnMouseOver={handleOnMouseOver}
93-
handleOnMouseLeave={handleOnMouseLeave}
94-
showChildren={showChildren}
95-
onShowChildrenToggle={onShowChildrenToggle}
96-
highlightedChange={highlightedChange}
97-
onAddTaskPressed={onAddTaskPressed}
98-
highlightSubtaskComparator={highlightSubtaskComparator}
99-
highlightTaskComparator={highlightTaskComparator}
100-
/>
101-
)}
102-
</div>
103-
</ArcherContainer>
60+
<div id={`gantt-task-${task.id}`}>
61+
{isEditMode ? (
62+
<GanttTaskBarEdit
63+
days={days}
64+
task={task}
65+
createChange={createChange}
66+
getStartCol={getStartCol}
67+
getEndCol={getEndCol}
68+
onAddTaskPressed={onAddTaskPressed}
69+
/>
70+
) : (
71+
<GanttTaskBarView
72+
days={days}
73+
task={task}
74+
getStartCol={getStartCol}
75+
getEndCol={getEndCol}
76+
handleOnMouseOver={handleOnMouseOver}
77+
handleOnMouseLeave={handleOnMouseLeave}
78+
showChildren={showChildren}
79+
onShowChildrenToggle={onShowChildrenToggle}
80+
highlightedChange={highlightedChange}
81+
onAddTaskPressed={onAddTaskPressed}
82+
highlightSubtaskComparator={highlightSubtaskComparator}
83+
highlightTaskComparator={highlightTaskComparator}
84+
/>
85+
)}
86+
</div>
10487
);
10588
};
10689

‎src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
} from '../../../../../utils/gantt.utils';
77
import { Collapse } from '@mui/material';
88
import GanttTaskBar from './GanttTaskBar';
9-
import BlockedGanttTaskView from './BlockedTaskBarView';
109
import GanttTaskBarDisplay from './GanttTaskBarDisplay';
1110

1211
interface GanttTaskBarViewProps<T> {
@@ -74,23 +73,6 @@ const GanttTaskBarView = <T,>({
7473
);
7574
})}
7675
</Collapse>
77-
{task.blocking.map((blocking) => {
78-
return (
79-
<BlockedGanttTaskView
80-
key={blocking.id}
81-
task={blocking}
82-
days={days}
83-
getStartCol={getStartCol}
84-
getEndCol={getEndCol}
85-
handleOnMouseOver={handleOnMouseOver}
86-
onShowChildrenToggle={onShowChildrenToggle}
87-
highlightSubtaskComparator={highlightSubtaskComparator}
88-
highlightTaskComparator={highlightTaskComparator}
89-
handleOnMouseLeave={handleOnMouseLeave}
90-
highlightedChange={highlightedChange}
91-
/>
92-
);
93-
})}
9476
</>
9577
);
9678
};

‎src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Box, Typography } from '@mui/material';
1515
import { useState } from 'react';
1616
import GanttTaskBar from './GanttChartComponents/GanttTaskBar/GanttTaskBar';
1717
import GanttToolTip from './GanttChartComponents/GanttToolTip';
18+
import { ArcherContainer } from 'react-archer';
1819

1920
interface GanttChartSectionProps<T> {
2021
start: Date;
@@ -64,42 +65,43 @@ const GanttChartSection = <T,>({
6465
};
6566

6667
return tasks.length > 0 ? (
67-
<Box sx={{ width: 'fit-content' }}>
68-
<Box sx={{ mt: '1rem', width: 'fit-content' }}>
69-
{tasks.map((task) => {
70-
return (
71-
<Box display="flex" alignItems="center">
72-
<GanttTaskBar
73-
key={task.id}
74-
days={days}
75-
task={task}
76-
isEditMode={isEditMode}
77-
createChange={handleCreateProjectChange}
78-
handleOnMouseOver={handleOnMouseOver}
79-
handleOnMouseLeave={handleOnMouseLeave}
80-
onShowChildrenToggle={() => onShowChildrenToggle(task)}
81-
onAddTaskPressed={onAddTaskPressed}
82-
showChildren={shouldShowChildren(task)}
83-
highlightedChange={highlightedChange}
84-
highlightSubtaskComparator={highlightSubtaskComparator}
85-
highlightTaskComparator={highlightTaskComparator}
86-
/>
87-
</Box>
88-
);
89-
})}
68+
<ArcherContainer strokeColor="#ef4545">
69+
<Box sx={{ width: 'fit-content' }}>
70+
<Box sx={{ mt: '1rem', width: 'fit-content' }}>
71+
{tasks.map((task) => {
72+
return (
73+
<Box key={task.id} display="flex" alignItems="center">
74+
<GanttTaskBar
75+
days={days}
76+
task={task}
77+
isEditMode={isEditMode}
78+
createChange={handleCreateProjectChange}
79+
handleOnMouseOver={handleOnMouseOver}
80+
handleOnMouseLeave={handleOnMouseLeave}
81+
onShowChildrenToggle={() => onShowChildrenToggle(task)}
82+
onAddTaskPressed={onAddTaskPressed}
83+
showChildren={shouldShowChildren(task)}
84+
highlightedChange={highlightedChange}
85+
highlightSubtaskComparator={highlightSubtaskComparator}
86+
highlightTaskComparator={highlightTaskComparator}
87+
/>
88+
</Box>
89+
);
90+
})}
91+
</Box>
92+
{currentTooltipOptions && (
93+
<GanttToolTip
94+
yCoordinate={cursorY}
95+
title={currentTooltipOptions.name}
96+
startDate={currentTooltipOptions.start}
97+
endDate={currentTooltipOptions.end}
98+
color={currentTooltipOptions.styles?.backgroundColor}
99+
upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
100+
lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
101+
/>
102+
)}
90103
</Box>
91-
{currentTooltipOptions && (
92-
<GanttToolTip
93-
yCoordinate={cursorY}
94-
title={currentTooltipOptions.name}
95-
startDate={currentTooltipOptions.start}
96-
endDate={currentTooltipOptions.end}
97-
color={currentTooltipOptions.styles?.backgroundColor}
98-
upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
99-
lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
100-
/>
101-
)}
102-
</Box>
104+
</ArcherContainer>
103105
) : (
104106
<Typography sx={{ marginTop: 5 }}>No Projects to Display</Typography>
105107
);

‎src/frontend/src/utils/gantt.utils.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ const getBlockingGanttTasks = <T extends WorkPackage>(
411411

412412
export const transformTaskToGanttTask = <T extends Task>(task: T, end: Date): GanttTask<T> => {
413413
return {
414-
id: uuidv4(),
414+
id: task.taskId,
415415
element: task,
416416

417417
name: task.title,
@@ -441,7 +441,7 @@ export const transformWorkPackageToGanttTask = <T extends WorkPackage>(
441441
allWorkPackages: T[]
442442
): GanttTask<T> => {
443443
return {
444-
id: uuidv4(),
444+
id: workPackage.id,
445445
element: workPackage,
446446

447447
name: workPackage.name,
@@ -477,17 +477,15 @@ export const transformProjectToGanttTask = (
477477
const taskList = hideTasks ? [] : project.tasks;
478478

479479
return {
480-
id: uuidv4(),
480+
id: project.id,
481481
element: project,
482482

483483
name: project.name,
484484
start: startDate,
485485
end: endDate,
486486
blocking: [],
487487
children: [
488-
...project.workPackages
489-
.filter((workPackage) => workPackage.blockedBy.length === 0)
490-
.map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
488+
...project.workPackages.map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
491489
...taskList.map((task) => transformTaskToGanttTask(task, endDate))
492490
],
493491
overlays: [

0 commit comments

Comments
 (0)