feat: add barcode option to show text

print_designer/patches.txt

@@ -4,4 +4,5 @@ print_designer.patches.introduce_jinja
 print_designer.patches.introduce_schema_versioning
 print_designer.patches.rerun_introduce_jinja
 print_designer.patches.introduce_table_alt_row_styles
-print_designer.patches.introduce_column_style
+print_designer.patches.introduce_column_style
+print_designer.patches.barcode_show_text

print_designer/patches/barcode_show_text.py

@@ -0,0 +1,9 @@
+import frappe
+
+
+def execute():
+    for name, print_format in frappe.get_all("Print Format", filters={"print_designer": 1}, fields=["name", "print_designer_settings"], as_list=1):
+        print_format = frappe.parse_json(print_format)
+        if print_format and "barcode" in print_format["globalStyles"]:
+            print_format["globalStyles"]["barcode"]["showBarcodeText"] = True
+            frappe.set_value("Print Format", name, "print_designer_settings", frappe.as_json(print_format))

print_designer/print_designer/page/print_designer/jinja/main.html

@@ -75,6 +75,7 @@
     style="width:100%;height:100%; {{convert_css(element.style)}}"
     class="barcode {{ element.classes | join(' ') }}"
 >{% if value %}{{get_barcode(element.barcodeFormat, value|string, {
+	"show_text": element.barcodeShowText,
     "module_color": element.barcodeColor or "#000000",
     "foreground": element.barcodeColor or "#ffffff",
     "background": element.barcodeBackgroundColor or "#ffffff",
@@ -274,4 +275,4 @@
 .flexDirectionColumn .baseSpanTag .valueSpanTag {
 		display: block;
 	}
-</style>
+</style>

print_designer/print_designer/page/print_designer/print_designer.py

@@ -218,7 +218,6 @@ def get_barcode(
 		return get_qrcode(barcode_value, options, png_base64)
 
 	from io import BytesIO
-
 	import barcode
 	from barcode.writer import ImageWriter, SVGWriter
 
@@ -263,7 +262,8 @@ def _init(self, code):
 		)
 
 	stream = BytesIO()
-	barcode.write(stream, options)
+	show_text = options.pop("show_text")
+	barcode.write(stream, options, text="" if not show_text else None)
 	barcode_value = stream.getvalue().decode("utf-8")
 	stream.close()
 
@@ -302,4 +302,4 @@ def get_qrcode(barcode_value, options=None, png_base64=False):
 		qrcode_svg = stream.getvalue().decode("utf-8")
 		stream.close()
 
-	return {"type": "png_base64" if png_base64 else "svg", "value": qrcode_svg}
+	return {"type": "png_base64" if png_base64 else "svg", "value": qrcode_svg}

print_designer/public/js/print_designer/PropertiesPanelState.js

@@ -1203,34 +1203,79 @@ export const createPropertiesPanel = () => {
 			(MainStore.getCurrentElementsId.length === 1 &&
 				MainStore.getCurrentElementsValues[0].type === "barcode"),
 		fields: [
-			{
-				label: "Barcode Format",
-				name: "barcodeFormat",
-				isLabelled: true,
-				condtional: null,
-				frappeControl: (ref, name) => {
-					const MainStore = useMainStore();
-					const { barcodeFormats } = storeToRefs(MainStore);
-					makeFeild({
-						name: name,
-						ref: ref,
-						fieldtype: "Autocomplete",
-						requiredData: [
-							barcodeFormats,
-							MainStore.getCurrentElementsValues[0] ||
-								MainStore.globalStyles["barcode"],
-						],
-						options: () => barcodeFormats.value,
-						reactiveObject: () => {
-							return (
+			[
+				{
+					label: "Barcode Format",
+					name: "barcodeFormat",
+					isLabelled: true,
+					condtional: null,
+					frappeControl: (ref, name) => {
+						const MainStore = useMainStore();
+						const { barcodeFormats } = storeToRefs(MainStore);
+						makeFeild({
+							name: name,
+							ref: ref,
+							fieldtype: "Autocomplete",
+							requiredData: [
+								barcodeFormats,
 								MainStore.getCurrentElementsValues[0] ||
-								MainStore.globalStyles["barcode"]
-							);
-						},
-						propertyName: "barcodeFormat",
-					});
+									MainStore.globalStyles["barcode"],
+							],
+							options: () => barcodeFormats.value,
+							reactiveObject: () => {
+								return (
+									MainStore.getCurrentElementsValues[0] ||
+									MainStore.globalStyles["barcode"]
+								);
+							},
+							propertyName: "barcodeFormat",
+						});
+					},
 				},
-			},
+			],
+			[
+				{
+					label: "Show Text",
+					name: "barcodeShowText",
+					isLabelled: true,
+					condtional: () => {
+						return  MainStore.getCurrentElementsValues[0].barcodeFormat !== "qrcode";
+					},
+					frappeControl: (ref, name) => {
+						const MainStore = useMainStore();
+						makeFeild({
+							name: name,
+							ref: ref,
+							fieldtype: "Select",
+							requiredData: [
+								MainStore.getCurrentElementsValues[0] ||
+									MainStore.globalStyles["barcode"],
+							],
+							options: () => ([
+								{ label: "Yes", value: "Yes" },
+								{ label: "No", value: "No" },
+							]),
+							reactiveObject: () => {
+								return (
+									MainStore.getCurrentElementsValues[0] ||
+									MainStore.globalStyles["barcode"]
+								);
+							},
+							propertyName: "barcodeShowText",
+							formatValue: (object, property) => {
+								if (!object) return;
+								return (object[property] === undefined || object[property]) ? "Yes" : "No";
+							},
+							onChangeCallback: (value = null) => {
+								if (value && MainStore.getCurrentElementsValues[0]) {
+									MainStore.getCurrentElementsValues[0]["barcodeShowText"] = value !== "No"
+									MainStore.frappeControls["barcodeShowText"].$input.blur();
+								}
+							},
+						});
+					},
+				}
+			],
 			[
 				colorStyleFrappeControl("Color", "barcodeColor", "barcodeColor", false, false),
 				colorStyleFrappeControl(

print_designer/public/js/print_designer/components/base/BaseBarcode.vue

@@ -61,7 +61,7 @@ const {
 	value,
 	dynamicContent,
 	barcodeFormat,
-	barcodeColor,
+	barcodeShowText,barcodeColor,
 	barcodeBackgroundColor,
 	startX,
 	startY,
@@ -133,7 +133,7 @@ watch(
 				options["module_color"] = barcodeColor.value || "#000000";
 			} else {
 				options["foreground"] = barcodeColor.value || "#000000";
-			}
+			options["show_text"] = barcodeShowText.value;}
 			let finalValue = value.value;
 			if (finalValue != "") {
 				try {

print_designer/public/js/print_designer/components/layout/AppBarcodePreviewModal.vue

@@ -121,7 +121,7 @@ const setLabel = (value) => {
 		label.value = value;
 	}
 };
-const { barcodeColor, barcodeBackgroundColor, isDynamic, barcodeFormat, style } = toRefs(
+const { barcodeColor, barcodeBackgroundColor, isDynamic, barcodeFormat, barcodeShowText, style } = toRefs(
 	MainStore.getCurrentElementsValues[0]
 );
 onMounted(() => {
@@ -195,6 +195,7 @@ const setBarcode = async () => {
 			options["module_color"] = barcodeColor.value || "#000000";
 		} else {
 			options["foreground"] = barcodeColor.value || "#000000";
+			options["show_text"] = barcodeShowText.value;
 		}
 		let value = props.fieldnames[0].value;
 		if (props.fieldnames[0].parseJinja && value != "") {
@@ -227,7 +228,7 @@ const setBarcode = async () => {
 };
 
 watch(
-	() => [props.fieldnames, barcodeFormat.value, MainStore.mainParsedJinjaData],
+	() => [props.fieldnames, barcodeFormat.value, barcodeShowText.value, MainStore.mainParsedJinjaData],
 	() => setBarcode(),
 	{ deep: true, immediate: true }
 );

print_designer/public/js/print_designer/defaultObjects.js

@@ -100,6 +100,7 @@ export const createBarcode = (cordinates, parent = null) => {
 		id: id,
 		type: "barcode",
 		barcodeFormat: MainStore.globalStyles["barcode"].barcodeFormat || "qrcode",
+		barcodeShowText: MainStore.globalStyles["barcode"].barcodeShowText === undefined || MainStore.globalStyles["barcode"].barcodeShowText === "Yes",
 		barcodeColor: "#000000",
 		barcodeBackgroundColor: "#ffffff",
 		DOMRef: null,
@@ -441,4 +442,5 @@ export const barcodeFormats = [
 	{ label: "ITF", value: "itf" },
 	{ label: "GS1", value: "gs1" },
 	{ label: "Gs1_128", value: "gs1_128" },
-];
+]
+;