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

Add cyclic change detection for the projector list

Browse Source 
The projector list went nuts if the projectors are too large,
since they were all triggering the CD too much
This saves a lot of processing power
This commit is contained in:
Sean Engelhardt 2019-09-11 13:57:31 +02:00
parent 11922c2a12
commit 16f18c6b4a
2 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/components/meta-text-block/meta-text-block.component.scss
View File

@ -42,8 +42,6 @@
word-wrap: break-word;
.content {
transition: all 1s ease;
&.collapsed {
max-height: 200px;
overflow: hidden;

49
client/src/app/site/projector/components/projector-list/projector-list.component.ts
View File

@ -1,10 +1,19 @@
import { Component, OnInit } from '@angular/core';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
ViewEncapsulation
} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { timer } from 'rxjs';
import { OperatorService } from 'app/core/core-services/operator.service';
import { ProjectorRepositoryService } from 'app/core/repositories/projector/projector-repository.service';
@ -18,9 +27,11 @@ import { ViewProjector } from '../../models/view-projector';
@Component({
selector: 'os-projector-list',
templateUrl: './projector-list.component.html',
styleUrls: ['./projector-list.component.scss']
styleUrls: ['./projector-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class ProjectorListComponent extends BaseViewComponent implements OnInit {
export class ProjectorListComponent extends BaseViewComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* This member is set, if the user is creating a new projector.
*/
@ -68,13 +79,23 @@ export class ProjectorListComponent extends BaseViewComponent implements OnInit
matSnackBar: MatSnackBar,
private repo: ProjectorRepositoryService,
private formBuilder: FormBuilder,
private operator: OperatorService
private operator: OperatorService,
private cd: ChangeDetectorRef
) {
super(titleService, translate, matSnackBar);
this.createForm = this.formBuilder.group({
name: ['', Validators.required]
});
/**
* Angulars change detection goes nuts, since countdown and motios with long texts are pushing too much data
*/
this.subscriptions.push(
timer(0, 1000).subscribe(() => {
this.cd.detectChanges();
})
);
}
/**
@ -86,6 +107,21 @@ export class ProjectorListComponent extends BaseViewComponent implements OnInit
this.repo.getViewModelListObservable().subscribe(projectors => (this.projectors = projectors));
}
/**
* Initial change detection
*/
public ngAfterViewInit(): void {
this.cd.detectChanges();
}
/**
* implicitly Destroy the timer sub and detach the CD
*/
public ngOnDestroy(): void {
super.ngOnDestroy();
this.cd.detach();
}
/**
* Opens the create form.
*/
@ -105,7 +141,10 @@ export class ProjectorListComponent extends BaseViewComponent implements OnInit
this.projectorToCreate.patchValues({
reference_projector_id: this.projectors[0].reference_projector_id
});
this.repo.create(this.projectorToCreate).then(() => (this.projectorToCreate = null), this.raiseError);
this.repo.create(this.projectorToCreate).then(() => {
this.projectorToCreate = null;
this.cd.detectChanges();
}, this.raiseError);
}
}