diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 839276244bb4a904aa7268198d5221e899578b44..1d5e2d79d9abf5277c634cfd9a7b9ce084ca0385 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -11,14 +11,15 @@ import { CheckboxElement } from '../models/checkbox-element';
[style.height.%]="100"
[style.background-color]="elementModel.backgroundColor">
<mat-checkbox #checkbox class="example-margin"
- (click)="elementModel.readOnly ? $event.preventDefault() : null"
[formControl]="elementFormControl"
+ [checked]="$any(elementModel.value)"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
[style.font-size.px]="elementModel.fontSize"
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ (click)="elementModel.readOnly ? $event.preventDefault() : null">
<div [style.line-height.%]="elementModel.lineHeight" [innerHTML]="elementModel.label"></div>
</mat-checkbox>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
diff --git a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts b/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
index cc99f8085716d5883972756c3b43705c287c29e7..0cc99391bbcdaf1594e90ac9018b8222ca1258ea 100644
--- a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
+++ b/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
@@ -7,8 +7,9 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
selector: 'app-likert-radio-button-group',
template: `
<mat-radio-group [style.display]="'grid'"
- [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columnCount)"
- [formControl]="elementFormControl">
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
+ [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columnCount)">
<div [style.grid-column-start]="1"
[style.grid-column-end]="2"
[style.grid-row-start]="1"
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 202d4f9df382053a96740cdb22bd18912d36e18b..66f3d33dccaf495917891d2202681ad7de005079 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -17,9 +17,10 @@ import { DropdownElement } from '../models/dropdown-element';
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
{{$any(elementModel).label}}
</mat-label>
- <mat-select [formControl]="elementFormControl">
- <mat-option *ngIf="elementModel.allowUnset" value="" (click)="$event.preventDefault()"
- [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
+ <mat-select [formControl]="elementFormControl" [value]="elementModel.value">
+ <mat-option *ngIf="elementModel.allowUnset" value=""
+ [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+ (click)="$event.preventDefault()">
</mat-option>
<mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i"
[style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 2a25eba1e2056fa7010f596d5eaeb603eb56c109..f16ee18a6ae2e9cd0843946b63036d29c9a18fbb 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -18,10 +18,10 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
<label id="radio-group-label" class="white-space-break"
[innerHTML]="elementModel.label">
</label>
-<!-- TODO why margin-bottom?-->
<mat-radio-group aria-labelledby="radio-group-label"
[fxLayout]="elementModel.alignment"
[formControl]="elementFormControl"
+ [value]="elementModel.value"
[style.margin-top.px]="10">
<mat-radio-button *ngFor="let option of elementModel.options; let i = index"
[ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 5f9e485f27e72ba7f7b6ad66da61f644ccd2c9c7..7a8cf9347710ec3707c10fc17b0785df1648e6df 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -15,16 +15,16 @@ import { TextAreaElement } from '../models/text-area-element';
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''"
[appearance]="$any(elementModel.appearance)">
- <textarea matInput [formControl]="elementFormControl" #input
- rows="{{elementModel.rowCount}}"
+ <textarea matInput #input
+ autocomplete="off" rows="{{elementModel.rowCount}}" placeholder="{{elementModel.label}}"
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
[readonly]="elementModel.readOnly"
- (focus)="onFocus.emit(input)"
- (blur)="onBlur.emit(input)"
- autocomplete="off"
- placeholder="{{elementModel.label}}"
[style.min-width.%]="100"
[style.line-height.%]="elementModel.lineHeight"
- [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+ [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'"
+ (focus)="onFocus.emit(input)"
+ (blur)="onBlur.emit(input)">
</textarea>
<mat-error *ngIf="elementFormControl.errors">
{{elementFormControl.errors | errorTransform: elementModel}}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 01fff83ee236981f3e5cd5be1cd2a1b3cb6d1f34..ce0ac96c775a92e0b743aad70791d205edc1aa31 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -18,12 +18,13 @@ import { TextFieldElement } from '../models/text-field-element';
appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
[appearance]="$any(elementModel.appearance)">
<mat-label>{{elementModel.label}}</mat-label>
- <input matInput type="text" [pattern]="elementModel.pattern" #input
+ <input matInput type="text" #input autocomplete="off"
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
+ [pattern]="elementModel.pattern"
[readonly]="elementModel.readOnly"
(focus)="onFocus.emit(input)"
- (blur)="onBlur.emit(input)"
- autocomplete="off"
- [formControl]="elementFormControl">
+ (blur)="onBlur.emit(input)">
<button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
(click)="onClick($event)">
<mat-icon>close</mat-icon>
@@ -43,13 +44,13 @@ import { TextFieldElement } from '../models/text-field-element';
[style.text-decoration]="elementModel.underline ? 'underline' : ''"
appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
[appearance]="$any(elementModel.appearance)">
- <input matInput type="text" #input
+ <input matInput type="text" #input autocomplete="off"
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
[readonly]="elementModel.readOnly"
[pattern]="elementModel.pattern"
(focus)="onFocus.emit(input)"
- (blur)="onBlur.emit(input)"
- autocomplete="off"
- [formControl]="elementFormControl">
+ (blur)="onBlur.emit(input)">
<button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
(click)="onClick($event)">
<mat-icon>close</mat-icon>
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
index 75cc5d3d954853e11888637589ee05597653ceb7..7d12c70ee05bad6891bcdfa34be08295741bf250 100644
--- a/projects/editor/src/app/dialog.service.ts
+++ b/projects/editor/src/app/dialog.service.ts
@@ -76,12 +76,13 @@ export class DialogService {
return dialogRef.afterClosed();
}
- showLikertRowEditDialog(row: LikertElementRow): Observable<LikertElementRow> {
+ showLikertRowEditDialog(row: LikertElementRow, columns: LikertColumn[]): Observable<LikertElementRow> {
const dialogRef = this.dialog.open(LikertRowEditDialog, {
width: '300px',
height: '550px',
data: {
- row: row
+ row: row,
+ columns: columns
},
autoFocus: false
});
@@ -327,14 +328,21 @@ export class LikertColumnEditDialog {
<mat-label>ID</mat-label>
<input #idField matInput type="text" [value]="data.row.id">
</mat-form-field>
+ <mat-select #valueField [value]="data.row.value">
+ <mat-option *ngFor="let column of data.columns; let i = index" [value]="i">
+ {{column.text}}
+ </mat-option>
+ </mat-select>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button
- [mat-dialog-close]="{ text: textField.value, id: idField.value }">{{'save' | translate }}</button>
+ [mat-dialog-close]="{ text: textField.value, id: idField.value, value: valueField.value }">
+ {{'save' | translate }}
+ </button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`
})
export class LikertRowEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertElementRow }) { }
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertElementRow, columns: LikertColumn[] }) { }
}
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
index fc70ebff1aace1432b50f5b47a138a507afa949b..cb7c584938987814a6bbea1b3d6d15eb206248b7 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
+++ b/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
@@ -4,13 +4,11 @@ import {
ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef
} from '@angular/core';
import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
import { UnitService } from '../../../unit.service';
import * as ElementFactory from '../../../../../../common/util/element.factory';
-import { FormElementComponent } from '../../../../../../common/form-element-component.directive';
import { ElementComponent } from '../../../../../../common/element-component.directive';
import { SelectionService } from '../../../selection.service';
-import { InputElement, UIElement, ValueChangeElement } from '../../../../../../common/models/uI-element';
+import { UIElement } from '../../../../../../common/models/uI-element';
@Directive()
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@@ -36,21 +34,17 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
this.selectionService.selectElement({ componentElement: this, multiSelect: false });
- if (this.childComponent.instance instanceof FormElementComponent) {
- this.childComponent.instance.formValueChanged
- .pipe(takeUntil(this.ngUnsubscribe))
- .subscribe((changeElement: ValueChangeElement) => {
- this.unitService.updateElementProperty([this.element], 'value', changeElement.values[1]);
- });
+ // This allows to listen for changed directly on the element. And update the model accordingly.
+ // Since the elements are no longer interactable this code is not used. It may be in the future that
+ // this functionality is wanted again. Therefore the code is kept in commented out form.
- this.unitService.elementPropertyUpdated
- .pipe(takeUntil(this.ngUnsubscribe))
- .subscribe(() => {
- (this.childComponent.instance as FormElementComponent).updateFormValue(
- (this.element as InputElement).value as string | number | boolean | null
- );
- });
- }
+ // if (this.childComponent.instance instanceof FormElementComponent) {
+ // this.childComponent.instance.formValueChanged
+ // .pipe(takeUntil(this.ngUnsubscribe))
+ // .subscribe((changeElement: ValueChangeElement) => {
+ // this.unitService.updateElementProperty([this.element], 'value', changeElement.values[1]);
+ // });
+ // }
}
setSelected(newValue: boolean): void {
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 2feab2233bd8615ce3cdb8038b6d7cea21985ec0..c7ed4680d658f253ee006a09744e07426e63f1eb 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
@@ -155,7 +155,8 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
async editRowOption(optionIndex: number): Promise<void> {
await this.unitService.editLikertRow(
- (this.combinedProperties.rows as LikertElementRow[])[optionIndex] as LikertElementRow
+ (this.combinedProperties.rows as LikertElementRow[])[optionIndex] as LikertElementRow,
+ this.combinedProperties.columns as LikertColumn[]
);
}
}
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 6da42f9e4bd2a8f77e7b71d71fcf09e180386ff6..e0ef3f02450e131448ee91894142b3c2f7ed55e2 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -231,24 +231,31 @@ export class UnitService {
});
}
- async editLikertRow(question: LikertElementRow): Promise<void> {
- await this.dialogService.showLikertRowEditDialog(question)
+ async editLikertRow(row: LikertElementRow, columns: LikertColumn[]): Promise<void> {
+ await this.dialogService.showLikertRowEditDialog(row, columns)
.subscribe((result: LikertElementRow) => {
if (result) {
- if (result.id !== question.id) {
+ if (result.id !== row.id) {
this.updateElementProperty(
- [question],
+ [row],
'id',
result.id
);
}
- if (result.text !== question.text) {
+ if (result.text !== row.text) {
this.updateElementProperty(
- [question],
+ [row],
'text',
result.text
);
}
+ if (result.value !== row.value) {
+ this.updateElementProperty(
+ [row],
+ 'value',
+ result.value
+ );
+ }
}
});
}