fix: misc

- show "Not Saved" when dirty
- Toggle Preview only when format is saved
- save a new format on first load

frappe/printing/doctype/print_format/print_format.js

@@ -30,7 +30,11 @@ frappe.ui.form.on("Print Format", {
 						frappe.msgprint(__("Please select DocType first"));
 						return;
 					}
-					frappe.set_route("print-format-builder", frm.doc.name);
+					if (frm.doc.print_format_builder_beta) {
+						frappe.set_route("print-format-builder-beta", frm.doc.name);
+					} else {
+						frappe.set_route("print-format-builder", frm.doc.name);
+					}
 				});
 			}
 			else if (frm.doc.custom_format && !frm.doc.raw_printing) {

frappe/public/js/print_format_builder/Preview.vue

@@ -8,13 +8,26 @@
 				<div ref="preview-type"></div>
 			</div>
 			<div class="col d-flex">
-				<a v-if="url" class="btn btn-default btn-sm btn-new-tab" target="_blank" :href="url">
+				<a
+					v-if="url"
+					class="btn btn-default btn-sm btn-new-tab"
+					target="_blank"
+					:href="url"
+				>
 					{{ __("Open in a new tab") }}
 				</a>
+				<button
+					v-if="url"
+					class="ml-3 btn btn-default btn-sm btn-new-tab"
+					@click="$refs.iframe.contentWindow.location.reload()"
+				>
+					{{ __("Refresh") }}
+				</button>
 			</div>
 		</div>
 		<div v-if="url && !preview_loaded">Generating preview...</div>
 		<iframe
+			ref="iframe"
 			:src="url"
 			v-if="url"
 			v-show="preview_loaded"
@@ -101,7 +114,7 @@ export default {
 	border-radius: var(--border-radius);
 }
 .btn-new-tab {
-    margin-top: auto;
-    margin-bottom: 1.2rem;
+	margin-top: auto;
+	margin-bottom: 1.2rem;
 }
 </style>

frappe/public/js/print_format_builder/PrintFormat.vue

@@ -66,6 +66,7 @@ export default {
 
 <style scoped>
 .print-format-main {
+	margin-right: auto;
 	margin-left: auto;
 	background-color: white;
 	box-shadow: var(--shadow-lg);

frappe/public/js/print_format_builder/PrintFormatBuilder.vue

@@ -37,7 +37,12 @@ export default {
 		};
 	},
 	mounted() {
-		this.$store.fetch();
+		this.$store.fetch().then(() => {
+			if (!this.$store.layout) {
+				this.$store.layout = this.$store.get_default_layout();
+				this.$store.save_changes();
+			}
+		});
 	},
 	methods: {
 		toggle_preview() {
@@ -50,7 +55,9 @@ export default {
 		},
 		shouldRender() {
 			return Boolean(
-				this.$store.print_format && this.$store.meta && this.$store.layout
+				this.$store.print_format &&
+					this.$store.meta &&
+					this.$store.layout
 			);
 		}
 	}

frappe/public/js/print_format_builder/print_format_builder.bundle.js

@@ -1,4 +1,5 @@
 import PrintFormatBuilderComponent from "./PrintFormatBuilder.vue";
+import { getStore } from "./store";
 
 class PrintFormatBuilder {
 	constructor({ wrapper, page, print_format }) {
@@ -16,7 +17,7 @@ class PrintFormatBuilder {
 		this.page.set_secondary_action(__("Reset changes"), () => {
 			this.$component.$store.reset_changes();
 		});
-		this.page.add_button(
+		let $toggle_preview_btn = this.page.add_button(
 			__("Toggle Preview"),
 			() => this.$component.toggle_preview(),
 			{ icon: "small-file" }
@@ -32,6 +33,16 @@ class PrintFormatBuilder {
 				})
 		});
 		this.$component = $vm.$children[0];
+		let store = getStore(print_format);
+		store.$watch("dirty", value => {
+			if (value) {
+				this.page.set_indicator("Not Saved", "orange");
+				$toggle_preview_btn.hide();
+			} else {
+				this.page.clear_indicator();
+				$toggle_preview_btn.show();
+			}
+		});
 	}
 }
 

frappe/public/js/print_format_builder/store.js

@@ -14,31 +14,54 @@ export function getStore(print_format_name) {
 				print_format: null,
 				doctype: null,
 				meta: null,
-				layout: null
+				layout: null,
+				dirty: false
 			};
 		},
+		watch: {
+			layout: {
+				deep: true,
+				handler() {
+					this.dirty = true;
+				}
+			},
+			print_format: {
+				deep: true,
+				handler() {
+					this.dirty = true;
+				}
+			}
+		},
 		methods: {
 			fetch() {
-				frappe.model.clear_doc("Print Format", this.print_format_name);
-				frappe.model.with_doc(
-					"Print Format",
-					this.print_format_name,
-					() => {
-						this.print_format = frappe.get_doc(
-							"Print Format",
-							this.print_format_name
-						);
-						frappe.model.with_doctype(
-							this.print_format.doc_type,
-							() => {
-								this.meta = frappe.get_meta(
-									this.print_format.doc_type
-								);
-								this.layout = this.get_layout();
-							}
-						);
-					}
-				);
+				return new Promise(resolve => {
+					frappe.model.clear_doc(
+						"Print Format",
+						this.print_format_name
+					);
+					frappe.model.with_doc(
+						"Print Format",
+						this.print_format_name,
+						() => {
+							let print_format = frappe.get_doc(
+								"Print Format",
+								this.print_format_name
+							);
+							frappe.model.with_doctype(
+								print_format.doc_type,
+								() => {
+									this.meta = frappe.get_meta(
+										print_format.doc_type
+									);
+									this.print_format = print_format;
+									this.layout = this.get_layout();
+									this.$nextTick(() => (this.dirty = false));
+									resolve();
+								}
+							);
+						}
+					);
+				});
 			},
 			update({ fieldname, value }) {
 				this.$set(this.print_format, fieldname, value);
@@ -94,15 +117,18 @@ export function getStore(print_format_name) {
 			},
 			get_layout() {
 				if (this.print_format) {
-					if (!this.print_format.format_data) {
-						return create_default_layout(this.meta);
-					}
+					// if (!this.print_format.format_data) {
+					// 	return create_default_layout(this.meta);
+					// }
 					if (typeof this.print_format.format_data == "string") {
 						return JSON.parse(this.print_format.format_data);
 					}
 					return this.print_format.format_data;
 				}
 				return null;
+			},
+			get_default_layout() {
+				return create_default_layout(this.meta);
 			}
 		}
 	};