fix: table and refactor updating dynamic data (#288)

frappe · Jun 18, 2024 · 53ea9be · 53ea9be
2 parents d46957b + 4fc615a
commit 53ea9be
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
-		}
-	);
 };