Skip to content

Commit a6ac2e0

Browse files
guiquiguiqui
authored
Merge pull request #48 from Domino987/master
Add grouping by name
2 parents 3f5790c + 9060546 commit a6ac2e0

File tree

6 files changed

+144
-77
lines changed

6 files changed

+144
-77
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ class TimeLine extends Component {
264264
onFinishCreateLink = (task, position) => {
265265
console.log(`End Link ${task}`);
266266
if (this.props.onCreateLink && task &&
267-
this.state.taskToCreate &&this.state.taskToCreate.task.id!=task.id) {
267+
this.state.taskToCreate && this.state.taskToCreate.task.id != task.id) {
268268
this.props.onCreateLink({
269269
start: this.state.taskToCreate,
270270
end: { task: task, position: position }

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

+23-20
Original file line numberDiff line numberDiff line change
@@ -1,6 +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 Registry from 'libs/helpers/registry/Registry';
45

56
export class VerticalLine extends Component {
67
constructor(props) {
@@ -39,8 +40,8 @@ export class TaskRow extends Component {
3940
{this.props.label}
4041
</div>
4142
) : (
42-
<ContentEditable value={this.props.label} index={this.props.index} onChange={this.onChange} />
43-
)}
43+
<ContentEditable value={this.props.label} index={this.props.index} onChange={this.onChange} />
44+
)}
4445
</div>
4546
);
4647
}
@@ -58,24 +59,26 @@ export default class TaskList extends Component {
5859

5960
renderTaskRow(data) {
6061
let result = [];
61-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
62-
let item = data[i];
63-
if (!item) break;
64-
result.push(
65-
<TaskRow
66-
key={i}
67-
index={i}
68-
item={item}
69-
label={item.name}
70-
top={i * this.props.itemheight}
71-
itemheight={this.props.itemheight}
72-
isSelected={this.props.selectedItem == item}
73-
onUpdateTask={this.props.onUpdateTask}
74-
onSelectItem={this.props.onSelectItem}
75-
nonEditable={this.props.nonEditable}
76-
/>
77-
);
78-
}
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 => {
66+
result.push(
67+
<TaskRow
68+
key={i + item.id}
69+
index={item.name + i}
70+
item={item}
71+
label={key}
72+
top={i * this.props.itemheight}
73+
itemheight={this.props.itemheight}
74+
isSelected={this.props.selectedItem == item}
75+
onUpdateTask={this.props.onUpdateTask}
76+
onSelectItem={this.props.onSelectItem}
77+
nonEditable={this.props.nonEditable}
78+
/>
79+
);
80+
});
81+
});
7982
return result;
8083
}
8184

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

+32-27
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,37 +37,41 @@ export class DataViewPort extends Component {
3637

3738
renderRows = () => {
3839
let result = [];
39-
for (let i = this.props.startRow; i < this.props.endRow + 1; i++) {
40-
let item = this.props.data[i];
41-
if (!item) break;
42-
//FIXME PAINT IN BOUNDARIES
40+
const groups = Registry.groupData(this.props.data, this.props.startRow, this.props.endRow + 1);
4341

44-
let new_position = DateHelper.dateToPixel(item.start, this.props.nowposition, this.props.dayWidth);
45-
let new_width = DateHelper.dateToPixel(item.end, this.props.nowposition, this.props.dayWidth) - new_position;
42+
Object.keys(groups).forEach((key, i) => {
43+
const group = groups[key];
4644
result.push(
47-
<DataRow key={i} label={item.name} top={i * this.props.itemheight} left={20} itemheight={this.props.itemheight}>
48-
<DataTask
49-
item={item}
50-
label={item.name}
51-
nowposition={this.props.nowposition}
52-
dayWidth={this.props.dayWidth}
53-
color={item.color}
54-
left={new_position}
55-
width={new_width}
56-
height={this.props.itemheight}
57-
onChildDrag={this.onChildDrag}
58-
isSelected={this.props.selectedItem == item}
59-
onSelectItem={this.props.onSelectItem}
60-
onStartCreateLink={this.props.onStartCreateLink}
61-
onFinishCreateLink={this.props.onFinishCreateLink}
62-
onTaskChanging={this.props.onTaskChanging}
63-
onUpdateTask={this.props.onUpdateTask}
64-
>
65-
{' '}
66-
</DataTask>
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+
}
6772
</DataRow>
6873
);
69-
}
74+
});
7075
return result;
7176
};
7277

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const defvalues = {
5555
}
5656
}
5757
},
58-
dataViewPort: {
58+
dataViewPort: {
5959
rows: {
6060
style: {
6161
backgroundColor: '#fbf9f9',

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

+44-28
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,63 @@
1-
2-
class Registry{
3-
constructor(){
4-
this.data={}
5-
this.link={}
1+
class Registry {
2+
constructor() {
3+
this.data = {}
4+
this.link = {}
65
}
76

8-
registerData(list){
7+
registerData(list) {
98
if (!list)
109
return;
11-
this.data={}
12-
for (let i=0;i<list.length;i++){
13-
this.data[list[i].id]={item:list[i],index:i};
14-
}
10+
this.data = {}
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 };
15+
});
16+
});
1517
}
16-
registerLinks(list){
17-
if(!list)
18-
return
19-
this.link={}
20-
let start=0;
21-
let end=0;
2218

23-
for (let i=0;i<list.length;i++){
24-
start=list[i].start;
25-
end=list[i].end;
26-
let value={link:list[i],index:i}
27-
this.createAddTo(start,this.link,value,i)
28-
this.createAddTo(end,this.link,value,i)
19+
registerLinks(list) {
20+
if (!list)
21+
return
22+
this.link = {}
23+
let start = 0;
24+
let end = 0;
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)
2931
}
3032
}
31-
createAddTo(id,list,value,index){
33+
createAddTo(id, list, value, index) {
3234
if (!list[id])
33-
list[id]=[]
34-
if (list[id].indexOf(value)==-1)
35+
list[id] = []
36+
if (list[id].indexOf(value) == -1)
3537
list[id].push(value)
3638
}
3739

38-
getTask(id){
40+
getTask(id) {
3941
return this.data[id]
4042
}
41-
getLinks(id){
43+
getLinks(id) {
4244
return this.link[id]
4345
}
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+
}
4460

4561
}
46-
const instanceRegistry=new Registry();
62+
const instanceRegistry = new Registry();
4763
export default instanceRegistry;

0 commit comments

Comments
 (0)