merged

2019-11-05 13:49:14 +09:00 · 2019-11-05 13:49:14 +09:00 · fd4561f965
commit fd4561f965
parent 086a4556f8 437209bf7f
14 changed files with 287 additions and 97 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/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>
+  <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"
+        (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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/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');
        }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/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
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts
+++ b/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'
      }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/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'
-              // ,
-              // curRoomUser: this.userInfoList
+              title: 'Edit Chat Member',
+              curRoomUser: this.userInfoList.filter(
+                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) {
-              roomSeq = result.selectedRoom.roomSeq;
-            }
+            if (userSeqs.length > 0) {
+              // include me
+              userSeqs.push(this.loginRes.userSeq);

-            if (userSeqs.length > 0 || roomSeq.trim().length > 0) {
-              // this.store.dispatch(
-              //   EventStore.forward({
-              //     senderSeq: this.loginRes.userSeq,
-              //     req: {
-              //       roomSeq: '-999',
-              //       eventType: message.type,
-              //       sentMessage: message.sentMessage
-              //     },
-              //     trgtUserSeqs: userSeqs,
-              //     trgtRoomSeq: roomSeq
-              //   })
-              // );
+              this.store.dispatch(
+                RoomStore.inviteOrOpen({
+                  req: {
+                    divCd: 'Invite',
+                    userSeqs
+                  }
+                })
+              );
            }
          }
        }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/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
+            [selected]="getChipsRemoveYn(userInfo)"
            (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">
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts
+++ b/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 = [];
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/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;
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/room/actions.ts
+++ b/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>()
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/room/effects.ts
+++ b/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),
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/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
--- a/projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts
+++ b/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,

--- a/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss
+++ b/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;