유저선택 팝업 선택 안되는 버그 수정.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -149,6 +149,7 @@
         [selectedUserList]="selectedUserList"
         (checkAllUser)="onCheckAllUser($event)"
         (checkUser)="onCheckUser($event)"
+        (toggleUser)="onToggleUser($event)"
         class="organization-side"
       ></app-layout-chat-left-sidenav-organization>
     </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -245,6 +245,18 @@ export class LeftSideComponent implements OnInit {
       );
     }
   }
+  onToggleUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (
+      this.selectedUserList.filter(user => user.seq === userInfo.seq).length ===
+      0
+    ) {
+      this.selectedUserList = [...this.selectedUserList, userInfo];
+    } else {
+      this.selectedUserList = this.selectedUserList.filter(
+        item => item.seq !== userInfo.seq
+      );
+    }
+  }
 
   /** FAB */
   onClickFab(params: { btn: any }) {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -54,20 +54,11 @@
           [selectedUserList]="selectedUserList"
           [isChecked]="getCheckedUser(userInfo)"
           (checkUser)="onCheckUser($event)"
+          (click)="onToggleUser(userInfo)"
         >
           Loading...
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>
-      <!-- <ucap-profile-user-list-item
-        *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
-        [userInfo]="userInfo"
-        [checkable]="true"
-        [sessionVerinfo]="sessionVerinfo"
-        [selectedUserList]="selectedUserList"
-        [isChecked]="getCheckedUser(userInfo)"
-        (checkUser)="onCheckUser($event)"
-      >
-      </ucap-profile-user-list-item> -->
     </div>
     <div *ngIf="isShowSearch" class="search-result">
       <cdk-virtual-scroll-viewport
@@ -83,6 +74,7 @@
           [selectedUserList]="selectedUserList"
           [isChecked]="getCheckedUser(userInfo)"
           (checkUser)="onCheckUser($event)"
+          (click)="onToggleUser(userInfo)"
         >
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts

@@ -64,6 +64,10 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
   }>();
   @Output()
+  toggleUser = new EventEmitter<
+    UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  >();
+  @Output()
   checkAllUser = new EventEmitter<{
     isChecked: boolean;
     userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
@@ -321,6 +325,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   }) {
     this.checkUser.emit(params);
   }
+  onToggleUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    this.toggleUser.emit(userInfo);
+  }
 
   onClickShowSelectedUserList() {
     this.logger.debug('onClickShowSelectedUserList', this.selectedUserList);

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

@@ -67,29 +67,27 @@
                 [style.display]="isShowSearch ? 'none' : 'block'"
                 class="list-panel"
               >
-                <perfect-scrollbar>
+                <ucap-group-expansion-panel
-                  <ucap-group-expansion-panel
+                  #groupExpansionPanel
-                    #groupExpansionPanel
+                  [groupBuddyList]="groupBuddyList$ | async"
-                    [groupBuddyList]="groupBuddyList$ | async"
+                  [favoritBuddyList]="favoritBuddyList$ | async"
-                    [favoritBuddyList]="favoritBuddyList$ | async"
+                  [selectedUserList]="selectedUserList"
+                  [checkable]="true"
+                  class="group-expansion"
+                >
+                  <ucap-profile-user-list-item
+                    *ucapGroupExpansionPanelItem="let userInfo"
+                    [userInfo]="userInfo"
+                    [sessionVerinfo]="sessionVerinfo"
                     [selectedUserList]="selectedUserList"
+                    [isChecked]="getCheckedUser(userInfo)"
                     [checkable]="true"
-                    (checkGroup)="onCheckGroup($event)"
+                    [inTree]="true"
-                    class="group-expansion"
+                    (click)="onToggleUser(userInfo)"
+                    class="list-item-frame"
                   >
-                    <ucap-profile-user-list-item
+                  </ucap-profile-user-list-item>
-                      *ucapGroupExpansionPanelItem="let userInfo"
+                </ucap-group-expansion-panel>
-                      [userInfo]="userInfo"
-                      [sessionVerinfo]="sessionVerinfo"
-                      [selectedUserList]="selectedUserList"
-                      [isChecked]="getCheckedUser(userInfo)"
-                      [checkable]="true"
-                      (checkUser)="onCheckUser($event)"
-                      class="list-item-frame"
-                    >
-                    </ucap-profile-user-list-item>
-                  </ucap-group-expansion-panel>
-                </perfect-scrollbar>
               </div>
               <div
                 [style.display]="isShowSearch ? 'block' : 'none'"
@@ -112,6 +110,7 @@
                   [isChecked]="getCheckedUser(userInfo)"
                   [checkable]="true"
                   (checkUser)="onCheckUser($event)"
+                  (click)="onToggleUser(userInfo)"
                 >
                 </ucap-profile-user-list-item>
               </div>
@@ -128,6 +127,7 @@
                 [isUserSelect]="true"
                 (checkAllUser)="onCheckAllUser($event)"
                 (checkUser)="onCheckUser($event)"
+                (toggleUser)="onToggleUser($event)"
                 class="dialog-org"
               >
               </app-layout-chat-left-sidenav-organization>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -407,6 +407,19 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
         item => item.seq !== params.userInfo.seq
       );
     }
+    console.log(this.selectedUserList);
+  }
+  onToggleUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (
+      this.selectedUserList.filter(user => user.seq === userInfo.seq).length ===
+      0
+    ) {
+      this.selectedUserList = [...this.selectedUserList, userInfo];
+    } else {
+      this.selectedUserList = this.selectedUserList.filter(
+        item => item.seq !== userInfo.seq
+      );
+    }
   }
 
   /** 대화방 > 대화방 선택 :: 해당 팝업에서는 대화방을 중복 선택하지 않는다 */

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -42,7 +42,7 @@
     #checkbox
     [checked]="isChecked"
     (change)="onChangeCheck(checkbox.checked, userInfo)"
-    (click)="$event.stopPropagation()"
+    (click)="onClickCheck($event)"
   >
   </mat-checkbox>
 </div>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -43,6 +43,9 @@ export class UserListItemComponent implements OnInit {
   @Input()
   /** 선택된 사용자의 리스트 */
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
+  /** event bubbling fixed in custom tree */
+  inTree = false;
 
   @Output()
   checkUser = new EventEmitter<{
@@ -102,6 +105,11 @@ export class UserListItemComponent implements OnInit {
       userInfo
     });
   }
+  onClickCheck(event: MouseEvent) {
+    if (!this.inTree) {
+      event.stopPropagation();
+    }
+  }
 
   onClickOpenProfile(
     event: MouseEvent,