From ceb4315ee900df1fc49a2209473539fea39a5231 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Wed, 31 Aug 2022 10:09:41 +0200
Subject: [PATCH] [player] Show validation errors of spell simple drop lists
---
.../drop-list-simple.component.ts | 19 +++++++++++++------
1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
index 9572684a7..eff311957 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
@@ -14,6 +14,7 @@ import { DragNDropValueObject } from 'common/models/elements/element';
<div class="list-container">
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving class style.-->
<div class="list"
+ [class.errors]="elementFormControl.errors && elementFormControl.touched"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
[style.border-color]="elementModel.highlightReceivingDropListColor"
[style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
@@ -24,6 +25,8 @@ import { DragNDropValueObject } from 'common/models/elements/element';
[style.font-style]="elementModel.styling.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
[style.backgroundColor]="elementModel.styling.backgroundColor"
+ [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
+ (elementFormControl.errors | errorTransform: elementModel) : ''"
cdkDropList
[id]="elementModel.id"
[cdkDropListData]="this"
@@ -62,10 +65,6 @@ import { DragNDropValueObject } from 'common/models/elements/element';
</div>
</ng-template>
</div>
- <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
- class="error-message">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
</div>
`,
styles: [
@@ -74,6 +73,7 @@ import { DragNDropValueObject } from 'common/models/elements/element';
'.item {border-radius: 5px; padding: 0 5px; height: 100%; text-align: center;}',
'.item:not(:last-child) {margin-bottom: 5px;}',
'.item:active {cursor: grabbing}',
+ '.errors {border: 2px solid #f44336 !important;}',
'.error-message {font-size: 75%; margin-top: 10px;}',
'.cdk-drag-preview {padding: 8px 20px; border-radius: 10px}',
'.drag-placeholder {background-color: lightgrey; border: dotted 3px #999;}',
@@ -81,7 +81,10 @@ import { DragNDropValueObject } from 'common/models/elements/element';
'.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
'.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
- '.dropList-highlight.cdk-drop-list-dragging {border: solid;}'
+ '.dropList-highlight.cdk-drop-list-dragging {border: solid;}',
+
+ '::ng-deep .mat-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
+ '::ng-deep .mat-tooltip {background-color: white; color: #f44336 !important;}'
]
})
export class DropListSimpleComponent extends FormElementComponent {
@@ -103,10 +106,12 @@ export class DropListSimpleComponent extends FormElementComponent {
if (!this.elementModel.readOnly) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data.elementFormControl.value as unknown as DragNDropValueObject[],
- event.previousIndex, event.currentIndex);
+ event.previousIndex,
+ event.currentIndex);
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
+ event.container.data.elementFormControl.markAsTouched();
} else {
transferArrayItem(
event.previousContainer.data.elementFormControl.value as unknown as DragNDropValueObject[],
@@ -121,6 +126,8 @@ export class DropListSimpleComponent extends FormElementComponent {
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
+ event.container.data.elementFormControl.markAsTouched();
+ event.previousContainer.data.elementFormControl.markAsTouched();
}
}
--
GitLab