[ACS-5143] Tree component expand/collapse fix (#8528)

* [ACS-5143] Tree component expand/collapse fix

* [ACS-5143] Remove extra empty space
This commit is contained in:
MichalKinas
2023-05-04 13:10:02 +02:00
committed by GitHub
parent 895d4189f2
commit 5d6a1ea6a4
5 changed files with 33 additions and 3 deletions

View File

@@ -51,8 +51,7 @@
<div class="adf-tree-expand-collapse-container">
<button *ngIf="node.hasChildren"
class="adf-tree-expand-collapse-button"
mat-icon-button
matTreeNodeToggle>
mat-icon-button>
<mat-progress-spinner
color="primary"
mode="indeterminate"

View File

@@ -172,6 +172,16 @@ describe('TreeComponent', () => {
expect(getNodesSpy).toHaveBeenCalledWith('-root-', 0, 25, 'some term');
});
it('should not collapse node when loading', () => {
component.refreshTree();
component.treeService.treeNodes[0].isLoading = true;
fixture.detectChanges();
const collapseSpy = spyOn(component.treeService, 'collapseNode');
spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(true);
getNodeSpinner(component.treeService.treeNodes[0].id).dispatchEvent(new Event('click'));
expect(collapseSpy).not.toHaveBeenCalled();
});
it('should call correct server method on collapsing node', () => {
component.refreshTree();
component.treeService.treeNodes[0].isLoading = false;
@@ -182,8 +192,19 @@ describe('TreeComponent', () => {
expect(collapseSpy).toHaveBeenCalledWith(component.treeService.treeNodes[0]);
});
it('should not expand node when loading', () => {
component.refreshTree();
component.treeService.treeNodes[0].isLoading = true;
fixture.detectChanges();
const expandSpy = spyOn(component.treeService, 'expandNode');
spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(false);
getNodeSpinner(component.treeService.treeNodes[0].id).dispatchEvent(new Event('click'));
expect(expandSpy).not.toHaveBeenCalled();
});
it('should call correct server method on expanding node', () => {
component.refreshTree();
component.treeService.treeNodes[0].isLoading = false;
fixture.detectChanges();
const collapseSpy = spyOn(component.treeService, 'expandNode');
spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(false);

View File

@@ -201,7 +201,7 @@ export class TreeComponent<T extends TreeNode> implements OnInit, OnDestroy {
* @param node node to be collapsed/expanded
*/
public expandCollapseNode(node: T): void {
if (node.hasChildren) {
if (node.hasChildren && !node.isLoading) {
if (this.treeService.treeControl.isExpanded(node)) {
this.treeService.collapseNode(node);
} else {

View File

@@ -50,8 +50,10 @@ describe('TreeService', () => {
const treeNodesMockCopy = Array.from(treeNodesMock);
service.treeNodes = treeNodesMockCopy;
const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
const treeControlExpandSpy = spyOn(service.treeControl, 'expand');
service.expandNode(treeNodesMockCopy[0], Array.from(treeNodesChildrenMock));
expect(nodesSourceSpy).toHaveBeenCalled();
expect(treeControlExpandSpy).toHaveBeenCalledWith(treeNodesMockCopy[0]);
expect(service.treeNodes.length).toEqual(treeNodesMockCopy.length);
});
@@ -59,8 +61,10 @@ describe('TreeService', () => {
const treeNodesMockExpandedCopy = Array.from(treeNodesMockExpanded);
service.treeNodes = treeNodesMockExpandedCopy;
const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
const treeControlCollapseSpy = spyOn(service.treeControl, 'collapse');
service.collapseNode(treeNodesMockExpandedCopy[0]);
expect(nodesSourceSpy).toHaveBeenCalled();
expect(treeControlCollapseSpy).toHaveBeenCalledWith(treeNodesMockExpandedCopy[0]);
expect(service.treeNodes.length).toEqual(treeNodesMock.length);
});
@@ -75,16 +79,20 @@ describe('TreeService', () => {
it('should not expand node without children', () => {
service.treeNodes = Array.from(treeNodesNoChildrenMock);
const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
const treeControlExpandSpy = spyOn(service.treeControl, 'expand');
service.expandNode(Array.from(treeNodesNoChildrenMock)[0], []);
expect(nodesSourceSpy).not.toHaveBeenCalled();
expect(treeControlExpandSpy).not.toHaveBeenCalled();
expect(service.treeNodes.length).toEqual(treeNodesNoChildrenMock.length);
});
it('should not collapse node without children', () => {
service.treeNodes = Array.from(treeNodesNoChildrenMock);
const nodesSourceSpy = spyOn(service.treeNodesSource, 'next');
const treeControlCollapseSpy = spyOn(service.treeControl, 'collapse');
service.collapseNode(Array.from(treeNodesNoChildrenMock)[0]);
expect(nodesSourceSpy).not.toHaveBeenCalled();
expect(treeControlCollapseSpy).not.toHaveBeenCalled();
expect(service.treeNodes.length).toEqual(treeNodesNoChildrenMock.length);
});

View File

@@ -52,6 +52,7 @@ export abstract class TreeService<T extends TreeNode> extends DataSource<T> {
*/
public expandNode(nodeToExpand: T, subNodes: T[]): void {
if (nodeToExpand != null && subNodes != null && nodeToExpand.hasChildren) {
this.treeControl.expand(nodeToExpand);
const index: number = this.treeNodes.indexOf(nodeToExpand);
this.treeNodes.splice(index + 1, 0, ...subNodes);
nodeToExpand.isLoading = false;
@@ -66,6 +67,7 @@ export abstract class TreeService<T extends TreeNode> extends DataSource<T> {
*/
public collapseNode(nodeToCollapse: T): void {
if (nodeToCollapse != null && nodeToCollapse.hasChildren) {
this.treeControl.collapse(nodeToCollapse);
const children: T[] = this.treeNodes.filter((node: T) => nodeToCollapse.id === node.parentId);
children.forEach((child: T) => {
this.collapseInnerNode(child);