From 7d68578a7ee34459c47e4f4faf07391668a43339 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sat, 10 Jul 2021 21:00:08 +0200
Subject: [PATCH] Virtual scroll (#735)

---
 frontend/app/features/content/module.ts       |  4 ++
 .../shared/forms/array-editor.component.html  | 70 ++++++++++++-------
 .../shared/forms/array-editor.component.scss  | 20 +++++-
 frontend/package-lock.json                    |  8 +++
 frontend/package.json                         |  1 +
 5 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/frontend/app/features/content/module.ts b/frontend/app/features/content/module.ts
index 602b9d7aa..ac668cab6 100644
--- a/frontend/app/features/content/module.ts
+++ b/frontend/app/features/content/module.ts
@@ -8,6 +8,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CanDeactivateGuard, ContentMustExistGuard, LoadLanguagesGuard, LoadSchemasGuard, SchemaMustExistPublishedGuard, SchemaMustNotBeSingletonGuard, SqxFrameworkModule, SqxSharedModule } from '@app/shared';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule as ScrollingModuleExperimental } from '@angular/cdk-experimental/scrolling';
 import { ArrayEditorComponent, ArrayItemComponent, AssetsEditorComponent, CommentsPageComponent, ComponentComponent, ComponentSectionComponent, ContentComponent, ContentCreatorComponent, ContentEditorComponent, ContentEventComponent, ContentExtensionComponent, ContentFieldComponent, ContentHistoryPageComponent, ContentListCellDirective, ContentListFieldComponent, ContentListHeaderComponent, ContentListWidthPipe, ContentPageComponent, ContentReferencesComponent, ContentsColumnsPipe, ContentSectionComponent, ContentSelectorComponent, ContentSelectorItemComponent, ContentsFiltersPageComponent, ContentsPageComponent, ContentStatusComponent, ContentValueComponent, ContentValueEditorComponent, CustomViewEditorComponent, DueTimeSelectorComponent, FieldEditorComponent, FieldLanguagesComponent, IFrameEditorComponent, PreviewButtonComponent, ReferenceItemComponent, ReferencesEditorComponent, SchemasPageComponent, SidebarPageComponent, StockPhotoEditorComponent } from './declarations';
 
 const routes: Routes = [
@@ -76,6 +78,8 @@ const routes: Routes = [
 @NgModule({
     imports: [
         RouterModule.forChild(routes),
+        ScrollingModule,
+        ScrollingModuleExperimental,
         SqxFrameworkModule,
         SqxSharedModule,
     ],
diff --git a/frontend/app/features/content/shared/forms/array-editor.component.html b/frontend/app/features/content/shared/forms/array-editor.component.html
index e68f8cbe2..0a4a9496d 100644
--- a/frontend/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/app/features/content/shared/forms/array-editor.component.html
@@ -1,29 +1,51 @@
 <ng-container *ngIf="formModel.itemChanges | async; let items">
-    <div class="array-container" *ngIf="items.length > 0"
-        cdkDropList
-        [cdkDropListDisabled]="false"
-        [cdkDropListData]="items"
-        (cdkDropListDropped)="sort($event)">
-        <div *ngFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item"
-            cdkDrag
-            cdkDragLockAxis="y">
-            <sqx-array-item
-                [canUnset]="canUnset"
-                [form]="form"
-                [formContext]="formContext"
-                [formModel]="itemForm"
-                [index]="i"
-                [isDisabled]="isDisabled | async"
-                [isFirst]="isFirst"
-                [isLast]="isLast"
-                [language]="language"
-                [languages]="languages"
-                (clone)="addCopy(itemForm)"
-                (itemRemove)="removeItem(i)"
-                (itemMove)="move(itemForm, $event)" >
-                <i cdkDragHandle class="icon-drag2"></i>
-            </sqx-array-item>
+    <div class="array-container" *ngIf="items.length > 0">
+        <div class="cdk-container" *ngIf="items.length <= 50;"
+            cdkDropList
+            [cdkDropListDisabled]="false"
+            [cdkDropListData]="items"
+            (cdkDropListDropped)="sort($event)">
+            <div *ngFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item"
+                cdkDrag
+                cdkDragLockAxis="y">
+                <sqx-array-item
+                    [canUnset]="canUnset"
+                    [form]="form"
+                    [formContext]="formContext"
+                    [formModel]="itemForm"
+                    [index]="i"
+                    [isDisabled]="isDisabled | async"
+                    [isFirst]="isFirst"
+                    [isLast]="isLast"
+                    [language]="language"
+                    [languages]="languages"
+                    (clone)="addCopy(itemForm)"
+                    (itemRemove)="removeItem(i)"
+                    (itemMove)="move(itemForm, $event)" >
+                    <i cdkDragHandle class="icon-drag2"></i>
+                </sqx-array-item>
+            </div>
         </div>
+
+        <cdk-virtual-scroll-viewport autosize *ngIf="items.length > 50">
+            <div *cdkVirtualFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item">
+                <sqx-array-item
+                    [canUnset]="canUnset"
+                    [form]="form"
+                    [formContext]="formContext"
+                    [formModel]="itemForm"
+                    [index]="i"
+                    [isDisabled]="isDisabled | async"
+                    [isFirst]="isFirst"
+                    [isLast]="isLast"
+                    [language]="language"
+                    [languages]="languages"
+                    (clone)="addCopy(itemForm)"
+                    (itemRemove)="removeItem(i)"
+                    (itemMove)="move(itemForm, $event)" >
+                </sqx-array-item>
+            </div>
+        </cdk-virtual-scroll-viewport>
     </div>
 
     <div class="row no-gutters align-items-center">
diff --git a/frontend/app/features/content/shared/forms/array-editor.component.scss b/frontend/app/features/content/shared/forms/array-editor.component.scss
index 7eae62567..288214a73 100644
--- a/frontend/app/features/content/shared/forms/array-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/array-editor.component.scss
@@ -1,11 +1,25 @@
+:host ::ng-deep {
+    .cdk-virtual-scroll-content-wrapper {
+        right: 0;
+    }
+}
+
 .array-container {
     background: $color-border;
+    margin: 0;
     margin-bottom: 1rem;
-    padding: 1rem;
-    padding-bottom: 1px;
+    padding-bottom: 1rem;
+    position: relative;
+}
+
+.drag-container {
     position: relative;
 }
 
+cdk-virtual-scroll-viewport {
+    height: 1000px;
+}
+
 .item {
-    margin-bottom: 1rem;
+    padding: 1rem 1rem 0;
 }
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 36bd0132f..d914a1b8e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -46,6 +46,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "@angular/cdk-experimental": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk-experimental/-/cdk-experimental-12.1.1.tgz",
+      "integrity": "sha512-troV5cZ5Ss5B9Grv61hvtOwqTHQmdA2/Kzm+9mrPIHNEimpFEfG5lATfGA2C3QFk9Cs0yloiXu39oEJYEqyuBA==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@angular/common": {
       "version": "12.0.2",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c796ecdbc..53f885a43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@angular/animations": "12.0.2",
     "@angular/cdk": "12.0.2",
+    "@angular/cdk-experimental": "^12.1.1",
     "@angular/common": "12.0.2",
     "@angular/core": "12.0.2",
     "@angular/forms": "12.0.2",