feat: radio

Author: NiclasNorin

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

@@ -0,0 +1,42 @@
+class Radio implements RadioInterface {
+    constructor(
+        private field: HTMLElement,
+        private choices: NodeListOf<HTMLInputElement>,
+        private name: string,
+        private radioValidator: ConditionValidatorInterface,
+        private conditionsHandler: ConditionsHandlerInterface
+    ) {
+    }
+
+    public init(conditionBuilder: ConditionBuilderInterface): void {
+        this.conditionsHandler.init(this, conditionBuilder);
+        this.radioValidator.init(this);
+    }
+
+    public getName(): string {
+        return this.name;
+    }
+
+    public getConditionsHandler(): ConditionsHandlerInterface {
+        return this.conditionsHandler;
+    }
+
+    public getConditionValidator(): ConditionValidatorInterface {
+        return this.radioValidator;
+    }
+
+    public getChoices(): NodeListOf<HTMLInputElement> {
+        return this.choices;
+    }
+
+    public getSelectedChoice(): string {
+        const selectedChoice = [...this.getChoices()].find(choice => choice.checked);
+        return selectedChoice ? selectedChoice.value : '';
+    }
+
+    public getField(): HTMLElement {
+        return this.field;
+    }
+}
+
+export default Radio;

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

@@ -0,0 +1,29 @@
+class RadioConditionValidator implements ConditionValidatorInterface {
+    private parent: RadioInterface|null = null;
+
+    public init(parent: RadioInterface): void {
+        this.parent = parent;
+    }
+
+    public validate(condition: Condition): boolean {
+        const selected = this.parent?.getSelectedChoice() ?? '';
+
+        switch (condition.operator) {
+            case '==':
+            case '=':
+            case '===':
+                return selected === condition.value;
+            case '!=':
+            case '!==':
+                return selected !== condition.value;
+            case '==empty':
+                return Number(selected) === 0;
+            case '!=empty':
+                return Number(selected) > 0;
+            default:
+                return false;
+        }
+    }
+}
+
+export default RadioConditionValidator;

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

@@ -0,0 +1,76 @@
+class RadioConditionsHandler implements ConditionsHandlerInterface {
+	private fieldsObject: FieldsObject = {};
+	private parent: RadioInterface | null = null;
+	private conditions: ConditionInterface[] = [];
+	private isDisabled: boolean = false;
+
+	constructor(private unstructuredConditions: any) {
+	}
+
+	public init(parent: RadioInterface, conditionsBuilder: ConditionBuilderInterface): void {
+		this.parent = parent;
+		console.log(this.unstructuredConditions);
+		this.conditions = conditionsBuilder.build(this.unstructuredConditions);
+		this.setValueChangeListener();
+	}
+
+	private updateDisabled(disabled: boolean): void {
+		if (this.isDisabled !== disabled) {
+			this.isDisabled = disabled;
+
+			this.parent?.getChoices().forEach((checkbox, index) => {
+				if (index === 0) {
+					this.parent?.getField().classList.toggle('u-display--none', disabled)
+				}
+				
+				checkbox.disabled = disabled;
+			});
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public validate(): void {
+		let isValid: boolean = false;
+		for (const condition of this.getConditions()) {
+			if (condition.validate()) {
+				isValid = true;
+				break;
+			}
+		}
+
+		this.updateDisabled(!isValid);
+	}
+
+	public dispatchUpdateEvent(): void {
+		const choice = this.parent?.getChoices()[0];
+
+		if (choice) {
+			choice.dispatchEvent(new Event('change'));
+		}
+	}
+
+	public getIsDisabled(): boolean {
+		return this.isDisabled;
+	}
+
+	public getConditions(): ConditionInterface[] {
+		return this.conditions;
+	}
+
+    public addValueChangeListener(field: FieldInterface): void {
+		this.fieldsObject[field.getName()] = field;
+    }
+
+	private setValueChangeListener(): void {
+		this.parent?.getChoices().forEach((radio) => {
+			radio.addEventListener('change', () => {
+				for (const fieldName in this.fieldsObject) {
+					this.fieldsObject[fieldName].getConditionsHandler().validate();
+				}
+			});
+		});
+	}
+}
+
+export default RadioConditionsHandler;

source/js/fields/fieldBuilder.ts

@@ -10,6 +10,9 @@ import TextConditionValidator from "./field/text/textConditionValidator";
 import Select from "./field/select/select";
 import SelectConditionHandler from "./field/select/selectConditionHandler";
 import SelectConditionValidator from "./field/select/selectConditionValidator";
+import Radio from "./field/radio/radio";
+import RadioConditionValidator from "./field/radio/radioConditionValidator";
+import RadioConditionsHandler from "./field/radio/radioConditionsHandler";
 
 class FieldBuilder implements FieldBuilderInterface {
     private name: string = 'data-js-field-name';
@@ -28,6 +31,8 @@ class FieldBuilder implements FieldBuilderInterface {
                 return this.buildText(field);
             case 'select':
                 return this.buildSelect(field);
+            case 'radio':
+                return this.buildRadio(field);
         }
 
         return this.buildNullField(field, type);
@@ -42,9 +47,25 @@ class FieldBuilder implements FieldBuilderInterface {
             new NullFieldConditionsHandler(field, this.getFieldCondition(field))
         );
     }
+
+    private buildRadio(field: HTMLElement): FieldInterface {
+        const choices = field.querySelectorAll('input[type="radio"]') as NodeListOf<HTMLInputElement>;
+
+        if (choices.length === 0) {
+            console.error('Radio field is missing input elements');
+            return this.buildNullField(field, 'radio');
+        }
+
+        return new Radio(
+            field,
+            choices,
+            this.getFieldName(field),
+            new RadioConditionValidator(),
+            new RadioConditionsHandler(this.getFieldCondition(field))
+        );
+    }
 
     private buildSelect(field: HTMLElement): FieldInterface {
-        console.log(field)
         const select = field.querySelector('select') as HTMLSelectElement;
         const options = select?.querySelectorAll('option') as NodeListOf<HTMLOptionElement>;
 

source/js/fields/fieldsInterface.d.ts

@@ -15,6 +15,11 @@ interface CheckboxInterface extends FieldInterface {
     getSelectedChoices(): string[];
 }
 
+interface RadioInterface extends FieldInterface {
+    getChoices(): NodeListOf<HTMLInputElement>;
+    getSelectedChoice(): string;
+}
+
 interface TextInterface extends FieldInterface {
     getInput(): HTMLInputElement;
 }

source/php/Module/FormatSteps.php

@@ -282,6 +282,7 @@ private function mapRadio(array $field): array
     {
         $mapped = $this->mapBasic($field, 'radio');
         $mapped['choices'] = [];
+        $mapped['attributeList']['role'] = 'radiogroup';
         foreach ($field['choices'] as $key => $value) {
             $mapped['choices'][$key] = [
                 'type' => $mapped['type'],