From 87028294959cd6cd48e7964898a262fcdc8158bb Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Thu, 1 Nov 2018 10:08:33 +0100 Subject: [PATCH] Bugfix for change detection and schema fields. --- .../content/shared/assets-editor.component.ts | 10 +++---- .../shared/references-editor.component.ts | 14 ++++----- .../schemas/pages/schema/field.component.ts | 30 ++++++++++++------- .../angular/forms/control-errors.component.ts | 2 +- .../forms/date-time-editor.component.ts | 4 +-- .../angular/forms/dropdown.component.ts | 4 +-- .../angular/forms/slider.component.ts | 4 +-- .../angular/forms/tag-editor.component.ts | 2 +- .../angular/forms/toggle.component.ts | 4 +-- .../modals/dialog-renderer.component.ts | 8 ++--- .../angular/modals/modal-dialog.component.ts | 2 +- .../modals/onboarding-tooltip.component.ts | 2 +- .../angular/modals/tooltip.component.ts | 2 +- .../app/shared/components/asset.component.ts | 4 +-- .../geolocation-editor.component.ts | 2 +- .../pages/internal/profile-menu.component.ts | 2 +- 16 files changed, 52 insertions(+), 44 deletions(-) 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 ff4cc259c..11a27a768 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -65,24 +65,24 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.updateValue(); } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, () => { this.oldAssets = ImmutableArray.empty(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); } } else { this.oldAssets = ImmutableArray.empty(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { @@ -140,7 +140,7 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.callTouched(); this.callChange(ids); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public sort(assets: AssetDto[]) { 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 019e59064..08d8d1175 100644 --- a/src/Squidex/app/features/content/shared/references-editor.component.ts +++ b/src/Squidex/app/features/content/shared/references-editor.component.ts @@ -74,11 +74,11 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { .subscribe(dto => { this.schema = dto; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, () => { this.isInvalidSchema = true; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); } @@ -95,24 +95,24 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { this.updateValue(); } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }, () => { this.contentItems = ImmutableArray.empty(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); } } else { this.contentItems = ImmutableArray.empty(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { @@ -161,6 +161,6 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit { this.callTouched(); this.callChange(ids); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } \ No newline at end of file diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.ts b/src/Squidex/app/features/schemas/pages/schema/field.component.ts index 4f9ea9a89..4d211ee35 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { onErrorResumeNext } from 'rxjs/operators'; @@ -32,7 +32,7 @@ import { fadeAnimation ] }) -export class FieldComponent implements OnInit { +export class FieldComponent implements OnChanges { @Input() public field: NestedFieldDto | RootFieldDto; @@ -50,7 +50,7 @@ export class FieldComponent implements OnInit { public isEditing = false; public selectedTab = 0; - public editForm: EditFieldForm; + public editForm = new EditFieldForm(this.formBuilder); public addFieldDialog = new DialogModel(); @@ -60,25 +60,33 @@ export class FieldComponent implements OnInit { ) { } - public ngOnInit() { - this.editForm = new EditFieldForm(this.formBuilder); - this.editForm.load(this.field.properties); + public ngOnChanges(changes: SimpleChanges) { + if (changes['field']) { + this.editForm.load(this.field.properties); - if (this.field.isLocked) { - this.editForm.form.disable(); + if (this.field.isLocked) { + this.editForm.form.disable(); + } } - } - public toggleEditing() { - this.isEditing = !this.isEditing; + if (changes['schema']) { + this.isEditing = false; + + this.selectedTab = 0; + } } public selectTab(tab: number) { this.selectedTab = tab; } + public toggleEditing() { + this.isEditing = !this.isEditing; + } + public cancel() { this.isEditing = false; + this.editForm.load(this.field); } diff --git a/src/Squidex/app/framework/angular/forms/control-errors.component.ts b/src/Squidex/app/framework/angular/forms/control-errors.component.ts index 2ef361a64..e31f1f901 100644 --- a/src/Squidex/app/framework/angular/forms/control-errors.component.ts +++ b/src/Squidex/app/framework/angular/forms/control-errors.component.ts @@ -152,6 +152,6 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy { this.errorMessages = errors; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } \ No newline at end of file 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 c204e126a..515150f2f 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 @@ -122,7 +122,7 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, this.timeControl.enable({ emitEvent: false }); } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { @@ -144,7 +144,7 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, this.updateValue(); this.touched(); - this.changeDetector.detectChanges(); + 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 d8e8ff0bd..0ac506678 100644 --- a/src/Squidex/app/framework/angular/forms/dropdown.component.ts +++ b/src/Squidex/app/framework/angular/forms/dropdown.component.ts @@ -68,13 +68,13 @@ export class DropdownComponent implements AfterContentInit, ControlValueAccessor public writeValue(obj: any) { this.selectIndex(this.items && obj ? this.items.indexOf(obj) : 0); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { diff --git a/src/Squidex/app/framework/angular/forms/slider.component.ts b/src/Squidex/app/framework/angular/forms/slider.component.ts index a95fc4f3b..2dcb73854 100644 --- a/src/Squidex/app/framework/angular/forms/slider.component.ts +++ b/src/Squidex/app/framework/angular/forms/slider.component.ts @@ -59,13 +59,13 @@ export class SliderComponent implements ControlValueAccessor { this.updateThumbPosition(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { 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 1f2957f1b..e0565f5bc 100644 --- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts @@ -185,7 +185,7 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, this.items = []; } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public setDisabledState(isDisabled: boolean): void { diff --git a/src/Squidex/app/framework/angular/forms/toggle.component.ts b/src/Squidex/app/framework/angular/forms/toggle.component.ts index a5ec32156..407636cd7 100644 --- a/src/Squidex/app/framework/angular/forms/toggle.component.ts +++ b/src/Squidex/app/framework/angular/forms/toggle.component.ts @@ -36,13 +36,13 @@ export class ToggleComponent implements ControlValueAccessor { public writeValue(obj: any) { this.isChecked = Types.isBoolean(obj) ? obj : null; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } public registerOnChange(fn: any) { diff --git a/src/Squidex/app/framework/angular/modals/dialog-renderer.component.ts b/src/Squidex/app/framework/angular/modals/dialog-renderer.component.ts index 17c184f0c..bb18a1397 100644 --- a/src/Squidex/app/framework/angular/modals/dialog-renderer.component.ts +++ b/src/Squidex/app/framework/angular/modals/dialog-renderer.component.ts @@ -56,7 +56,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit { if (!isOpen) { this.cancel(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } }); @@ -70,7 +70,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit { }, notification.displayTime); } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); this.dialogsSubscription = @@ -81,7 +81,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit { this.dialogRequest = request; this.dialogView.show(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); } @@ -107,7 +107,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit { if (index >= 0) { this.notifications.splice(index, 1); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/modals/modal-dialog.component.ts b/src/Squidex/app/framework/angular/modals/modal-dialog.component.ts index 20c685ff0..114fa33cc 100644 --- a/src/Squidex/app/framework/angular/modals/modal-dialog.component.ts +++ b/src/Squidex/app/framework/angular/modals/modal-dialog.component.ts @@ -64,6 +64,6 @@ export class ModalDialogComponent implements AfterViewInit { this.hasTabs = this.tabsElement.nativeElement.children.length > 0; this.hasFooter = this.footerElement.nativeElement.children.length > 0; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts index 759f2a430..14a8fc598 100644 --- a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts +++ b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts @@ -75,7 +75,7 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { if (this.isSameOrParent(fromPoint)) { this.tooltipModal.show(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); this.closeTimer = setTimeout(() => { this.hideThis(); diff --git a/src/Squidex/app/framework/angular/modals/tooltip.component.ts b/src/Squidex/app/framework/angular/modals/tooltip.component.ts index c43a2352d..e58c03243 100644 --- a/src/Squidex/app/framework/angular/modals/tooltip.component.ts +++ b/src/Squidex/app/framework/angular/modals/tooltip.component.ts @@ -54,7 +54,7 @@ export class TooltipComponent implements OnDestroy, OnInit { this.renderer.listen(this.target, 'mouseenter', () => { this.modal.show(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); this.targetMouseLeaveListener = diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts index 8335a9f22..4ca4343e7 100644 --- a/src/Squidex/app/shared/components/asset.component.ts +++ b/src/Squidex/app/shared/components/asset.component.ts @@ -213,7 +213,7 @@ export class AssetComponent implements OnDestroy, OnInit { private setProgress(progress: number) { this.progress = progress; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } private updateAsset(asset: AssetDto, emitEvent: boolean) { @@ -228,6 +228,6 @@ export class AssetComponent implements OnDestroy, OnInit { this.renameCancel(); - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } } \ No newline at end of file diff --git a/src/Squidex/app/shared/components/geolocation-editor.component.ts b/src/Squidex/app/shared/components/geolocation-editor.component.ts index 62e7775b6..8d1ec494a 100644 --- a/src/Squidex/app/shared/components/geolocation-editor.component.ts +++ b/src/Squidex/app/shared/components/geolocation-editor.component.ts @@ -105,7 +105,7 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi this.geolocationForm.enable(); } - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); } private setDisabledStateOSM(isDisabled: boolean): void { diff --git a/src/Squidex/app/shell/pages/internal/profile-menu.component.ts b/src/Squidex/app/shell/pages/internal/profile-menu.component.ts index e20079cf5..c3b467ad0 100644 --- a/src/Squidex/app/shell/pages/internal/profile-menu.component.ts +++ b/src/Squidex/app/shell/pages/internal/profile-menu.component.ts @@ -57,7 +57,7 @@ export class ProfileMenuComponent implements OnDestroy, OnInit { this.isAdmin = user!.isAdmin; - this.changeDetector.detectChanges(); + this.changeDetector.markForCheck(); }); }