2019-11-19 11:30:43 +09:00
|
|
|
<cdk-virtual-scroll-viewport
|
|
|
|
#cvsvGroup
|
|
|
|
itemSize="80"
|
|
|
|
perfectScrollbar
|
|
|
|
fxFlexFill
|
|
|
|
>
|
2019-11-15 17:32:48 +09:00
|
|
|
<ng-container
|
|
|
|
*cdkVirtualFor="let node of dataSource.expandedData$"
|
|
|
|
></ng-container>
|
|
|
|
<mat-tree
|
|
|
|
#groupTree
|
|
|
|
[dataSource]="dataSource"
|
|
|
|
[treeControl]="treeControl"
|
|
|
|
class="group-tree"
|
2019-10-22 09:47:14 +09:00
|
|
|
>
|
2019-11-15 17:32:48 +09:00
|
|
|
<!-- This is the tree node template for leaf nodes -->
|
2019-11-18 18:35:27 +09:00
|
|
|
<mat-tree-node *matTreeNodeDef="let node" style="height: 80px;" matRipple>
|
2019-11-15 17:32:48 +09:00
|
|
|
<li>
|
|
|
|
<div class="mat-tree-node">
|
|
|
|
<ng-container
|
|
|
|
[ngTemplateOutlet]="expansionPanelItemTemplateRef"
|
2019-11-21 11:46:49 +09:00
|
|
|
[ngTemplateOutletContext]="{
|
|
|
|
$implicit: node?.userInfo,
|
|
|
|
group: node?.groupDetail
|
|
|
|
}"
|
2019-11-15 17:32:48 +09:00
|
|
|
>
|
|
|
|
</ng-container>
|
|
|
|
</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-18 18:29:55 +09:00
|
|
|
matRipple
|
2019-11-15 17:32:48 +09:00
|
|
|
>
|
2019-11-18 18:25:46 +09:00
|
|
|
<li class="tree-node-header" matTreeNodeToggle>
|
2019-11-18 15:46:18 +09:00
|
|
|
<div class="path">
|
2019-11-15 17:32:48 +09:00
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
[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"
|
2019-11-21 16:15:15 +09:00
|
|
|
*ngIf="node.nodeType !== NodeType.Profile"
|
2019-11-18 15:46:18 +09:00
|
|
|
(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>
|