FAB 기능 추가 :: 대 메뉴 선택에 따른 처리.

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

@@ -6,14 +6,22 @@
     </button>
   </div>-->
   <!-- <div class="logo">로고</div> -->
-  <mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
-    <mat-tab>
+  <mat-tab-group
+    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"></app-layout-chat-left-sidenav-group>
+      <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"
@@ -26,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>
@@ -37,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>
@@ -45,6 +53,7 @@
     </mat-tab>
   </mat-tab-group>
   <ucap-ui-float-action-button
+    *ngIf="fabButtonShow"
     [fabButtons]="fabButtons"
     (buttonClick)="onClickFab($event)"
   ></ucap-ui-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 = [
-      {
-        icon: 'timer',
-        tooltip: 'New Timer Chat',
-        divisionType: 'NEW_TIMER_CHAT'
-      },
-      {
-        icon: 'chat',
-        tooltip: 'New Chat',
-        divisionType: 'NEW_CHAT'
-      }
-    ];
+
+    this.setFabInitial(MainMenu.Group);
   }
 
   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<
-            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
-                })
-              );
-            }
-          }
+          this.newGroupAndMember.emit();
         }
         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

@@ -250,7 +250,6 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       SelectGroupDialogResult
     >(SelectGroupDialogComponent, {
       width: '600px',
-      height: '500px',
       data: {
         title: 'Group Select'
       }

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 class="thumbnail" /> -->
@@ -10,7 +10,7 @@
         [default]="defaultPath"
       />
       <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
-          <mat-icon>timer</mat-icon>
+        <mat-icon>timer</mat-icon>
       </span>
       <!-- <ucap-ui-imaage
         [imageClass]="'thumbnail'"
@@ -23,7 +23,10 @@
       <div class="detail">
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
-          <div class="num text-accent-color"  *ngIf="roomInfo.roomType === RoomType.Multi">
+          <div
+            class="num text-accent-color"
+            *ngIf="roomInfo.roomType === RoomType.Multi"
+          >
             {{ roomInfo.joinUserCount }}명
           </div>
           <div *ngIf="!checkable && !roomInfo.receiveAlarm">

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,