From a8490e0439071709e7dc50e54b551eb00605a116 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 22 Feb 2022 08:51:46 +0100
Subject: [PATCH] Fix virtual scroll.

---
 .../shared/forms/array-editor.component.html  | 21 ++++++++++---------
 .../shared/forms/array-editor.component.ts    | 12 +++++++++++
 .../shared/forms/array-item.component.ts      |  7 +++++++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
index 474ebec27..40cd75015 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="formModel.itemChanges | async; let items">
     <div class="array-container" *ngIf="items.length > 0">
-        <div class="cdk-container" *ngIf="items.length <= 5;"
+        <div class="cdk-container" *ngIf="items.length <= 20;"
             cdkDropList
             [cdkDropListDisabled]="false"
             [cdkDropListData]="items"
@@ -10,6 +10,7 @@
                 cdkDragLockAxis="y">
                 <sqx-array-item
                     [canUnset]="canUnset"
+                    (clone)="addCopy(itemForm)"
                     [form]="form"
                     [formContext]="formContext"
                     [formLevel]="formLevel + 1"
@@ -19,20 +20,20 @@
                     [isDisabled]="isDisabled | async"
                     [isFirst]="isFirst"
                     [isLast]="isLast"
-                    [language]="language"
-                    [languages]="languages"
-                    (clone)="addCopy(itemForm)"
                     (itemRemove)="removeItem(i)"
-                    (itemMove)="move(itemForm, $event)" >
+                    (itemMove)="move(itemForm, $event)" 
+                    [language]="language"
+                    [languages]="languages">
                     <i cdkDragHandle class="icon-drag2"></i>
                 </sqx-array-item>
             </div>
         </div>
 
-        <cdk-virtual-scroll-viewport autosize *ngIf="items.length > 5">
+        <cdk-virtual-scroll-viewport autosize *ngIf="items.length > 20" #viewport>
             <div *cdkVirtualFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item">
                 <sqx-array-item
                     [canUnset]="canUnset"
+                    (clone)="addCopy(itemForm)"
                     [form]="form"
                     [formContext]="formContext"
                     [formLevel]="formLevel + 1"
@@ -42,11 +43,11 @@
                     [isDisabled]="isDisabled | async"
                     [isFirst]="isFirst"
                     [isLast]="isLast"
-                    [language]="language"
-                    [languages]="languages"
-                    (clone)="addCopy(itemForm)"
+                    (itemExpanded)="onExpanded()"
                     (itemRemove)="removeItem(i)"
-                    (itemMove)="move(itemForm, $event)" >
+                    (itemMove)="move(itemForm, $event)"
+                    [language]="language"
+                    [languages]="languages">
                 </sqx-array-item>
             </div>
         </cdk-virtual-scroll-viewport>
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.ts b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
index 3fc3050c2..9d515508b 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
@@ -6,6 +6,7 @@
  */
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -43,6 +44,9 @@ export class ArrayEditorComponent implements OnChanges, OnInit {
     @ViewChildren(ArrayItemComponent)
     public children!: QueryList<ArrayItemComponent>;
 
+    @ViewChildren(CdkVirtualScrollViewport)
+    public viewport?: QueryList<CdkVirtualScrollViewport>;
+
     public isArray = false;
 
     public schemasDropdown = new ModalModel();
@@ -123,6 +127,10 @@ export class ArrayEditorComponent implements OnChanges, OnInit {
         this.reset();
     }
 
+    public onExpanded() {
+        this.viewport?.first?.checkViewportSize();
+    }
+
     public collapseAll() {
         this.children.forEach(child => {
             child.collapse();
@@ -131,6 +139,8 @@ export class ArrayEditorComponent implements OnChanges, OnInit {
         if (this.formLevel === 0) {
             this.localStore.setBoolean(this.expandedKey(), true);
         }
+
+        this.onExpanded();
     }
 
     public expandAll() {
@@ -141,6 +151,8 @@ export class ArrayEditorComponent implements OnChanges, OnInit {
         if (this.formLevel === 0) {
             this.localStore.setBoolean(this.expandedKey(), false);
         }
+
+        this.onExpanded();
     }
 
     private reset() {
diff --git a/frontend/src/app/features/content/shared/forms/array-item.component.ts b/frontend/src/app/features/content/shared/forms/array-item.component.ts
index 21380b9f2..ece2746d5 100644
--- a/frontend/src/app/features/content/shared/forms/array-item.component.ts
+++ b/frontend/src/app/features/content/shared/forms/array-item.component.ts
@@ -32,6 +32,9 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
     @Output()
     public itemMove = new EventEmitter<number>();
 
+    @Output()
+    public itemExpanded = new EventEmitter<number>();
+
     @Output()
     public clone = new EventEmitter();
 
@@ -110,10 +113,14 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
 
     public collapse() {
         this.next({ isExpanded: false });
+
+        this.itemExpanded.emit();
     }
 
     public expand() {
         this.next({ isExpanded: true, isExpandedOnce: true });
+
+        this.itemExpanded.emit();
     }
 
     public moveTop() {