2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 03:19:01 +00:00

[refactor] FormLayout for repurposing layouts

This commit is contained in:
Prateeksha Singh 2018-03-26 19:13:06 +05:30
parent 497c2ab742
commit d3c55e041c
2 changed files with 67 additions and 52 deletions

View File

@ -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);

54
client/view/formLayout.js Normal file
View File

@ -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;
}
}
}
}