Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -29,6 +29,7 @@
     [groupBuddyList]="groupBuddyList"
     [favoritBuddyList]="favoritBuddyList$ | async"
     [myProfileInfo]="loginRes.userInfo"
+    [activate$]="groupTreeActivatedSubject.asObservable()"
     (more)="onMoreGroup($event)"
   >
     <ucap-profile-user-list-item

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

@@ -8,7 +8,13 @@ import {
   Output
 } from '@angular/core';
 
-import { Observable, combineLatest, Subscription, of } from 'rxjs';
+import {
+  Observable,
+  combineLatest,
+  Subscription,
+  of,
+  BehaviorSubject
+} from 'rxjs';
 import { map, tap, catchError, exhaustMap } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 
@@ -27,7 +33,8 @@ import {
   UserSelectDialogType,
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
-  KEY_VER_INFO
+  KEY_VER_INFO,
+  MainMenu
 } from '@app/types';
 import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
 
@@ -120,6 +127,11 @@ export class GroupComponent implements OnInit, OnDestroy {
   searchProcessing = false;
   searchUserInfos: UserInfoSS[] = [];
 
+  groupTreeActivatedSubject: BehaviorSubject<boolean> = new BehaviorSubject<
+    boolean
+  >(false);
+  groupTreeActivatedSubscription: Subscription;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -233,6 +245,14 @@ export class GroupComponent implements OnInit, OnDestroy {
           return this.favoritBuddyList;
         })
       );
+
+    this.groupTreeActivatedSubscription = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex)
+      )
+    ]).subscribe(([menu]) => {
+      this.groupTreeActivatedSubject.next(menu === MainMenu.Group);
+    });
   }
 
   ngOnDestroy(): void {

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -27,7 +27,8 @@ import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { Subscription } from 'rxjs';
+import { Subscription, Observable, timer } from 'rxjs';
+import { debounce } from 'rxjs/operators';
 
 enum NodeType {
   None = 'None',
@@ -166,6 +167,9 @@ export class ExpansionPanelComponent
   /** 선택할 수 없는 사용자 리스트 */
   ignoreUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];
 
+  @Input()
+  activate$: Observable<boolean>;
+
   @Output()
   more = new EventEmitter<{
     event: MouseEvent;
@@ -187,7 +191,7 @@ export class ExpansionPanelComponent
   @ViewChild('groupTree', { static: false })
   groupTree: MatTree<FlatNode>;
 
-  @ViewChild('cvsvGroup', { static: false })
+  @ViewChild('cvsvGroup', { static: true })
   cvsvGroup: CdkVirtualScrollViewport;
 
   @ViewChild(PerfectScrollbarDirective, { static: false })
@@ -207,6 +211,8 @@ export class ExpansionPanelComponent
   groupList: { group: GroupDetailData; buddyList: UserInfo[] }[];
 
   treeControlExpansionChangeSubscription: Subscription;
+  activateSubscription: Subscription;
+  scrollSubscription: Subscription;
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
@@ -245,15 +251,38 @@ export class ExpansionPanelComponent
   ngOnInit() {
     this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
       () => {
+        this.cvsvGroup.checkViewportSize();
         this.psDirectiveRef.update();
       }
     );
+    this.activateSubscription = this.activate$.subscribe(activate => {
+      if (activate) {
+        setTimeout(() => {
+          if (!!this.cvsvGroup) {
+            this.cvsvGroup.checkViewportSize();
+            this.psDirectiveRef.update();
+          }
+        }, 100);
+      }
+    });
+
+    this.scrollSubscription = this.cvsvGroup.renderedRangeStream
+      .pipe(debounce(() => timer(100)))
+      .subscribe(() => {
+        this.psDirectiveRef.update();
+      });
   }
 
   ngOnDestroy(): void {
     if (!!this.treeControlExpansionChangeSubscription) {
       this.treeControlExpansionChangeSubscription.unsubscribe();
     }
+    if (!!this.activateSubscription) {
+      this.activateSubscription.unsubscribe();
+    }
+    if (!!this.scrollSubscription) {
+      this.scrollSubscription.unsubscribe();
+    }
   }
 
   ngAfterViewInit(): void {

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts

@@ -156,6 +156,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   ngOnInit() {
     this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
       () => {
+        this.cvsvOrganization.checkViewportSize();
         this.psDirectiveRef.update();
       }
     );
@@ -164,6 +165,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
         setTimeout(() => {
           if (!!this.cvsvOrganization) {
             this.cvsvOrganization.checkViewportSize();
+            this.psDirectiveRef.update();
           }
         }, 100);
       }