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:
parent
497c2ab742
commit
d3c55e041c
@ -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
54
client/view/formLayout.js
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user