From 33cc83450713ca4eb9ecc9eb2d7e2f2a4293fdac Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 13 Nov 2022 23:29:10 +0530
Subject: [PATCH] fix: added/updated Data,Check,Select & Small Text Control
 Components

---
 .../js/form_builder/components/Field.vue      | 17 +++-
 .../js/form_builder/components/FieldTypes.vue |  2 +-
 .../form_builder/components/FormBuilder.vue   | 22 +++--
 .../components/controls/CheckControl.vue      | 32 +++----
 .../components/controls/DataControl.vue       | 52 +++---------
 .../components/controls/SelectControl.vue     | 85 ++++++++++---------
 .../components/controls/SmallTextControl.vue  | 59 +++----------
 7 files changed, 114 insertions(+), 155 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 77b7d7db5b..bcdd667474 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref } from "vue";
+import EditableInput from "./EditableInput.vue";
+import { ref, computed } from "vue";
 import { useStore } from "../store";
 import { move_children_to_parent } from "../utils";
 
@@ -7,6 +8,9 @@ let props = defineProps(["column", "field"]);
 let store = useStore();
 
 let hovered = ref(false);
+let component = computed(() => {
+	return props.field.df.fieldtype.replace(' ', '') + 'Control';
+});
 
 function remove_field() {
 	if (store.is_customize_form && props.field.df.is_custom_field == 0) {
@@ -37,7 +41,16 @@ function move_fields_to_column() {
 		@mouseover.stop="hovered = true"
 		@mouseout.stop="hovered = false"
 	>
-		<component :is="field.df.fieldtype.replace(' ', '') + 'Control'" :df="field.df">
+		<component :is="component" :df="field.df">
+			<template #label>
+				<EditableInput
+					:class="{ reqd: field.df.reqd }"
+					:text="field.df.label"
+					:placeholder="__('Label')"
+					:empty_label="`${__('No Label')} (${field.df.fieldtype})`"
+					v-model="field.df.label"
+				/>
+			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
 					<button
diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index 117ad2fbda..04096e3015 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -39,7 +39,7 @@ let fields = computed(() => {
 });
 
 function on_drag_start(evt) {
-	$(evt.item).html('<div class="drag-it-here"></div>');
+	$(evt.item).html('<div class="drop-it-here"></div>');
 }
 
 function on_drag_end(evt) {
diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index 52db42688f..980bbdfd33 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -76,17 +76,17 @@ onMounted(() => store.fetch());
 			font-size: var(--text-sm);
 			cursor: pointer;
 
-			&:has(.drag-it-here) {
+			&:has(.drop-it-here) {
 				position: relative;
 				background-color: transparent;
 				height: 60px;
 
-				.drag-it-here {
+				.drop-it-here {
 					display: flex;
 					justify-content: center;
 
 					&::after {
-						content: "Drag it here";
+						content: "Drop it here";
 						top: 31%;
 						position: absolute;
 						padding: 2px 10px;
@@ -113,15 +113,25 @@ onMounted(() => store.fetch());
 		}
 
 		:deep(.field) {
-			.description {
-				font-size: var(--text-sm);
-				color: var(--text-muted);
+			.label {
+				margin-bottom: 0.3rem;
+			}
+
+			.editable {
+				input, textarea, select {
+					background-color: var(--fg-color);
+					cursor: pointer;
+				}
 			}
 
 			.reqd::after {
 				content: " *";
 				color: var(--red-400);
 			}
+			.description {
+				font-size: var(--text-sm);
+				color: var(--text-muted);
+			}
 		}
 
 		:deep([data-has-std-field="false"]),
diff --git a/frappe/public/js/form_builder/components/controls/CheckControl.vue b/frappe/public/js/form_builder/components/controls/CheckControl.vue
index eada72a756..0d786de0b4 100644
--- a/frappe/public/js/form_builder/components/controls/CheckControl.vue
+++ b/frappe/public/js/form_builder/components/controls/CheckControl.vue
@@ -1,17 +1,23 @@
 <script setup>
-import EditableInput from "../EditableInput.vue";
 import { useStore } from "../../store";
 import { useSlots } from "vue";
 
 let store = useStore();
 let props = defineProps(["df", "value"]);
 let slots = useSlots();
-
 </script>
 
 <template>
-	<div v-if="!slots.actions" class="control checkbox">
-		<label>
+	<div class="control checkbox" :class="{ editable: slots.label }">
+		<!-- checkbox -->
+		<label v-if="slots.label" class="field-controls">
+			<div class="checkbox">
+				<input type="checkbox" disabled />
+				<slot name="label" />
+			</div>
+			<slot name="actions" />
+		</label>
+		<label v-else>
 			<input
 				type="checkbox"
 				:checked="value"
@@ -20,22 +26,8 @@ let slots = useSlots();
 			/>
 			<span class="label-area" :class="{ reqd: df.reqd }">{{ df.label }}</span>
 		</label>
-		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
-	</div>
-	<div class="control checkbox editable" v-else>
-		<label class="field-controls">
-			<div class="checkbox">
-				<input type="checkbox" disabled />
-				<EditableInput
-					:class="{ reqd: df.reqd }"
-					:text="df.label"
-					:placeholder="__('Label')"
-					:empty_label="`${__('No Label')} (${df.fieldtype})`"
-					v-model="df.label"
-				/>
-			</div>
-			<slot name="actions"></slot>
-		</label>
+
+		<!-- description -->
 		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
 	</div>
 </template>
diff --git a/frappe/public/js/form_builder/components/controls/DataControl.vue b/frappe/public/js/form_builder/components/controls/DataControl.vue
index 93a934b3b6..984de40d78 100644
--- a/frappe/public/js/form_builder/components/controls/DataControl.vue
+++ b/frappe/public/js/form_builder/components/controls/DataControl.vue
@@ -1,59 +1,33 @@
 <script setup>
-import EditableInput from "../EditableInput.vue";
 import { useStore } from "../../store";
 import { useSlots } from "vue";
 
 let store = useStore();
 let props = defineProps(["df", "value"]);
 let slots = useSlots();
-
 </script>
 
 <template>
-	<div v-if="!slots.actions" class="control">
-		<div class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
+	<div class="control" :class="{ editable: slots.label }">
+		<!-- label -->
+		<div v-if="slots.label" class="field-controls">
+			<slot name="label" />
+			<slot name="actions" />
+		</div>
+		<div v-else class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
+
+		<!-- data input -->
+		<input v-if="slots.label" class="form-control" type="text" disabled />
 		<input
+			v-else
 			class="form-control"
 			type="text"
 			:value="value"
 			:disabled="store.read_only || df.read_only"
 			@input="event => $emit('update:modelValue', event.target.value)"
 		/>
-		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
-	</div>
-	<div class="control editable" v-else>
-		<div class="field-controls">
-			<EditableInput
-				:class="{ reqd: df.reqd }"
-				:text="df.label"
-				:placeholder="__('Label')"
-				:empty_label="`${__('No Label')} (${df.fieldtype})`"
-				v-model="df.label"
-			/>
-			<slot name="actions"></slot>
-		</div>
-		<input
-			class="form-control"
-			type="text"
-			disabled
-		/>
+
+		<!-- description -->
 		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-.label {
-	margin-bottom: 0.3rem;
-}
-
-.editable input {
-	background-color: var(--fg-color);
-	cursor: pointer;
-}
-
-.label-actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-</style>
diff --git a/frappe/public/js/form_builder/components/controls/SelectControl.vue b/frappe/public/js/form_builder/components/controls/SelectControl.vue
index 950483b3b8..9cd246b5eb 100644
--- a/frappe/public/js/form_builder/components/controls/SelectControl.vue
+++ b/frappe/public/js/form_builder/components/controls/SelectControl.vue
@@ -1,5 +1,4 @@
 <script setup>
-import EditableInput from "../EditableInput.vue";
 import { useStore } from "../../store";
 import { useSlots } from "vue";
 
@@ -7,58 +6,60 @@ let store = useStore();
 let props = defineProps(["df", "value"]);
 let slots = useSlots();
 
+function get_options() {
+	let options = props.df.options?.split("\n") || "";
+	return options && options.filter(opt => !in_list(frappe.model.layout_fields, opt));
+}
 </script>
 
 <template>
-	<div v-if="!slots.actions" class="control">
-		<div class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
-		<input
-			class="form-control"
-			type="text"
-			:value="value"
-			:disabled="store.read_only || df.read_only"
-			@input="event => $emit('update:modelValue', event.target.value)"
-		/>
-		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
-	</div>
-	<div class="control editable" v-else>
-		<div class="field-controls">
-			<EditableInput
-				:class="{ reqd: df.reqd }"
-				:text="df.label"
-				:placeholder="__('Label')"
-				:empty_label="`${__('No Label')} (${df.fieldtype})`"
-				v-model="df.label"
-			/>
-			<slot name="actions"></slot>
+	<div class="control" :class="{ editable: slots.label }">
+		<!-- label -->
+		<div v-if="slots.label" class="field-controls">
+			<slot name="label"/>
+			<slot name="actions" />
 		</div>
-		<input
-			class="form-control"
-			type="text"
-			disabled
-		/>
+		<div v-else class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
+
+		<!-- select input -->
+		<div v-if="slots.label"  class="select-input">
+			<select class="form-control" disabled></select>
+			<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
+		</div>
+		<div v-else class="select-input">
+			<select
+				class="form-control"
+				v-model="value"
+				:disabled="store.read_only || df.read_only"
+				@change="event => $emit('update:modelValue', event.target.value)"
+			>
+				<option v-for="option in get_options()" :key="option" :value="option">{{
+					option
+				}}</option>
+			</select>
+			<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
+		</div>
+
+		<!-- description -->
 		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.label {
-	margin-bottom: 0.3rem;
+.editable {
+	.select-icon {
+		top: 7px !important;
+	}
 }
 
-.editable input {
-	background-color: var(--fg-color);
-	cursor: pointer;
-}
+.select-input {
+	position: relative;
 
-.reqd::after {
-	content: " *";
-	color: var(--red-400);
-}
-
-.label-actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+	.select-icon {
+		position: absolute;
+		pointer-events: none;
+		top: 5px;
+		right: 10px;
+	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/controls/SmallTextControl.vue b/frappe/public/js/form_builder/components/controls/SmallTextControl.vue
index 7e5d038647..fa1af46aca 100644
--- a/frappe/public/js/form_builder/components/controls/SmallTextControl.vue
+++ b/frappe/public/js/form_builder/components/controls/SmallTextControl.vue
@@ -1,64 +1,33 @@
 <script setup>
-import EditableInput from "../EditableInput.vue";
 import { useStore } from "../../store";
 import { useSlots } from "vue";
 
 let store = useStore();
 let props = defineProps(["df", "value"]);
 let slots = useSlots();
-
 </script>
 
 <template>
-	<div v-if="!slots.actions" class="control">
-		<div class="label">{{ df.label }}</div>
-		<input
+	<div class="control" :class="{ editable: slots.label }">
+		<!-- label -->
+		<div v-if="slots.label" class="field-controls">
+			<slot name="label" />
+			<slot name="actions" />
+		</div>
+		<div v-else class="label">{{ df.label }}</div>
+
+		<!-- textarea input -->
+		<textarea v-if="slots.label" class="form-control" type="text" disabled />
+		<textarea
+			v-else
 			class="form-control"
 			type="text"
 			:value="value"
 			:disabled="store.read_only || df.read_only"
 			@input="event => $emit('update:modelValue', event.target.value)"
 		/>
-		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
-	</div>
-	<div class="control editable" v-else>
-		<div class="field-controls">
-			<EditableInput
-				:class="{ reqd: df.reqd }"
-				:text="df.label"
-				:placeholder="__('Label')"
-				:empty_label="`${__('No Label')} (${df.fieldtype})`"
-				v-model="df.label"
-			/>
-			<slot name="actions"></slot>
-		</div>
-		<input
-			class="form-control"
-			type="text"
-			disabled
-		/>
+
+		<!-- description -->
 		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-.label {
-	margin-bottom: 0.3rem;
-}
-
-.editable input {
-	background-color: var(--fg-color);
-	cursor: pointer;
-}
-
-.reqd::after {
-	content: " *";
-	color: var(--red-400);
-}
-
-.label-actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-</style>