group tree is modified

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

@@ -9,7 +9,7 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node">
+    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
       <li>
         <div class="mat-tree-node">
           <ng-container
@@ -25,8 +25,9 @@
     <mat-tree-node
       *matTreeNodeDef="let node; when: hasChild"
       class="tree-node-frame"
+      style="height: 80px;"
     >
-      <li>
+      <li class="tree-node-header">
         <div class="path">
           <button
             mat-icon-button
@@ -39,11 +40,30 @@
             </mat-icon>
           </button>
           <ng-container [ngSwitch]="node.nodeType">
-            <span *ngSwitchCase="NodeType.Profile">Profile</span>
-            <span *ngSwitchCase="NodeType.Favorit">Favorit</span>
-            <span *ngSwitchCase="NodeType.Buddy">Buddy</span>
+            <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>
           </ng-container>
-          <button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
+
+          <button
+            mat-icon-button
+            aria-label="group menu"
+            *ngIf="!checkable"
+            (click)="onClickMore($event, node.groupDetail)"
+            class="group-menu"
+          >
             <mat-icon>more_vert</mat-icon>
           </button>
         </div>

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

@@ -15,6 +15,15 @@
 .tree-node-frame {
   border-bottom: 1px solid #dddddd;
   height: 40px;
+
+  .tree-node-header {
+    width: 100%;
+
+    .title-name {
+      display: inline-flex;
+      flex: 1 1 auto;
+    }
+  }
   .mat-tree-node {
     width: 100%;
     &:hover {
@@ -26,7 +35,7 @@
   }
 }
 .mat-tree-node {
-  &[aria-level="1"]{
+  &[aria-level='1'] {
     position: relative;
     widows: 100px;
     height: 100%;
@@ -42,7 +51,6 @@
   }
 }
 
-
 .path {
   padding: 6px 4px;
   .btn-toggle {

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

@@ -44,6 +44,7 @@ interface FlatNode {
   expandable: boolean;
   level: number;
   nodeType: NodeType;
+  countOfChildren?: number;
   userInfo?: UserInfo;
   groupDetail?: GroupDetailData;
 }
@@ -77,7 +78,7 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
 
   @Input()
   set favoritBuddyList(userInfoList: UserInfo[]) {
-    if (!userInfoList) {
+    if (!userInfoList || 0 === userInfoList.length) {
       return;
     }
     const groupNode: GroupNode = {
@@ -181,6 +182,10 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
           expandable: !!node.children && node.children.length > 0,
           level,
           nodeType: node.nodeType,
+          countOfChildren:
+            !!node.children && node.children.length > 0
+              ? node.children.length
+              : undefined,
           userInfo: node.userInfo,
           groupDetail: node.groupDetail
         };