From d346f9c0197c3e61db9726c3bfe6fb63c8728946 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 10 Nov 2021 17:47:58 +0100
Subject: [PATCH] Refactor dropList to only have values and not options
Options and value were the same thing anyway and the value was updated
once anything was changed within that dropList.
The player though needs a start value and this way we have one.
---
.../compound-elements/drop-list.component.ts | 18 +++++------
.../models/compound-elements/drop-list.ts | 2 +-
.../element-properties.component.html | 32 +++++++++++++++++++
3 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/projects/common/element-components/compound-elements/drop-list.component.ts b/projects/common/element-components/compound-elements/drop-list.component.ts
index 358600df0..5fc6709f5 100644
--- a/projects/common/element-components/compound-elements/drop-list.component.ts
+++ b/projects/common/element-components/compound-elements/drop-list.component.ts
@@ -27,12 +27,12 @@ import { FormElementComponent } from '../../form-element-component.directive';
[cdkDropListOrientation]="elementModel.orientation"
[cdkDropListEnterPredicate]="onlyOneItemPredicate"
(cdkDropListDropped)="drop($event)">
- <div class="item" *ngFor="let option of elementModel.options; let i = index" cdkDrag
+ <div class="item" *ngFor="let value of $any(elementModel.value)" cdkDrag
[ngClass]="{'vertical-item': elementModel.orientation === 'vertical',
'horizontal-item': elementModel.orientation === 'horizontal'}">
- <div *cdkDragPreview>{{option}}</div>
+ <div *cdkDragPreview>{{value}}</div>
<div class="drag-placeholder" *cdkDragPlaceholder [style.min-height.px]="elementModel.fontSize"></div>
- {{option}}
+ {{value}}
</div>
</div>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
@@ -61,21 +61,21 @@ export class DropListComponent extends FormElementComponent {
drop(event: CdkDragDrop<DropListComponent>): void {
if (!this.elementModel.readOnly) {
if (event.previousContainer === event.container) {
- moveItemInArray(event.container.data.elementModel.options, event.previousIndex, event.currentIndex);
+ moveItemInArray(event.container.data.elementModel.value as string[], event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
- event.previousContainer.data.elementModel.options,
- event.container.data.elementModel.options,
+ event.previousContainer.data.elementModel.value as string[],
+ event.container.data.elementModel.value as string[],
event.previousIndex,
event.currentIndex
);
- event.previousContainer.data.elementFormControl.setValue(event.previousContainer.data.elementModel.options);
+ event.previousContainer.data.elementFormControl.setValue(event.previousContainer.data.elementModel.value);
}
- this.elementFormControl.setValue(event.container.data.elementModel.options);
+ this.elementFormControl.setValue(event.container.data.elementModel.value);
}
}
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
- !drop.data.elementModel.onlyOneItem || drop.data.elementModel.options.length < 1
+ !drop.data.elementModel.onlyOneItem || drop.data.elementModel.value.length < 1
);
}
diff --git a/projects/common/models/compound-elements/drop-list.ts b/projects/common/models/compound-elements/drop-list.ts
index 6fff65975..d2be9550a 100644
--- a/projects/common/models/compound-elements/drop-list.ts
+++ b/projects/common/models/compound-elements/drop-list.ts
@@ -3,7 +3,6 @@ import { FontElement, SurfaceUIElement } from '../../interfaces/UIElementInterfa
import { initFontElement, initSurfaceElement } from '../../util/unit-interface-initializer';
export class DropListElement extends InputElement implements FontElement, SurfaceUIElement {
- options: string[] = [];
onlyOneItem: boolean = false;
connectedTo: string[] = [];
orientation: 'vertical' | 'horizontal' = 'vertical';
@@ -24,6 +23,7 @@ export class DropListElement extends InputElement implements FontElement, Surfac
Object.assign(this, initFontElement(serializedElement));
Object.assign(this, initSurfaceElement(serializedElement));
+ this.value = [];
this.height = serializedElement.height || 100;
this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
}
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 c3c0e1059..0e173600f 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
@@ -109,6 +109,37 @@
</div>
</mat-form-field>
+ <mat-form-field disabled="true" *ngIf="combinedProperties.connectedTo !== undefined">
+ <ng-container>
+ <mat-label>{{'propertiesPanel.value' | translate }}</mat-label>
+ <div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.value"
+ (cdkDropListDropped)="reorderOptions('value', $any($event))">
+ <div *ngFor="let value of $any(combinedProperties.value); let i = index" cdkDrag
+ class="list-items" fxLayout="row" fxLayoutAlign="end center">
+ <div fxFlex="70">
+ {{value}}
+ </div>
+ <button mat-icon-button color="primary"
+ (click)="editTextOption('value', i)">
+ <mat-icon>build</mat-icon>
+ </button>
+ <button mat-icon-button color="primary"
+ (click)="removeOption('value', value)">
+ <mat-icon>clear</mat-icon>
+ </button>
+ </div>
+ </div>
+ </ng-container>
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <button mat-icon-button matPrefix
+ (click)="addOption('value', newValue.value); newValue.select()">
+ <mat-icon>add</mat-icon>
+ </button>
+ <input #newValue matInput type="text"
+ (keyup.enter)="addOption('value', newValue.value); newValue.select()">
+ </div>
+ </mat-form-field>
+
<mat-form-field *ngIf="combinedProperties.alignment" appearance="fill">
<mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
<mat-select [value]="combinedProperties.alignment"
@@ -188,6 +219,7 @@
<mat-form-field *ngIf="combinedProperties.value !== undefined &&
!combinedProperties.options && !combinedProperties.columns &&
+ combinedProperties.connectedTo === undefined &&
combinedProperties.value !== true && combinedProperties.value !== false"
appearance="fill">
<mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
--
GitLab