inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4592] missing right click menu on row and left click is only allow on indicator rotate (#8327)

Browse Source 
* ACS-4592 Displaying context menu for tree list row and allow to expand row by clicking at label

* ACS-4592 Added clicking on label for load more button

* ACS-4592 Unit tests

* ACS-4592 Added documentation for context menu for tree component and fixed lint issues

* ACS-4592 Trigger stuck check
This commit is contained in:
AleksanderSklorz
2023-03-08 14:11:48 +01:00
committed by GitHub
parent 41f9974919
commit 9863149a28
8 changed files with 315 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
lib/content-services/src/lib/tree/components/tree.component.ts
View File

@@ -15,14 +15,28 @@
* limitations under the License.
*/
import { Component, EventEmitter, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChildren, ViewEncapsulation } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import {
Component,
EventEmitter,
HostBinding,
Input,
OnDestroy,
OnInit,
Output,
QueryList,
TemplateRef,
ViewChildren,
ViewEncapsulation
} from '@angular/core';
import { BehaviorSubject, merge, Observable, Subject } from 'rxjs';
import { TreeNode, TreeNodeType } from '../models/tree-node.interface';
import { TreeService } from '../services/tree.service';
import { PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
import { TreeResponse } from '../models/tree-response.interface';
import { MatCheckbox } from '@angular/material/checkbox';
import { TreeContextMenuResult } from '../models/tree-context-menu-result.interface';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'adf-tree',
@@ -31,7 +45,7 @@ import { MatCheckbox } from '@angular/material/checkbox';
host: { class: 'adf-tree' },
encapsulation: ViewEncapsulation.None
})
export class TreeComponent<T extends TreeNode> implements OnInit {
export class TreeComponent<T extends TreeNode> implements OnInit, OnDestroy {
/** TemplateRef to provide empty template when no nodes are loaded */
@Input()
@@ -70,16 +84,57 @@ export class TreeComponent<T extends TreeNode> implements OnInit {
@Output()
public paginationChanged: EventEmitter<PaginationModel> = new EventEmitter();
/** Emitted when any context menu option is selected */
@Output()
public contextMenuOptionSelected = new EventEmitter<TreeContextMenuResult<T>>();
@ViewChildren(MatCheckbox)
public nodeCheckboxes: QueryList<MatCheckbox>;
private loadingRootSource = new BehaviorSubject<boolean>(false);
private _contextMenuSource: T;
private _contextMenuOptions: any[];
private contextMenuOptionsChanged$ = new Subject<void>();
public loadingRoot$: Observable<boolean>;
public treeNodesSelection = new SelectionModel<T>(true, [], true, (node1: T, node2: T) => node1.id === node2.id);
constructor(public treeService: TreeService<T>,
private userPreferenceService: UserPreferencesService) {}
set contextMenuSource(contextMenuSource: T) {
this._contextMenuSource = contextMenuSource;
}
/** Array of context menu options which should be displayed for each row. */
@Input()
set contextMenuOptions(contextMenuOptions: any[]) {
this.contextMenuOptionsChanged$.next();
if (contextMenuOptions) {
this._contextMenuOptions = contextMenuOptions.map((option) => {
if (!option.subject) {
option = {
...option,
subject: new Subject()
};
}
return option;
});
merge(...this.contextMenuOptions.map((option) => option.subject)).pipe(takeUntil(this.contextMenuOptionsChanged$))
.subscribe((option) => {
this.contextMenuOptionSelected.emit({
row: this._contextMenuSource,
contextMenuOption: option
});
});
} else {
this._contextMenuOptions = contextMenuOptions;
}
}
get contextMenuOptions(): any[] {
return this._contextMenuOptions;
}
ngOnInit(): void {
this.loadingRoot$ = this.loadingRootSource.asObservable();
this.refreshTree(0, this.userPreferenceService.paginationSize);
@@ -88,6 +143,11 @@ export class TreeComponent<T extends TreeNode> implements OnInit {
});
}
ngOnDestroy() {
this.contextMenuOptionsChanged$.next();
this.contextMenuOptionsChanged$.complete();
}
/**
* Checks if node is LoadMoreNode node
*
@@ -141,21 +201,23 @@ export class TreeComponent<T extends TreeNode> implements OnInit {
* @param node node to be collapsed/expanded
*/
public expandCollapseNode(node: T): void {
if (this.treeService.treeControl.isExpanded(node)) {
this.treeService.collapseNode(node);
} else {
node.isLoading = true;
this.treeService.getSubNodes(node.id, 0, this.userPreferenceService.paginationSize).subscribe((response: TreeResponse<T>) => {
this.treeService.expandNode(node, response.entries);
this.paginationChanged.emit(response.pagination);
node.isLoading = false;
if (this.treeNodesSelection.isSelected(node)) {
//timeout used to update nodeCheckboxes query list after new nodes are added so they can be selected
setTimeout(() => {
this.treeNodesSelection.select(...response.entries);
});
}
});
if (node.hasChildren) {
if (this.treeService.treeControl.isExpanded(node)) {
this.treeService.collapseNode(node);
} else {
node.isLoading = true;
this.treeService.getSubNodes(node.id, 0, this.userPreferenceService.paginationSize).subscribe((response: TreeResponse<T>) => {
this.treeService.expandNode(node, response.entries);
this.paginationChanged.emit(response.pagination);
node.isLoading = false;
if (this.treeNodesSelection.isSelected(node)) {
//timeout used to update nodeCheckboxes query list after new nodes are added so they can be selected
setTimeout(() => {
this.treeNodesSelection.select(...response.entries);
});
}
});
}
}
}