merged

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

@@ -6,16 +6,22 @@
     </button>
   </div>-->
   <!-- <div class="logo">로고</div> -->
-  <mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
+  <mat-tab-group
-    <mat-tab>
+    mat-stretch-tabs
+    animationDuration="0ms"
+    (selectedTabChange)="onSelectedTabChange($event)"
+    class="global-menu"
+  >
+    <mat-tab [aria-label]="MainMenu.Group">
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>
       </ng-template>
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
+        (newGroupAndMember)="onClickNewGroupAndMember($event)"
       ></app-layout-chat-left-sidenav-group>
     </mat-tab>
-    <mat-tab>
+    <mat-tab [aria-label]="MainMenu.Chat">
       <ng-template mat-tab-label>
         <mat-icon
           [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
@@ -28,7 +34,7 @@
       </ng-template>
       <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>
-    <mat-tab>
+    <mat-tab [aria-label]="MainMenu.Organization">
       <ng-template mat-tab-label>
         <mat-icon>device_hub</mat-icon>
       </ng-template>
@@ -39,7 +45,7 @@
         class="organization-side"
       ></app-layout-chat-left-sidenav-organization>
     </mat-tab>
-    <mat-tab>
+    <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
         <mat-icon>phone</mat-icon>
       </ng-template>
@@ -47,6 +53,7 @@
     </mat-tab>
   </mat-tab-group>
   <ucap-float-action-button
+    *ngIf="fabButtonShow"
     [fabButtons]="fabButtons"
     (buttonClick)="onClickFab($event)"
   ></ucap-float-action-button>

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

@@ -12,13 +12,22 @@ import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
+import * as SyncStore from '@app/store/messenger/sync';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
   UserInfoF,
   UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
-import { BuiltinType } from '@angular/compiler';
+import { MatTabChangeEvent, MatTabGroup } from '@angular/material';
+
+export enum MainMenu {
+  Group = 'GROUP',
+  Chat = 'CAHT',
+  Organization = 'ORGANIZATION',
+  Call = 'CALL',
+  Conversation = 'CONVERSATION'
+}
 
 @Component({
   selector: 'app-layout-messenger-left-side',
@@ -33,8 +42,11 @@ export class LeftSideComponent implements OnInit {
   selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
   /** FAB */
+  fabButtonShow = true;
   fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
 
+  MainMenu = MainMenu;
+
   constructor(
     private store: Store<any>,
     private dialogService: DialogService,
@@ -45,18 +57,8 @@ export class LeftSideComponent implements OnInit {
     this.badgeChatUnReadCount$ = this.store.pipe(
       select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
     );
-    this.fabButtons = [
+
-      {
+    this.setFabInitial(MainMenu.Group);
-        icon: 'timer',
-        tooltip: 'New Timer Chat',
-        divisionType: 'NEW_TIMER_CHAT'
-      },
-      {
-        icon: 'chat',
-        tooltip: 'New Chat',
-        divisionType: 'NEW_CHAT'
-      }
-    ];
   }
 
   async onClickNewChat(type: string = 'NORMAL') {
@@ -88,6 +90,89 @@ export class LeftSideComponent implements OnInit {
     }
   }
 
+  async onClickNewGroupAndMember() {
+    const result = await this.dialogService.open<
+      CreateChatDialogComponent,
+      CreateChatDialogData,
+      CreateChatDialogResult
+    >(CreateChatDialogComponent, {
+      width: '600px',
+      data: {
+        type: UserSelectDialogType.NewGroup,
+        title: 'New Group'
+      }
+    });
+
+    if (!!result && !!result.choice && result.choice) {
+      if (
+        !!result.selectedUserList &&
+        result.selectedUserList.length > 0 &&
+        result.groupName.trim().length > 0
+      ) {
+        const userSeqs: number[] = [];
+        result.selectedUserList.map(user => userSeqs.push(user.seq));
+
+        this.store.dispatch(
+          SyncStore.createGroupAndBuddy({
+            groupName: result.groupName,
+            trgtUserSeq: userSeqs
+          })
+        );
+      }
+    }
+  }
+
+  onSelectedTabChange(event: MatTabChangeEvent) {
+    this.setFabInitial(event.tab.ariaLabel);
+  }
+  setFabInitial(type: string) {
+    switch (type) {
+      case MainMenu.Group:
+        {
+          this.fabButtonShow = true;
+          this.fabButtons = [
+            {
+              icon: 'add',
+              tooltip: 'New Group Add',
+              divisionType: 'GROUP_NEW_ADD'
+            }
+          ];
+        }
+        break;
+      case MainMenu.Chat:
+        {
+          this.fabButtonShow = true;
+          this.fabButtons = [
+            {
+              icon: 'timer',
+              tooltip: 'New Timer Chat',
+              divisionType: 'CHAT_NEW_TIMER_ADD'
+            },
+            {
+              icon: 'chat',
+              tooltip: 'New Chat',
+              divisionType: 'CAHT_NEW_ADD'
+            }
+          ];
+        }
+        break;
+      //  case MainMenu.Organization:
+      //   {
+
+      //   }
+      //   break;
+      //  case MainMenu.Call:
+      //   {
+
+      //   }
+      //   break;
+
+      default: {
+        this.fabButtonShow = false;
+      }
+    }
+  }
+
   onCheckAllUser(params: {
     isChecked: boolean;
     userInfos: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
@@ -137,12 +222,18 @@ export class LeftSideComponent implements OnInit {
     };
 
     switch (btn.divisionType) {
-      case 'NEW_CHAT':
+      case 'GROUP_NEW_ADD':
+        {
+          this.onClickNewGroupAndMember();
+        }
+        break;
+
+      case 'CAHT_NEW_ADD':
         {
           this.onClickNewChat('NORMAL');
         }
         break;
-      case 'NEW_TIMER_CHAT':
+      case 'CHAT_NEW_TIMER_ADD':
         {
           this.onClickNewChat('TIMER');
         }

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

@@ -1,7 +1,12 @@
-import { StatusProtocolService } from './../../../../../../../ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service';
-import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
 import { MatMenuTrigger } from '@angular/material';
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  OnDestroy,
+  EventEmitter,
+  Output
+} from '@angular/core';
 
 import { Observable, combineLatest, Subscription, of } from 'rxjs';
 import { map, tap, catchError, exhaustMap } from 'rxjs/operators';
@@ -9,7 +14,6 @@ import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
-import * as QueryStore from '@app/store/messenger/query';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as StatusStore from '@app/store/messenger/status';
 
@@ -17,12 +21,13 @@ import { NGXLogger } from 'ngx-logger';
 import { Company } from '@ucap-webmessenger/api-external';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
-import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
+import { LoginInfo, KEY_LOGIN_INFO, UserSelectDialogType } from '@app/types';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
+import { StatusProtocolService } from '@ucap-webmessenger/protocol-status';
 import {
   DeptSearchType,
   UserInfoSS,
@@ -59,6 +64,9 @@ import {
   animations: ucapAnimations
 })
 export class GroupComponent implements OnInit, OnDestroy {
+  @Output()
+  newGroupAndMember = new EventEmitter();
+
   @ViewChild('groupExpansionPanel', { static: true })
   groupExpansionPanel: GroupExpansionPanelComponent;
 
@@ -164,35 +172,7 @@ export class GroupComponent implements OnInit, OnDestroy {
     switch (menuType) {
       case 'GROUP_NEW':
         {
-          const result = await this.dialogService.open<
+          this.newGroupAndMember.emit();
-            CreateChatDialogComponent,
-            CreateChatDialogData,
-            CreateChatDialogResult
-          >(CreateChatDialogComponent, {
-            width: '600px',
-            data: {
-              type: UserSelectDialogType.NewGroup,
-              title: 'New Group'
-            }
-          });
-
-          if (!!result && !!result.choice && result.choice) {
-            if (
-              !!result.selectedUserList &&
-              result.selectedUserList.length > 0 &&
-              result.groupName.trim().length > 0
-            ) {
-              const userSeqs: number[] = [];
-              result.selectedUserList.map(user => userSeqs.push(user.seq));
-
-              this.store.dispatch(
-                SyncStore.createGroupAndBuddy({
-                  groupName: result.groupName,
-                  trgtUserSeq: userSeqs
-                })
-              );
-            }
-          }
         }
         break;
       case 'GROUP_EXPAND_MORE':
@@ -361,7 +341,6 @@ export class GroupComponent implements OnInit, OnDestroy {
             EditGroupDialogData,
             EditGroupDialogResult
           >(EditGroupDialogComponent, {
-
             data: {
               title: 'Group Name Edit',
               group

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

@@ -195,7 +195,8 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   /** 전체 체크여부 */
   getCheckedAllUser() {
     if (
-      this.selectedDepartmentUserInfoList &&
+      !this.selectedDepartmentUserInfoList ||
+      this.selectedDepartmentUserInfoList.length === 0 ||
       this.selectedDepartmentUserInfoList.filter(
         item =>
           !(
@@ -249,7 +250,6 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       SelectGroupDialogResult
     >(SelectGroupDialogComponent, {
       width: '600px',
-      height: '500px',
       data: {
         title: 'Group Select'
       }

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

@@ -625,9 +625,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     switch (menuType) {
       case 'ADD_MEMBER':
         {
-          console.log(this.roomInfo);
-          console.log(this.userInfoList);
-
           const result = await this.dialogService.open<
             CreateChatDialogComponent,
             CreateChatDialogData,
@@ -636,39 +633,36 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             width: '600px',
             data: {
               type: UserSelectDialogType.EditChatMember,
-              title: 'Edit Chat Member'
+              title: 'Edit Chat Member',
-              // ,
+              curRoomUser: this.userInfoList.filter(
-              // curRoomUser: this.userInfoList
+                user => user.seq !== this.loginRes.userSeq
+              )
             }
           });
 
           if (!!result && !!result.choice && result.choice) {
             const userSeqs: number[] = [];
-            let roomSeq = '';
             if (
               !!result.selectedUserList &&
               result.selectedUserList.length > 0
             ) {
-              result.selectedUserList.map(user => userSeqs.push(user.seq));
+              result.selectedUserList.map(user => {
+                userSeqs.push(user.seq);
+              });
             }
 
-            if (!!result.selectedRoom) {
+            if (userSeqs.length > 0) {
-              roomSeq = result.selectedRoom.roomSeq;
+              // include me
-            }
+              userSeqs.push(this.loginRes.userSeq);
 
-            if (userSeqs.length > 0 || roomSeq.trim().length > 0) {
+              this.store.dispatch(
-              // this.store.dispatch(
+                RoomStore.inviteOrOpen({
-              //   EventStore.forward({
+                  req: {
-              //     senderSeq: this.loginRes.userSeq,
+                    divCd: 'Invite',
-              //     req: {
+                    userSeqs
-              //       roomSeq: '-999',
+                  }
-              //       eventType: message.type,
+                })
-              //       sentMessage: message.sentMessage
+              );
-              //     },
-              //     trgtUserSeqs: userSeqs,
-              //     trgtRoomSeq: roomSeq
-              //   })
-              // );
             }
           }
         }

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

@@ -73,7 +73,12 @@
                 <div *ngIf="searchProcessing">
                   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                 </div>
-                <div class="result-num">검색결과 <span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
+                <div class="result-num">
+                  검색결과
+                  <span class="text-accent-color"
+                    >({{ searchUserInfos.length }}명)</span
+                  >
+                </div>
                 <ucap-profile-user-list-item
                   *ngFor="let userInfo of searchUserInfos"
                   [userInfo]="userInfo"
@@ -141,15 +146,17 @@
         <mat-chip-list aria-label="User selection">
           <mat-chip
             *ngFor="let userInfo of selectedUserList"
-            color="primary"
+            [selected]="getChipsRemoveYn(userInfo)"
-            selected
             (removed)="onClickDeleteUser(userInfo)"
           >
             {{ userInfo.name }}
-            <mat-icon matChipRemove>clear</mat-icon>
+            <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
+              >clear</mat-icon
+            >
           </mat-chip>
         </mat-chip-list>
       </div>
+      <span>{{ selectedUserList.length }}명</span>
     </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

@@ -57,12 +57,22 @@ export interface CreateChatDialogData {
   /** CASE :: EventForward */
   ignoreRoom?: RoomInfo[];
   /** CASE :: EditCharMember */
-  curRoomUser?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  curRoomUser?: (
+    | UserInfo
+    | UserInfoSS
+    | UserInfoF
+    | UserInfoDN
+    | RoomUserInfo)[];
 }
 
 export interface CreateChatDialogResult {
   choice: boolean;
-  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[];
+  selectedUserList?: (
+    | UserInfo
+    | UserInfoSS
+    | UserInfoF
+    | UserInfoDN
+    | RoomUserInfo)[];
   selectedRoom?: RoomInfo;
   groupName?: string;
   oldGroup?: GroupDetailData;
@@ -117,7 +127,12 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   roomSubscription: Subscription;
 
   // 수집 데이터
-  selectedUserList: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  selectedUserList: (
+    | UserInfo
+    | UserInfoSS
+    | UserInfoF
+    | UserInfoDN
+    | RoomUserInfo)[] = [];
   isShowSelectedUserList = true;
   selectedRoom: RoomInfo;
 
@@ -208,6 +223,10 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     this.inputForm = this.formBuilder.group({
       groupName: ['', [Validators.required]]
     });
+
+    if (this.data.type === UserSelectDialogType.EditChatMember) {
+      this.selectedUserList = this.data.curRoomUser;
+    }
   }
 
   ngOnDestroy(): void {
@@ -239,6 +258,21 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  getChipsRemoveYn(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
+    if (
+      this.data.type === UserSelectDialogType.EditChatMember &&
+      !!this.data.curRoomUser &&
+      this.data.curRoomUser.length > 0
+    ) {
+      return !(
+        this.data.curRoomUser.filter(user => user.seq === userInfo.seq).length >
+        0
+      );
+    } else {
+      return true;
+    }
+  }
+
   onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
     if (tabChangeEvent.index === 2) {
       this.selectedUserList = [];

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -4,9 +4,12 @@
   </div>
   <mat-drawer-container class="contents" autosize>
     <div class="messages">
-      <app-layout-messenger-intro
+      <!-- <app-layout-messenger-intro
         (click)="drawer.toggle()"
         *ngIf="!(this.selectedChat$ | async)"
+      ></app-layout-messenger-intro> -->
+      <app-layout-messenger-intro
+        *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>
       <app-layout-messenger-messages
         *ngIf="!!(this.selectedChat$ | async)"
@@ -17,7 +20,7 @@
     </mat-drawer>
   </mat-drawer-container>
 
-  <div class="right-side">
+  <!-- <div class="right-side">
     <app-layout-messenger-right-side></app-layout-messenger-right-side>
-  </div>
+  </div> -->
 </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -8,6 +8,7 @@
     width: 380px;
     height: 100%;
     flex: 0 0 auto;
+    position: relative;
   }
   .contents {
     flex: 1 1 auto;

projects/ucap-webmessenger-app/src/app/store/messenger/room/actions.ts

@@ -15,7 +15,9 @@ import {
   ExitRequest,
   ExitResponse,
   Open3Request,
-  Open3Response
+  Open3Response,
+  InviteRequest,
+  InviteResponse
 } from '@ucap-webmessenger/protocol-room';
 import { ReadNotification } from '@ucap-webmessenger/protocol-event';
 
@@ -115,6 +117,19 @@ export const openTimerFailure = createAction(
   props<{ error: any }>()
 );
 
+export const inviteOrOpen = createAction(
+  '[Messenger::Room] Invite or Open',
+  props<{ req: OpenRequest }>()
+);
+export const inviteSuccess = createAction(
+  '[Messenger::Room] Invite Success',
+  props<InviteResponse>()
+);
+export const inviteFailure = createAction(
+  '[Messenger::Room] Invite Failure',
+  props<{ error: any }>()
+);
+
 export const exit = createAction(
   '[Messenger::Room] Exit',
   props<ExitRequest>()

projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts

@@ -30,7 +30,9 @@ import {
   UpdateResponse,
   OpenResponse,
   ExitResponse,
-  Open3Response
+  Open3Response,
+  RoomType,
+  InviteResponse
 } from '@ucap-webmessenger/protocol-room';
 
 import * as ChatStore from '@app/store/messenger/chat';
@@ -55,7 +57,10 @@ import {
   exitFailure,
   openTimer,
   openTimerSuccess,
-  openTimerFailure
+  openTimerFailure,
+  inviteOrOpen,
+  inviteSuccess,
+  inviteFailure
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@@ -204,6 +209,59 @@ export class Effects {
     )
   );
 
+  inviteOrOpen$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(inviteOrOpen),
+      withLatestFrom(
+        this.store.pipe(
+          select((state: any) => state.messenger.room.roomInfo as RoomInfo)
+        )
+      ),
+      exhaustMap(([action, roomInfo]) => {
+        if (roomInfo.roomType === RoomType.Single) {
+          // Re Open
+          return this.roomProtocolService.open(action.req).pipe(
+            map((res: OpenResponse) => {
+              return openSuccess({ res });
+            }),
+            catchError(error => of(openFailure({ error })))
+          );
+        } else if (roomInfo.roomType === RoomType.Multi) {
+          // Invite
+          return this.roomProtocolService
+            .invite({
+              roomSeq: roomInfo.roomSeq,
+              inviteUserSeqs: action.req.userSeqs
+            })
+            .pipe(
+              map((res: InviteResponse) => {
+                return inviteSuccess(res);
+              }),
+              catchError(error => of(inviteFailure({ error })))
+            );
+        } else {
+          return of(inviteFailure({ error: 'room type is error!!' }));
+        }
+      })
+    )
+  );
+  inviteSuccess$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(inviteSuccess),
+      map(action => {
+        return ChatStore.selectedRoom({ roomSeq: action.roomSeq });
+        // const loginInfo = this.sessionStorageService.get<LoginInfo>(
+        //   KEY_LOGIN_INFO
+        // );
+        // return info({
+        //   roomSeq: action.roomSeq,
+        //   isDetail: true,
+        //   localeCode: loginInfo.localeCode
+        // });
+      })
+    )
+  );
+
   exit$ = createEffect(() =>
     this.actions$.pipe(
       ofType(exit),

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

@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="list-item" matRipple>
   <dl class="item-default">
     <dt>
       <img

projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts

@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { ListItemComponent } from './components/list-item.component';
-import { MatBadgeModule, MatCheckboxModule } from '@angular/material';
+import { MatBadgeModule, MatCheckboxModule, MatRippleModule } from '@angular/material';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 
@@ -25,6 +25,7 @@ const SERVICES = [];
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatRippleModule,
     MatBadgeModule,
     MatCheckboxModule,
 

projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss

@@ -1,5 +1,5 @@
 .fab-container {
-  position: fixed;
+  position: absolute;
   bottom: 15px;
   right: 15px;
   z-index: 100;