Skip to content

Commit eeb22c8

Browse files
author
gmateo
committed
fixed tree sort behavior
1 parent 0e2e1e8 commit eeb22c8

File tree

2 files changed

+73
-11
lines changed

2 files changed

+73
-11
lines changed

demo/demo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class App extends Component {
4242
{ id: 1, name: 'A1', surname: 'B', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 0, sex: 'Male', type: 'adult', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35) },
4343
{ id: 2, name: 'A2', surname: 'B', isMarried: false, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'adult', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 1 },
4444
{ id: 3, name: 'A3', surname: 'B', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 1 },
45-
{ id: 4, name: 'A4', surname: 'C', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 3 },
45+
{ id: 4, name: 'A4', surname: 'Dede', isMarried: true, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 3 },
4646
{ id: 5, name: 'A5', surname: 'C', isMarried: false, birthDate: new Date(1987, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35) },
4747
{ id: 6, name: 'A6', surname: 'C', isMarried: true, birthDate: new Date(1989, 1, 1), birthCity: 34, sex: 'Female', type: 'child', insertDateTime: new Date(2018, 1, 1, 12, 23, 44), time: new Date(1900, 1, 1, 14, 23, 35), parentId: 5 },
4848
],
@@ -127,7 +127,7 @@ class App extends Component {
127127
/>
128128
),
129129
},
130-
{ title: 'Id', field: 'id', filterPlaceholder:'placeholder' },
130+
{ title: 'Id', field: 'id', filterPlaceholder: 'placeholder' },
131131
{ title: 'First Name', field: 'first_name' },
132132
{ title: 'Last Name', field: 'last_name' },
133133
]}

src/utils/data-manager.js

Lines changed: 71 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default class DataManager {
55
applyFilters = false;
66
applySearch = false;
77
currentPage = 0;
8-
detailPanelType = 'multiple'
8+
detailPanelType = 'multiple'
99
lastDetailPanelRow = undefined;
1010
lastEditingRow = undefined;
1111
orderBy = -1;
@@ -269,10 +269,10 @@ export default class DataManager {
269269
else if (result.destination.droppableId === "groups" && result.source.droppableId === "headers") {
270270
const newGroup = this.columns.find(c => c.tableData.id == result.draggableId);
271271

272-
if(newGroup.grouping === false || !newGroup.field){
272+
if (newGroup.grouping === false || !newGroup.field) {
273273
return;
274274
}
275-
275+
276276
groups.splice(result.destination.index, 0, newGroup);
277277
}
278278
else if (result.destination.droppableId === "headers" && result.source.droppableId === "groups") {
@@ -556,6 +556,9 @@ export default class DataManager {
556556
this.searchedData = [...this.filteredData];
557557

558558
if (this.searchText && this.applySearch) {
559+
this.searchedData.forEach(row => {
560+
row.tableData.isTreeExpanded = false;
561+
})
559562
this.searchedData = this.searchedData.filter(row => {
560563
return this.columns
561564
.filter(columnDef => { return columnDef.searchable === undefined ? !columnDef.hidden : columnDef.searchable })
@@ -571,6 +574,17 @@ export default class DataManager {
571574
}
572575
});
573576
});
577+
// expand all rows from the matched child to the root item
578+
this.searchedData.forEach(row => {
579+
let currentRow = row;
580+
while (this.parentFunc(currentRow, this.data)) {
581+
let parent = this.parentFunc(currentRow, this.data);
582+
if (parent) {
583+
parent.tableData.isTreeExpanded = true;
584+
}
585+
currentRow = parent;
586+
}
587+
});
574588
}
575589

576590
this.searched = true;
@@ -624,14 +638,10 @@ export default class DataManager {
624638
this.treeDataMaxLevel = 0;
625639

626640
const addRow = (rowData) => {
641+
rowData.tableData.markedForTreeRemove = false;
627642
let parent = this.parentFunc(rowData, this.data);
628-
629643
if (parent) {
630644
parent.tableData.childRows = parent.tableData.childRows || [];
631-
let oldParent = parent.tableData.path && this.findDataByPath(this.treefiedData, parent.tableData.path);
632-
let isDefined = oldParent && oldParent.tableData.isTreeExpanded !== undefined;
633-
634-
parent.tableData.isTreeExpanded = isDefined ? oldParent.tableData.isTreeExpanded : (this.defaultExpanded ? true : false);
635645
if (!parent.tableData.childRows.includes(rowData)) {
636646
parent.tableData.childRows.push(rowData);
637647
this.treefiedDataLength++;
@@ -651,10 +661,62 @@ export default class DataManager {
651661
}
652662
};
653663

654-
this.searchedData.forEach(rowData => {
664+
// Add all rows initially
665+
this.data.forEach(rowData => {
655666
addRow(rowData);
656667
});
657668

669+
const markForTreeRemove = (rowData) => {
670+
let pointer = this.treefiedData;
671+
rowData.tableData.path.forEach(pathPart => {
672+
if (pointer.tableData && pointer.tableData.childRows) {
673+
pointer = pointer.tableData.childRows;
674+
}
675+
pointer = pointer[pathPart]
676+
})
677+
pointer.tableData.markedForTreeRemove = true;
678+
}
679+
680+
const traverseChildrenAndUnmark = (rowData) => {
681+
if (rowData.tableData.childRows) {
682+
rowData.tableData.childRows.forEach(row => {
683+
traverseChildrenAndUnmark(row);
684+
})
685+
}
686+
rowData.tableData.markedForTreeRemove = false;
687+
}
688+
689+
// for all data rows, restore initial expand if no search term is available and remove items that shouldn't be there
690+
this.data.forEach(rowData => {
691+
if (!this.searchText) {
692+
rowData.tableData.isTreeExpanded = this.defaultExpanded;
693+
}
694+
const hasSearchMatchedChildren = rowData.tableData.isTreeExpanded;
695+
if (!hasSearchMatchedChildren && this.searchedData.indexOf(rowData) < 0) {
696+
markForTreeRemove(rowData);
697+
}
698+
});
699+
700+
// preserve all children of nodes that are matched by search
701+
this.data.forEach(rowData => {
702+
if (this.searchedData.indexOf(rowData) > -1) {
703+
traverseChildrenAndUnmark(rowData)
704+
}
705+
});
706+
707+
const traverseTreeAndDeleteMarked = (rowDataArray) => {
708+
for (var i = rowDataArray.length - 1; i >= 0; i--) {
709+
const item = rowDataArray[i];
710+
if (item.tableData.childRows) {
711+
traverseTreeAndDeleteMarked(item.tableData.childRows);
712+
}
713+
if (item.tableData.markedForTreeRemove)
714+
rowDataArray.splice(i, 1);
715+
}
716+
}
717+
718+
traverseTreeAndDeleteMarked(this.treefiedData);
719+
658720
this.treefied = true;
659721
}
660722

0 commit comments

Comments
 (0)