Skip to content

Commit 72d839e

Browse files
DominikEngelDominikEngel
committed
Improve Grouping
Now the grouping is determined by the optional groupName attribute of the tasks
1 parent e8cf2d1 commit 72d839e

File tree

6 files changed

+117
-171
lines changed

6 files changed

+117
-171
lines changed

‎src/demo/pages/App_Group.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { Component } from 'react';
2+
import TimeLine from 'libs/TimeLine';
3+
import Generator from './Generator';
4+
import './App.css';
5+
6+
class App extends Component {
7+
constructor(props) {
8+
super(props);
9+
let d1 = new Date();
10+
let d2 = new Date();
11+
d2.setDate(d2.getDate() + 5);
12+
let d3 = new Date();
13+
d3.setDate(d3.getDate() + 8);
14+
let d4 = new Date();
15+
d4.setDate(d4.getDate() + 20);
16+
this.data = [
17+
{ id: 1, start: d1, end: d2, name: 'Demo Task 1', groupName: 'Group 1' },
18+
{
19+
id: 2,
20+
start: d3,
21+
end: d4,
22+
name: 'Demo Task 2',
23+
groupName: 'Group 1'
24+
}
25+
];
26+
this.links = [{ id: 1, start: 1, end: 2 }];
27+
}
28+
29+
render() {
30+
return (
31+
<div className="app-container">
32+
<h1>Getting Started Demo</h1>
33+
{/* DayWidth<input type="range" min="30" max="500" value={this.state.daysWidth} onChange={this.handleDayWidth} step="1"/>
34+
Item Height<input type="range" min="30" max="500" value={this.state.itemheight} onChange={this.handleItemHeight} step="1"/> */}
35+
<div className="time-line-container">
36+
<TimeLine data={this.data} links={this.links} />
37+
</div>
38+
</div>
39+
);
40+
}
41+
}
42+
43+
export default App;

‎src/lib/TimeLine.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -303,18 +303,16 @@ class TimeLine extends Component {
303303
}
304304
}
305305
checkNeeeData = () => {
306-
let groupByName = this.props.config && this.props.config.dataViewPort && this.props.config.dataViewPort.groupByName;
307-
308306
if (this.props.data != this.state.data) {
309307
this.state.data = this.props.data;
310308
let rowInfo = this.calculateStartEndRows(this.state.numVisibleRows, this.props.data, this.state.scrollTop);
311309
this.state.startRow = rowInfo.start;
312310
this.state.endRow = rowInfo.end;
313-
Registry.registerData(this.state.data, groupByName);
311+
Registry.registerData(this.state.data);
314312
}
315313
if (this.props.links != this.state.links) {
316314
this.state.links = this.props.links;
317-
Registry.registerLinks(this.props.links, groupByName);
315+
Registry.registerLinks(this.props.links);
318316
}
319317
};
320318
render() {

‎src/lib/components/taskList/TaskList.js

+9-39
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import Config from 'libs/helpers/config/Config';
33
import ContentEditable from 'libs/components/common/ContentEditable';
4-
import DateHelper from 'libs/helpers/DateHelper';
4+
import Registry from 'libs/helpers/registry/Registry';
55

66
export class VerticalLine extends Component {
77
constructor(props) {
@@ -59,44 +59,14 @@ export default class TaskList extends Component {
5959

6060
renderTaskRow(data) {
6161
let result = [];
62-
if (Config.data.dataViewPort.groupByName) {
63-
const groups = {};
64-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
65-
let item = this.props.data[i];
66-
if (!item) break;
67-
if (groups[item.name] !== undefined) {
68-
groups[item.name].push(item);
69-
} else {
70-
groups[item.name] = [item];
71-
}
72-
}
73-
Object.keys(groups).forEach((key, i) => {
74-
const group = groups[key]
75-
group.forEach(item => {
76-
result.push(
77-
<TaskRow
78-
key={i + item.id}
79-
index={item.name + i}
80-
item={item}
81-
label={item.name}
82-
top={i * this.props.itemheight}
83-
itemheight={this.props.itemheight}
84-
isSelected={this.props.selectedItem == item}
85-
onUpdateTask={this.props.onUpdateTask}
86-
onSelectItem={this.props.onSelectItem}
87-
nonEditable={this.props.nonEditable}
88-
/>
89-
);
90-
});
91-
});
92-
} else {
93-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
94-
let item = data[i];
95-
if (!item) break;
62+
const groups = Registry.groupData(data, this.props.startRow, this.props.endRow + 1);
63+
Object.keys(groups).forEach((key, i) => {
64+
const group = groups[key];
65+
group.forEach(item => {
9666
result.push(
9767
<TaskRow
98-
key={i}
99-
index={i}
68+
key={i + item.id}
69+
index={item.name + i}
10070
item={item}
10171
label={item.name}
10272
top={i * this.props.itemheight}
@@ -107,8 +77,8 @@ export default class TaskList extends Component {
10777
nonEditable={this.props.nonEditable}
10878
/>
10979
);
110-
}
111-
}
80+
});
81+
});
11282
return result;
11383
}
11484

‎src/lib/components/viewport/DataViewPort.js

+35-77
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import DataTask from 'libs/components/viewport/DataTask';
44
import DateHelper from 'libs/helpers/DateHelper';
55
import sizeMe from 'react-sizeme';
66
import Config from 'libs/helpers/config/Config';
7+
import Registry from 'libs/helpers/registry/Registry';
78

89
export class DataRow extends Component {
910
constructor(props) {
@@ -36,84 +37,41 @@ export class DataViewPort extends Component {
3637

3738
renderRows = () => {
3839
let result = [];
39-
if (Config.data.dataViewPort.groupByName) {
40-
const groups = {};
41-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
42-
let item = this.props.data[i];
43-
if (!item) break;
44-
if (groups[item.name] !== undefined) {
45-
groups[item.name].push(item);
46-
} else {
47-
groups[item.name] = [item];
48-
}
49-
}
50-
Object.keys(groups).forEach((key, i) => {
51-
const group = groups[key]
52-
result.push(
53-
<DataRow key={key} label={key} top={i * this.props.itemheight} left={20} itemheight={this.props.itemheight}>
54-
{
55-
group.map(item => {
56-
let new_position = DateHelper.dateToPixel(item.start, this.props.nowposition, this.props.dayWidth);
57-
let new_width = DateHelper.dateToPixel(item.end, this.props.nowposition, this.props.dayWidth) - new_position;
58-
return <DataTask
59-
key={item.id}
60-
item={item}
61-
label={item.name}
62-
nowposition={this.props.nowposition}
63-
dayWidth={this.props.dayWidth}
64-
color={item.color}
65-
left={new_position}
66-
width={new_width}
67-
height={this.props.itemheight}
68-
onChildDrag={this.onChildDrag}
69-
isSelected={this.props.selectedItem == item}
70-
onSelectItem={this.props.onSelectItem}
71-
onStartCreateLink={this.props.onStartCreateLink}
72-
onFinishCreateLink={this.props.onFinishCreateLink}
73-
onTaskChanging={this.props.onTaskChanging}
74-
onUpdateTask={this.props.onUpdateTask}
75-
>
76-
{' '}
77-
</DataTask>
78-
})
79-
}
80-
</DataRow>
81-
);
82-
});
83-
} else {
84-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
85-
let item = this.props.data[i];
86-
if (!item) break;
87-
//FIXME PAINT IN BOUNDARIES
88-
89-
let new_position = DateHelper.dateToPixel(item.start, this.props.nowposition, this.props.dayWidth);
90-
let new_width = DateHelper.dateToPixel(item.end, this.props.nowposition, this.props.dayWidth) - new_position;
91-
result.push(
92-
<DataRow key={i} label={item.name} top={i * this.props.itemheight} left={20} itemheight={this.props.itemheight}>
93-
<DataTask
94-
item={item}
95-
label={item.name}
96-
nowposition={this.props.nowposition}
97-
dayWidth={this.props.dayWidth}
98-
color={item.color}
99-
left={new_position}
100-
width={new_width}
101-
height={this.props.itemheight}
102-
onChildDrag={this.onChildDrag}
103-
isSelected={this.props.selectedItem == item}
104-
onSelectItem={this.props.onSelectItem}
105-
onStartCreateLink={this.props.onStartCreateLink}
106-
onFinishCreateLink={this.props.onFinishCreateLink}
107-
onTaskChanging={this.props.onTaskChanging}
108-
onUpdateTask={this.props.onUpdateTask}
109-
>
110-
{' '}
111-
</DataTask>
112-
</DataRow>
113-
);
114-
}
115-
}
40+
const groups = Registry.groupData(this.props.data, this.props.startRow, this.props.endRow + 1);
11641

42+
Object.keys(groups).forEach((key, i) => {
43+
const group = groups[key];
44+
result.push(
45+
<DataRow key={key} label={key} top={i * this.props.itemheight} left={20} itemheight={this.props.itemheight}>
46+
{
47+
group.map(item => {
48+
let new_position = DateHelper.dateToPixel(item.start, this.props.nowposition, this.props.dayWidth);
49+
let new_width = DateHelper.dateToPixel(item.end, this.props.nowposition, this.props.dayWidth) - new_position;
50+
return <DataTask
51+
key={item.id}
52+
item={item}
53+
label={item.name}
54+
nowposition={this.props.nowposition}
55+
dayWidth={this.props.dayWidth}
56+
color={item.color}
57+
left={new_position}
58+
width={new_width}
59+
height={this.props.itemheight}
60+
onChildDrag={this.onChildDrag}
61+
isSelected={this.props.selectedItem == item}
62+
onSelectItem={this.props.onSelectItem}
63+
onStartCreateLink={this.props.onStartCreateLink}
64+
onFinishCreateLink={this.props.onFinishCreateLink}
65+
onTaskChanging={this.props.onTaskChanging}
66+
onUpdateTask={this.props.onUpdateTask}
67+
>
68+
{' '}
69+
</DataTask>
70+
})
71+
}
72+
</DataRow>
73+
);
74+
});
11775
return result;
11876
};
11977

‎src/lib/helpers/config/Config.js

-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ const defvalues = {
5656
}
5757
},
5858
dataViewPort: {
59-
groupByName: false,
6059
rows: {
6160
style: {
6261
backgroundColor: '#fbf9f9',

‎src/lib/helpers/registry/Registry.js

+28-50
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,30 @@ class Registry {
44
this.link = {}
55
}
66

7-
registerData(list, groupByName) {
7+
registerData(list) {
88
if (!list)
99
return;
1010
this.data = {}
11-
if (groupByName) {
12-
const groups = {};
13-
for (let i = 0; i < list.length; i++) {
14-
let item = list[i];
15-
if (!item) break;
16-
if (groups[item.name] !== undefined) {
17-
groups[item.name].push(item);
18-
} else {
19-
groups[item.name] = [item];
20-
}
21-
}
22-
Object.values(groups).forEach((group, i) => {
23-
group.forEach(item => {
24-
this.data[item.id] = { item, index: i };
25-
});
11+
const groups = this.groupData(list, 0, list.length);
12+
Object.values(groups).forEach((group, i) => {
13+
group.forEach(item => {
14+
this.data[item.id] = { item, index: i };
2615
});
27-
} else {
28-
for (let i = 0; i < list.length; i++) {
29-
this.data[list[i].id] = { item: list[i], index: i };
30-
}
31-
}
16+
});
3217
}
33-
registerLinks(list, groupByName) {
18+
19+
registerLinks(list) {
3420
if (!list)
3521
return
3622
this.link = {}
3723
let start = 0;
3824
let end = 0;
39-
if (groupByName) {
40-
const groups = {};
41-
for (let i = 0; i < list.length; i++) {
42-
let item = list[i];
43-
if (!item) break;
44-
if (groups[item.id] !== undefined) {
45-
groups[item.id].push(item);
46-
} else {
47-
groups[item.id] = [item];
48-
}
49-
}
50-
Object.values(groups).forEach((group, i) => {
51-
group.forEach(item => {
52-
start = item.start;
53-
end = item.end;
54-
let value = { link: item, index: i }
55-
this.createAddTo(start, this.link, value, i)
56-
this.createAddTo(end, this.link, value, i)
57-
});
58-
});
59-
} else {
60-
for (let i = 0; i < list.length; i++) {
61-
start = list[i].start;
62-
end = list[i].end;
63-
let value = { link: list[i], index: i }
64-
this.createAddTo(start, this.link, value, i)
65-
this.createAddTo(end, this.link, value, i)
66-
}
25+
for (let i = 0; i < list.length; i++) {
26+
start = list[i].start;
27+
end = list[i].end;
28+
let value = { link: list[i], index: i }
29+
this.createAddTo(start, this.link, value, i)
30+
this.createAddTo(end, this.link, value, i)
6731
}
6832
}
6933
createAddTo(id, list, value, index) {
@@ -79,6 +43,20 @@ class Registry {
7943
getLinks(id) {
8044
return this.link[id]
8145
}
46+
groupData(list, startIndex, endIndex) {
47+
const groups = {};
48+
for (let i = startIndex; i < endIndex; i++) {
49+
let item = list[i];
50+
if (!item) break;
51+
const key = item.groupName !== undefined ? item.groupName : item.id;
52+
if (groups[key] !== undefined) {
53+
groups[key].push(item);
54+
} else {
55+
groups[key] = [item];
56+
}
57+
}
58+
return groups;
59+
}
8260

8361
}
8462
const instanceRegistry = new Registry();

0 commit comments

Comments
 (0)