80 lines
2.6 KiB
HTML
Raw Normal View History

2019-11-15 17:32:48 +09:00
<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
<ng-container
*cdkVirtualFor="let node of dataSource.expandedData$"
></ng-container>
<mat-tree
#groupTree
[dataSource]="dataSource"
[treeControl]="treeControl"
class="group-tree"
>
2019-11-15 17:32:48 +09:00
<!-- This is the tree node template for leaf nodes -->
2019-11-18 15:46:18 +09:00
<mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
2019-11-15 17:32:48 +09:00
<li>
<div class="mat-tree-node">
<ng-container
[ngTemplateOutlet]="expansionPanelItemTemplateRef"
[ngTemplateOutletContext]="{ $implicit: node?.userInfo }"
>
</ng-container>
2019-11-18 15:02:47 +09:00
<!--{{ node?.userInfo?.name }}-->
2019-11-15 17:32:48 +09:00
</div>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node
2019-11-18 16:11:09 +09:00
*matTreeNodeDef="let node; when: isHeader"
2019-11-15 17:32:48 +09:00
class="tree-node-frame"
2019-11-18 15:46:18 +09:00
style="height: 80px;"
2019-11-15 17:32:48 +09:00
>
2019-11-18 15:46:18 +09:00
<li class="tree-node-header">
<div class="path">
2019-11-15 17:32:48 +09:00
<button
mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle '"
2019-11-18 15:02:47 +09:00
class="btn-toggle"
2019-11-15 17:32:48 +09:00
>
<mat-icon class="mat-icon-rtl-mirror">
2019-11-18 15:02:47 +09:00
{{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
2019-11-15 17:32:48 +09:00
</mat-icon>
</button>
<ng-container [ngSwitch]="node.nodeType">
2019-11-18 15:46:18 +09:00
<span *ngSwitchCase="NodeType.Profile">내 프로필</span>
<span *ngSwitchCase="NodeType.Favorit"
>즐겨찾기
<span class="text-accent-color number"
>({{ node.countOfChildren }}명)</span
></span
>
<span *ngSwitchCase="NodeType.Buddy">
<span class="title-name ellipsis">{{
node.groupDetail.name
}}</span>
<span class="text-accent-color number"
>({{ node.countOfChildren }}명)</span
>
</span>
2019-11-15 17:32:48 +09:00
</ng-container>
2019-11-18 15:46:18 +09:00
<button
mat-icon-button
aria-label="group menu"
*ngIf="!checkable"
(click)="onClickMore($event, node.groupDetail)"
class="group-menu"
>
2019-11-18 15:02:47 +09:00
<mat-icon>more_vert</mat-icon>
</button>
2019-11-15 17:32:48 +09:00
</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>