frappe/public/js/wn/form/layout.js

wn.ui.form.Layout = Class.extend({
	init: function(opts) {
		this.labelled_section_count = 0;
		this.ignore_types = ["Section Break", "Column Break"];
		$.extend(this, opts);
		this.make();
		this.render();
	},
	make: function() {
		this.wrapper = $('<div class="form-layout">').appendTo(this.parent);
		this.fields = wn.meta.get_docfields(this.frm.doctype, this.frm.docname);
		this.setup_tabbing();
	},
	refresh: function() {
		var me = this;
		$.each(this.frm.fields, function(i, fieldobj) {
			fieldobj.docname = me.frm.docname;
			fieldobj.df = wn.meta.get_docfield(me.frm.doctype, 
				fieldobj.df.fieldname, me.frm.docname);
			fieldobj.refresh && fieldobj.refresh();
		})
	},
	render: function() {
		var me = this;
		
		this.section = null;
		this.column = null;
		if(this.fields[0] && this.fields[0].fieldtype!="Section Break") {
			this.make_section();
		}
		$.each(this.fields, function(i, df) {
			switch(df.fieldtype) {
				case "Section Break":
					me.make_section(df);
					break;
				case "Column Break":
					me.make_column(df);
					break;
				default:
					me.make_field(df);
			}
		});
	},
	make_column: function(df) {
		this.column = $('<div class="form-column">\
			<form>\
				<fieldset></fieldset>\
			</form>\
		</div>').appendTo(this.section.body)
			.find("form")
			.on("submit", function() { return false; })
			.find("fieldset");
		
		// distribute all columns equally
		var colspan = cint(12 / this.section.find(".form-column").length);
		this.section.find(".form-column").removeClass()
			.addClass("form-column")
			.addClass("col col-lg-" + colspan);
	},
	make_field: function(df, colspan) {
		!this.column && this.make_column();
		var fieldobj = make_field(df, this.doctype, this.column.get(0), this.frm);
		this.frm.fields.push(fieldobj);
		this.frm.fields_dict[df.fieldname] = fieldobj;
		fieldobj.perm = this.frm.perm;
	},
	make_section: function(df) {
		if(this.section) {
			//$("<hr>").appendTo(this.wrapper);
		}
		this.section = $('<div class="row">')
			.appendTo(this.wrapper);
		this.frm.sections.push(this.section);
		
		var section = this.section[0];
		section.df = df;
		if(df) {
			if(df.label) {
				this.labelled_section_count++;
				$('<h3 class="col col-lg-12">' 
					+ (df.options ? (' <i class="text-muted '+df.options+'"></i> ') : "") 
					+ '<span class="section-count-label">' + this.labelled_section_count + "</span>. " 
					+ wn._(df.label)
					+ "</h3>")
					.css({
						"font-weight": "bold",
					})
					.appendTo(this.section);
				if(this.frm.sections.length > 1)
					this.section.css({
						"margin-top": "15px", 
						"border-top": "1px solid #ddd"
					});
			}
			if(df.description) {
				$('<div class="col col-lg-12 small text-muted">' + df.description + '</div>').appendTo(this.section);
			}
			if(df.label || df.description) {
				// spacer
				$('<div class="col col-lg-12"></div>')
					.appendTo(this.section)
					.css({"height": "20px"});
			}
			this.frm.fields_dict[df.fieldname] = section;
			this.frm.fields.push(section);
		}
		// for bc
		this.section.body = $('<div style="padding: 0px 3%">').appendTo(this.section);
		section.row = {
			wrapper: section
		};
		section.refresh = function() {
			$(this).toggle(!this.df.hidden)
		}
		this.column = null;
		if(df && df.hidden) {
			this.section.toggle(false);
		}
		return this.section;
	},
	refresh_section_count: function() {
		this.wrapper.find(".section-count-label:visible").each(function(i) {
			$(this).html(i+1);
		});
	},
	setup_tabbing: function() {
		var me = this;
		this.wrapper.on("keydown", function(ev) {
			if(ev.which==9) {
				var current = $(ev.target).trigger("change"),
					doctype = current.attr("data-doctype"),
					fieldname = current.attr("data-fieldname");
				if(doctype)
					return me.handle_tab(doctype, fieldname, ev.shiftKey);
			}
		})
	},
	handle_tab: function(doctype, fieldname, shift) {
		var me = this,
			grid_row = null;
			prev = null,
			fields = me.frm.fields,
			in_grid = false;
			
		// in grid
		if(doctype != me.frm.doctype) {
			grid_row =me.get_open_grid_row() 
			fields = grid_row.fields;
		}
								
		for(var i=0, len=fields.length; i < len; i++) {
			if(fields[i].df.fieldname==fieldname) {
				if(shift) {
					if(prev) {
						this.set_focus(prev)
					} else {
						$(cur_frm.wrapper).find(".btn-primary").focus();
					}
					break;
				}
				if(i==len-1) {
					// last field in this group
					if(grid_row) {
						// in grid
						if(grid_row.doc.idx==grid_row.grid.grid_rows.length) {
							// last row, close it and find next field
							grid_row.toggle_view(false, function() {
								me.handle_tab(grid_row.grid.df.parent, grid_row.grid.df.fieldname);
							})
						} else {
							// next row
							grid_row.grid.grid_rows[grid_row.doc.idx].toggle_view(true);
						}
					} else {
						$(cur_frm.wrapper).find(".btn-primary").focus();
					}
				} else {
					me.focus_on_next_field(i, fields);
				}
				
				break;
			}
			if(fields[i].disp_status==="Write")
				prev = fields[i];
		}
		return false;
	},
	focus_on_next_field: function(start_idx, fields) {
		// loop to find next eligible fields
		for(var i= start_idx + 1, len = fields.length; i < len; i++) {
			if(fields[i].disp_status==="Write" && !in_list(wn.model.no_value_type, fields[i].df.fieldtype)) {
				this.set_focus(fields[i]);
				break;
			}
		}
	},
	set_focus: function(field) {
		// next is table, show the table
		if(field.df.fieldtype=="Table") {
			if(!field.grid.grid_rows.length) {
				field.grid.add_new_row(1);
			} else {
				field.grid.grid_rows[0].toggle_view(true);
			}
		}
		else if(field.editor) {
			field.editor.set_focus();
		}
		else if(field.$input) {
			field.$input.focus();
		}
	},
	get_open_grid_row: function() {
		return $(".grid-row-open").data("grid_row");
	},
	
	// dashboard
	clear_dashboard: function() {
		this.dashboard.empty();
	},
	add_doctype_badge: function(doctype, fieldname) {
		if(wn.model.can_read(doctype)) {
			this.add_badge(wn._(doctype), function() {
				wn.route_options = {};
				wn.route_options[fieldname] = cur_frm.doc.name;
				wn.set_route("List", doctype);
			}).attr("data-doctype", doctype);
		}
	},
	add_badge: function(label, onclick) {
		var badge = $(repl('<div class="col col-lg-4">\
			<div class="alert alert-badge">\
				<a class="badge-link">%(label)s</a>\
				<span class="badge pull-right">-</span>\
			</div></div>', {label:label}))
				.appendTo(this.dashboard)
				
		badge.find(".badge-link").click(onclick);
				
		return badge.find(".alert-badge");
	},
	set_badge_count: function(data) {
		var me = this;
		$.each(data, function(doctype, count) {
			$(me.dashboard)
				.find(".alert-badge[data-doctype='"+doctype+"'] .badge")
				.html(cint(count));
		});
	},
})