Batch/Serial Number entry modal (#3298)

* [WIP] add and remove sort of working

* format fields and persistent values

* set available qty

* set editable for non-frm context

* add grid change event and in_place_edit condition

* add set_new_description

* wip soft refresh fields

* [minor] cleanup

frappe/public/js/frappe/form/control.js

@@ -401,6 +401,9 @@ frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
 		}
 		this._description = this.df.description;
 	},
+	set_new_description: function(description) {
+		this.$wrapper.find(".help-box").html(description);
+	},
 	set_empty_description: function() {
 		this.$wrapper.find(".help-box").html("");
 	},
@@ -1315,20 +1318,6 @@ frappe.ui.form.ControlLink = frappe.ui.form.ControlData.extend({
 	},
 	setup_awesomeplete: function() {
 		var me = this;
-		this.$input.on("blur", function() {
-			if(me.selected) {
-				me.selected = false;
-				return;
-			}
-			var value = me.get_value();
-			if(me.doctype && me.docname) {
-				if(value!==me.last_value) {
-					me.parse_validate_and_set_in_model(value);
-				}
-			} else {
-				me.set_mandatory(value);
-			}
-		});
 
 		this.$input.cache = {};
 
@@ -1426,6 +1415,31 @@ frappe.ui.form.ControlLink = frappe.ui.form.ControlData.extend({
 			});
 		});
 
+		this.$input.on("blur", function() {
+			if(me.selected) {
+				me.selected = false;
+				return;
+			}
+			var value = me.get_value();
+			if(me.doctype && me.docname) {
+				if(value!==me.last_value) {
+					me.parse_validate_and_set_in_model(value);
+				}
+			} else {
+				var cache_list = me.$input.cache[me.get_options()];
+				if (cache_list && cache_list[""]) {
+					var docs = cache_list[""].map(item => item.label);
+					if(docs.includes(value)) {
+						me.set_mandatory(value);
+					} else {
+						me.$input.val("");
+					}
+				} else {
+					me.$input.val(value);
+				}
+			}
+		});
+
 		this.$input.on("awesomplete-open", function(e) {
 			me.$wrapper.css({"z-index": 100});
 			me.$wrapper.find('ul').css({"z-index": 100});

frappe/public/js/frappe/form/grid.js

@@ -67,6 +67,9 @@ frappe.ui.form.Grid = Class.extend({
 
 		this.setup_allow_bulk_edit();
 		this.setup_check();
+		if(this.df.on_setup) {
+			this.df.on_setup(this);
+		}
 
 	},
 	setup_check: function() {
@@ -90,6 +93,7 @@ frappe.ui.form.Grid = Class.extend({
 
 		this.remove_rows_button.on('click', function() {
 			var dirty = false;
+
 			me.get_selected().forEach(function(docname) {
 				me.grid_rows_by_docname[docname].remove();
 				dirty = true;
@@ -165,7 +169,6 @@ frappe.ui.form.Grid = Class.extend({
 			this.truncate_rows(data);
 			this.grid_rows_by_docname = {};
 
-
 			for(var ri=0;ri < data.length; ri++) {
 				var d = data[ri];
 
@@ -212,9 +215,11 @@ frappe.ui.form.Grid = Class.extend({
 		this.form_grid.toggleClass('error', !!(this.df.reqd && !(data && data.length)));
 
 		this.refresh_remove_rows_button();
+
+		this.wrapper.trigger('change');
 	},
 	setup_toolbar: function() {
-		if(this.frm && this.is_editable()) {
+		if(this.is_editable()) {
 			this.wrapper.find(".grid-footer").toggle(true);
 
 			// show, hide buttons to add rows
@@ -279,7 +284,7 @@ frappe.ui.form.Grid = Class.extend({
 		if(this.grid_rows) {
 			var same = data.length==this.grid_rows.length
 				&& this.display_status==this.last_display_status
-				&& this.frm.docname==this.last_docname
+				&& (this.frm && this.frm.docname==this.last_docname)
 				&& !$.map(this.grid_rows, function(g, i) {
 					return (g && g.doc && g.doc.name==data[i].name) ? null : true;
 				}).length;
@@ -367,15 +372,20 @@ frappe.ui.form.Grid = Class.extend({
 	},
 	set_value: function(fieldname, value, doc) {
 		if(this.display_status!=="None" && this.grid_rows_by_docname[doc.name]) {
-			this.grid_rows_by_docname[doc.name].refresh_field(fieldname);
+			this.grid_rows_by_docname[doc.name].refresh_field(fieldname, value);
 		}
 	},
 	add_new_row: function(idx, callback, show) {
 		if(this.is_editable()) {
-			var d = frappe.model.add_child(this.frm.doc, this.df.options, this.df.fieldname, idx);
-			d.__unedited = true;
-			this.frm.script_manager.trigger(this.df.fieldname + "_add", d.doctype, d.name);
-			this.refresh();
+			if(this.frm) {
+				var d = frappe.model.add_child(this.frm.doc, this.df.options, this.df.fieldname, idx);
+				d.__unedited = true;
+				this.frm.script_manager.trigger(this.df.fieldname + "_add", d.doctype, d.name);
+				this.refresh();
+			} else {
+				this.df.data.push({name: "batch " + (this.df.data.length+1), idx: this.df.data.length+1});
+				this.refresh();
+			}
 
 			if(show) {
 				if(idx) {
@@ -420,15 +430,27 @@ frappe.ui.form.Grid = Class.extend({
 			// get docfield if from fieldname
 			df = this.fields_map[_df.fieldname];
 
-			if(!df) {
-				throw 'field not found: ' + _df.fieldname;
-			}
-
 			if(!df.hidden
 				&& (this.editable_fields || df.in_list_view)
 				&& (this.frm && this.frm.get_perm(df.permlevel, "read") || !this.frm)
 				&& !in_list(frappe.model.layout_fields, df.fieldtype)) {
 
+					if(df.columns) {
+						df.colsize=df.columns;
+					}
+					else {
+						var colsize=2;
+						switch(df.fieldtype){
+							case"Text":
+							case"Small Text":
+								colsize=3;
+								break;
+							case"Check":
+								colsize=1
+							}
+							df.colsize=colsize
+					}
+
 				if(df.columns) {
 					df.colsize=df.columns;
 				}
@@ -476,7 +498,7 @@ frappe.ui.form.Grid = Class.extend({
 
 
 	is_editable: function() {
-		return this.display_status=="Write" && !this.static_rows
+		return this.display_status=="Write" && !this.static_rows;
 	},
 	is_sortable: function() {
 		return this.sortable_status || this.is_editable();
@@ -649,9 +671,9 @@ frappe.ui.form.GridRow = Class.extend({
 			});
 
 		// no checkboxes if too small
-		if(this.is_too_small()) {
-			this.row_check_html = '';
-		}
+		// if(this.is_too_small()) {
+		// 	this.row_check_html = '';
+		// }
 
 		if(this.grid.template && !this.grid.meta.editable_grid) {
 			this.render_template();
@@ -684,20 +706,31 @@ frappe.ui.form.GridRow = Class.extend({
 		this.grid.refresh_remove_rows_button();
 	},
 	remove: function() {
+		var me = this;
 		if(this.grid.is_editable()) {
-			if(this.get_open_form()) {
-				this.hide_form();
-			}
+			if(this.frm) {
+				if(this.get_open_form()) {
+					this.hide_form();
+				}
 
-			this.frm.script_manager.trigger("before_" + this.grid.df.fieldname + "_remove",
-				this.doc.doctype, this.doc.name);
+				this.frm.script_manager.trigger("before_" + this.grid.df.fieldname + "_remove",
+					this.doc.doctype, this.doc.name);
 
-			//this.wrapper.toggle(false);
-			frappe.model.clear_doc(this.doc.doctype, this.doc.name);
+				//this.wrapper.toggle(false);
+				frappe.model.clear_doc(this.doc.doctype, this.doc.name);
 
-			this.frm.script_manager.trigger(this.grid.df.fieldname + "_remove",
-				this.doc.doctype, this.doc.name);
-			this.frm.dirty();
+				this.frm.script_manager.trigger(this.grid.df.fieldname + "_remove",
+					this.doc.doctype, this.doc.name);
+				this.frm.dirty();
+			} else {
+				this.grid.df.data = this.grid.df.data.filter(function(d) {
+					return d.name !== me.doc.name;
+				})
+				// remap idxs
+				this.grid.df.data.forEach(function(d, i) {
+					d.idx = i+1;
+				});
+			}
 			this.grid.refresh();
 		}
 	},
@@ -785,12 +818,12 @@ frappe.ui.form.GridRow = Class.extend({
 	},
 
 	is_too_small: function() {
-		return this.row.width() < 400;
+		return this.row.width() ? this.row.width() < 300 : false;
 	},
 
 	add_open_form_button: function() {
 		var me = this;
-		if(this.doc) {
+		if(this.doc && !this.grid.df.in_place_edit) {
 			// remove row
 			if(!this.open_form_button) {
 				this.open_form_button = $('<a class="close btn-open-row">\
@@ -839,7 +872,6 @@ frappe.ui.form.GridRow = Class.extend({
 				}
 			}
 		}
-
 	},
 
 	make_column: function(df, colsize, txt, ci) {
@@ -945,11 +977,15 @@ frappe.ui.form.GridRow = Class.extend({
 				.addClass('input-sm')
 				.attr('data-col-idx', column.column_index)
 				.attr('placeholder', __(df.label));
-
 			// flag list input
 			if (this.columns_list && this.columns_list.slice(-1)[0]===column) {
 				field.$input.attr('data-last-input', 1);
 			}
+			field.$input.on('change', function(e) {
+				field.$input.trigger('blur');
+				me.doc[df.fieldname] = field.get_value();
+				me.grid.set_value(df.fieldname, me.doc[df.fieldname], me.doc);
+			});
 		}
 
 		this.set_arrow_keys(field);
@@ -1103,8 +1139,18 @@ frappe.ui.form.GridRow = Class.extend({
 		}
 	},
 	refresh_field: function(fieldname, txt) {
-		var df = this.grid.get_docfield(fieldname);
-		if(txt===undefined) {
+		var df = this.grid.get_docfield(fieldname) || undefined;
+
+		// format values if no frm
+		if(!df) {
+			df = this.grid.visible_columns.find((set) => {
+				return set[0].fieldname === fieldname;
+			})[0];
+
+			if(this.doc) var txt = frappe.format(this.doc[fieldname], df, null, this.doc);
+		}
+
+		if(txt===undefined && this.frm) {
 			var txt = frappe.format(this.doc[fieldname], df,
 				null, this.frm.doc);
 		}
@@ -1113,7 +1159,7 @@ frappe.ui.form.GridRow = Class.extend({
 		var column = this.columns[fieldname];
 		if(column) {
 			column.static_area.html(txt || "");
-			if(df.reqd) {
+			if(df && df.reqd) {
 				column.toggleClass('error', !!(txt===null || txt===''));
 			}
 		}