From 4fc615a9a40fe7d179b743e91fa81fc032061d77 Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Tue, 18 Jun 2024 17:02:25 +0530
Subject: [PATCH] fix: table and refactor updating dynamic data

- updated jinja template
- updated dynamic data update to account for Image field
- refactored formattedValue and updateDynamicData to be dry
- fixed drag and drop bug in table control
---
 .../print_designer/jinja/macros/spantag.html  |   4 +
 .../js/print_designer/PropertiesPanelState.js |   4 +
 .../base/BaseDynamicTextSpanTag.vue           |  74 +--------
 .../components/base/BaseTable.vue             |   4 +-
 .../components/layout/AppDynamicTextModal.vue |  42 ++---
 .../js/print_designer/store/MainStore.js      |   3 +-
 .../print_designer/store/fetchMetaAndData.js  |  59 --------
 .../public/js/print_designer/utils.js         | 143 +++++++++++++++---
 8 files changed, 157 insertions(+), 176 deletions(-)

diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html b/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
index 587c202..a96ffe9 100644
--- a/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
+++ b/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
@@ -15,7 +15,11 @@
         {%- set value = _(frappe.db.get_value(field.doctype, doc[field.parentField], field.fieldname)) -%}
         {{ frappe.format(value, {'fieldtype': field.fieldtype, 'options': field.options}) }}
     {%- elif row -%}
+    {%- if field.fieldtype == "Image" and row.get(field['options']) -%}
+        <img class="print-item-image" src="{{ row.get(field['options']) }}" alt="">
+    {%- else -%}
         {{row.get_formatted(field.fieldname)}}
+    {%- endif -%}
     {%- else -%}
         {{doc.get_formatted(field.fieldname)}}
     {%- endif -%}
diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js
index f631fd7..c9e9b3d 100644
--- a/print_designer/public/js/print_designer/PropertiesPanelState.js
+++ b/print_designer/public/js/print_designer/PropertiesPanelState.js
@@ -704,6 +704,7 @@ export const createPropertiesPanel = () => {
 									fieldtype: "Int",
 									label: "No",
 									options: undefined,
+									tableName: currentEL["table"],
 								};
 								if (value && currentEL) {
 									currentEL["table"] = MainStore.metaFields.find(
@@ -755,6 +756,9 @@ export const createPropertiesPanel = () => {
 														dlKeys[index]
 													],
 												];
+												col.dynamicContent.forEach((dc) => {
+													dc.tableName = currentEL["table"].fieldname;
+												});
 												col.label =
 													col.dynamicContent[0].label ||
 													col.dynamicContent[0].fieldname;
diff --git a/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue b/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
index 1ce3d5a..5edd3b5 100644
--- a/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
@@ -62,6 +62,7 @@
 <script setup>
 import { useMainStore } from "../../store/MainStore";
 import { ref, watch, onMounted } from "vue";
+import { getFormattedValue } from "../../utils";
 
 const selectDynamicText = (isLabel = false) => {
 	props.field.labelStyleEditing = isLabel;
@@ -101,7 +102,7 @@ const props = defineProps({
 });
 
 const parsedValue = ref("");
-const row = ref({});
+const row = ref(null);
 
 onMounted(() => {
 	watch(
@@ -116,43 +117,6 @@ onMounted(() => {
 	);
 });
 
-const parseJinja = async () => {
-	if (props.field.value != "" && props.field.parseJinja) {
-		try {
-			// call render_user_text_withdoc method using frappe.call and return the result
-			const MainStore = useMainStore();
-			let result = await frappe.call({
-				method: "print_designer.print_designer.page.print_designer.print_designer.render_user_text_withdoc",
-				args: {
-					string: props.field.value,
-					doctype: MainStore.doctype,
-					docname: MainStore.currentDoc,
-					row: row.value,
-					send_to_jinja: MainStore.mainParsedJinjaData || {},
-				},
-			});
-			result = result.message;
-			if (result.success) {
-				parsedValue.value = result.message;
-			} else {
-				console.error("Error From User Provided Jinja String\n\n", result.error);
-			}
-		} catch (error) {
-			console.error("Error in Jinja Template\n", { value_string: props.field.value, error });
-			frappe.show_alert(
-				{
-					message: "Unable Render Jinja Template. Please Check Console",
-					indicator: "red",
-				},
-				5
-			);
-			parsedValue.value = props.field.value;
-		}
-	} else {
-		parsedValue.value = props.field.value;
-	}
-};
-
 watch(
 	() => [
 		props.field.value,
@@ -162,39 +126,7 @@ watch(
 		row.value,
 	],
 	async () => {
-		const isDataAvailable = props.table
-			? row.value
-			: Object.keys(MainStore.docData).length > 0;
-		if (props.field.is_static) {
-			if (props.field.parseJinja) {
-				parseJinja();
-				return;
-			}
-			parsedValue.value = props.field.value;
-			return;
-		} else if (props.table) {
-			if (isDataAvailable && typeof row.value[props.field.fieldname] != "undefined") {
-				parsedValue.value = frappe.format(
-					row.value[props.field.fieldname],
-					{ fieldtype: props.field.fieldtype, options: props.field.options },
-					{ inline: true },
-					row.value
-				);
-			} else {
-				parsedValue.value =
-					["Image, Attach Image"].indexOf(props.field.fieldtype) != -1
-						? null
-						: `{{ ${props.field.fieldname} }}`;
-			}
-			return;
-		} else {
-			parsedValue.value =
-				props.field.value ||
-				`{{ ${props.field.parentField ? props.field.parentField + "." : ""}${
-					props.field.fieldname
-				} }}`;
-			return;
-		}
+		parsedValue.value = await getFormattedValue(props.field, row);
 	},
 	{ immediate: true, deep: true }
 );
diff --git a/print_designer/public/js/print_designer/components/base/BaseTable.vue b/print_designer/public/js/print_designer/components/base/BaseTable.vue
index 76f4b92..35b2e27 100644
--- a/print_designer/public/js/print_designer/components/base/BaseTable.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseTable.vue
@@ -17,7 +17,7 @@
 	>
 		<div
 			:style="['overflow: hidden;', widthHeightStyle(width, height)]"
-			@click.stop.self="
+			@click.self="
 				() => {
 					selectedColumn = null;
 					selectedDynamicText = null;
@@ -49,7 +49,7 @@
 							@dragleave="dragleave"
 							@dragover="allowDrop"
 							@contextmenu.prevent="handleMenu($event, index)"
-							@mousedown.self="handleColumnClick(column)"
+							@mousedown="handleColumnClick(column)"
 							@dblclick.stop="handleDblClick(table, column)"
 							:ref="
 								(el) => {
diff --git a/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue b/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
index 11c0e0d..1d50c45 100644
--- a/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
@@ -148,6 +148,7 @@ import { useMainStore } from "../../store/MainStore";
 import AppModal from "./AppModal.vue";
 import IconsUse from "../../icons/IconsUse.vue";
 import AppDynamicPreviewModal from "./AppDynamicPreviewModal.vue";
+import { getFormattedValue } from "../../utils";
 const MainStore = useMainStore();
 const props = defineProps({
 	openDynamicModal: {
@@ -215,15 +216,21 @@ const parentFieldWatcher = watch(
 
 onMounted(() => {
 	if (props.openDynamicModal) {
-		fieldnames.value = props.openDynamicModal.dynamicContent;
+		fieldnames.value = props.openDynamicModal.dynamicContent || [];
 		selectedDoctypeLabel.value = MainStore.doctype;
-		if (props.table) {
-			fieldnames.value = props.openDynamicModal.dynamicContent || [];
-		}
 		fieldnames.value.findIndex((fd) => fd.print_hide) != -1 && (hiddenFields.value = true);
 		if (!hiddenFields.value) {
 			hiddenFields.value = MainStore.isHiddenFieldsVisible;
 		}
+		fieldnames.value.forEach(async (field) => {
+			let rowValue = null;
+			if (props.table) {
+				rowValue = MainStore.docData[props.table.fieldname][0];
+				field.value = await getFormattedValue(field, rowValue);
+			} else {
+				field.value = await getFormattedValue(field, null);
+			}
+		});
 	}
 });
 
@@ -270,28 +277,11 @@ const selectField = async (field, fieldtype) => {
 	});
 	if (isRemoved) return;
 	let index = fieldnames.value.length;
-	let value = previewRef.value.parentField
-		? await getValue(
-				doctype.value,
-				MainStore.docData[previewRef.value.parentField],
-				field.fieldname
-		  )
-		: props.table
-		? MainStore.docData[props.table.fieldname]?.length &&
-		  typeof MainStore.docData[props.table.fieldname][0][field.fieldname] != "undefined"
-			? frappe.format(
-					MainStore.docData[props.table.fieldname][0][field.fieldname],
-					{ fieldtype: field.fieldtype, options: field.options },
-					{ inline: true },
-					MainStore.docData
-			  )
-			: `{{ ${field.fieldname} }}`
-		: frappe.format(
-				MainStore.docData[field.fieldname],
-				{ fieldtype: field.fieldtype, options: field.options },
-				{ inline: true },
-				MainStore.docData
-		  );
+	let rowValue = null;
+	if (props.table) {
+		rowValue = MainStore.docData[props.table.fieldname][0];
+	}
+	let value = await getFormattedValue(field, rowValue);
 	if (!value) {
 		if (["Image, Attach Image"].indexOf(field.fieldtype) != -1) {
 			value = null;
diff --git a/print_designer/public/js/print_designer/store/MainStore.js b/print_designer/public/js/print_designer/store/MainStore.js
index 23c1275..2cd78d4 100644
--- a/print_designer/public/js/print_designer/store/MainStore.js
+++ b/print_designer/public/js/print_designer/store/MainStore.js
@@ -301,6 +301,7 @@ export const useMainStore = defineStore("MainStore", {
 								fieldtype: "Int",
 								label: "No",
 								options: undefined,
+								table: selectedTable,
 							},
 						];
 					}
@@ -468,7 +469,7 @@ export const useMainStore = defineStore("MainStore", {
 				) {
 					return object.selectedDynamicText?.[styleEditMode][propertyName];
 				}
-				if (state.isValidValue(object.selectedColumn?.["style"][propertyName])) {
+				if (state.isValidValue(object.selectedColumn?.["style"]?.[propertyName])) {
 					return object.selectedColumn?.["style"][propertyName];
 				}
 				if (state.isValidValue(object[styleEditMode][propertyName])) {
diff --git a/print_designer/public/js/print_designer/store/fetchMetaAndData.js b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
index 28778b8..9c02a6e 100644
--- a/print_designer/public/js/print_designer/store/fetchMetaAndData.js
+++ b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
@@ -131,63 +131,4 @@ export const fetchDoc = async (id = null) => {
 		},
 		{ immediate: true }
 	);
-	const updateDynamicData = async () => {
-		MainStore.dynamicData.forEach(async (el) => {
-			if (el.is_static) return;
-			let value = el.parentField
-				? await getValue(el.doctype, MainStore.docData[el.parentField], el.fieldname)
-				: el.tableName
-				? MainStore.docData[el.tableName][0] &&
-				  frappe.format(
-						MainStore.docData[el.tableName][0][el.fieldname],
-						{ fieldtype: el.fieldtype, options: el.options },
-						{ inline: true },
-						MainStore.docData
-				  )
-				: frappe.format(
-						MainStore.docData[el.fieldname],
-						{ fieldtype: el.fieldtype, options: el.options },
-						{ inline: true },
-						MainStore.docData
-				  );
-			if (typeof value == "string" && value.startsWith("<svg")) {
-				value.match(new RegExp(`data-barcode-value="(.*?)">`));
-				value = result[1];
-			}
-			if (!value) {
-				if (["Image, Attach Image"].indexOf(el.fieldtype) != -1) {
-					value = null;
-				} else {
-					switch (el.fieldname) {
-						case "page":
-							value = "0";
-							break;
-						case "topage":
-							value = "999";
-							break;
-						case "date":
-							value = frappe.datetime.now_date();
-							break;
-						case "time":
-							value = frappe.datetime.now_time();
-							break;
-						default:
-							value = `{{ ${el.parentField ? el.parentField + "." : ""}${
-								el.fieldname
-							} }}`;
-					}
-				}
-			}
-			el.value = value;
-		});
-	};
-	watch(
-		() => MainStore.docData,
-		async () => {
-			if (!Object.keys(MainStore.docData).length) return;
-			await frappe.dom.freeze();
-			await updateDynamicData();
-			await frappe.dom.unfreeze();
-		}
-	);
 };
diff --git a/print_designer/public/js/print_designer/utils.js b/print_designer/public/js/print_designer/utils.js
index 6de214e..63a82ff 100644
--- a/print_designer/public/js/print_designer/utils.js
+++ b/print_designer/public/js/print_designer/utils.js
@@ -37,7 +37,7 @@ import { useElementStore } from "./store/ElementStore";
 import { useDraggable } from "./composables/Draggable";
 import { useResizable } from "./composables/Resizable";
 import { useDropZone } from "./composables/DropZone";
-import { isRef, nextTick } from "vue";
+import { ref, isRef, nextTick } from "vue";
 import { getValue } from "./store/fetchMetaAndData";
 
 export const changeDraggable = (element) => {
@@ -350,27 +350,136 @@ const deleteDynamicReferance = (curobj) => {
 		});
 	}
 };
+export const parseJinja = async (field, row) => {
+	if (field.value != "" && field.parseJinja) {
+		try {
+			// call render_user_text_withdoc method using frappe.call and return the result
+			const MainStore = useMainStore();
+			let result = await frappe.call({
+				method: "print_designer.print_designer.page.print_designer.print_designer.render_user_text_withdoc",
+				args: {
+					string: field.value,
+					doctype: MainStore.doctype,
+					docname: MainStore.currentDoc,
+					row: row,
+					send_to_jinja: MainStore.mainParsedJinjaData || {},
+				},
+			});
+			result = result.message;
+			if (result.success) {
+				return result.message;
+			} else {
+				console.error("Error From User Provided Jinja String\n\n", result.error);
+			}
+		} catch (error) {
+			console.error("Error in Jinja Template\n", { value_string: field.value, error });
+			frappe.show_alert(
+				{
+					message: "Unable Render Jinja Template. Please Check Console",
+					indicator: "red",
+				},
+				5
+			);
+			return field.value;
+		}
+	} else {
+		return field.value;
+	}
+};
+
+export const getFormattedValue = async (field, row = null) => {
+	const MainStore = useMainStore();
+	const formattedValue = ref(field.value);
+	if (isRef(row)) {
+		row = row.value;
+	}
+	if (!row && field.tableName && Object.keys(MainStore.docData).length > 0) {
+		row = MainStore.docData[field.tableName][0];
+	}
+
+	const isDataAvailable = !!row || Object.keys(MainStore.docData).length > 0;
+	if (field.is_static) {
+		if (field.parseJinja) {
+			formattedValue.value = await parseJinja(field, row);
+		}
+		return formattedValue.value;
+	} else if (row) {
+		if (field.fieldtype == "Image") {
+			formattedValue.value = frappe.format(
+				row[field.options],
+				{ fieldtype: "Image" },
+				{ inline: true },
+				row
+			);
+			formattedValue.value = `<img class="print-item-image" src="${formattedValue.value}" alt="">`;
+		} else if (isDataAvailable && typeof row[field.fieldname] != "undefined") {
+			formattedValue.value = frappe.format(
+				row[field.fieldname],
+				{ fieldtype: field.fieldtype, options: field.options },
+				{ inline: true },
+				row
+			);
+		} else {
+			formattedValue.value =
+				["Image, Attach Image"].indexOf(field.fieldtype) != -1
+					? null
+					: `{{ ${field.fieldname} }}`;
+		}
+		return formattedValue.value;
+	} else {
+		let rawValue = MainStore.docData[field.fieldname];
+		if (field.parentField) {
+			rawValue = await getValue(
+				field.doctype,
+				MainStore.docData[field.parentField],
+				field.fieldname
+			);
+		}
+		field.value = frappe.format(
+			rawValue,
+			{ fieldtype: field.fieldtype, options: field.options },
+			{ inline: true },
+			MainStore.docData
+		);
+		if (!field.value) {
+			if (["Image, Attach Image"].indexOf(field.fieldtype) != -1) {
+				field.value = null;
+			} else {
+				switch (field.fieldname) {
+					case "page":
+						field.value = "0";
+						break;
+					case "topage":
+						field.value = "999";
+						break;
+					case "date":
+						field.value = frappe.datetime.now_date();
+						break;
+					case "time":
+						field.value = frappe.datetime.now_time();
+						break;
+					default:
+						field.value = `{{ ${field.parentField ? field.parentField + "." : ""}${
+							field.fieldname
+						} }}`;
+				}
+			}
+		}
+		return field.value;
+	}
+};
+
 export const updateDynamicData = async () => {
 	const MainStore = useMainStore();
 	if (!Object.keys(MainStore.docData).length) return;
 	MainStore.dynamicData.forEach(async (el) => {
 		if (el.is_static) return;
-		let value = el.parentField
-			? await getValue(el.doctype, MainStore.docData[el.parentField], el.fieldname)
-			: el.tableName
-			? MainStore.docData[el.tableName][0] &&
-			  frappe.format(
-					MainStore.docData[el.tableName][0][el.fieldname],
-					{ fieldtype: el.fieldtype, options: el.options },
-					{ inline: true },
-					MainStore.docData
-			  )
-			: frappe.format(
-					MainStore.docData[el.fieldname],
-					{ fieldtype: el.fieldtype, options: el.options },
-					{ inline: true },
-					MainStore.docData
-			  );
+		let row;
+		if (el.tableName) {
+			row = MainStore.docData[el.tableName];
+			row && (row = row[0]);
+		}
+		let value = getFormattedValue(el, row);
 		if (typeof value == "string" && value.startsWith("<svg")) {
 			value.match(new RegExp(`data-barcode-value="(.*?)">`));
 			value = result[1];