[controls] Barcode Control (#4335)

* [start] display barcode based on input

* [wip]

* [barcode] use set_value

* parse and set

* remove quagga

* [barcode] set in db

* [fix] set height

* cleanup

* remove from build.json, require instead

* [fix] declare JsBarcode global in .eslintrc

.eslintrc

@@ -119,7 +119,6 @@
 		"getCookies": true,
 		"get_url_arg": true,
 		"QUnit": true,
-		"Snap": true,
+		"JsBarcode": true
-		"mina": true
 	}
 }

frappe/core/doctype/docfield/docfield.json

@@ -96,7 +96,7 @@
    "no_copy": 0, 
    "oldfieldname": "fieldtype", 
    "oldfieldtype": "Select", 
-   "options": "Attach\nAttach Image\nButton\nCheck\nCode\nColor\nColumn Break\nCurrency\nData\nDate\nDatetime\nDynamic Link\nFloat\nFold\nHeading\nHTML\nImage\nInt\nLink\nLong Text\nPassword\nPercent\nRead Only\nSection Break\nSelect\nSmall Text\nTable\nText\nText Editor\nTime\nSignature", 
+   "options": "Attach\nAttach Image\nBarcode\nButton\nCheck\nCode\nColor\nColumn Break\nCurrency\nData\nDate\nDatetime\nDynamic Link\nFloat\nFold\nHeading\nHTML\nImage\nInt\nLink\nLong Text\nPassword\nPercent\nRead Only\nSection Break\nSelect\nSmall Text\nTable\nText\nText Editor\nTime\nSignature", 
    "permlevel": 0, 
    "print_hide": 0, 
    "print_hide_if_no_value": 0, 
@@ -1364,7 +1364,7 @@
  "issingle": 0, 
  "istable": 1, 
  "max_attachments": 0, 
- "modified": "2017-08-29 15:30:55.489568", 
+ "modified": "2017-10-07 19:20:15.888708", 
  "modified_by": "Administrator", 
  "module": "Core", 
  "name": "DocField", 

frappe/custom/doctype/customize_form/customize_form.py

@@ -66,7 +66,7 @@ docfield_properties = {
 
 allowed_fieldtype_change = (('Currency', 'Float', 'Percent'), ('Small Text', 'Data'),
 	('Text', 'Data'), ('Text', 'Text Editor', 'Code', 'Signature'), ('Data', 'Select'),
-	('Text', 'Small Text'))
+	('Text', 'Small Text'), ('Text', 'Data', 'Barcode'))
 
 allowed_fieldtype_for_options_change = ('Read Only', 'HTML', 'Select',)
 

frappe/custom/doctype/customize_form_field/customize_form_field.json

@@ -94,7 +94,7 @@
    "no_copy": 0, 
    "oldfieldname": "fieldtype", 
    "oldfieldtype": "Select", 
-   "options": "Attach\nAttach Image\nButton\nCheck\nCode\nColor\nColumn Break\nCurrency\nData\nDate\nDatetime\nDynamic Link\nFloat\nFold\nHeading\nHTML\nImage\nInt\nLink\nLong Text\nPassword\nPercent\nRead Only\nSection Break\nSelect\nSignature\nSmall Text\nTable\nText\nText Editor\nTime", 
+   "options": "Attach\nAttach Image\nBarcode\nButton\nCheck\nCode\nColor\nColumn Break\nCurrency\nData\nDate\nDatetime\nDynamic Link\nFloat\nFold\nHeading\nHTML\nImage\nInt\nLink\nLong Text\nPassword\nPercent\nRead Only\nSection Break\nSelect\nSignature\nSmall Text\nTable\nText\nText Editor\nTime", 
    "permlevel": 0, 
    "print_hide": 0, 
    "print_hide_if_no_value": 0, 
@@ -1202,7 +1202,7 @@
  "issingle": 0, 
  "istable": 1, 
  "max_attachments": 0, 
- "modified": "2017-07-06 17:24:03.665171", 
+ "modified": "2017-10-11 06:45:20.172291", 
  "modified_by": "Administrator", 
  "module": "Custom", 
  "name": "Customize Form Field", 

frappe/model/db_schema.py

@@ -44,6 +44,7 @@ type_map = {
 	,'Attach Image':('text', '')
 	,'Signature':	('longtext', '')
 	,'Color':		('varchar', varchar_len)
+	,'Barcode':		('longtext', '')
 }
 
 default_columns = ['name', 'creation', 'modified', 'modified_by', 'owner',

frappe/public/build.json

@@ -52,7 +52,8 @@
 		"public/js/frappe/form/controls/button.js",
 		"public/js/frappe/form/controls/html.js",
 		"public/js/frappe/form/controls/heading.js",
-		"public/js/frappe/form/controls/autocomplete.js"
+		"public/js/frappe/form/controls/autocomplete.js",
+		"public/js/frappe/form/controls/barcode.js"
 	],
 	"js/dialog.min.js": [
 		"public/js/frappe/dom.js",

frappe/public/css/desk.css

@@ -440,6 +440,9 @@ fieldset[disabled] .form-control {
     top: 26px;
   }
 }
+.barcode-wrapper {
+  text-align: center;
+}
 @media (min-width: 768px) {
   .video-modal .modal-dialog {
     width: 700px;

frappe/public/js/frappe/form/controls/barcode.js

@@ -0,0 +1,34 @@
+frappe.ui.form.ControlBarcode = frappe.ui.form.ControlData.extend({
+	make_wrapper() {
+		// Create the elements for barcode area
+		this._super();
+
+		let $input_wrapper = this.$wrapper.find('.control-input-wrapper');
+		this.barcode_area = $(`<div class="barcode-wrapper border"><svg height=80></svg></div>`);
+		frappe.require("assets/frappe/js/lib/JsBarcode.all.min.js", () => {
+			this.barcode_area.appendTo($input_wrapper);
+		});
+	},
+
+	parse(value) {
+		// Parse raw value
+		return this.get_barcode_html(value);
+	},
+
+	set_formatted_input(value) {
+		// Set values to display
+		const svg = value;
+		const barcode_value = $(svg).attr('data-barcode-value');
+
+		this.$input.val(barcode_value);
+		this.barcode_area.html(svg);
+	},
+
+	get_barcode_html(value) {
+		// Get svg
+		const svg = this.barcode_area.find('svg')[0];
+		JsBarcode(svg, value, {height: 40});
+		$(svg).attr('data-barcode-value', value);
+		return this.barcode_area.html();
+	}
+});

frappe/public/less/desk.less

@@ -245,6 +245,10 @@ textarea.form-control {
 	}
 }
 
+.barcode-wrapper {
+	text-align: center;
+}
+
 @media (min-width: 768px) {
 	.video-modal .modal-dialog {
 		width: 700px;