From 6c0a1a82b4683ed67776766d17fbf1633f2d3c85 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 1 Nov 2021 16:40:16 +0100
Subject: [PATCH] [editor] Allow settings values to null
This is necessary to reset elements like radio button group. We use null
for that instead of undefined.
The check was in place before to make sure input fields only accept
valid values (no text in a number field for example). Angular thinks a
null value is valid so we have to do this extra check. This is now done
directly in the template before calling the updateModel method.
---
.../element-properties.component.html | 2 +-
.../element-properties.component.ts | 2 +-
.../element-sizing-properties.component.ts | 36 +++++++++++++------
3 files changed, 27 insertions(+), 13 deletions(-)
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 504ab079d..a23030b26 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
@@ -161,7 +161,7 @@
<mat-label>Vorbelegung</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel('value', $event.value)">
- <mat-option>undefiniert</mat-option>
+ <mat-option [value]="null">undefiniert</mat-option>
<mat-option *ngFor="let option of $any(combinedProperties).options; let i = index" [value]="i">
{{option}}
</mat-option>
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts
index 93cec7953..41e5e1143 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts
@@ -76,7 +76,7 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
updateModel(property: string,
value: string | number | boolean | string[] | AnswerOption[] | LikertRow[] | null,
isInputValid: boolean | null = true): void {
- if (isInputValid && value !== null) {
+ if (isInputValid) {
this.unitService.updateElementProperty(this.selectedElements, property, value);
} else {
this.messageService.showWarning('Eingabe ungültig');
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts b/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
index 5b1e33e86..1971d4370 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
@@ -14,13 +14,17 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<mat-label>Breite</mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
- (ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
+ (ngModelChange)="updateModel.emit({ property: 'width',
+ value: $event,
+ isInputValid: width .valid && $event !== null})">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Hoehe</mat-label>
<input matInput type="number" #height="ngModel" min="0"
[ngModel]="combinedProperties.height"
- (ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
+ (ngModelChange)="updateModel.emit({ property: 'height',
+ value: $event,
+ isInputValid: height .valid && $event !== null})">
</mat-form-field>
<mat-form-field appearance="fill">
@@ -28,7 +32,7 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<input matInput type="number" #xPosition="ngModel" min="0"
[ngModel]="combinedProperties.xPosition"
(ngModelChange)="updateModel.emit(
- { property: 'xPosition', value: $event, isInputValid: xPosition.valid })">
+ { property: 'xPosition', value: $event, isInputValid: xPosition .valid && $event !== null })">
</mat-form-field>
<mat-form-field appearance="fill">
@@ -36,7 +40,7 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<input matInput type="number" #yPosition="ngModel" min="0"
[ngModel]="combinedProperties.yPosition"
(ngModelChange)="updateModel.emit(
- { property: 'yPosition', value: $event, isInputValid: yPosition.valid })">
+ { property: 'yPosition', value: $event, isInputValid: yPosition .valid && $event !== null })">
</mat-form-field>
</ng-container>
<ng-template #elseBlock>
@@ -44,13 +48,17 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<mat-label>Mindestbreite</mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
- (ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
+ (ngModelChange)="updateModel.emit({ property: 'width',
+ value: $event,
+ isInputValid: width .valid && $event !== null })">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Mindesthöhe</mat-label>
<input matInput type="number" #height="ngModel" min="0"
[ngModel]="combinedProperties.height"
- (ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
+ (ngModelChange)="updateModel.emit({ property: 'height',
+ value: $event,
+ isInputValid: height .valid && $event !== null })">
</mat-form-field>
Grid
@@ -88,7 +96,7 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<input matInput type="number" #marginTop="ngModel" min="0"
[ngModel]="combinedProperties.marginTop"
(ngModelChange)="updateModel.emit(
- { property: 'marginTop', value: $event, isInputValid: marginTop.valid })">
+ { property: 'marginTop', value: $event, isInputValid: marginTop .valid && $event !== null })">
</mat-form-field>
<div fxLayoutAlign="row">
<mat-form-field class="small-input">
@@ -96,14 +104,16 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<input matInput type="number" #marginLeft="ngModel" min="0"
[ngModel]="combinedProperties.marginLeft"
(ngModelChange)="updateModel.emit(
- { property: 'marginLeft', value: $event, isInputValid: marginLeft.valid })">
+ { property: 'marginLeft', value: $event, isInputValid: marginLeft .valid && $event !== null })">
</mat-form-field>
<mat-form-field class="right-form-field small-input">
<mat-label>rechts</mat-label>
<input matInput type="number" #marginRight="ngModel" min="0"
[ngModel]="combinedProperties.marginRight"
(ngModelChange)="updateModel.emit(
- { property: 'marginRight', value: $event, isInputValid: marginRight.valid })">
+ { property: 'marginRight',
+ value: $event,
+ isInputValid: marginRight .valid && $event !== null })">
</mat-form-field>
</div>
<mat-form-field class="centered-form-field small-input">
@@ -111,7 +121,9 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<input matInput type="number" #marginBottom="ngModel" min="0"
[ngModel]="combinedProperties.marginBottom"
(ngModelChange)="updateModel.emit(
- { property: 'marginBottom', value: $event, isInputValid: marginBottom.valid })">
+ { property: 'marginBottom',
+ value: $event,
+ isInputValid: marginBottom .valid && $event !== null })">
</mat-form-field>
</div>
</ng-template>
@@ -120,7 +132,9 @@ import { UIElement } from '../../../../../../common/models/uI-element';
<mat-label>Z-Index</mat-label>
<input matInput type="number" #zIndex="ngModel" min="0"
[ngModel]="combinedProperties.zIndex"
- (ngModelChange)="updateModel.emit({ property: 'zIndex', value: $event, isInputValid: zIndex.valid })"
+ (ngModelChange)="updateModel.emit({ property: 'zIndex',
+ value: $event,
+ isInputValid: zIndex .valid && $event !== null })"
matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne.">
</mat-form-field>
<ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1">
--
GitLab