ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add virtual scroling to statute list

Browse Source 
"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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/shared/shared.module.ts
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,

150
client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
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,77 +41,84 @@
</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-expansion-panel <mat-accordion class="os-card">
*ngFor="let statuteParagraph of this.statuteParagraphs" <mat-expansion-panel
(opened)="openId = statuteParagraph.id" *cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(closed)="panelClosed(statuteParagraph)" (opened)="openId = statuteParagraph.id"
[expanded]="openId === statuteParagraph.id" (closed)="panelClosed(statuteParagraph)"
multiple="false" [expanded]="openId === statuteParagraph.id"
> multiple="false"
<mat-expansion-panel-header> >
<mat-panel-title> <mat-expansion-panel-header>
{{ statuteParagraph.title }} <mat-panel-title>
</mat-panel-title> {{ statuteParagraph.title }}
</mat-expansion-panel-header> </mat-panel-title>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)"> </mat-expansion-panel-header>
<span translate>Edit statute paragraph:</span> <form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
<p> <span translate>Edit statute paragraph:</span>
<mat-form-field> <p>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required /> <mat-form-field>
<mat-hint *ngIf="!updateForm.controls.title.valid"> <input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<span translate>Required</span> <mat-hint *ngIf="!updateForm.controls.title.valid">
</mat-hint> <span translate>Required</span>
</mat-form-field> </mat-hint>
</p> </mat-form-field>
<span> </p>
<!-- The HTML Editor --> <span>
<h4>Statute paragraph</h4> <!-- The HTML Editor -->
<editor formControlName="text" [init]="tinyMceSettings"></editor> <h4>Statute paragraph</h4>
</span> <editor formControlName="text" [init]="tinyMceSettings"></editor>
</form> </span>
<ng-container *ngIf="editId !== statuteParagraph.id"> </form>
<mat-card> <ng-container *ngIf="editId !== statuteParagraph.id">
<mat-card-title>{{ statuteParagraph.title }}</mat-card-title> <mat-card>
<mat-card-content> <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
<div [innerHTML]="statuteParagraph.text"></div> <mat-card-content>
</mat-card-content> <div [innerHTML]="statuteParagraph.text"></div>
</mat-card> </mat-card-content>
</ng-container> </mat-card>
<mat-action-row> </ng-container>
<button <mat-action-row>
*ngIf="editId !== statuteParagraph.id" <button
mat-button *ngIf="editId !== statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onEditButton(statuteParagraph)" class="on-transition-fade"
mat-icon-button (click)="onEditButton(statuteParagraph)"
> mat-icon-button
<mat-icon>edit</mat-icon> >
</button> <mat-icon>edit</mat-icon>
<button </button>
*ngIf="editId === statuteParagraph.id" <button
mat-button *ngIf="editId === statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onCancelUpdate()" class="on-transition-fade"
mat-icon-button (click)="onCancelUpdate()"
> mat-icon-button
<mat-icon>close</mat-icon> >
</button> <mat-icon>close</mat-icon>
<button </button>
*ngIf="editId === statuteParagraph.id" <button
mat-button *ngIf="editId === statuteParagraph.id"
class="on-transition-fade" mat-button
(click)="onSaveButton(statuteParagraph)" class="on-transition-fade"
mat-icon-button (click)="onSaveButton(statuteParagraph)"
> mat-icon-button
<mat-icon>save</mat-icon> >
</button> <mat-icon>save</mat-icon>
<button mat-button class="on-transition-fade" (click)="onDeleteButton(statuteParagraph)" mat-icon-button> </button>
<mat-icon>delete</mat-icon> <button
</button> mat-button
</mat-action-row> class="on-transition-fade"
</mat-expansion-panel> (click)="onDeleteButton(statuteParagraph)"
</mat-accordion> 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 *ngIf="statuteParagraphs.length === 0">
<mat-card-content> <mat-card-content>

16
client/src/styles.scss
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 {