From 452ea4ea754e9b5b16561d2f998df2cfb77d90b7 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 3 Jan 2023 13:54:31 +0100
Subject: [PATCH] [player] Use form control value for drop list manipulations
- Add pipe to decide which list to use
---
.../input-elements/drop-list.component.ts | 32 +++++++++++++------
projects/common/shared.module.ts | 3 +-
2 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 6de1a6601..9305f9282 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Pipe, PipeTransform } from '@angular/core';
import {
CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragStart, CdkDropList, moveItemInArray, transferArrayItem
} from '@angular/cdk/drag-drop';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
import { DragNDropValueObject } from 'common/models/elements/element';
import { FormElementComponent } from '../../directives/form-element-component.directive';
+import { FormGroup } from '@angular/forms';
@Component({
selector: 'aspect-drop-list',
@@ -32,7 +33,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.border-color]="elementModel.highlightReceivingDropListColor"
[class.errors]="elementFormControl.errors && elementFormControl.touched"
(focusout)="elementFormControl.markAsTouched()">
- <ng-container *ngFor="let dropListValueElement of elementModel.value let index = index;">
+ <ng-container *ngFor="let dropListValueElement of
+ (parentForm | dropListValueElements: elementModel.value: elementFormControl.value) let index = index;">
<div *ngIf="!dropListValueElement.imgSrc"
class="list-item"
cdkDrag [cdkDragData]="dropListValueElement"
@@ -112,19 +114,19 @@ export class DropListComponent extends FormElementComponent {
drop(event: CdkDragDrop<any>) {
if (DropListComponent.isReorderDrop(event)) {
- moveItemInArray(event.container.data.elementModel.value, event.previousIndex, event.currentIndex);
+ moveItemInArray(event.container.data.elementFormControl.value, event.previousIndex, event.currentIndex);
event.container.data.updateFormvalue();
} else if (DropListComponent.isCopyDrop(event)) {
- event.container.data.elementModel.value.push(
- event.previousContainer.data.elementModel.value[event.previousIndex]);
+ event.container.data.elementFormControl.value.push(
+ event.previousContainer.data.elementFormControl.value[event.previousIndex]);
event.container.data.updateFormvalue();
} else if (DropListComponent.isPutBack(event)) {
- event.previousContainer.data.elementModel.value.splice(event.previousIndex, 1);
+ event.previousContainer.data.elementFormControl.value.splice(event.previousIndex, 1);
event.previousContainer.data.updateFormvalue();
} else {
transferArrayItem(
- event.previousContainer.data.elementModel.value,
- event.container.data.elementModel.value,
+ event.previousContainer.data.elementFormControl.value,
+ event.container.data.elementFormControl.value,
event.previousIndex,
event.currentIndex
);
@@ -143,7 +145,7 @@ export class DropListComponent extends FormElementComponent {
static isPutBack(event: CdkDragDrop<any>): boolean {
return event.container.data.elementModel.copyOnDrop &&
- DropListComponent.isItemIDAlreadyPresent(event.item.data.id, event.container.data.elementModel.value);
+ DropListComponent.isItemIDAlreadyPresent(event.item.data.id, event.container.data.elementFormControl.value);
}
updateFormvalue(): void {
@@ -151,7 +153,7 @@ export class DropListComponent extends FormElementComponent {
}
validDropPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => {
- return (!drop.data.elementModel.onlyOneItem || drop.data.elementModel.value.length < 1);// &&
+ return (!drop.data.elementModel.onlyOneItem || drop.data.elementFormControl.value.length < 1);// &&
// (!DropListComponent.isItemIDAlreadyPresent(drag.data.id, drop.data.value));
};
@@ -172,3 +174,13 @@ export class DropListComponent extends FormElementComponent {
return listValueIDs.includes(itemID);
}
}
+
+@Pipe({
+ name: 'dropListValueElements'
+})
+export class DropListValueElementsPipe implements PipeTransform {
+ transform(parentForm: FormGroup, elementModelValue: DragNDropValueObject[], elementFormValue: DragNDropValueObject[])
+ : DragNDropValueObject[] {
+ return parentForm ? elementFormValue : elementModelValue;
+ }
+}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index ffd85fbbf..7b8002ace 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -52,7 +52,7 @@ import {
} from './components/compound-elements/likert/likert-radio-button-group.component';
import { ImageMagnifierComponent } from './components/media-elements/image-magnifier.component';
import { RadioGroupImagesComponent } from './components/input-elements/radio-group-images.component';
-import { DropListComponent } from './components/input-elements/drop-list.component';
+import { DropListComponent, DropListValueElementsPipe } from './components/input-elements/drop-list.component';
import { ClozeComponent } from './components/compound-elements/cloze/cloze.component';
import { SliderComponent } from './components/input-elements/slider.component';
import { SpellCorrectComponent } from './components/input-elements/spell-correct.component';
@@ -120,6 +120,7 @@ import { GetValuePipe, MathFieldComponent } from './components/input-elements/ma
ImageMagnifierComponent,
RadioGroupImagesComponent,
DropListComponent,
+ DropListValueElementsPipe,
ClozeComponent,
HotspotImageComponent,
SliderComponent,
--
GitLab