mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[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:
@@ -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"
|
||||
|
@@ -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);
|
||||
|
@@ -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 {
|
||||
|
@@ -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);
|
||||
});
|
||||
|
||||
|
@@ -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);
|
||||
|
Reference in New Issue
Block a user