implement templates for control

client/desk/index.js

@@ -106,11 +106,11 @@ module.exports = class Desk {
         return this.pages.forms[doctype];
     }
 
-    showFormModal(doctype, name) {
+    async showFormModal(doctype, name) {
         if (!this.pages.formModals[doctype]) {
             this.pages.formModals[doctype] = new FormModal(doctype);
         }
-        this.pages.formModals[doctype].showWith(doctype, name);
+        await this.pages.formModals[doctype].showWith(doctype, name);
         return this.pages.formModals[doctype];
     }
 

client/view/controls/base.js

@@ -18,20 +18,37 @@ class BaseControl {
         if (this.setup) {
             this.setup();
         }
-        this.make();
+        if (this.template) {
+            this.wrapper = frappe.ui.add('div', 'field-template', this.parent);
+            this.renderTemplate();
+        } else {
+            this.make();
+        }
     }
 
     bind(doc) {
         this.doc = doc;
-        this.setDocValue();
+        this.refresh();
     }
 
     refresh() {
-        this.setDocValue();
+        if (this.template) {
+            this.renderTemplate();
+        } else {
+            this.setDocValue();
+        }
+    }
+
+    renderTemplate() {
+        if (this.form.doc) {
+            this.wrapper.innerHTML = this.template(this.form.doc, this.doc);
+        } else {
+            this.wrapper.innerHTML = '';
+        }
     }
 
     setDocValue() {
-        if (this.doc) {
+        if (this.doc && !this.template) {
             this.setInputValue(this.doc.get(this.fieldname));
         }
     }

client/view/controls/link.js

@@ -34,10 +34,14 @@ class LinkControl extends BaseControl {
             if (e.text && e.text.value === '__newItem') {
                 e.preventDefault();
                 const newDoc = await frappe.getNewDoc(this.target);
-                const formModal = frappe.desk.showFormModal(this.target, newDoc.name);
+                const formModal = await frappe.desk.showFormModal(this.target, newDoc.name);
+                if (formModal.form.doc.meta.hasField('name')) {
+                    formModal.form.doc.set('name', this.input.value);
+                }
+
                 formModal.once('submit', async () => {
                     await this.updateDocValue(formModal.form.doc.name);
-                })
+                });
             }
         });
 

client/view/controls/table.js

@@ -27,7 +27,7 @@ class TableControl extends BaseControl {
         this.datatable = new DataTable(this.wrapper.querySelector('.datatable-wrapper'), {
             columns: this.getColumns(),
             data: this.getTableData(),
-            takeAvailableSpace: true,
+            layout: 'fluid',
             addCheckboxColumn: true,
             getEditor: this.getTableInput.bind(this),
         });
@@ -127,7 +127,6 @@ class TableControl extends BaseControl {
                 id: field.fieldname,
                 field: field,
                 content: field.label,
-                width: 120,
                 editable: (this.disabled || field.disabled) ? false : true,
                 sortable: false,
                 resizable: true,

client/view/form.js

@@ -132,7 +132,7 @@ module.exports = class BaseForm extends Observable {
                 // only single value changed
                 let control = this.controls[params.fieldname];
                 if (control && control.getInputValue() !== control.format(params.fieldname)) {
-                    control.setDocValue();
+                    control.refresh();
                 }
             } else {
                 // multiple values changed

model/meta.js

@@ -13,6 +13,10 @@ module.exports = class BaseMeta extends BaseDocument {
         }
     }
 
+    hasField(fieldname) {
+        return this.getField(fieldname) ? true : false;
+    }
+
     getField(fieldname) {
         if (!this._field_map) {
             this._field_map = {};