수정 :: 유저 선택 팝업 :: 새그룹추가 화면 구성.

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

@@ -49,7 +49,6 @@ export class LeftSideComponent implements OnInit {
     });
 
     if (!!result && !!result.choice && result.choice) {
-      this.logger.debug(result.selectedUserList);
       if (!!result.selectedUserList && result.selectedUserList.length > 0) {
         const userSeqs: number[] = [];
         result.selectedUserList.map(user => userSeqs.push(user.seq));

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

@@ -1,3 +1,9 @@
+import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
+import {
+  CreateChatDialogComponent,
+  CreateChatDialogData,
+  CreateChatDialogResult
+} from './../../dialogs/chat/create-chat.dialog.component';
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 
 import { Observable, combineLatest, Subscription } from 'rxjs';
@@ -153,16 +159,29 @@ export class GroupComponent implements OnInit, OnDestroy {
       case 'GROUP_NEW':
         {
           const result = await this.dialogService.open<
-            CreateGroupDialogComponent,
+            CreateChatDialogComponent,
-            CreateGroupDialogData,
+            CreateChatDialogData,
-            CreateGroupDialogResult
+            CreateChatDialogResult
-          >(CreateGroupDialogComponent, {
+          >(CreateChatDialogComponent, {
-            width: '220px',
+            width: '600px',
+            height: '500px',
             data: {
-              title: 'Logout',
+              type: UserSelectDialogType.NewGroup,
-              message: 'Logout ?'
+              title: 'New Group'
             }
           });
+
+          if (!!result && !!result.choice && result.choice) {
+            this.logger.debug(result);
+            if (
+              !!result.selectedUserList &&
+              result.selectedUserList.length > 0
+            ) {
+              // const userSeqs: number[] = [];
+              // result.selectedUserList.map(user => userSeqs.push(user.seq));
+              // this.store.dispatch(ChatStore.openRoom({ userSeqList: userSeqs }));
+            }
+          }
         }
         break;
       case 'GROUP_EXPAND_MORE':

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

@@ -2,85 +2,101 @@
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
   </mat-card-header>
-  <mat-card-content
+  <mat-card-content>
-    fxLayout
+    <div *ngIf="data.type === UserSelectDialogType.NewGroup">
-    fxLayout.xs="column"
+      <form name="inputForm" [formGroup]="inputForm" novalidate>
-    fxLayoutAlign="center"
+        <mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
-    fxLayoutGap="10px"
+          <input
-    fxLayoutGap.xs="0"
+            matInput
-  >
+            #input
-    <div fxFlex class="container">
+            maxlength="20"
-      <mat-tab-group mat-stretch-tabs>
+            placeholder="그룹이름"
-        <mat-tab>
+            formControlName="groupName"
-          <ng-template mat-tab-label>
+          />
-            <mat-icon>group</mat-icon>
+          <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
-          </ng-template>
+        </mat-form-field>
+      </form>
+    </div>
+    <div
+      fxLayout
+      fxLayout.xs="column"
+      fxLayoutAlign="center"
+      fxLayoutGap="10px"
+      fxLayoutGap.xs="0"
+    >
+      <div fxFlex class="container">
+        <mat-tab-group mat-stretch-tabs>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon>group</mat-icon>
+            </ng-template>
 
-          <ucap-organization-tenant-search
+            <ucap-organization-tenant-search
-            [companyList]="companyList$ | async"
+              [companyList]="companyList$ | async"
-            [companyCode]="companyCode"
+              [companyCode]="companyCode"
-            (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
+              (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-          ></ucap-organization-tenant-search>
+            ></ucap-organization-tenant-search>
-          <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"
-            (checkGroup)="onCheckGroup($event)"
-          >
-            <ucap-profile-user-list-item
-              *ucapGroupExpansionPanelItem="let userInfo"
-              [userInfo]="userInfo"
-              [sessionVerinfo]="sessionVerinfo"
               [selectedUserList]="selectedUserList"
-              [isChecked]="getCheckedUser(userInfo)"
               [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>
+          <mat-tab>
+            <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)"
             >
-            </ucap-profile-user-list-item>
+            </app-layout-chat-left-sidenav-organization>
-          </ucap-group-expansion-panel>
+          </mat-tab>
-        </mat-tab>
+          <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
-        <mat-tab>
+            <ng-template mat-tab-label>
-          <ng-template mat-tab-label>
+              <mat-icon>chat</mat-icon>
-            <mat-icon>device_hub</mat-icon>
+            </ng-template>
-          </ng-template>
+            <ucap-room-list-item
-          <app-layout-chat-left-sidenav-organization
+              *ngFor="let room of roomList"
-            [selectedUserList]="selectedUserList"
+              [loginRes]="loginRes"
-            [isUserSelect]="true"
+              [roomInfo]="room"
-            (checkUser)="onCheckUser($event)"
+              [roomUserInfo]="getRoomUserList(room)"
-          >
+              [sessionVerinfo]="sessionVerinfo"
-          </app-layout-chat-left-sidenav-organization>
+            >
-        </mat-tab>
+            </ucap-room-list-item>
-        <mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
+          </mat-tab>
-          <ng-template mat-tab-label>
+        </mat-tab-group>
-            <mat-icon>chat</mat-icon>
+      </div>
-          </ng-template>
+      <div fxFlex="150px">
-          <ucap-room-list-item
+        <ul>
-            *ngFor="let room of roomList"
+          <li *ngFor="let userInfo of selectedUserList">
-            [loginRes]="loginRes"
+            {{ userInfo.name }}
-            [roomInfo]="room"
+            <button
-            [roomUserInfo]="getRoomUserList(room)"
+              mat-icon-button
-            [sessionVerinfo]="sessionVerinfo"
+              aria-label="Delete user"
-          >
+              (click)="onClickDeleteUser(userInfo)"
-          </ucap-room-list-item>
+            >
-        </mat-tab>
+              <mat-icon>close</mat-icon>
-      </mat-tab-group>
+            </button>
-    </div>
+            <mat-icon></mat-icon>
-    <div fxFlex="150px">
+          </li>
-      <ul>
+        </ul>
-        <li *ngFor="let userInfo of selectedUserList">
+      </div>
-          {{ 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">

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

@@ -1,5 +1,6 @@
 import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
 import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NGXLogger } from 'ngx-logger';
 import { Observable, combineLatest, Subscription } from 'rxjs';
@@ -41,6 +42,7 @@ export interface CreateChatDialogData {
 export interface CreateChatDialogResult {
   choice: boolean;
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  groupName?: string;
 }
 
 @Component({
@@ -57,6 +59,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: CreateChatDialogData,
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
+    private formBuilder: FormBuilder,
     private logger: NGXLogger
   ) {}
 
@@ -83,6 +86,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   // 수집 데이터
   selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
+  inputForm: FormGroup;
+
   ngOnInit() {
     const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
     this.companyCode = loginInfo.companyCode;
@@ -155,6 +160,10 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
         })
       )
       .subscribe();
+
+    this.inputForm = this.formBuilder.group({
+      groupName: ['', [Validators.required]]
+    });
   }
 
   ngOnDestroy(): void {
@@ -267,7 +276,11 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({
       choice,
-      selectedUserList: this.selectedUserList
+      selectedUserList: this.selectedUserList,
+      groupName:
+        this.data.type === UserSelectDialogType.NewGroup
+          ? this.inputForm.get('groupName').value
+          : ''
     });
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -13,6 +13,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
@@ -25,12 +27,16 @@ import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 
 import { COMPONENTS } from './components';
 import { DIALOGS } from './dialogs';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     CommonModule,
     FlexLayoutModule,
     DragDropModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatBadgeModule,
     MatButtonModule,
     MatCardModule,