From 2dc9bbd2a5a1b594df7cd61667b08cd30a7167b8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 8 Nov 2022 18:57:21 +0530
Subject: [PATCH] fix: created EditableInput for tab & section label

---
 .../form_builder/components/EditableInput.vue | 83 +++++++++++++++++++
 .../js/form_builder/components/Section.vue    | 44 ++--------
 .../js/form_builder/components/Tabs.vue       | 46 ++--------
 .../js/form_builder/form_builder.bundle.js    |  3 +-
 4 files changed, 96 insertions(+), 80 deletions(-)
 create mode 100644 frappe/public/js/form_builder/components/EditableInput.vue

diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
new file mode 100644
index 0000000000..c8a9d80468
--- /dev/null
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { ref, nextTick, computed, onMounted } from "vue";
+import { useStore } from "../store";
+let store = useStore();
+
+let props = defineProps({
+	text: {
+		type: String
+	},
+	placeholder: {
+		default: __("No Label")
+	}
+});
+
+let editing = ref(false);
+let input_text = ref(null);
+let hidden_text = ref(null);
+let hidden_placeholder = ref(null);
+
+let hidden_span_width = computed(() => {
+	if (hidden_text.value && props.text) {
+		return hidden_text.value.offsetWidth + 15 + "px";
+	} else if (!props.text) {
+		return hidden_placeholder.value.offsetWidth + 15 + "px";
+	}
+	return "40px";
+});
+
+function focus_on_label() {
+	if (!store.read_only) {
+		editing.value = true;
+		nextTick(() => input_text.value.focus());
+	}
+}
+</script>
+
+<template>
+	<div @dblclick="focus_on_label">
+		<input
+			v-if="editing"
+			class="input-text"
+			ref="input_text"
+			:disabled="store.read_only"
+			type="text"
+			:placeholder="placeholder"
+			v-model="text"
+			:style="{ width: hidden_span_width }"
+			@input="event => $emit('update:modelValue', event.target.value)"
+			@keydown.enter="editing = false"
+			@blur="editing = false"
+			@click.stop
+		/>
+		<span v-else-if="text">{{ text }}</span>
+		<i v-else class="text-muted">
+			{{ __("No Label") }}
+		</i>
+		<span class="hidden-span" ref="hidden_text">{{ text }}</span>
+		<span class="hidden-span" ref="hidden_placeholder">{{ placeholder }}</span>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.input-text {
+	border: none;
+	min-width: 50px;
+	margin-left: -2px;
+
+	&:focus {
+		outline: 1px solid var(--primary);
+		border-radius: var(--border-radius);
+	}
+
+	&::placeholder {
+		font-style: italic;
+		font-weight: normal;
+	}
+}
+
+.hidden-span {
+	visibility: hidden;
+	position: absolute;
+}
+</style>
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index b0cce34389..cca2b7cac8 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -1,7 +1,8 @@
 <script setup>
 import draggable from "vuedraggable";
 import Column from "./Column.vue";
-import { ref, nextTick } from "vue";
+import EditableInput from "./EditableInput.vue";
+import { ref } from "vue";
 import { useStore } from "../store";
 import { section_boilerplate } from "../utils";
 
@@ -9,8 +10,6 @@ let props = defineProps(["tab", "section"]);
 let store = useStore();
 
 let hovered = ref(false);
-let label_input = ref(null);
-let editing = ref(false);
 let collapsed = ref(false);
 
 function add_section_above() {
@@ -57,13 +56,6 @@ function select_section() {
 	}
 	store.selected_field = props.section.df;
 }
-
-function focus_on_label() {
-	if (!store.read_only) {
-		editing.value = true;
-		nextTick(() => label_input.value.focus());
-	}
-}
 </script>
 
 <template>
@@ -87,21 +79,12 @@ function focus_on_label() {
 				:hidden="!section.df.label && store.read_only"
 				:style="{ paddingBottom: !collapsed ? '0.75rem' : '' }"
 			>
-				<div class="section-label" @dblclick="focus_on_label">
-					<input
-						v-if="editing"
-						ref="label_input"
-						class="input-section-label"
-						:disabled="store.read_only"
-						type="text"
+				<div class="section-label">
+					<EditableInput
+						:text="section.df.label"
 						:placeholder="__('Section Title')"
 						v-model="section.df.label"
-						@keydown.enter="editing = false"
-						@blur="editing = false"
-						@click.stop
 					/>
-					<span v-else-if="section.df.label">{{ section.df.label }}</span>
-					<i class="text-muted" v-else> {{ __("No Label") }} </i>
 					<div
 						v-if="section.df.collapsible"
 						class="collapse-indicator"
@@ -194,22 +177,7 @@ function focus_on_label() {
 			.section-label {
 				display: flex;
 
-				.input-section-label {
-					border: none;
-					margin-left: -2px;
-
-					&:focus {
-						outline: 1px solid var(--primary);
-						border-radius: var(--border-radius);
-					}
-
-					&::placeholder {
-						font-style: italic;
-						font-weight: normal;
-					}
-				}
-
-				span {
+				:deep(span) {
 					font-weight: 600;
 				}
 
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 5a441c5320..d620508cbc 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -1,5 +1,6 @@
 <script setup>
 import Section from "./Section.vue";
+import EditableInput from "./EditableInput.vue";
 import draggable from "vuedraggable";
 import { useStore } from "../store";
 import { section_boilerplate } from "../utils";
@@ -102,14 +103,6 @@ function remove_tab() {
 	store.active_tab = tabs[prev_tab_index].df.name;
 	store.selected_field = null;
 }
-
-function focus_on_label(tab, event) {
-	if (!store.read_only) {
-		tab.editing = true;
-		let $tab = event.target.closest(".tab.active");
-		nextTick(() => $($tab).find("input").focus());
-	}
-}
 </script>
 
 <template>
@@ -134,21 +127,12 @@ function focus_on_label(tab, event) {
 					@dragstart="dragged = true"
 					@dragend="dragged = false"
 					@dragover="drag_over(element)"
-					@dblclick="(event) => focus_on_label(element, event)"
 				>
-					<input
-						v-if="element.editing"
-						class="input-tab-label"
-						:disabled="store.read_only"
-						type="text"
+					<EditableInput
+						:text="element.df.label"
 						:placeholder="__('Tab Label')"
 						v-model="element.df.label"
-						@keydown.enter="element.editing = false"
-						@blur="element.editing = false"
-						@click.stop
 					/>
-					<span v-else-if="element.df.label">{{ element.df.label }}</span>
-					<i class="text-muted" v-else> {{ __("No Label") }} </i>
 				</div>
 			</template>
 		</draggable>
@@ -204,10 +188,7 @@ function focus_on_label(tab, event) {
 			<div class="empty-tab" :hidden="store.read_only">
 				<div>{{ __("Drag & Drop a section here") }}</div>
 				<div>{{ __("OR") }}</div>
-				<button
-					class="btn btn-default btn-sm"
-					@click="add_new_section()"
-				>
+				<button class="btn btn-default btn-sm" @click="add_new_section()">
 					{{ __("Add a new section") }}
 				</button>
 			</div>
@@ -272,21 +253,6 @@ function focus_on_label(tab, event) {
 		min-width: max-content;
 		cursor: pointer;
 
-		.input-tab-label {
-			border: none;
-
-			&:focus {
-				outline: 1px solid var(--primary);
-				border-radius: var(--border-radius);
-			}
-		}
-
-		.tab-name {
-			outline: none;
-			border: none;
-			width: fit-content;
-		}
-
 		&:hover {
 			border-bottom: 1px solid var(--gray-300);
 		}
@@ -322,7 +288,7 @@ function focus_on_label(tab, event) {
 				height: 7rem;
 				margin: 1rem;
 
-				&+ .empty-tab {
+				& + .empty-tab {
 					display: flex;
 					flex-direction: column;
 					align-items: center;
@@ -338,7 +304,7 @@ function focus_on_label(tab, event) {
 				}
 			}
 
-			&+ .empty-tab {
+			& + .empty-tab {
 				display: none;
 			}
 		}
diff --git a/frappe/public/js/form_builder/form_builder.bundle.js b/frappe/public/js/form_builder/form_builder.bundle.js
index 807df78ac5..421b609d3f 100644
--- a/frappe/public/js/form_builder/form_builder.bundle.js
+++ b/frappe/public/js/form_builder/form_builder.bundle.js
@@ -86,8 +86,7 @@ class FormBuilder {
 			if (
 				this.store.doc &&
 				(this.store.doc.custom || this.store.doc.issingle,
-				in_list(frappe.model.core_doctypes_list, this.doctype) ||
-					!in_list(frappe.boot.active_domains, this.store.doc.restrict_to_domain))
+				in_list(frappe.model.core_doctypes_list, this.doctype))
 			) {
 				this.customize_form_btn.hide();
 				this.go_to_customize_form_btn.hide();