From ff87a0540ea126d8bdd434f8f766f7d5f5fd9d8a Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 10 Jan 2020 17:32:48 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../group/select-group.dialog.component.html  | 10 +--
 .../group/select-group.dialog.component.scss  | 86 ++++++++++---------
 .../components/expansion-panel.component.html | 80 +++++++++++------
 .../components/expansion-panel.component.scss | 36 ++++++--
 4 files changed, 129 insertions(+), 83 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
index d6b7df4d..7920b211 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
@@ -63,6 +63,7 @@
       <mat-list-option
         *ngFor="let groupBuddy of groupBuddyList$ | async"
         [value]="groupBuddy.group"
+        class="group-name"
       >
         <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
         <span class="text-accent-color number"
@@ -71,15 +72,8 @@
         >
       </mat-list-option>
     </mat-selection-list>
-    <!-- <div>
-      <ucap-group-expansion-panel
-        #groupExpansionPanel
-        [groupBuddyList]="groupBuddyList$ | async"
-        [checkable]="true"
-      >
-      </ucap-group-expansion-panel>
-    </div> -->
   </mat-card-content>
+
   <mat-card-actions class="button-farm flex-row">
     <button
       mat-stroked-button
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
index 44255067..03bbadc6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
@@ -1,66 +1,68 @@
-::ng-deep .mat-card-header-tex{
-  margin:0;
+::ng-deep .mat-card-header-tex {
+  margin: 0;
 }
-.mat-form-field{
-  width:100%;
-  padding:10px;
+.mat-form-field {
+  width: 100%;
+  padding: 10px;
 }
-.confirm-card{
-  min-width:500px;
-  .mat-card-content{
-
-    }
+.confirm-card {
+  min-width: 500px;
+  .mat-card-content {
+  }
   .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
     }
   }
 }
 
-.add-row{
-  margin-bottom:10px;
-  .mat-mini-fab{
-    .mat-icon{
-      width:40px;
-      height:40px;
+.add-row {
+  margin-bottom: 10px;
+  .mat-mini-fab {
+    .mat-icon {
+      width: 40px;
+      height: 40px;
       line-height: 40px;
     }
-    .mat-fab__label{
-      color:#212121;
-      margin-left:10px;
+    .mat-fab__label {
+      color: #212121;
+      margin-left: 10px;
     }
   }
-
 }
 
-.mat-selection-list{
-  border-top:1px solid #999999;
+.mat-selection-list {
+  border-top: 1px solid #999999;
 }
- .mat-list-item {
-    border-bottom:1px solid #dddddd;
+
+::ng-deep .group-name {
+  &.mat-list-item {
+    border-bottom: 1px solid #dddddd;
+    .mat-list-text {
+      flex-direction: row !important;
+    }
   }
+}
 
-.input-groupname-box{
-  display:flex;
+.input-groupname-box {
+  display: flex;
   flex-flow: column;
   margin-bottom: 10px;
   border-radius: 4px;
-  /*border:1px solid #dddddd;
-  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/
 
-  .btn-box{
-    margin-top:10px;
-    flex-flow:row;
-    height:40px;
-    margin-left:auto;
-    padding:0 10px;
-    button{
-      margin-left:4px;
+  .btn-box {
+    margin-top: 10px;
+    flex-flow: row;
+    height: 40px;
+    margin-left: auto;
+    padding: 0 10px;
+    button {
+      margin-left: 4px;
     }
   }
 }
 
-::ng-deep .mat-mini-fab .mat-button-wrapper{
-  padding:0;
-}
\ No newline at end of file
+::ng-deep .mat-mini-fab .mat-button-wrapper {
+  padding: 0;
+}
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index e08142cb..2da99369 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -52,40 +52,64 @@
               {{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
             </mat-icon>
           </button>
+          <div class="group-info">
+            <ng-container [ngSwitch]="node.nodeType">
+              <span *ngSwitchCase="NodeType.Profile" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'profile.my' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
 
-          <ng-container [ngSwitch]="node.nodeType">
-            <span *ngSwitchCase="NodeType.Profile">
-              <span class="title-name ellipsis">{{
-                'profile.my' | translate
-              }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.Favorit">
-              <span class="title-name ellipsis">{{
-                'group.nameFavorit' | translate
-              }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.Default">
-              <span class="title-name ellipsis">{{
-                'group.nameDefault' | translate
-              }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.MyDept">
-              <span class="title-name ellipsis">{{
-                'group.nameMyDept' | translate
-              }}</span>
-            </span>
+              <span *ngSwitchCase="NodeType.Favorit" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameFavorit' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
 
-            <span *ngSwitchCase="NodeType.Buddy">
-              <span class="title-name ellipsis">{{
-                node.groupDetail.name
-              }}</span>
-            </span>
-          </ng-container>
+              <span *ngSwitchCase="NodeType.Default" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameDefault' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
 
+              <span *ngSwitchCase="NodeType.MyDept" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameMyDept' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+
+              <span *ngSwitchCase="NodeType.Buddy" class="group-name">
+                <span class="title-name ellipsis">{{
+                  node.groupDetail.name
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+            </ng-container>
+          </div>
+          <!-- switch안으로 이동
           <span class="text-accent-color number">
             ({{ node.countOfChildren
             }}{{ 'common.units.persons' | translate }})</span
-          >
+          >-->
 
           <mat-checkbox
             *ngIf="checkable"
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index 4ddf3894..2a23bb20 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -5,7 +5,6 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    margin-left: 10px;
   }
   .group-tree-node-invisible {
     display: none;
@@ -17,13 +16,37 @@
   height: 40px;
 
   .tree-node-header {
+    position: relative;
     width: 100%;
-
-    .title-name {
-      display: inline-flex;
-      flex: 1 1 auto;
+    .path {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .btn-toggle {
+        margin-left: 10px;
+      }
+      .group-info {
+        display: flex;
+        flex-flow: row;
+        width: calc(100% - 80px);
+        .group-name {
+          overflow: hidden;
+          min-width: 0;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          display: flex;
+          .title-name {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
     }
   }
+
   .mat-tree-node {
     width: 100%;
     &:hover {
@@ -83,6 +106,9 @@
     margin-left: auto;
     margin-right: 16px;
   }
+  .group-name {
+    flex: 1;
+  }
 
   .group-menu {
     margin-left: auto;