Merge pull request #4627 from tsiegleauq/virtual-scroll-statute

Add virtual scrolling to statute list

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,

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,9 +41,10 @@
     </mat-card-actions>
 </mat-card>
 
-<mat-accordion class="os-card">
+<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
+    <mat-accordion class="os-card">
         <mat-expansion-panel
-        *ngFor="let statuteParagraph of this.statuteParagraphs"
+            *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
             (opened)="openId = statuteParagraph.id"
             (closed)="panelClosed(statuteParagraph)"
             [expanded]="openId === statuteParagraph.id"
@@ -107,12 +107,18 @@
                 >
                     <mat-icon>save</mat-icon>
                 </button>
-            <button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" 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>
+    </mat-accordion>
+</cdk-virtual-scroll-viewport>
 
 <mat-card *ngIf="statuteParagraphs.length === 0">
     <mat-card-content>

client/src/styles.scss

@@ -469,8 +469,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 {