diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts
index bcfeaa2e7..4fdc69ade 100644
--- a/src/Squidex/app/features/content/shared/assets-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts
@@ -7,7 +7,7 @@
// tslint:disable:prefer-for-of
-import { Component, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
@@ -28,9 +28,8 @@ export const SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-assets-editor',
styleUrls: ['./assets-editor.component.scss'],
templateUrl: './assets-editor.component.html',
- providers: [
- SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR
- ]
+ providers: [SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetsEditorComponent implements ControlValueAccessor {
private callChange = (v: any) => { /* NOOP */ };
@@ -47,6 +46,7 @@ export class AssetsEditorComponent implements ControlValueAccessor {
constructor(
private readonly appsState: AppsState,
private readonly assetsService: AssetsService,
+ private readonly changeDetector: ChangeDetectorRef,
private readonly localStore: LocalStoreService
) {
this.isListView = this.localStore.get('assetView') === 'List';
@@ -131,6 +131,8 @@ export class AssetsEditorComponent implements ControlValueAccessor {
this.callTouched();
this.callChange(ids);
+
+ this.changeDetector.markForCheck();
}
public sort(assets: AssetDto[]) {
diff --git a/src/Squidex/app/features/content/shared/contents-selector.component.html b/src/Squidex/app/features/content/shared/contents-selector.component.html
index 03c7a7934..c38612c34 100644
--- a/src/Squidex/app/features/content/shared/contents-selector.component.html
+++ b/src/Squidex/app/features/content/shared/contents-selector.component.html
@@ -16,10 +16,10 @@
(queryChanged)="search($event)"
expandable="true">
-
-
-
-
+
+
+
+
diff --git a/src/Squidex/app/features/content/shared/references-editor.component.ts b/src/Squidex/app/features/content/shared/references-editor.component.ts
index 5d4542a10..855594365 100644
--- a/src/Squidex/app/features/content/shared/references-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/references-editor.component.ts
@@ -7,7 +7,7 @@
// tslint:disable:prefer-for-of
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
@@ -31,9 +31,8 @@ export const SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-references-editor',
styleUrls: ['./references-editor.component.scss'],
templateUrl: './references-editor.component.html',
- providers: [
- SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR
- ]
+ providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
private callChange = (v: any) => { /* NOOP */ };
@@ -59,6 +58,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
constructor(
private readonly appsState: AppsState,
+ private readonly changeDetector: ChangeDetectorRef,
private readonly contentsService: ContentsService,
private readonly schemasService: SchemasService
) {
@@ -73,8 +73,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
this.schemasService.getSchema(this.appsState.appName, this.schemaId)
.subscribe(dto => {
this.schema = dto;
- }, error => {
+
+ this.changeDetector.markForCheck();
+ }, () => {
this.isInvalidSchema = true;
+
+ this.changeDetector.markForCheck();
});
}
@@ -90,8 +94,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
if (this.contentItems.length !== contentIds.length) {
this.updateValue();
}
+
+ this.changeDetector.markForCheck();
}, () => {
this.contentItems = ImmutableArray.empty();
+
+ this.changeDetector.markForCheck();
});
}
} else {
@@ -148,5 +156,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
this.callTouched();
this.callChange(ids);
+
+ this.changeDetector.markForCheck();
}
}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/autocomplete.component.ts b/src/Squidex/app/framework/angular/forms/autocomplete.component.ts
index a8666a9cf..bacb8a845 100644
--- a/src/Squidex/app/framework/angular/forms/autocomplete.component.ts
+++ b/src/Squidex/app/framework/angular/forms/autocomplete.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
@@ -27,7 +27,8 @@ export const SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-autocomplete',
styleUrls: ['./autocomplete.component.scss'],
templateUrl: './autocomplete.component.html',
- providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, OnInit {
private subscription: Subscription;
diff --git a/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts b/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts
index 85f2d2b18..0021ed2c8 100644
--- a/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/date-time-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as moment from 'moment';
import { Subscription } from 'rxjs';
@@ -22,7 +22,8 @@ export const SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-date-time-editor',
styleUrls: ['./date-time-editor.component.scss'],
templateUrl: './date-time-editor.component.html',
- providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, OnInit, AfterViewInit {
private timeSubscription: Subscription;
@@ -60,6 +61,11 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
public isDisabled = false;
+ constructor(
+ private readonly changeDetector: ChangeDetectorRef
+ ) {
+ }
+
public ngOnDestroy() {
this.dateSubscription.unsubscribe();
this.timeSubscription.unsubscribe();
@@ -136,6 +142,10 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
this.updateValue();
this.touched();
+
+ if (false) {
+ this.changeDetector.markForCheck();
+ }
}
});
diff --git a/src/Squidex/app/framework/angular/forms/dropdown.component.ts b/src/Squidex/app/framework/angular/forms/dropdown.component.ts
index 4788bce5a..f5819e39c 100644
--- a/src/Squidex/app/framework/angular/forms/dropdown.component.ts
+++ b/src/Squidex/app/framework/angular/forms/dropdown.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterContentInit, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
const KEY_ENTER = 13;
@@ -23,7 +23,8 @@ export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-dropdown',
styleUrls: ['./dropdown.component.scss'],
templateUrl: './dropdown.component.html',
- providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class DropdownComponent implements AfterContentInit, ControlValueAccessor {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
index 867e00c6d..bdbd181f3 100644
--- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
@@ -19,8 +19,8 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-iframe-editor',
styleUrls: ['./iframe-editor.component.scss'],
templateUrl: './iframe-editor.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush,
- providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class IFrameEditorComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy {
private windowMessageListener: Function;
diff --git a/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts b/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts
index ba54c6150..9675afa61 100644
--- a/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/jscript-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@@ -22,7 +22,8 @@ export const SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-jscript-editor',
styleUrls: ['./jscript-editor.component.scss'],
templateUrl: './jscript-editor.component.html',
- providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class JscriptEditorComponent implements ControlValueAccessor, AfterViewInit {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/framework/angular/forms/json-editor.component.ts b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
index 3a97d3eb0..35f84d0b5 100644
--- a/src/Squidex/app/framework/angular/forms/json-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@@ -22,7 +22,8 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-json-editor',
styleUrls: ['./json-editor.component.scss'],
templateUrl: './json-editor.component.html',
- providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class JsonEditorComponent implements ControlValueAccessor, AfterViewInit {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
index cd3e30577..843574f04 100644
--- a/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
+++ b/src/Squidex/app/framework/angular/forms/progress-bar.component.ts
@@ -32,6 +32,9 @@ export class ProgressBarComponent implements OnChanges, OnInit {
@Input()
public strokeWidth = 4;
+ @Input()
+ public showText = true;
+
@Input()
public value = 0;
@@ -46,7 +49,8 @@ export class ProgressBarComponent implements OnChanges, OnInit {
color: this.color,
trailColor: this.trailColor,
trailWidth: this.trailWidth,
- strokeWidth: this.strokeWidth
+ strokeWidth: this.strokeWidth,
+ svgStyle: { width: '100%', height: '100%' }
};
this.renderer.setStyle(this.element.nativeElement, 'display', 'block');
@@ -71,7 +75,7 @@ export class ProgressBarComponent implements OnChanges, OnInit {
this.progressBar.animate(value / 100);
- if (value > 0) {
+ if (value > 0 && this.showText) {
this.progressBar.setText(Math.round(value) + '%');
}
}
diff --git a/src/Squidex/app/framework/angular/forms/slider.component.ts b/src/Squidex/app/framework/angular/forms/slider.component.ts
index 7e03256aa..f7baeb850 100644
--- a/src/Squidex/app/framework/angular/forms/slider.component.ts
+++ b/src/Squidex/app/framework/angular/forms/slider.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_SLIDER_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-slider',
styleUrls: ['./slider.component.scss'],
templateUrl: './slider.component.html',
- providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class SliderComponent implements ControlValueAccessor {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/framework/angular/forms/stars.component.ts b/src/Squidex/app/framework/angular/forms/stars.component.ts
index b3b17eb9c..dd30c81ad 100644
--- a/src/Squidex/app/framework/angular/forms/stars.component.ts
+++ b/src/Squidex/app/framework/angular/forms/stars.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, forwardRef, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_STARS_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-stars',
styleUrls: ['./stars.component.scss'],
templateUrl: './stars.component.html',
- providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class StarsComponent implements ControlValueAccessor {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
index 9a7422295..37aae5565 100644
--- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subscription } from 'rxjs';
import { distinctUntilChanged, map, tap } from 'rxjs/operators';
@@ -75,7 +75,8 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-tag-editor',
styleUrls: ['./tag-editor.component.scss'],
templateUrl: './tag-editor.component.html',
- providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, OnDestroy, OnInit {
private subscription: Subscription;
diff --git a/src/Squidex/app/framework/angular/forms/toggle.component.ts b/src/Squidex/app/framework/angular/forms/toggle.component.ts
index 270ef5eb8..2a7323fde 100644
--- a/src/Squidex/app/framework/angular/forms/toggle.component.ts
+++ b/src/Squidex/app/framework/angular/forms/toggle.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_TOGGLE_CONTROL_VALUE_ACCESSOR: any = {
selector: 'sqx-toggle',
styleUrls: ['./toggle.component.scss'],
templateUrl: './toggle.component.html',
- providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToggleComponent implements ControlValueAccessor {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/shared/components/app-form.component.ts b/src/Squidex/app/shared/components/app-form.component.ts
index f997a3443..808139bf7 100644
--- a/src/Squidex/app/shared/components/app-form.component.ts
+++ b/src/Squidex/app/shared/components/app-form.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import {
@@ -18,7 +18,8 @@ import {
@Component({
selector: 'sqx-app-form',
styleUrls: ['./app-form.component.scss'],
- templateUrl: './app-form.component.html'
+ templateUrl: './app-form.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppFormComponent {
@Output()
@@ -46,7 +47,7 @@ export class AppFormComponent {
const request = new CreateAppDto(value.name, this.template);
this.appsStore.create(request)
- .subscribe(dto => {
+ .subscribe(() => {
this.complete();
}, error => {
this.createForm.submitFailed(error);
diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html
index 9eeb0acd0..94a882c16 100644
--- a/src/Squidex/app/shared/components/asset.component.html
+++ b/src/Squidex/app/shared/components/asset.component.html
@@ -130,9 +130,7 @@
diff --git a/src/Squidex/app/shared/components/asset.component.scss b/src/Squidex/app/shared/components/asset.component.scss
index 27f07083a..1caa49e4b 100644
--- a/src/Squidex/app/shared/components/asset.component.scss
+++ b/src/Squidex/app/shared/components/asset.component.scss
@@ -254,6 +254,10 @@ $list-height: 2.375rem;
min-width: 12rem;
}
}
+
+ .upload-progress {
+ padding: .25rem 0;
+ }
}
.drop-overlay {
@@ -279,22 +283,6 @@ $list-height: 2.375rem;
}
}
-.progress {
- &-background {
- background: $color-border;
- margin: (($list-height - .25rem) / 2) 0;
- }
-
- &-bar {
- background: $color-theme-blue;
- }
-
- &-background,
- &-bar {
- height: .25rem;
- }
-}
-
.selectable {
cursor: pointer;
}
diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts
index 3de754ff8..822d7bea2 100644
--- a/src/Squidex/app/shared/components/asset.component.ts
+++ b/src/Squidex/app/shared/components/asset.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -31,7 +31,8 @@ import {
templateUrl: './asset.component.html',
animations: [
fadeAnimation
- ]
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetComponent implements OnDestroy, OnInit {
private tagSubscription: Subscription;
@@ -91,6 +92,7 @@ export class AssetComponent implements OnDestroy, OnInit {
private readonly appsState: AppsState,
private readonly assetsService: AssetsService,
private readonly authState: AuthService,
+ private readonly changeDetector: ChangeDetectorRef,
private readonly dialogs: DialogService,
private readonly formBuilder: FormBuilder
) {
@@ -105,7 +107,7 @@ export class AssetComponent implements OnDestroy, OnInit {
if (Types.is(dto, AssetDto)) {
this.emitLoaded(dto);
} else {
- this.progress = dto;
+ this.setProgress(dto);
}
}, error => {
this.dialogs.notifyError(error);
@@ -145,7 +147,7 @@ export class AssetComponent implements OnDestroy, OnInit {
}, error => {
this.dialogs.notifyError(error);
- this.setProgress();
+ this.setProgress(0);
});
}
}
@@ -159,8 +161,6 @@ export class AssetComponent implements OnDestroy, OnInit {
this.assetsService.putAsset(this.appsState.appName, this.asset.id, requestDto, this.asset.version)
.subscribe(dto => {
this.updateAsset(this.asset.rename(requestDto.fileName, this.authState.user!.token, dto.version), true);
-
- this.renameCancel();
}, error => {
this.dialogs.notifyError(error);
@@ -194,10 +194,6 @@ export class AssetComponent implements OnDestroy, OnInit {
this.renaming = false;
}
- private setProgress(progress = 0) {
- this.progress = progress;
- }
-
private emitFailed(error: any) {
this.failed.emit(error);
}
@@ -210,6 +206,12 @@ export class AssetComponent implements OnDestroy, OnInit {
this.updated.emit(asset);
}
+ private setProgress(progress: number) {
+ this.progress = progress;
+
+ this.changeDetector.markForCheck();
+ }
+
private updateAsset(asset: AssetDto, emitEvent: boolean) {
this.asset = asset;
this.progress = 0;
@@ -221,5 +223,7 @@ export class AssetComponent implements OnDestroy, OnInit {
}
this.renameCancel();
+
+ this.changeDetector.markForCheck();
}
}
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/assets-list.component.ts b/src/Squidex/app/shared/components/assets-list.component.ts
index 75d5601b3..51f3a1e16 100644
--- a/src/Squidex/app/shared/components/assets-list.component.ts
+++ b/src/Squidex/app/shared/components/assets-list.component.ts
@@ -7,7 +7,7 @@
// tslint:disable:prefer-for-of
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { onErrorResumeNext } from 'rxjs/operators';
import {
@@ -19,7 +19,8 @@ import {
@Component({
selector: 'sqx-assets-list',
styleUrls: ['./assets-list.component.scss'],
- templateUrl: './assets-list.component.html'
+ templateUrl: './assets-list.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetsListComponent {
public newFiles = ImmutableArray.empty();
diff --git a/src/Squidex/app/shared/components/assets-selector.component.ts b/src/Squidex/app/shared/components/assets-selector.component.ts
index 457929c2d..9dca033c3 100644
--- a/src/Squidex/app/shared/components/assets-selector.component.ts
+++ b/src/Squidex/app/shared/components/assets-selector.component.ts
@@ -7,7 +7,7 @@
// tslint:disable:prefer-for-of
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
import { onErrorResumeNext } from 'rxjs/operators';
import {
@@ -23,7 +23,8 @@ import {
templateUrl: './assets-selector.component.html',
animations: [
fadeAnimation
- ]
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssetsSelectorComponent implements OnInit {
public selectedAssets: { [id: string]: AssetDto } = {};
diff --git a/src/Squidex/app/shared/components/geolocation-editor.component.ts b/src/Squidex/app/shared/components/geolocation-editor.component.ts
index 3531b0731..88d13df64 100644
--- a/src/Squidex/app/shared/components/geolocation-editor.component.ts
+++ b/src/Squidex/app/shared/components/geolocation-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
@@ -31,7 +31,8 @@ interface Geolocation {
selector: 'sqx-geolocation-editor',
styleUrls: ['./geolocation-editor.component.scss'],
templateUrl: './geolocation-editor.component.html',
- providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR]
+ providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class GeolocationEditorComponent implements ControlValueAccessor, AfterViewInit {
private callChange = (v: any) => { /* NOOP */ };
diff --git a/src/Squidex/app/shared/components/help.component.ts b/src/Squidex/app/shared/components/help.component.ts
index f7d7bf68f..c7679636c 100644
--- a/src/Squidex/app/shared/components/help.component.ts
+++ b/src/Squidex/app/shared/components/help.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HelpService } from '@app/shared/internal';
@@ -13,7 +13,8 @@ import { HelpService } from '@app/shared/internal';
@Component({
selector: 'sqx-help',
styleUrls: ['./help.component.scss'],
- templateUrl: './help.component.html'
+ templateUrl: './help.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelpComponent {
public helpSections =
diff --git a/src/Squidex/app/shared/components/history-list.component.ts b/src/Squidex/app/shared/components/history-list.component.ts
index e5a7acb93..bbb8417cd 100644
--- a/src/Squidex/app/shared/components/history-list.component.ts
+++ b/src/Squidex/app/shared/components/history-list.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import {
@@ -17,7 +17,8 @@ import {
@Component({
selector: 'sqx-history-list',
styleUrls: ['./history-list.component.scss'],
- templateUrl: './history-list.component.html'
+ templateUrl: './history-list.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class HistoryListComponent {
@Input()
diff --git a/src/Squidex/app/shared/components/history.component.ts b/src/Squidex/app/shared/components/history.component.ts
index 727e53247..7182caec2 100644
--- a/src/Squidex/app/shared/components/history.component.ts
+++ b/src/Squidex/app/shared/components/history.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { merge, Observable, timer } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';
@@ -22,7 +22,8 @@ import {
@Component({
selector: 'sqx-history',
styleUrls: ['./history.component.scss'],
- templateUrl: './history.component.html'
+ templateUrl: './history.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class HistoryComponent {
private readonly channel = this.calculateChannel();
@@ -32,7 +33,7 @@ export class HistoryComponent {
timer(0, 10000),
this.messageBus.of(HistoryChannelUpdated).pipe(delay(1000))
).pipe(
- switchMap(app => this.historyService.getHistory(this.appsState.appName, this.channel)));
+ switchMap(() => this.historyService.getHistory(this.appsState.appName, this.channel)));
constructor(
private readonly appsState: AppsState,