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.
This commit is contained in:
Sean Engelhardt 2019-04-25 12:57:11 +02:00
parent d4ac7441fa
commit 98dec23b2f
3 changed files with 99 additions and 74 deletions

View File

@ -42,6 +42,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkTreeModule } from '@angular/cdk/tree'; import { CdkTreeModule } from '@angular/cdk/tree';
import { ScrollingModule } from '@angular/cdk/scrolling';
// ngx-translate // ngx-translate
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -139,7 +140,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
NgxMatSelectSearchModule, NgxMatSelectSearchModule,
FileDropModule, FileDropModule,
EditorModule, EditorModule,
CdkTreeModule CdkTreeModule,
ScrollingModule
], ],
exports: [ exports: [
FormsModule, FormsModule,
@ -203,7 +205,8 @@ import { PrecisionPipe } from './pipes/precision.pipe';
OwlNativeDateTimeModule, OwlNativeDateTimeModule,
CountdownTimeComponent, CountdownTimeComponent,
MediaUploadContentComponent, MediaUploadContentComponent,
PrecisionPipe PrecisionPipe,
ScrollingModule
], ],
declarations: [ declarations: [
PermsDirective, PermsDirective,

View File

@ -12,7 +12,6 @@
</div> </div>
</os-head-bar> </os-head-bar>
<div class="head-spacer"></div>
<mat-card *ngIf="statuteParagraphToCreate"> <mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title> <mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content> <mat-card-content>
@ -42,9 +41,10 @@
</mat-card-actions> </mat-card-actions>
</mat-card> </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 <mat-expansion-panel
*ngFor="let statuteParagraph of this.statuteParagraphs" *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(opened)="openId = statuteParagraph.id" (opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)" (closed)="panelClosed(statuteParagraph)"
[expanded]="openId === statuteParagraph.id" [expanded]="openId === statuteParagraph.id"
@ -107,12 +107,18 @@
> >
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
</button> </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> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
</cdk-virtual-scroll-viewport>
<mat-card *ngIf="statuteParagraphs.length === 0"> <mat-card *ngIf="statuteParagraphs.length === 0">
<mat-card-content> <mat-card-content>

View File

@ -462,8 +462,24 @@ button.mat-menu-item.selected {
margin: 0 65px; 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 */ /** media queries */
/* medium to small */
@media only screen and (max-width: 960px) {
.virtual-scroll-full-page {
height: calc(100vh - 64px);
}
}
/* medium */ /* medium */
@media only screen and (min-width: 500px) and (max-width: 960px) { @media only screen and (min-width: 500px) and (max-width: 960px) {
.content-container { .content-container {