From 9cdd4e835db04511c8bf32feb6f1404c88663c4c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 11 Jan 2023 23:14:10 +0530
Subject: [PATCH] feat: duplicate field

---
 .../js/form_builder/components/Field.vue      | 19 ++++++++++++++++++-
 .../js/form_builder/components/FieldTypes.vue |  6 +-----
 frappe/public/js/form_builder/utils.js        |  6 ++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 82351fccd8..4f6ed50020 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -2,7 +2,7 @@
 import EditableInput from "./EditableInput.vue";
 import { ref, computed } from "vue";
 import { useStore } from "../store";
-import { move_children_to_parent } from "../utils";
+import { move_children_to_parent, clone_field } from "../utils";
 
 let props = defineProps(["column", "field"]);
 let store = useStore();
@@ -28,6 +28,20 @@ function move_fields_to_column() {
 	);
 	move_children_to_parent(props, "column", "field", current_section);
 }
+
+function duplicate_field() {
+	let duplicate_field = clone_field(props.field);
+
+	if (duplicate_field.df.label) {
+		duplicate_field.df.label = duplicate_field.df.label + " Copy";
+	}
+	duplicate_field.df.fieldname = "";
+
+	// push duplicate_field after props.field in the same column
+	let index = props.column.fields.indexOf(props.field);
+	props.column.fields.splice(index + 1, 0, duplicate_field);
+	store.selected_field = duplicate_field.df;
+}
 </script>
 
 <template>
@@ -79,6 +93,9 @@ function move_fields_to_column() {
 					>
 						<div v-html="frappe.utils.icon('move', 'sm')"></div>
 					</button>
+					<button class="btn btn-xs btn-icon" @click.stop="duplicate_field">
+						<div v-html="frappe.utils.icon('duplicate', 'sm')"></div>
+					</button>
 					<button class="btn btn-xs btn-icon" @click.stop="remove_field">
 						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
 					</button>
diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index 04096e3015..2907614a51 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -3,15 +3,11 @@ import SearchBox from "./SearchBox.vue";
 import draggable from "vuedraggable";
 import { ref, computed } from "vue";
 import { useStore } from "../store";
+import { clone_field } from "../utils";
 
 let store = useStore();
 let search_text = ref("");
 
-function clone_field(field) {
-	field.df.name = frappe.utils.get_random(8);
-	return JSON.parse(JSON.stringify(field));
-}
-
 let fields = computed(() => {
 	let fields = frappe.model.all_fieldtypes
 		.filter(df => {
diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js
index 4c2887e4e7..8a7a2c6b54 100644
--- a/frappe/public/js/form_builder/utils.js
+++ b/frappe/public/js/form_builder/utils.js
@@ -318,3 +318,9 @@ export function scrub_field_names(fields) {
 
 	return fields;
 }
+
+export function clone_field(field) {
+	let cloned_field = JSON.parse(JSON.stringify(field));
+	cloned_field.df.name = frappe.utils.get_random(8);
+	return cloned_field;
+}