group is modified

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -14,7 +14,12 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;" matRipple>
+    <mat-tree-node
+      *matTreeNodeDef="let node"
+      style="height: 80px;"
+      [attr.node-type]="node?.nodeType"
+      matRipple
+    >
       <li>
         <div class="mat-tree-node">
           <ng-container
@@ -33,6 +38,7 @@
       *matTreeNodeDef="let node; when: isHeader"
       class="tree-node-frame ucap-clickable"
       style="height: 80px;"
+      [attr.node-type]="node?.nodeType"
       matRipple
     >
       <li class="tree-node-header" matTreeNodeToggle>

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -51,6 +51,21 @@
   }
 }
 
+.mat-tree-node[aria-level='0'][node-type='Profile'] {
+  position: relative;
+  widows: 100px;
+  height: 100%;
+  li {
+    margin-left: 0;
+    width: 100%;
+    height: 100%;
+    .mat-tree-node {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 .path {
   display: flex;
   padding: 6px 4px;

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -27,6 +27,7 @@ import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { Subscription } from 'rxjs';
 
 enum NodeType {
   None = 'None',
@@ -66,14 +67,10 @@ export class ExpansionPanelComponent
     }
     const groupNode: GroupNode = {
       nodeType: NodeType.Profile,
+      userInfo,
       children: []
     };
 
-    groupNode.children.push({
-      nodeType: NodeType.Profile,
-      userInfo
-    });
-
     this.profileNodes = [groupNode];
 
     this.refreshRootNodeList();
@@ -167,8 +164,8 @@ export class ExpansionPanelComponent
   @ViewChild('cvsvGroup', { static: false })
   cvsvGroup: CdkVirtualScrollViewport;
 
-  @ViewChild('cvsvGroup', { read: PerfectScrollbarDirective, static: false })
-  perfectScrollbar: PerfectScrollbarDirective;
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef?: PerfectScrollbarDirective;
 
   NodeType = NodeType;
 
@@ -183,6 +180,8 @@ export class ExpansionPanelComponent
 
   groupList: { group: GroupDetailData; buddyList: UserInfo[] }[];
 
+  treeControlExpansionChangeSubscription: Subscription;
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -217,23 +216,40 @@ export class ExpansionPanelComponent
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
+      () => {
+        this.psDirectiveRef.update();
+      }
+    );
+  }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    if (!!this.treeControlExpansionChangeSubscription) {
+      this.treeControlExpansionChangeSubscription.unsubscribe();
+    }
+  }
 
   ngAfterViewInit(): void {
     this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup;
   }
 
   // hasChild = (_: number, node: FlatNode) => node.expandable;
-  isHeader = (_: number, node: FlatNode) => 0 === node.level;
+  isHeader = (_: number, node: FlatNode) =>
+    NodeType.Profile !== node.nodeType && 0 === node.level;
 
   expandMore() {
     this.groupTree.treeControl.expandAll();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
+    }
   }
 
   expandLess() {
     this.groupTree.treeControl.collapseAll();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
+    }
   }
 
   onClickMore(event: MouseEvent, group: GroupDetailData) {
@@ -287,8 +303,8 @@ export class ExpansionPanelComponent
     ];
     this.dataSource.data = this.rootNodeList;
 
-    if (!!this.perfectScrollbar) {
-      this.perfectScrollbar.scrollToTop();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
     }
   }
 }