From 7aa5f4f2273f3573aa3b828b0616cd9df781ae44 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Mon, 18 Nov 2019 16:58:27 +0900
Subject: [PATCH] bug of virtual scroll is fixed

---
 .../components/expansion-panel.component.ts   | 17 ++---------
 ...virtual-scroll-viewport-patch.directive.ts | 30 +++++++++++++++++++
 .../src/lib/ucap-ui.module.ts                 |  4 ++-
 3 files changed, 36 insertions(+), 15 deletions(-)
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts

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 5df21182..ad5f1b2b 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
@@ -15,7 +15,7 @@ import {
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
-import { MatAccordion, MatTreeFlattener, MatTree } from '@angular/material';
+import { MatTreeFlattener, MatTree } from '@angular/material';
 import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive';
 import {
   UserInfoSS,
@@ -26,8 +26,6 @@ import { NGXLogger } from 'ngx-logger';
 import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { fromEvent, Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
 
 enum NodeType {
   None = 'None',
@@ -161,8 +159,6 @@ export class ExpansionPanelComponent
   @ViewChild('cvsvGroup', { static: false })
   cvsvGroup: CdkVirtualScrollViewport;
 
-  private readonly destroySubject = new Subject();
-
   NodeType = NodeType;
 
   profileNodes: GroupNode[] = [];
@@ -208,16 +204,9 @@ export class ExpansionPanelComponent
     );
   }
 
-  ngOnInit() {
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(10), takeUntil(this.destroySubject))
-      .subscribe(() => this.cvsvGroup.checkViewportSize());
-  }
+  ngOnInit() {}
 
-  ngOnDestroy(): void {
-    this.destroySubject.next();
-    this.destroySubject.complete();
-  }
+  ngOnDestroy(): void {}
 
   ngAfterViewInit(): void {
     this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup;
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts
new file mode 100644
index 00000000..849879a6
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts
@@ -0,0 +1,30 @@
+import { Directive, OnInit, OnDestroy, Self, Inject } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: 'cdk-virtual-scroll-viewport'
+})
+export class CdkVirtualScrollViewportPatchDirective
+  implements OnInit, OnDestroy {
+  protected readonly destroySubject = new Subject();
+
+  constructor(
+    @Self()
+    @Inject(CdkVirtualScrollViewport)
+    private readonly viewportComponent: CdkVirtualScrollViewport
+  ) {}
+
+  ngOnInit() {
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(10), takeUntil(this.destroySubject))
+      .subscribe(() => this.viewportComponent.checkViewportSize());
+  }
+
+  ngOnDestroy() {
+    this.destroySubject.next();
+    this.destroySubject.complete();
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index faff4a6c..1af06f5e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -34,6 +34,7 @@ import { SnackBarService } from './services/snack-bar.service';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { FileUploadForDirective } from './directives/file-upload-for.directive';
 import { ImageDirective } from './directives/image.directive';
+import { CdkVirtualScrollViewportPatchDirective } from './directives/cdk-virtual-scroll-viewport-patch.directive';
 
 import { AlertDialogComponent } from './dialogs/alert.dialog.component';
 import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
@@ -62,7 +63,8 @@ const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 const DIRECTIVES = [
   ClickOutsideDirective,
   FileUploadForDirective,
-  ImageDirective
+  ImageDirective,
+  CdkVirtualScrollViewportPatchDirective
 ];
 const PIPES = [
   BytesPipe,