From e3a67b1aa12c159dcd5ad8d10e3898a7d1a304d8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 23 Oct 2022 20:08:59 +0530
Subject: [PATCH] feat: make page read only if editing is restricted

---
 frappe/public/js/form_builder/components/Field.vue     |  3 ++-
 .../js/form_builder/components/FieldProperties.vue     |  1 +
 frappe/public/js/form_builder/components/Section.vue   |  8 +++++++-
 frappe/public/js/form_builder/components/Tabs.vue      |  4 +++-
 frappe/public/js/form_builder/form_builder.bundle.js   | 10 +++++++++-
 frappe/public/js/form_builder/store.js                 |  3 +++
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 677b31b317..c90d9accff 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -51,6 +51,7 @@ watch(
 					v-if="editing"
 					ref="label_input"
 					class="label-input"
+					:disabled="store.read_only"
 					type="text"
 					:placeholder="__('Label')"
 					v-model="field.df.label"
@@ -60,7 +61,7 @@ watch(
 				<span v-else-if="field.df.label">{{ field.df.label }}</span>
 				<i class="text-muted" v-else> {{ __("No Label") }} ({{ field.df.fieldtype }}) </i>
 			</div>
-			<div class="field-actions">
+			<div class="field-actions" :hidden="store.read_only">
 				<button
 					v-if="field.df.fieldtype == 'HTML'"
 					class="btn btn-xs btn-icon"
diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index f92dbd4d53..7bd8d9be0d 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -48,6 +48,7 @@ let docfield_df = computed(() => {
 						class="mb-2 form-control form-control-sm"
 						type="text"
 						v-model="store.selected_field[df.fieldname]"
+						:disabled="store.read_only"
 					/>
 				</div>
 				<div class="description" v-if="df.description">{{ df.description }}</div>
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index b722a8e167..fbd71fac0f 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -125,7 +125,7 @@ let section_options = computed(() => {
 					:placeholder="__('Section Title')"
 					v-model="section.df.label"
 				/>
-				<div class="d-flex align-items-center">
+				<div class="section-actions" :hidden="store.read_only">
 					<div class="dropdown">
 						<button
 							class="btn btn-xs btn-section dropdown-button"
@@ -165,6 +165,7 @@ let section_options = computed(() => {
 						filter="[data-is-custom='0']"
 						:animation="150"
 						item-key="id"
+						:disabled="store.read_only"
 					>
 						<template #item="{ element }">
 							<Field :field="element" :data-is-custom="store.is_custom(element)" />
@@ -232,6 +233,11 @@ let section_options = computed(() => {
 				}
 			}
 
+			.section-actions {
+				display: flex;
+				align-items: center;
+			}
+
 			.btn-section {
 				padding: var(--padding-xs);
 				box-shadow: none;
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index a8cc950c8c..ffda0cbeeb 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -126,6 +126,7 @@ function remove_tab() {
 			filter="[data-is-custom='0']"
 			:animation="200"
 			item-key="id"
+			:disabled="store.read_only"
 		>
 			<template #item="{ element }">
 				<div
@@ -142,7 +143,7 @@ function remove_tab() {
 				</div>
 			</template>
 		</draggable>
-		<div class="tab-actions">
+		<div class="tab-actions" :hidden="store.read_only">
 			<button
 				class="new-tab-btn btn btn-xs"
 				:class="{ 'no-tabs' : !has_tabs }"
@@ -183,6 +184,7 @@ function remove_tab() {
 				filter="[data-is-custom='0']"
 				:animation="200"
 				item-key="id"
+				:disabled="store.read_only"
 			>
 				<template #item="{ element }">
 					<Section :section="element" @add_section_above="add_section_above(element)" />
diff --git a/frappe/public/js/form_builder/form_builder.bundle.js b/frappe/public/js/form_builder/form_builder.bundle.js
index 960562be7d..f6b3ee1891 100644
--- a/frappe/public/js/form_builder/form_builder.bundle.js
+++ b/frappe/public/js/form_builder/form_builder.bundle.js
@@ -19,7 +19,9 @@ class FormBuilder {
 		this.page.set_title(__("Form Builder: {0}", [this.doctype]));
 
 		// setup page actions
-		this.page.set_primary_action(__("Save"), () => this.store.save_changes());
+		this.primary_btn = this.page.set_primary_action(__("Save"), () =>
+			this.store.save_changes()
+		);
 
 		this.customize_form_btn = this.page.add_button(__("Switch to Customize Form"), () => {
 			frappe.set_route("form-builder", this.doctype, "customize");
@@ -80,6 +82,12 @@ class FormBuilder {
 			},
 			{ immediate: true }
 		);
+
+		watch(
+			() => this.store.read_only,
+			(value) => this.primary_btn.toggle(!value),
+			{ immediate: true }
+		);
 	}
 }
 
diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index 9f84ed9e24..3baa13b993 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -12,6 +12,7 @@ export const useStore = defineStore("store", {
 		active_tab: "",
 		selected_field: null,
 		dirty: false,
+		read_only: false,
 		is_customize_form: false,
 	}),
 	getters: {
@@ -52,8 +53,10 @@ export const useStore = defineStore("store", {
 				doc.doc_type = this.doctype;
 				let r = await frappe.call({ method: "fetch_to_customize", doc });
 				this.doc = r.docs[0];
+				this.read_only = false;
 			} else {
 				this.doc = await frappe.db.get_doc("DocType", this.doctype);
+				this.read_only = !frappe.boot.developer_mode && !this.doc.custom;
 			}
 
 			if (!this.get_docfields.length) {