FAB 위치 수정 :: 좀더 왼쪽으로 이동하여 그룹의 more 버튼과 겹치지 않도록 수정.

조직도 리스트의 cdk-virture-scroll 위치값 리세팅하도록 수정.

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

@@ -145,6 +145,7 @@
     >
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
+        [isVisible]="currentTabLable === MainMenu.Organization"
         (checkAllUser)="onCheckAllUser($event)"
         (checkUser)="onCheckUser($event)"
         (openProfile)="onClickOpenProfile($event)"

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

@@ -52,6 +52,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   >();
 
   @ViewChildren('tabs') tabs: QueryList<ElementRef<HTMLDivElement>>;
+  currentTabLable: string;
 
   badgeChatUnReadCount: number;
   badgeChatUnReadCountSubscription: Subscription;
@@ -81,6 +82,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
       });
 
     this.setFabInitial(MainMenu.Group);
+    this.currentTabLable = MainMenu.Group;
   }
 
   ngOnDestroy(): void {
@@ -158,6 +160,7 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
   onSelectedTabChange(event: MatTabChangeEvent) {
     this.setFabInitial(event.tab.ariaLabel);
+    this.currentTabLable = event.tab.ariaLabel;
 
     this.tabs.forEach(tab => {
       if (`tabs-${event.index}` === tab.nativeElement.id) {

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

@@ -44,8 +44,13 @@
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <div *ngIf="!isShowSearch" class="search-list">
-      <cdk-virtual-scroll-viewport itemSize="20" perfectScrollbar fxFlexFill>
+    <div class="search-list">
+      <cdk-virtual-scroll-viewport
+        itemSize="80"
+        #cvsvDeptUser
+        perfectScrollbar
+        fxFlexFill
+      >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
           [userInfo]="userInfo"
@@ -57,15 +62,15 @@
           (openProfile)="onClickOpenProfile($event)"
           (click)="onToggleUser(userInfo)"
         >
-          Loading...
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>
     </div>
     <div *ngIf="isShowSearch" class="search-result">
       <cdk-virtual-scroll-viewport
+        #cvsvDeptSearchUser
         itemSize="20"
         perfectScrollbar
-        style="height: 100%;"
+        fxFlexFill
       >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of searchUserInfos"

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

@@ -155,13 +155,3 @@
     }
   }
 }
-::ng-deep .oraganization-tab{
- .oraganization-tab-tree,
- .select-list{
-  .ps{
-    .ps-content{
-      height:100%;
-    }
-  }
-}
-}

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

@@ -4,7 +4,11 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
-  Input
+  Input,
+  ViewChild,
+  AfterViewInit,
+  AfterContentChecked,
+  AfterViewChecked
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
 import { Observable, Subscription, of } from 'rxjs';
@@ -41,6 +45,8 @@ import {
 } from '../../dialogs/group/select-group.dialog.component';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { Company } from '@ucap-webmessenger/api-external';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-organization',
@@ -48,7 +54,8 @@ import { Company } from '@ucap-webmessenger/api-external';
   styleUrls: ['./organization.component.scss'],
   animations: ucapAnimations
 })
-export class OrganizationComponent implements OnInit, OnDestroy {
+export class OrganizationComponent
+  implements OnInit, OnDestroy, AfterViewChecked {
   @Input()
   showTitle = true;
   @Input()
@@ -57,6 +64,8 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   @Input()
   /** 선택된 사용자의 리스트 */
   selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
+  @Input()
+  isVisible = true;
 
   @Output()
   checkUser = new EventEmitter<{
@@ -77,11 +86,13 @@ export class OrganizationComponent implements OnInit, OnDestroy {
     UserInfo | UserInfoSS | UserInfoF | UserInfoDN
   >();
 
+  @ViewChild('cvsvDeptUser', { static: false })
+  cvsvDeptUser: CdkVirtualScrollViewport;
+
   companyList$: Observable<Company[]>;
   companyCode: string;
 
   departmentInfoList$: Observable<DeptInfo[]>;
-  selectedDepartmentUserInfoList$: Observable<UserInfoSS[]>;
   selectedDepartmentUserInfoList: UserInfoSS[] = [];
   selectedDepartmentUserInfoListSubscription: Subscription;
   selectedDepartmentStatus$: Observable<DeptUserResponse>;
@@ -96,6 +107,9 @@ export class OrganizationComponent implements OnInit, OnDestroy {
   isShowSearch = false;
   searchUserInfos: UserInfoSS[] = [];
 
+  /** 부서원 리스트에 virture scroll의 size 가 체킹되지 않아 강제 수행. 1번만. */
+  isInitList = false;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -173,6 +187,19 @@ export class OrganizationComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
+  ngAfterViewChecked(): void {
+    if (
+      !!this.cvsvDeptUser &&
+      !!this.selectedDepartmentUserInfoList &&
+      this.selectedDepartmentUserInfoList.length > 0 &&
+      !this.isInitList &&
+      this.isVisible
+    ) {
+      this.isInitList = true;
+      this.cvsvDeptUser.checkViewportSize();
+    }
+  }
+
   ngOnDestroy(): void {
     if (!!this.selectedDepartmentUserInfoListSubscription) {
       this.selectedDepartmentUserInfoListSubscription.unsubscribe();

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

@@ -125,6 +125,7 @@
                 [showTitle]="false"
                 [selectedUserList]="selectedUserList"
                 [isUserSelect]="true"
+                [isVisible]="currentTabIndex === 1"
                 (checkAllUser)="onCheckAllUser($event)"
                 (checkUser)="onCheckUser($event)"
                 (toggleUser)="onToggleUser($event)"

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

@@ -110,6 +110,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  currentTabIndex: number;
+
   UserSelectDialogType = UserSelectDialogType;
 
   loginRes: LoginResponse;
@@ -237,6 +239,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     if (this.data.type === UserSelectDialogType.EditChatMember) {
       this.selectedUserList = this.data.curRoomUser;
     }
+
+    this.currentTabIndex = 0;
   }
 
   ngOnDestroy(): void {
@@ -284,6 +288,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   }
 
   onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
+    this.currentTabIndex = tabChangeEvent.index;
+
     if (tabChangeEvent.index === 2) {
       this.selectedUserList = [];
       this.isShowSelectedUserList = false;

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

@@ -1,7 +1,7 @@
 .fab-container {
   position: absolute;
   bottom: 15px;
-  right: 15px;
+  right: 40px;
   z-index: 100;
   display: flex;
   flex-direction: column-reverse;