수정 :: 유저 선택 팝업 :: 팝업 타입 정의 및 기 선택 유저리스트에서 선택 취소기능 추가.

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

@@ -1,3 +1,4 @@
+import { UserSelectDialogType } from './../../../types/userselect.dialog.type';
 import { Component, OnInit } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
@@ -39,9 +40,10 @@ export class LeftSideComponent implements OnInit {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      width: '500px',
+      width: '600px',
       height: '500px',
       data: {
+        type: UserSelectDialogType.NewChat,
         title: 'New Chat'
       }
     });

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

@@ -2,7 +2,13 @@
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
-  <mat-card-content fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
+  <mat-card-content
+    fxLayout
+    fxLayout.xs="column"
+    fxLayoutAlign="center"
+    fxLayoutGap="10px"
+    fxLayoutGap.xs="0"
+  >
     <div fxFlex class="container">
       <mat-tab-group mat-stretch-tabs>
         <mat-tab>
@@ -10,14 +16,28 @@
             <mat-icon>group</mat-icon>
           </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" [selectedUserList]="selectedUserList" [checkable]="true"
-            (checkGroup)="onCheckGroup($event)">
-            <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo"
-              [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList"
-              [isChecked]="getCheckedUser(userInfo)" [checkable]="true" (checkUser)="onCheckUser($event)">
+          <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"
+            [selectedUserList]="selectedUserList"
+            [checkable]="true"
+            (checkGroup)="onCheckGroup($event)"
+          >
+            <ucap-profile-user-list-item
+              *ucapGroupExpansionPanelItem="let userInfo"
+              [userInfo]="userInfo"
+              [sessionVerinfo]="sessionVerinfo"
+              [selectedUserList]="selectedUserList"
+              [isChecked]="getCheckedUser(userInfo)"
+              [checkable]="true"
+              (checkUser)="onCheckUser($event)"
+            >
             </ucap-profile-user-list-item>
           </ucap-group-expansion-panel>
         </mat-tab>
@@ -25,30 +45,50 @@
           <ng-template mat-tab-label>
             <mat-icon>device_hub</mat-icon>
           </ng-template>
-          <app-layout-chat-left-sidenav-organization [selectedUserList]="selectedUserList" [isUserSelect]="true"
-            (checkUser)="onCheckUser($event)">
+          <app-layout-chat-left-sidenav-organization
+            [selectedUserList]="selectedUserList"
+            [isUserSelect]="true"
+            (checkUser)="onCheckUser($event)"
+          >
           </app-layout-chat-left-sidenav-organization>
         </mat-tab>
-        <mat-tab>
+        <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
           <ng-template mat-tab-label>
             <mat-icon>chat</mat-icon>
           </ng-template>
-          <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
-            [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo">
+          <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">
+    <div fxFlex="150px">
       <ul>
         <li *ngFor="let userInfo of selectedUserList">
           {{ userInfo.name }}
+          <button
+            mat-icon-button
+            aria-label="Delete user"
+            (click)="onClickDeleteUser(userInfo)"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+          <mat-icon></mat-icon>
         </li>
       </ul>
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
       No
     </button>
     <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">

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

@@ -1,3 +1,4 @@
+import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
 import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
@@ -33,6 +34,7 @@ import {
 } from '@ucap-webmessenger/protocol-room';
 
 export interface CreateChatDialogData {
+  type?: string;
   title: string;
 }
 
@@ -58,6 +60,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     private logger: NGXLogger
   ) {}
 
+  UserSelectDialogType = UserSelectDialogType;
+
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
@@ -252,6 +256,13 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     return false;
   }
 
+  /** 선택된 사용자 취소 */
+  onClickDeleteUser(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    this.selectedUserList = this.selectedUserList.filter(
+      item => item.seq !== userInfo.seq
+    );
+  }
+
   /** 팝업의 선택 이벤트 전달. */
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({

projects/ucap-webmessenger-app/src/app/types/index.ts

@@ -1,2 +1,3 @@
 export * from './environment.type';
 export * from './login-info.type';
+export * from './userselect.dialog.type';

projects/ucap-webmessenger-app/src/app/types/userselect.dialog.type.ts

@@ -0,0 +1,10 @@
+export enum UserSelectDialogType {
+  /** 새로운 대화 */
+  NewChat = 'NEW_CHAT',
+  /** 새로운 그룹 생성 */
+  NewGroup = 'NEW_GROUP',
+  /** 대화 전달 */
+  MessageForward = 'MESSAGE_FORWARD',
+  /** 그룹멤버 변경 */
+  GroupMemberUpdate = 'GROUP_MEMBER_UPDATE'
+}