[refactor] FormLayout for repurposing layouts

client/view/form.js

@@ -1,5 +1,6 @@
 const frappe = require('frappejs');
 const controls = require('./controls');
+const FormLayout = require('./formLayout');
 const Observable = require('frappejs/utils/observable');
 const keyboard = require('frappejs/client/ui/keyboard');
 
@@ -7,14 +8,9 @@ module.exports = class BaseForm extends Observable {
     constructor({doctype, parent, submit_label='Submit', container, meta, inline=false}) {
         super();
         Object.assign(this, arguments[0]);
-        this.controls = {};
-        this.controlList = [];
-        this.sections = [];
         this.links = [];
 
-        if (!this.meta) {
         this.meta = frappe.getMeta(this.doctype);
-        }
 
         if (this.setup) {
             this.setup();
@@ -52,7 +48,13 @@ module.exports = class BaseForm extends Observable {
 
         this.form.onValidate = true;
 
-        this.makeLayout();
+        this.formLayout = new FormLayout({
+            fields: this.meta.fields,
+            layout: this.meta.layout
+        });
+
+        this.form.appendChild(this.formLayout.form);
+
         this.bindKeyboard();
     }
 
@@ -64,47 +66,6 @@ module.exports = class BaseForm extends Observable {
         }
     }
 
-    makeLayout() {
-        if (this.meta.layout) {
-            for (let section of this.meta.layout) {
-                this.makeSection(section);
-            }
-        } else {
-            this.makeControls(this.meta.fields);
-        }
-    }
-
-    makeSection(section) {
-        const sectionElement = frappe.ui.add('div', 'form-section', this.form);
-        if (section.columns) {
-            sectionElement.classList.add('row');
-            for (let column of section.columns) {
-                let columnElement = frappe.ui.add('div', 'col', sectionElement);
-                this.makeControls(this.getFieldsFromLayoutElement(column.fields), columnElement);
-            }
-        } else {
-            this.makeControls(this.getFieldsFromLayoutElement(section.fields), sectionElement);
-        }
-        this.sections.push(sectionElement);
-    }
-
-    getFieldsFromLayoutElement(fields) {
-        return this.meta.fields.filter(d => fields.includes(d.fieldname));
-    }
-
-    makeControls(fields, parent) {
-        for(let field of fields) {
-            if (!field.hidden && controls.getControlClass(field.fieldtype)) {
-                if (this.inline) {
-                    field.inline = true;
-                }
-                let control = controls.makeControl({field: field, form: this, parent: parent});
-                this.controlList.push(control);
-                this.controls[field.fieldname] = control;
-            }
-        }
-    }
-
     makeToolbar() {
         if (this.actions.includes('save')) {
             this.makeSaveButton();
@@ -271,7 +232,7 @@ module.exports = class BaseForm extends Observable {
             this.doc.off(this.docListener);
         }
         this.doc = doc;
-        for (let control of this.controlList) {
+        for (let control of this.formLayout.controlList) {
             control.bind(this.doc);
         }
 
@@ -285,7 +246,7 @@ module.exports = class BaseForm extends Observable {
         this.docListener = (params) => {
             if (params.fieldname) {
                 // only single value changed
-                let control = this.controls[params.fieldname];
+                let control = this.formLayout.controls[params.fieldname];
                 if (control && control.getInputValue() !== control.format(params.fieldname)) {
                     control.refresh();
                 }
@@ -304,7 +265,7 @@ module.exports = class BaseForm extends Observable {
     checkValidity() {
         let validity = this.form.checkValidity();
         if (validity) {
-            for (let control of this.controlList) {
+            for (let control of this.formLayout.controlList) {
                 // check validity in table
                 if (control.fieldtype==='Table') {
                     validity = control.checkValidity();
@@ -318,7 +279,7 @@ module.exports = class BaseForm extends Observable {
     }
 
     refresh() {
-        for(let control of this.controlList) {
+        for(let control of this.formLayout.controlList) {
             control.refresh();
         }
         this.trigger('refresh', this);

client/view/formLayout.js

@@ -0,0 +1,54 @@
+const controls = require('./controls');
+
+module.exports = class FormLayout {
+	constructor({fields, layout}) {
+		this.fields = fields;
+		this.layout = layout;
+
+		this.controls = {};
+        this.controlList = [];
+		this.sections = [];
+
+		this.form = document.createElement('div');
+
+		this.makeLayout();
+	}
+
+	makeLayout() {
+        if (this.layout) {
+            for (let section of this.layout) {
+                this.makeSection(section);
+            }
+        } else {
+            this.makeControls(this.fields);
+        }
+    }
+
+    makeSection(section) {
+        const sectionElement = frappe.ui.add('div', 'form-section', this.form);
+        if (section.columns) {
+            sectionElement.classList.add('row');
+            for (let column of section.columns) {
+                let columnElement = frappe.ui.add('div', 'col', sectionElement);
+                this.makeControls(this.getFieldsFromLayoutElement(column.fields), columnElement);
+            }
+        } else {
+            this.makeControls(this.getFieldsFromLayoutElement(section.fields), sectionElement);
+        }
+        this.sections.push(sectionElement);
+    }
+
+    getFieldsFromLayoutElement(fields) {
+        return this.fields.filter(d => fields.includes(d.fieldname));
+    }
+
+    makeControls(fields, parent) {
+        for(let field of fields) {
+            if (!field.hidden && controls.getControlClass(field.fieldtype)) {
+                let control = controls.makeControl({field: field, form: this, parent: parent});
+                this.controlList.push(control);
+                this.controls[field.fieldname] = control;
+            }
+        }
+    }
+}