From 98dec23b2fb48fc37a20e796e479cc7213f97858 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 25 Apr 2019 12:57:11 +0200
Subject: [PATCH] Add virtual scroling to statute list

"experimental" Virtual scrolling on the list of statutes.
It should load and behave way faster on huge amounts of data.
---
 client/src/app/shared/shared.module.ts        |   7 +-
 .../statute-paragraph-list.component.html     | 150 +++++++++---------
 client/src/styles.scss                        |  16 ++
 3 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 5de72877a..f13797fc9 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -42,6 +42,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CdkTreeModule } from '@angular/cdk/tree';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 // ngx-translate
 import { TranslateModule } from '@ngx-translate/core';
@@ -139,7 +140,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
         NgxMatSelectSearchModule,
         FileDropModule,
         EditorModule,
-        CdkTreeModule
+        CdkTreeModule,
+        ScrollingModule
     ],
     exports: [
         FormsModule,
@@ -203,7 +205,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
         OwlNativeDateTimeModule,
         CountdownTimeComponent,
         MediaUploadContentComponent,
-        PrecisionPipe
+        PrecisionPipe,
+        ScrollingModule
     ],
     declarations: [
         PermsDirective,
diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
index 61a268d81..c273b4bbe 100644
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
@@ -12,7 +12,6 @@
     </div>
 </os-head-bar>
 
-<div class="head-spacer"></div>
 <mat-card *ngIf="statuteParagraphToCreate">
     <mat-card-title translate>New statute paragraph</mat-card-title>
     <mat-card-content>
@@ -42,77 +41,84 @@
     </mat-card-actions>
 </mat-card>
 
-<mat-accordion class="os-card">
-    <mat-expansion-panel
-        *ngFor="let statuteParagraph of this.statuteParagraphs"
-        (opened)="openId = statuteParagraph.id"
-        (closed)="panelClosed(statuteParagraph)"
-        [expanded]="openId === statuteParagraph.id"
-        multiple="false"
-    >
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                {{ statuteParagraph.title }}
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-        <form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
-            <span translate>Edit statute paragraph:</span>
-            <p>
-                <mat-form-field>
-                    <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
-                    <mat-hint *ngIf="!updateForm.controls.title.valid">
-                        <span translate>Required</span>
-                    </mat-hint>
-                </mat-form-field>
-            </p>
-            <span>
-                <!-- The HTML Editor -->
-                <h4>Statute paragraph</h4>
-                <editor formControlName="text" [init]="tinyMceSettings"></editor>
-            </span>
-        </form>
-        <ng-container *ngIf="editId !== statuteParagraph.id">
-            <mat-card>
-                <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
-                <mat-card-content>
-                    <div [innerHTML]="statuteParagraph.text"></div>
-                </mat-card-content>
-            </mat-card>
-        </ng-container>
-        <mat-action-row>
-            <button
-                *ngIf="editId !== statuteParagraph.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="onEditButton(statuteParagraph)"
-                mat-icon-button
-            >
-                <mat-icon>edit</mat-icon>
-            </button>
-            <button
-                *ngIf="editId === statuteParagraph.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="onCancelUpdate()"
-                mat-icon-button
-            >
-                <mat-icon>close</mat-icon>
-            </button>
-            <button
-                *ngIf="editId === statuteParagraph.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="onSaveButton(statuteParagraph)"
-                mat-icon-button
-            >
-                <mat-icon>save</mat-icon>
-            </button>
-            <button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
-                <mat-icon>delete</mat-icon>
-            </button>
-        </mat-action-row>
-    </mat-expansion-panel>
-</mat-accordion>
+<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
+    <mat-accordion class="os-card">
+        <mat-expansion-panel
+            *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
+            (opened)="openId = statuteParagraph.id"
+            (closed)="panelClosed(statuteParagraph)"
+            [expanded]="openId === statuteParagraph.id"
+            multiple="false"
+        >
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{ statuteParagraph.title }}
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
+                <span translate>Edit statute paragraph:</span>
+                <p>
+                    <mat-form-field>
+                        <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
+                        <mat-hint *ngIf="!updateForm.controls.title.valid">
+                            <span translate>Required</span>
+                        </mat-hint>
+                    </mat-form-field>
+                </p>
+                <span>
+                    <!-- The HTML Editor -->
+                    <h4>Statute paragraph</h4>
+                    <editor formControlName="text" [init]="tinyMceSettings"></editor>
+                </span>
+            </form>
+            <ng-container *ngIf="editId !== statuteParagraph.id">
+                <mat-card>
+                    <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
+                    <mat-card-content>
+                        <div [innerHTML]="statuteParagraph.text"></div>
+                    </mat-card-content>
+                </mat-card>
+            </ng-container>
+            <mat-action-row>
+                <button
+                    *ngIf="editId !== statuteParagraph.id"
+                    mat-button
+                    class="on-transition-fade"
+                    (click)="onEditButton(statuteParagraph)"
+                    mat-icon-button
+                >
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button
+                    *ngIf="editId === statuteParagraph.id"
+                    mat-button
+                    class="on-transition-fade"
+                    (click)="onCancelUpdate()"
+                    mat-icon-button
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+                <button
+                    *ngIf="editId === statuteParagraph.id"
+                    mat-button
+                    class="on-transition-fade"
+                    (click)="onSaveButton(statuteParagraph)"
+                    mat-icon-button
+                >
+                    <mat-icon>save</mat-icon>
+                </button>
+                <button
+                    mat-button
+                    class="on-transition-fade"
+                    (click)="onDeleteButton(statuteParagraph)"
+                    mat-icon-button
+                >
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </mat-action-row>
+        </mat-expansion-panel>
+    </mat-accordion>
+</cdk-virtual-scroll-viewport>
 
 <mat-card *ngIf="statuteParagraphs.length === 0">
     <mat-card-content>
diff --git a/client/src/styles.scss b/client/src/styles.scss
index a5ec3cde4..703453a57 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -462,8 +462,24 @@ button.mat-menu-item.selected {
     margin: 0 65px;
 }
 
+/**
+ * cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
+ * Depending in mobile-mode and desktop mode we need to subtract different values
+ * from 100vh
+ */
+.virtual-scroll-full-page {
+    height: calc(100vh - 128px);
+}
+
 /** media queries */
 
+/* medium to small */
+@media only screen and (max-width: 960px) {
+    .virtual-scroll-full-page {
+        height: calc(100vh - 64px);
+    }
+}
+
 /* medium */
 @media only screen and (min-width: 500px) and (max-width: 960px) {
     .content-container {