#91 - replace sidebar tree component with custom 1st-party implementation
parent
87b99473bd
commit
f3f8578834
GPG Key ID:
D2BF5FBA8298F246
@ -0,0 +1,37 @@
|
||||
<div [ngClass]="{container: true, dark: isDark()}">
|
||||
<ng-container *ngFor="let item of items">
|
||||
<div
|
||||
class="item"
|
||||
*ngIf="!item.__app_tree_comp_is_hidden"
|
||||
(click)="onItemClick($event, item)"
|
||||
(dblclick)="onItemDoubleClick($event, item)"
|
||||
(contextmenu)="onItemRightClick($event, item)"
|
||||
[ngClass]="{activated: selectedItem === item}"
|
||||
>
|
||||
<i
|
||||
*ngIf="hasNesting(item) && !item.__app_tree_comp_is_collapsed"
|
||||
(click)="onItemHandleClick($event, item)"
|
||||
class="fa fa-chevron-down handle handle-expanded"
|
||||
></i>
|
||||
<i
|
||||
*ngIf="hasNesting(item) && item.__app_tree_comp_is_collapsed"
|
||||
(click)="onItemHandleClick($event, item)"
|
||||
class="fa fa-chevron-right handle handle-collapsed"
|
||||
></i>
|
||||
<i *ngIf="iconClassField" [ngClass]="item[iconClassField]"></i>
|
||||
{{ item[displayField] }}
|
||||
</div>
|
||||
<div class="nested-level" *ngIf="hasNesting(item, true) && !item.__app_tree_comp_is_collapsed">
|
||||
<app-tree-root
|
||||
#childComponents
|
||||
[displayField]="displayField"
|
||||
[childrenField]="childrenField"
|
||||
[nestingLevel]="nestingLevel + 1"
|
||||
[iconClassField]="iconClassField"
|
||||
[items]="item[childrenField]"
|
||||
[parent]="this"
|
||||
[parentItem]="item"
|
||||
></app-tree-root>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@ -0,0 +1,38 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nested-level {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
border-left: 1px solid #cccccc;
|
||||
user-select: none;
|
||||
|
||||
i {
|
||||
padding-right: 10px;
|
||||
|
||||
&.handle {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.activated {
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.container.dark {
|
||||
.item {
|
||||
border-color: #555555;
|
||||
|
||||
&:hover, &.activated {
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,253 @@
|
||||
import {Component, EventEmitter, Input, OnInit, Output, ViewChildren} from '@angular/core';
|
||||
import {debug} from '../../utility';
|
||||
|
||||
/**
|
||||
* A recursive tree listing component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-tree-root',
|
||||
templateUrl: './tree-root.component.html',
|
||||
styleUrls: ['./tree-root.component.scss'],
|
||||
})
|
||||
export class TreeRootComponent implements OnInit {
|
||||
/** The immediate children of this component. */
|
||||
@ViewChildren('childComponents')
|
||||
protected childComponents;
|
||||
|
||||
/** How deeply nested this component is in the tree. */
|
||||
@Input()
|
||||
public nestingLevel = 0;
|
||||
|
||||
/** Field on the listing record with the display string. */
|
||||
@Input()
|
||||
public displayField = 'name';
|
||||
|
||||
/** Field on the listing record that contains the children of an item. */
|
||||
@Input()
|
||||
public childrenField = 'children';
|
||||
|
||||
/** Optionally, field on the listing record that contains the <i> icon class. */
|
||||
@Input()
|
||||
public iconClassField?: string;
|
||||
|
||||
/** The nested listing items. */
|
||||
@Input()
|
||||
public items: any[] = [];
|
||||
|
||||
/** @private Set by the parent component when recursively nested. */
|
||||
@Input()
|
||||
public parent?: TreeRootComponent;
|
||||
|
||||
/** @private Item object that created this listing when recursively nested. */
|
||||
@Input()
|
||||
public parentItem?: any;
|
||||
|
||||
/** Emits the selected item, when top-level tree. */
|
||||
@Output()
|
||||
public itemSelected: EventEmitter<{ event: MouseEvent, item: any }> = new EventEmitter<{event: MouseEvent; item: any}>();
|
||||
|
||||
/** Emits the activated item, when top-level tree. */
|
||||
@Output()
|
||||
public itemActivated: EventEmitter<{ event: MouseEvent, item: any }> = new EventEmitter<{event: MouseEvent; item: any}>();
|
||||
|
||||
/** Emits the right-clicked item, when top-level tree. */
|
||||
@Output()
|
||||
public itemRightClicked: EventEmitter<{ event: MouseEvent, item: any }> = new EventEmitter<{event: MouseEvent; item: any}>();
|
||||
|
||||
/** The selected item record at this level, if one exists. */
|
||||
public selectedItem?: any;
|
||||
|
||||
/** The current tree filter value, if one exists. */
|
||||
protected filterValue?: string;
|
||||
|
||||
/** Called on initialization. */
|
||||
ngOnInit() {
|
||||
if ( !this.parent ) {
|
||||
debug('Top-level tree root component:', this);
|
||||
}
|
||||
}
|
||||
|
||||
/** True if we're in dark mode. */
|
||||
public isDark() {
|
||||
return document.body.classList.contains('dark');
|
||||
}
|
||||
|
||||
/** Recursively filter the tree using the given quick-filter string. */
|
||||
public filterTree(filterValue?: string) {
|
||||
this.setFilterRecursively(filterValue);
|
||||
}
|
||||
|
||||
/** Emit an item selected event, or bubble up to the parent. */
|
||||
public emitItemSelected(event: MouseEvent, item: any) {
|
||||
if ( this.parent ) {
|
||||
return this.parent.emitItemSelected(event, item);
|
||||
}
|
||||
|
||||
this.itemSelected.emit({
|
||||
event,
|
||||
item,
|
||||
});
|
||||
}
|
||||
|
||||
/** Emit an item activated event, or bubble up to the parent. */
|
||||
public emitItemActivated(event: MouseEvent, item: any) {
|
||||
if ( this.parent ) {
|
||||
return this.parent.emitItemActivated(event, item);
|
||||
}
|
||||
|
||||
this.itemActivated.emit({
|
||||
event,
|
||||
item,
|
||||
});
|
||||
}
|
||||
|
||||
/** Emit an item right-clicked event, or bubble up to the parent. */
|
||||
public emitItemRightClicked(event: MouseEvent, item: any) {
|
||||
if ( this.parent ) {
|
||||
return this.parent.emitItemRightClicked(event, item);
|
||||
}
|
||||
|
||||
this.itemRightClicked.emit({
|
||||
event,
|
||||
item,
|
||||
});
|
||||
}
|
||||
|
||||
/** Wrapper for checking arrays for use in NG templates. */
|
||||
public isArray(something: unknown): boolean {
|
||||
return Array.isArray(something);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if an item has nested children.
|
||||
* @param item
|
||||
* @param includeHidden - if true, will include children hidden by the quick-filter
|
||||
*/
|
||||
public hasNesting(item: any, includeHidden = false): boolean {
|
||||
const hasUnfilteredNesting = item && this.isArray(item[this.childrenField]) && item[this.childrenField].length;
|
||||
if ( !this.filterValue || includeHidden ) {
|
||||
return hasUnfilteredNesting;
|
||||
}
|
||||
|
||||
return hasUnfilteredNesting && item[this.childrenField].some(child => !child.__app_tree_comp_is_hidden);
|
||||
}
|
||||
|
||||
/** Called when an item expand/collapse arrow is clicked. */
|
||||
public onItemHandleClick(event: MouseEvent, item: any) {
|
||||
if ( this.hasNesting(item) ) {
|
||||
this.setExpansionRecursively(item, !item.__app_tree_comp_is_collapsed);
|
||||
}
|
||||
}
|
||||
|
||||
/** Called when an item is clicked. */
|
||||
public onItemClick(event: MouseEvent, item: any) {
|
||||
this.clearSelection();
|
||||
this.selectedItem = item;
|
||||
this.emitItemSelected(event, item);
|
||||
}
|
||||
|
||||
/** Called when an item is double-clicked. */
|
||||
public onItemDoubleClick(event: MouseEvent, item: any) {
|
||||
this.emitItemActivated(event, item);
|
||||
}
|
||||
|
||||
/** Called when an item is right-clicked. */
|
||||
public onItemRightClick(event: MouseEvent, item: any) {
|
||||
this.clearSelection();
|
||||
this.selectedItem = item;
|
||||
this.emitItemRightClicked(event, item);
|
||||
}
|
||||
|
||||
/** Recursively clear the selection from the entire tree, calling children and bubbling up to parent. */
|
||||
public clearSelection(from?: TreeRootComponent) {
|
||||
this.selectedItem = undefined;
|
||||
|
||||
if ( this.childComponents ) {
|
||||
for ( const child of this.childComponents ) {
|
||||
if ( child === from ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
child.clearSelection(this);
|
||||
}
|
||||
}
|
||||
|
||||
if ( this.parent ) {
|
||||
if ( this.parent !== from ) {
|
||||
this.parent.clearSelection(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively set the filter on this subtree.
|
||||
* Returns true if any of the children of this level match the filter.
|
||||
* @param filterValue
|
||||
* @param from
|
||||
* @protected
|
||||
*/
|
||||
protected setFilterRecursively(filterValue?: string, from?: TreeRootComponent): boolean {
|
||||
this.filterValue = filterValue;
|
||||
|
||||
let anyChildMatchesFilter = false;
|
||||
for ( const item of this.items ) {
|
||||
item.__app_tree_comp_is_hidden = this.getFilterHiddenStatusForItem(item);
|
||||
anyChildMatchesFilter = anyChildMatchesFilter || !item.__app_tree_comp_is_hidden;
|
||||
}
|
||||
|
||||
return anyChildMatchesFilter;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the given item should be hidden with the current quick-filter.
|
||||
* @param item
|
||||
* @protected
|
||||
*/
|
||||
protected getFilterHiddenStatusForItem(item: any): boolean {
|
||||
const itemMatchesFilter = (
|
||||
!this.filterValue
|
||||
|| (
|
||||
item[this.displayField]?.trim()?.toLowerCase()?.includes(this.filterValue?.trim()?.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
if ( !this.hasNesting(item, true) ) {
|
||||
return !itemMatchesFilter;
|
||||
}
|
||||
|
||||
let anyChildMatchesFilter = false;
|
||||
const childTree = this.getChildComponentForItem(item);
|
||||
if ( childTree ) {
|
||||
anyChildMatchesFilter = childTree.setFilterRecursively(this.filterValue, this);
|
||||
} else {
|
||||
debug('Unable to find childTree for item:', item[this.displayField]);
|
||||
}
|
||||
|
||||
return !(!this.filterValue || itemMatchesFilter || anyChildMatchesFilter);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the TreeRootComponent instance for some item's children, if it exists.
|
||||
* @param item
|
||||
* @protected
|
||||
*/
|
||||
protected getChildComponentForItem(item: any): TreeRootComponent | undefined {
|
||||
return [...(this.childComponents || [])]?.find(child => {
|
||||
return child.parentItem === item;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand or collapse an item recursively.
|
||||
* @param item
|
||||
* @param isCollapsed
|
||||
*/
|
||||
public setExpansionRecursively(item: any, isCollapsed: boolean) {
|
||||
item.__app_tree_comp_is_collapsed = isCollapsed;
|
||||
if ( this.hasNesting(item, true) && isCollapsed ) {
|
||||
for ( const child of item.children ) {
|
||||
this.setExpansionRecursively(child, isCollapsed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue