feat: added not saved indicator if form is dirty

(cherry picked from commit 2b57e77f29)

frappe/public/js/frappe/web_form/web_form.js

@@ -44,7 +44,7 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		let field = this.fields_dict[fieldname];
 		field.df.change = () => {
 			handler(field, field.value);
-			frappe.form_dirty = true;
+			this.make_form_dirty();
 		};
 	}
 
@@ -53,12 +53,17 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		this.fields.forEach((field) => {
 			if (!field.change) {
 				field.change = () => {
-					frappe.form_dirty = true;
+					this.make_form_dirty();
 				};
 			}
 		});
 	}
 
+	make_form_dirty() {
+		frappe.form_dirty = true;
+		$(".indicator-pill.orange").removeClass("hide");
+	}
+
 	set_page_breaks() {
 		this.page_breaks = $(".page-break");
 

frappe/public/scss/website/web_form.scss

@@ -57,6 +57,10 @@
 								margin-bottom: 0;
 							}
 
+							.indicator-pill {
+								margin-top: 7px;
+							}
+
 							.web-form-actions {
 								display: flex;
 								align-items: center;

frappe/website/doctype/web_form/templates/web_form.html

@@ -64,6 +64,7 @@
 							<h1 class="ellipsis">{{ _(title) }}</h1>
 						{% endif %}
 					</div>
+					<span class="indicator-pill orange hide">Not Saved</span>
 					<div class="web-form-actions">
 						{{ header_buttons() }}
 					</div>