diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html index 3c385769..1fad412b 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html +++ b/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)" > = new BehaviorSubject< + boolean + >(false); + groupTreeActivatedSubscription: Subscription; + constructor( private store: Store, 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 { diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts index e3c010fb..f125656d 100644 --- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts +++ b/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; + @Output() more = new EventEmitter<{ event: MouseEvent; @@ -187,7 +191,7 @@ export class ExpansionPanelComponent @ViewChild('groupTree', { static: false }) groupTree: MatTree; - @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 { diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts index 2bba954f..3f20b426 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts +++ b/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); }