101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
<div class="ucap-group-expansion-container" fxFlexFill>
|
|
<cdk-virtual-scroll-viewport #cvsvList perfectScrollbar fxFlexFill>
|
|
<ng-container
|
|
*cdkVirtualFor="
|
|
let node of dataSource.expandedData$;
|
|
templateCacheSize: 0
|
|
"
|
|
></ng-container>
|
|
|
|
<mat-tree #treeList [dataSource]="dataSource" [treeControl]="treeControl">
|
|
<mat-tree-node
|
|
*matTreeNodeDef="let node"
|
|
[attr.node-type]="node?.nodeType"
|
|
matRipple
|
|
>
|
|
<li>
|
|
<div>
|
|
<ng-container
|
|
[ngTemplateOutlet]="nodeTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
|
></ng-container>
|
|
</div>
|
|
</li>
|
|
</mat-tree-node>
|
|
|
|
<mat-tree-node
|
|
*matTreeNodeDef="let node; when: isHeader"
|
|
class="tree-node-frame ucap-clickable"
|
|
[attr.node-type]="node?.nodeType"
|
|
matRipple
|
|
>
|
|
<li class="tree-node-header" matTreeNodeToggle>
|
|
<div class="path">
|
|
<button
|
|
mat-icon-button
|
|
[attr.aria-label]="'toggle '"
|
|
class="btn-toggle"
|
|
*ngIf="!checkable"
|
|
>
|
|
<mat-icon class="mat-icon-rtl-mirror">
|
|
{{
|
|
treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'
|
|
}}
|
|
</mat-icon>
|
|
</button>
|
|
<div class="group-info">
|
|
<ng-container [ngSwitch]="node.nodeType">
|
|
<ng-container
|
|
*ngSwitchCase="NodeType.Favorite"
|
|
[ngTemplateOutlet]="favoriteHeaderTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
|
>
|
|
</ng-container>
|
|
<ng-container
|
|
*ngSwitchCase="NodeType.Default"
|
|
[ngTemplateOutlet]="defaultHeaderTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
|
>
|
|
</ng-container>
|
|
<ng-container
|
|
*ngSwitchCase="NodeType.Buddy"
|
|
[ngTemplateOutlet]="buddyHeaderTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: node?.node }"
|
|
>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<mat-checkbox
|
|
*ngIf="checkable"
|
|
#checkbox
|
|
[checked]="isCheckedGroup(node)"
|
|
[disabled]="!isCheckableGroup(node)"
|
|
(change)="onChangeCheckGroup(checkbox.checked, node)"
|
|
(click)="$event.stopPropagation()"
|
|
class="group-check"
|
|
>
|
|
</mat-checkbox>
|
|
<button
|
|
mat-icon-button
|
|
aria-label="group-header-menu"
|
|
*ngIf="!checkable"
|
|
(click)="
|
|
$event.stopPropagation(); onClickHeaderMenu($event, node)
|
|
"
|
|
>
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
</div>
|
|
<ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
|
|
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">
|
|
<div class="vertical-line"></div>
|
|
<ng-container matTreeNodeOutlet></ng-container>
|
|
</div>
|
|
</ul>
|
|
</li>
|
|
</mat-tree-node>
|
|
</mat-tree>
|
|
</cdk-virtual-scroll-viewport>
|
|
</div>
|