수정 :: 새로운 대화 개설용 유저 선택 팝업 > 유저선택 이벤트 등록

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

@@ -9,39 +9,38 @@
           <ng-template mat-tab-label>
             <mat-icon>group</mat-icon>
           </ng-template>
-          <ng-template matTabContent>
-            <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode"
-              (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"></ucap-organization-tenant-search>
-            <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
-              [favoritBuddyList]="favoritBuddyList$ | async" [checkable]="true">
-              <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo"
-                [sessionVerinfo]="sessionVerinfo" [checkable]="true">
-              </ucap-profile-user-list-item>
-            </ucap-group-expansion-panel>
-          </ng-template>
+
+          <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode"
+            (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"></ucap-organization-tenant-search>
+          <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
+            [favoritBuddyList]="favoritBuddyList$ | async" [checkable]="true" (checkGroup)="onCheckGroup($event)">
+            <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo"
+              [sessionVerinfo]="sessionVerinfo" (checkUser)="onCheckUser($event)" [checkable]="true">
+            </ucap-profile-user-list-item>
+          </ucap-group-expansion-panel>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>device_hub</mat-icon>
           </ng-template>
-          <ng-template matTabContent>
-            <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
-          </ng-template>
+          <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>chat</mat-icon>
           </ng-template>
-          <ng-template matTabContent>
-            <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
-              [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo">
-            </ucap-room-list-item>
-          </ng-template>
+          <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
+            [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo">
+          </ucap-room-list-item>
         </mat-tab>
       </mat-tab-group>
     </div>
     <div fxFlex="100px">
-      choiced users
+      <ul>
+        <li *ngFor="let userInfo of selectedUserList">
+          {{ userInfo.name }}
+        </li>
+      </ul>
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">

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

@@ -20,7 +20,12 @@ import {
   RoomUserDetailData,
   RoomUserData
 } from '@ucap-webmessenger/protocol-sync';
-import { DeptSearchType } from '@ucap-webmessenger/protocol-query';
+import {
+  DeptSearchType,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap-webmessenger/protocol-query';
 import {
   RoomInfo,
   UserInfoShort,
@@ -70,6 +75,9 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   roomUserShortList: RoomUserData[];
   roomSubscription: Subscription;
 
+  // 수집 데이터
+  selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+
   ngOnInit() {
     const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
     this.companyCode = loginInfo.companyCode;
@@ -189,9 +197,25 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  onCheckGroup(params: { isChecked: boolean; group: GroupDetailData }) {
+    this.logger.debug(params);
+  }
+  onCheckUser(params: {
+    isChecked: boolean;
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+  }) {
+    if (params.isChecked) {
+      this.selectedUserList.push(params.userInfo);
+    } else {
+      this.selectedUserList = this.selectedUserList.filter(
+        item => item.seq !== params.userInfo.seq
+      );
+    }
+  }
+
   onClickChoice(choice: boolean): void {
-    this.dialogRef.close({
-      choice
-    });
+    // this.dialogRef.close({
+    //   choice
+    // });
   }
 }

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

@@ -28,7 +28,8 @@
           (click)="onClickMore($event, groupBuddy.group)">
           <mat-icon>more_vert</mat-icon>
         </button>
-        <mat-checkbox *ngIf="checkable"></mat-checkbox>
+        <mat-checkbox *ngIf="checkable" #checkbox (change)="onChangeCheck(checkbox.checked, groupBuddy.group)"
+          (click)="$event.stopPropagation()"></mat-checkbox>
       </mat-panel-description>
     </mat-expansion-panel-header>
 

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

@@ -37,6 +37,12 @@ export class ExpansionPanelComponent implements OnInit {
     group: GroupDetailData;
   }>();
 
+  @Output()
+  checkGroup = new EventEmitter<{
+    isChecked: boolean;
+    group: GroupDetailData;
+  }>();
+
   @ContentChild(ExpansionPanelItemDirective, {
     read: TemplateRef,
     static: true
@@ -60,4 +66,11 @@ export class ExpansionPanelComponent implements OnInit {
   onClickMore(event: MouseEvent, group: GroupDetailData) {
     this.more.emit({ event, group });
   }
+
+  onChangeCheck(value: boolean, group: GroupDetailData) {
+    this.checkGroup.emit({
+      isChecked: value,
+      group
+    });
+  }
 }

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

@@ -33,5 +33,7 @@
       </div>
     </dd>
   </dl>
-  <mat-checkbox *ngIf="checkable"></mat-checkbox>
+  <mat-checkbox *ngIf="checkable" #checkbox [checked]="isChecked" (change)="onChangeCheck(checkbox.checked, userInfo)"
+    (click)="$event.stopPropagation()">
+  </mat-checkbox>
 </div>

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

@@ -23,6 +23,7 @@ import { StatusCode } from '@ucap-webmessenger/core';
 
 import { PresenceType } from '../types/presence-type.type';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { MatCheckboxChange, MatPseudoCheckbox } from '@angular/material';
 
 @Component({
   selector: 'ucap-profile-user-list-item',
@@ -42,12 +43,19 @@ export class UserListItemComponent implements OnInit, OnDestroy {
   @Input()
   checkable = false;
   @Input()
+  isChecked = false;
+  @Input()
   compactable = false;
   @Input()
   sessionVerinfo: VersionInfo2Response;
 
-  userPresence: StatusBulkInfo | StatusInfo;
+  @Output()
+  checkUser = new EventEmitter<{
+    isChecked: boolean;
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+  }>();
 
+  userPresence: StatusBulkInfo | StatusInfo;
   PresenceType = PresenceType;
 
   // private profileImageRootSubscription: Subscription;
@@ -106,4 +114,14 @@ export class UserListItemComponent implements OnInit, OnDestroy {
 
     return rtnClass;
   }
+
+  onChangeCheck(
+    value: boolean,
+    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
+  ) {
+    this.checkUser.emit({
+      isChecked: value,
+      userInfo
+    });
+  }
 }