refactor: refactoring builders

Author: NiclasNorin

source/js/conditions/conditionBuilder.ts

@@ -3,6 +3,10 @@ import NullCondition from "./condition/nullCondition";
 import OrCondition from "./condition/orCondition";
 
 class ConditionBuilder implements ConditionBuilderInterface {
+    constructor(private fields: FieldsObject) {
+
+    }
+
     public build(conditions: any): ConditionInterface[] {
         if (!Array.isArray(conditions) || conditions.length === 0) {
             return [new NullCondition()];
@@ -15,8 +19,13 @@ class ConditionBuilder implements ConditionBuilderInterface {
             }
 
             if (conditionSet.length === 1) {
+                conditionSet[0].class = this.fields[conditionSet[0].field] ?? null;
                 conditionsList.push(new OrCondition(conditionSet[0]));
             } else {
+                conditionSet.forEach((condition: Condition) => {
+                    condition.class = this.fields[condition.field] ?? null;
+                });
+
                 conditionsList.push(new AndCondition(conditionSet));
             }
         });

source/js/fields/fieldBuilder.ts

@@ -1,13 +1,13 @@
-import Checkbox from "./field/checkbox";
-import NullField from "./field/nullField";
+import Checkbox from "./field/checkbox/checkbox";
+import CheckboxConditionsHandler from "./field/checkbox/checkboxConditionsHandler";
+import NullFieldConditionsHandler from "./field/nullField/nullFieldConditionsHandler";
+import NullField from "./field/nullField/nullField";
+import CheckboxValidator from "../conditions/validate/checkboxValidator";
 
 class FieldBuilder implements FieldBuilderInterface {
     private name: string = 'data-js-field-name';
     private condition: string = 'data-js-conditional-logic';
 
-    constructor(private conditionBuilder: ConditionBuilderInterface) {
-    }
-
     public build(field: HTMLElement, type: string): FieldInterface {
         if (!this.validateRequiredAttributes(field)) {
             console.error('Field name and conditional is required');
@@ -27,36 +27,38 @@ class FieldBuilder implements FieldBuilderInterface {
             field,
             type,
             this.getFieldName(field),
-            this.getFieldCondition(field)
+            new NullFieldConditionsHandler(field, this.getFieldCondition(field))
         );
     }
 
     public buildCheckbox(field: HTMLElement): FieldInterface {
-        const choices = field.querySelectorAll('input[type="checkbox"]');
-
+        const choices = field.querySelectorAll('input[type="checkbox"]') as NodeListOf<HTMLInputElement>;
 
         return new Checkbox(
             field,
-            choices as NodeListOf<HTMLInputElement>,
+            choices,
             this.getFieldName(field),
-            this.getFieldCondition(field)
+            new CheckboxValidator(),
+            new CheckboxConditionsHandler(this.getFieldCondition(field))
         );
     }
 
     private getFieldName(field: HTMLElement): string {
         return field.getAttribute('data-js-field-name') as string;
     }
 
-    private getFieldCondition(field: HTMLElement): ConditionInterface[] {
+    private getFieldCondition(field: HTMLElement): any {
         let condition = 0;
 
+
         try {
             condition = JSON.parse(field.getAttribute('data-js-conditional-logic') as string);
         } catch (error) {
             condition = 0;
         }
 
-        return this.conditionBuilder.build(condition);
+        // return this.conditionBuilder.build(condition);
+        return condition;
     }
 
     private validateRequiredAttributes(field: HTMLElement): boolean {

source/js/fields/fields.ts

@@ -1,23 +1,17 @@
 class Fields implements FieldsInterface {
-    private fields: FieldsObject = {};
-
-    constructor(private form: HTMLFormElement, private fieldsArray: FieldInterface[]) {
+    constructor(private form: HTMLFormElement, private fields: FieldsObject) {
     }
 
     public init(): void {
-        this.fieldsArray.forEach((field) => {
-            this.fields[field.getName()] = field;
-        });
-
         this.setupConditionals();
     }
 
     private setupConditionals(): void {
         for (const fieldName in this.fields) {
-            this.fields[fieldName].getConditions().forEach((condition) => {
+            this.fields[fieldName].getConditionsHandler().getConditions().forEach((condition) => {
                 condition.getConditionFieldNames().forEach((conditionFieldName) => {
                     if (this.fields[conditionFieldName]) {
-                        this.fields[conditionFieldName].addValueChangeListener(this.fields[fieldName]);
+                        this.fields[conditionFieldName].getConditionsHandler().addValueChangeListener(this.fields[fieldName]);
                     }
                 });
             });

source/js/fields/fieldsInterface.d.ts

@@ -3,17 +3,27 @@ interface FieldsInterface {
 }
 
 interface FieldInterface {
+    init(conditionBuilder: ConditionBuilderInterface): void;
     getName(): string;
-    getConditions(): ConditionInterface[];
-    addValueChangeListener(field: FieldInterface): void;
-    validateConditionals(): boolean;
+    getConditionsHandler(): ConditionsHandlerInterface;
+}
+
+interface CheckboxInterface extends FieldInterface {
+    getChoices(): NodeListOf<HTMLInputElement>;
 }
 
 interface FieldBuilderInterface {
     build(field: HTMLElement, type: string): FieldInterface;
     buildCheckbox(field: HTMLElement): FieldInterface;
 }
 
+interface ConditionsHandlerInterface {
+    init(parent: FieldInterface, conditionsBuilder: ConditionBuilderInterface): void;
+    getConditions(): ConditionInterface[];
+    validate(): boolean;
+    addValueChangeListener(field: FieldInterface): void;
+}
+
 type FieldsObject = {
     [key: string]: FieldInterface;
 }

source/js/init.ts

@@ -25,17 +25,21 @@ class Form {
     }
 
     private setupConditionalLogic() {
-        const builder = new FieldBuilder(
-            new ConditionBuilder()
-        );
+        const builder = new FieldBuilder();
+        let fieldsObject: FieldsObject = {};
 
-        let fields: FieldInterface[] = [];
-
-        this.form.querySelectorAll('[data-js-field]').forEach(field => {
-            fields.push(builder.build(field as HTMLElement, field.getAttribute('data-js-field') ?? ''));
+        this.form.querySelectorAll('[data-js-field]').forEach(element => {
+            const field = builder.build(element as HTMLElement, element.getAttribute('data-js-field') ?? '');
+            fieldsObject[field.getName()] = field;
         });
 
-        new Fields(this.form, fields).init();
+        const conditionBuilder = new ConditionBuilder(fieldsObject);
+
+        for (const fieldName in fieldsObject) {
+            fieldsObject[fieldName].init(conditionBuilder);
+        }
+
+        new Fields(this.form, fieldsObject).init();
     }
 
     private setupSteps() {