Merge branch 'main' of github.com:helsingborg-stad/modularity-frontend-form

Author: Sebastian Thulin

source/js/fields/field/message/message.ts

@@ -0,0 +1,32 @@
+class Message implements FieldInterface {
+    constructor(
+        private field: HTMLElement,
+        private name: string,
+        private conditionValidator: ConditionValidatorInterface,
+        private conditionsHandler: ConditionsHandlerInterface
+    ) {
+    }
+
+    public init(conditionBuilder: ConditionBuilderInterface): void {
+        this.conditionsHandler.init(this, conditionBuilder);
+        this.conditionValidator.init(this);
+    }
+
+    public getName(): string {
+        return this.name;
+    }
+
+    public getConditionsHandler(): ConditionsHandlerInterface {
+        return this.conditionsHandler;
+    }
+
+    public getConditionValidator(): ConditionValidatorInterface {
+        return this.conditionValidator;
+    }
+
+    public getField(): HTMLElement {
+        return this.field;
+    }
+}
+
+export default Message;

source/js/fields/field/message/messageConditionHandler.ts

@@ -0,0 +1,56 @@
+class MessageConditionsHandler implements ConditionsHandlerInterface {
+	private parent: FieldInterface|null = null;
+	private conditions: ConditionInterface[] = [];
+	private isDisabled: boolean = false;
+
+	constructor(private unstructuredConditions: any) {
+	}
+
+	public init(parent: FieldInterface, conditionsBuilder: ConditionBuilderInterface): void {
+		this.parent = parent;
+		this.conditions = conditionsBuilder.build(this.unstructuredConditions);
+	}
+
+	private updateDisabled(disabled: boolean): void {
+		if (this.parent && this.isDisabled !== disabled) {
+			this.isDisabled = disabled;
+
+            this.parent.getField().classList.toggle('u-display--none', disabled);
+		}
+	}
+
+	public validate(): void {
+		let isValid: boolean = false;
+        console.log(this.getConditions());
+		for (const condition of this.getConditions()) {
+			if (condition.validate()) {
+				isValid = true;
+				break;
+			}
+		}
+
+		this.updateDisabled(!isValid);
+	}
+
+	public dispatchUpdateEvent(): void {
+		return;
+	}
+
+	public getIsDisabled(): boolean {
+		return this.isDisabled;
+	}
+
+	public getConditions(): ConditionInterface[] {
+		return this.conditions;
+	}
+
+    public addValueChangeListener(field: FieldInterface): void {
+		return;
+    }
+
+	private setValueChangeListener(): void {
+        return;
+	}
+}
+
+export default MessageConditionsHandler;

source/js/fields/field/radio/radioConditionValidator.ts

@@ -7,7 +7,6 @@ class RadioConditionValidator implements ConditionValidatorInterface {
 
     public validate(condition: Condition): boolean {
         const selected = this.parent?.getSelectedChoice() ?? '';
-        console.log(condition, 'selected', selected);
 
         switch (condition.operator) {
             case '==':

source/js/fields/fieldBuilder.ts

@@ -13,6 +13,8 @@ import SelectConditionValidator from "./field/select/selectConditionValidator";
 import Radio from "./field/radio/radio";
 import RadioConditionValidator from "./field/radio/radioConditionValidator";
 import RadioConditionsHandler from "./field/radio/radioConditionsHandler";
+import Message from "./field/message/message";
+import MessageConditionsHandler from "./field/message/messageConditionHandler";
 
 class FieldBuilder implements FieldBuilderInterface {
     private name: string = 'data-js-field-name';
@@ -32,12 +34,15 @@ class FieldBuilder implements FieldBuilderInterface {
             case 'url':
             case 'date':
             case 'time':
+            case 'number':
                 return this.buildText(field);
             case 'select':
                 return this.buildSelect(field);
             case 'radio':
             case 'trueFalse':
                 return this.buildRadio(field);
+            case 'message':
+                return this.buildMessage(field);
         }
 
         return this.buildNullField(field, type);
@@ -53,6 +58,15 @@ class FieldBuilder implements FieldBuilderInterface {
         );
     }
 
+    private buildMessage(field: HTMLElement): FieldInterface {
+        return new Message(
+            field,
+            this.getFieldName(field),
+            new NullFieldConditionValidator(),
+            new MessageConditionsHandler(this.getFieldCondition(field))
+        )
+    }
+
     private buildRadio(field: HTMLElement): FieldInterface {
         const choices = field.querySelectorAll('input[type="radio"]') as NodeListOf<HTMLInputElement>;
 
@@ -90,8 +104,15 @@ class FieldBuilder implements FieldBuilderInterface {
     }
 
     private buildText(field: HTMLElement): FieldInterface {
-        const input = field.querySelector('input:is([type="text"], [type="email"], [type="url"], [type="date"], [type="time"])') as HTMLInputElement;
-        console.log(field);
+        const input = field.querySelector(`input:is(
+            [type="text"],
+            [type="email"],
+            [type="url"],
+            [type="date"],
+            [type="time"],
+            [type="number"]
+        )`) as HTMLInputElement;
+
         if (!input) {
             console.error('Text field is not an input element with type "text", "email" or "url", "date" or "time"');
             return this.buildNullField(field, 'text');

source/php/Module/FormatSteps.php

@@ -68,8 +68,9 @@ private function fieldMapper(array $field)
             case 'url':
                 return $this->mapUrl($field);
             case 'textarea':
-            case 'message':
                 return $this->mapTextarea($field);
+            case 'message':
+                return $this->mapBasic($field, 'message');
             case 'radio':
                 return $this->mapRadio($field);
             case 'number':
@@ -125,10 +126,12 @@ private function mapNumber(array $field): array
     {
         // TODO: Append ex. SEK?
         $mapped = $this->mapBasic($field, 'number');
-        $mapped['placeholder'] = $field['placeholder'] ?? '';
-        $mapped['value']       = $field['default_value'] ?? '';
-        $mapped['min']         = $field['min'] ?? null;
-        $mapped['max']         = $field['max'] ?? null;
+
+        $mapped['placeholder']                         = $field['placeholder'] ?? '';
+        $mapped['value']                               = $field['default_value'] ?? '';
+        $mapped['moveAttributesListToFieldAttributes'] = false;
+        $mapped['attributeList']['min']                = $field['min'] ?? null;
+        $mapped['attributeList']['max']                = $field['max'] ?? null;
 
         return $mapped;
     }

source/php/Module/views/fields/message.blade.php

@@ -0,0 +1,5 @@
+@typography([
+    'attributeList' => $field['attributeList'],
+])
+    HELLO
+@endtypography

source/php/Module/views/fields/number.blade.php

@@ -0,0 +1,2 @@
+@field($field)
+@endfield