From 324c3e24c4085d13650aa2075e2a0e02166fd433 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 10:20:16 +0530
Subject: [PATCH 1/9] fix: replace all spaces with _ to generate fieldname

---
 frappe/public/js/form_builder/utils.js                      | 4 ++--
 frappe/website/doctype/web_form/templates/web_form_row.html | 4 ++++
 frappe/website/doctype/web_form/web_form.json               | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 frappe/website/doctype/web_form/templates/web_form_row.html

diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js
index d149a48c16..4c2887e4e7 100644
--- a/frappe/public/js/form_builder/utils.js
+++ b/frappe/public/js/form_builder/utils.js
@@ -279,7 +279,7 @@ export function scrub_field_names(fields) {
 		if (d.fieldtype) {
 			if (!d.fieldname) {
 				if (d.label) {
-					d.fieldname = d.label.trim().toLowerCase().replace(" ", "_");
+					d.fieldname = d.label.trim().toLowerCase().replaceAll(" ", "_");
 					if (d.fieldname.endsWith("?")) {
 						d.fieldname = d.fieldname.slice(0, -1);
 					}
@@ -295,7 +295,7 @@ export function scrub_field_names(fields) {
 					}
 				} else {
 					d.fieldname =
-						d.fieldtype.toLowerCase().replace(" ", "_") +
+						d.fieldtype.toLowerCase().replaceAll(" ", "_") +
 						"_" +
 						frappe.utils.get_random(4);
 				}
diff --git a/frappe/website/doctype/web_form/templates/web_form_row.html b/frappe/website/doctype/web_form/templates/web_form_row.html
new file mode 100644
index 0000000000..d7014b453a
--- /dev/null
+++ b/frappe/website/doctype/web_form/templates/web_form_row.html
@@ -0,0 +1,4 @@
+<div>
+	<a href="{{ doc.route }}">{{ doc.title or doc.name }}</a>
+</div>
+<!-- this is a sample default list template -->
diff --git a/frappe/website/doctype/web_form/web_form.json b/frappe/website/doctype/web_form/web_form.json
index 0c2e416696..21e501481b 100644
--- a/frappe/website/doctype/web_form/web_form.json
+++ b/frappe/website/doctype/web_form/web_form.json
@@ -364,7 +364,7 @@
  "icon": "icon-edit",
  "is_published_field": "published",
  "links": [],
- "modified": "2022-12-15 17:14:44.939645",
+ "modified": "2023-01-02 10:19:15.680960",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Form",

From f39c6e18f65eb6040f6201f531f74e250709f50d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 10:24:26 +0530
Subject: [PATCH 2/9] fix: do not allow to make check field mandatory

---
 frappe/public/js/form_builder/components/FieldProperties.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index 23945554a7..b5597d20c5 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -25,6 +25,10 @@ let docfield_df = computed(() => {
 			return false;
 		}
 
+		if (df.fieldname === "reqd" && store.selected_field.fieldtype === "Check") {
+			return false;
+		}
+
 		if (df.fieldname === "options") {
 			df.fieldtype = "Small Text";
 			df.options = "";

From c29f6892b3f5f4ccd7ecc48a45936986aeae9552 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 12:03:13 +0530
Subject: [PATCH 3/9] fix: repositioned action buttons

---
 .../js/form_builder/form_builder.bundle.js    | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frappe/public/js/form_builder/form_builder.bundle.js b/frappe/public/js/form_builder/form_builder.bundle.js
index 0b4a1a7cc2..ae19edbfc6 100644
--- a/frappe/public/js/form_builder/form_builder.bundle.js
+++ b/frappe/public/js/form_builder/form_builder.bundle.js
@@ -45,18 +45,26 @@ class FormBuilder {
 			this.store.read_only = this.store.preview;
 			this.read_only = true;
 		});
-		this.customize_form_btn = this.page.add_button(__("For Customize Form"), () => {
-			frappe.set_route("form-builder", this.doctype, "customize");
-		});
-		this.doctype_form_btn = this.page.add_button(__("For DocType Form"), () => {
-			frappe.set_route("form-builder", this.doctype);
-		});
 
 		this.reset_changes_btn = this.page.add_button(__("Reset Changes"), () => {
 			this.store.reset_changes();
 		});
 
-		this.go_to_doctype_btn = this.page.add_menu_item(__("Go to Doctype"), () =>
+		this.go_to_doctype_list_btn = this.page.add_button(
+			__("Go to {0} List", [__(this.doctype)]),
+			() => {
+				window.open(`/app/${frappe.router.slug(this.doctype)}`);
+			}
+		);
+
+		this.customize_form_btn = this.page.add_menu_item(__("Switch to Customize Form"), () => {
+			frappe.set_route("form-builder", this.doctype, "customize");
+		});
+		this.doctype_form_btn = this.page.add_menu_item(__("Switch to DocType Form"), () => {
+			frappe.set_route("form-builder", this.doctype);
+		});
+
+		this.go_to_doctype_btn = this.page.add_menu_item(__("Go to DocType"), () =>
 			frappe.set_route("Form", "DocType", this.doctype)
 		);
 		this.go_to_customize_form_btn = this.page.add_menu_item(__("Go to Customize Form"), () =>
@@ -121,9 +129,7 @@ class FormBuilder {
 					? __("Go to {0}", [__(this.doctype)])
 					: __("Go to {0} List", [__(this.doctype)]);
 
-				this.page.add_menu_item(label, () => {
-					window.open(`/app/${frappe.router.slug(this.doctype)}`);
-				});
+				this.go_to_doctype_list_btn.text(label);
 			}
 
 			// toggle preview btn text

From 69af3e883bc33eadf4055e100cb8e82c97f3ddd5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 12:03:50 +0530
Subject: [PATCH 4/9] fix: added description for section

---
 frappe/public/js/form_builder/components/FormBuilder.vue | 4 ++++
 frappe/public/js/form_builder/components/Section.vue     | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index d1bebb2210..a81632c8c1 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -210,6 +210,10 @@ onMounted(() => {
 				}
 			}
 
+			.section-description {
+				padding-left: 15px;
+			}
+
 			.section-columns {
 				margin-top: 8px;
 
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index cbf848c10a..2cb24a8d4c 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -128,6 +128,7 @@ function move_sections_to_tab() {
 					</button>
 				</div>
 			</div>
+			<div v-if="section.df.description" class="section-description">{{ section.df.description }}</div>
 			<div class="section-columns" :class="{ hidden: section.df.collapsible && collapsed }">
 				<draggable
 					class="section-columns-container"
@@ -228,6 +229,12 @@ function move_sections_to_tab() {
 			}
 		}
 
+		.section-description {
+			margin-bottom: 10px;
+			font-size: var(--text-xs);
+			color: var(--text-muted);
+		}
+
 		.section-columns-container {
 			display: flex;
 			min-height: 2rem;

From eac4f2a58c1fa306d4c2c42d950ec0d1ea0e9bcc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 20:30:25 +0530
Subject: [PATCH 5/9] fix: added label & description to column

---
 .../js/form_builder/components/Column.vue     | 118 ++++++++++++------
 .../form_builder/components/FormBuilder.vue   |   8 ++
 .../js/form_builder/components/Section.vue    |   1 +
 frappe/public/js/frappe/form/column.js        |  12 +-
 frappe/public/scss/desk/form.scss             |  15 +++
 5 files changed, 115 insertions(+), 39 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index 3f108c06ba..dab1ec4c5e 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -1,6 +1,7 @@
 <script setup>
 import draggable from "vuedraggable";
 import Field from "./Field.vue";
+import EditableInput from "./EditableInput.vue";
 import { ref } from "vue";
 import { useStore } from "../store";
 import { move_children_to_parent } from "../utils";
@@ -74,25 +75,43 @@ function move_columns_to_section() {
 		@mouseover.stop="hovered = true"
 		@mouseout.stop="hovered = false"
 	>
-		<div class="column-actions" :hidden="store.read_only">
-			<button
-				v-if="section.columns.indexOf(column)"
-				class="btn btn-xs btn-icon"
-				:title="__('Move the current column & the following columns to a new section')"
-				@click="move_columns_to_section"
-			>
-				<div v-html="frappe.utils.icon('move', 'sm')"></div>
-			</button>
-			<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
-				<div v-html="frappe.utils.icon('add', 'sm')"></div>
-			</button>
-			<button
-				class="btn btn-xs btn-icon"
-				:title="__('Remove Column')"
-				@click="remove_column"
-			>
-				<div v-html="frappe.utils.icon('remove', 'sm')"></div>
-			</button>
+		<div
+			:class="[
+				'column-header',
+				column.df.label ? 'has-label' : '',
+			]"
+			:hidden="!column.df.label && store.read_only"
+		>
+			<div class="column-label">
+				<EditableInput
+					:text="column.df.label"
+					:placeholder="__('Column Title')"
+					v-model="column.df.label"
+				/>
+			</div>
+			<div class="column-actions">
+				<button
+					v-if="section.columns.indexOf(column)"
+					class="btn btn-xs btn-icon"
+					:title="__('Move the current column & the following columns to a new section')"
+					@click="move_columns_to_section"
+				>
+					<div v-html="frappe.utils.icon('move', 'sm')"></div>
+				</button>
+				<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
+					<div v-html="frappe.utils.icon('add', 'sm')"></div>
+				</button>
+				<button
+					class="btn btn-xs btn-icon"
+					:title="__('Remove Column')"
+					@click="remove_column"
+				>
+					<div v-html="frappe.utils.icon('remove', 'sm')"></div>
+				</button>
+			</div>
+		</div>
+		<div v-if="column.df.description" class="column-description">
+			{{ column.df.description }}
 		</div>
 		<draggable
 			class="column-container"
@@ -140,7 +159,7 @@ function move_columns_to_section() {
 	}
 
 	&.selected {
-		.column-actions {
+		.column-header {
 			display: flex;
 		}
 
@@ -149,6 +168,48 @@ function move_columns_to_section() {
 		}
 	}
 
+	.column-header {
+		display: none;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 0.5rem;
+		padding-left: 0.3rem;
+
+		&.has-label {
+			display: flex;
+		}
+
+		.column-label {
+			:deep(span) {
+				font-weight: 600;
+				color: var(--heading-color);
+			}
+		}
+
+		.column-actions {
+			display: flex;
+			justify-content: flex-end;
+
+			.btn.btn-icon {
+				padding: 2px;
+				box-shadow: none;
+				opacity: 0;
+
+				&:hover {
+					opacity: 1;
+					background-color: var(--fg-color);
+				}
+			}
+		}
+	}
+
+	.column-description {
+		margin-bottom: 10px;
+		margin-left: 0.3rem;
+		font-size: var(--text-xs);
+		color: var(--text-muted);
+	}
+
 	&:first-child {
 		margin-left: 0px;
 	}
@@ -162,22 +223,5 @@ function move_columns_to_section() {
 		min-height: 2rem;
 		border-radius: var(--border-radius);
 	}
-
-	.column-actions {
-		display: none;
-		justify-content: flex-end;
-		padding-bottom: 0.5rem;
-
-		.btn.btn-icon {
-			padding: 2px;
-			box-shadow: none;
-			opacity: 0;
-
-			&:hover {
-				opacity: 1;
-				background-color: var(--fg-color);
-			}
-		}
-	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index a81632c8c1..b4657066e8 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -223,6 +223,14 @@ onMounted(() => {
 						padding-right: 15px;
 						margin: 0;
 
+						.column-header {
+							padding-left: 0;
+						}
+
+						.column-description {
+							margin-left: 0;
+						}
+
 						.field {
 							margin: 0;
 							margin-bottom: 1rem;
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index 2cb24a8d4c..0f9da211e0 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -207,6 +207,7 @@ function move_sections_to_tab() {
 
 				:deep(span) {
 					font-weight: 600;
+					color: var(--heading-color);
 				}
 
 				.collapse-indicator {
diff --git a/frappe/public/js/frappe/form/column.js b/frappe/public/js/frappe/form/column.js
index bd1ff1a9eb..3ea4296a94 100644
--- a/frappe/public/js/frappe/form/column.js
+++ b/frappe/public/js/frappe/form/column.js
@@ -19,12 +19,20 @@ export default class Column {
 
 		this.form = this.wrapper.find("form").on("submit", () => false);
 
+		if (this.df.description) {
+			$(`
+				<p class="col-sm-12 form-column-description">
+					${__(this.df.description)}
+				</p>
+			`).prependTo(this.wrapper);
+		}
+
 		if (this.df.label) {
 			$(`
-				<label class="control-label">
+				<label class="column-label">
 					${__(this.df.label)}
 				</label>
-			`).appendTo(this.wrapper);
+			`).prependTo(this.wrapper);
 		}
 	}
 
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index 80121db3cf..516bc699c6 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -70,6 +70,21 @@
 	}
 }
 
+.form-column {
+	.form-column-description {
+		margin-bottom: 10px;
+		font-size: var(--text-xs);
+		color: var(--text-muted);
+		padding-left: 0;
+	}
+
+	.column-label {
+		font-weight: 600;
+		color: var(--heading-color);
+		cursor: pointer;
+	}
+}
+
 .empty-section {
 	display: none !important;
 	border: 0 !important;

From 37b246dfad4832320da5fdecaf9d9961a9d9f0f4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 20:40:27 +0530
Subject: [PATCH 6/9] chore: linter fix

not related to form builder
---
 frappe/public/scss/website/web_form.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index e1ca8b8f58..f1889a7b8e 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/frappe/public/scss/website/web_form.scss
@@ -18,7 +18,7 @@
 			.page_content {
 				max-width: 800px;
 				margin: auto;
-				
+
 				.tooltip-content {
 					display: none;
 				}

From 6587d4b16eec6b6b1392b74fa58a26ad1087b91e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 20:58:37 +0530
Subject: [PATCH 7/9] fix: do not consider first column if label is not set

---
 frappe/public/js/form_builder/store.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index 80754c1162..314e8f5ed7 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -226,8 +226,13 @@ export const useStore = defineStore("form-builder-store", {
 					}
 
 					section.columns.forEach((column, k) => {
-						// do not consider first column
-						if (k > 0 || column.fields.length == 0) {
+						// do not consider first column if label is not set
+						if (
+							(k == 0 &&
+								this.is_df_updated(column.df, this.get_df("Column Break"))) ||
+							k > 0 ||
+							column.fields.length == 0
+						) {
 							idx++;
 							column.df.idx = idx;
 							fields.push(column.df);

From 4ba05b8ac381ccf46e2466ecedf593b2a6b41e4d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 21:34:29 +0530
Subject: [PATCH 8/9] fix: clear selected_field if field is removed

---
 frappe/public/js/form_builder/components/Column.vue  | 3 ++-
 frappe/public/js/form_builder/components/Field.vue   | 3 ++-
 frappe/public/js/form_builder/components/Section.vue | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index dab1ec4c5e..a8f1f84118 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -56,6 +56,7 @@ function remove_column() {
 
 	// remove column
 	columns.splice(index, 1);
+	store.selected_field = null;
 }
 
 function move_columns_to_section() {
@@ -104,7 +105,7 @@ function move_columns_to_section() {
 				<button
 					class="btn btn-xs btn-icon"
 					:title="__('Remove Column')"
-					@click="remove_column"
+					@click.stop="remove_column"
 				>
 					<div v-html="frappe.utils.icon('remove', 'sm')"></div>
 				</button>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index e1938f4d1e..b6301352a3 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -19,6 +19,7 @@ function remove_field() {
 	}
 	let index = props.column.fields.indexOf(props.field);
 	props.column.fields.splice(index, 1);
+	store.selected_field = null;
 }
 
 function move_fields_to_column() {
@@ -75,7 +76,7 @@ function move_fields_to_column() {
 					>
 						<div v-html="frappe.utils.icon('move', 'sm')"></div>
 					</button>
-					<button class="btn btn-xs btn-icon" @click="remove_field">
+					<button class="btn btn-xs btn-icon" @click.stop="remove_field">
 						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
 					</button>
 				</div>
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index 0f9da211e0..d23a599fa6 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -50,6 +50,7 @@ function remove_section() {
 
 	// remove section
 	sections.splice(index, 1);
+	store.selected_field = null;
 }
 
 function select_section() {
@@ -122,7 +123,7 @@ function move_sections_to_tab() {
 					<button
 						class="btn btn-xs btn-section"
 						:title="__('Remove section')"
-						@click="remove_section"
+						@click.stop="remove_section"
 					>
 						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
 					</button>

From 4022a5c5f4ca133d55057a5a6bbb015b5a34c097 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 21:53:23 +0530
Subject: [PATCH 9/9] test: fixed failing UI test

---
 cypress/integration/form_builder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/form_builder.js b/cypress/integration/form_builder.js
index 46e62b2697..84494ddebf 100644
--- a/cypress/integration/form_builder.js
+++ b/cypress/integration/form_builder.js
@@ -244,7 +244,7 @@ context("Form Builder", () => {
 		let first_field =
 			".tab-content.active .section-columns-container:first .column:first .field:first";
 
-		cy.get(".fields-container .field[title='Check']").drag(first_field, {
+		cy.get(".fields-container .field[title='Data']").drag(first_field, {
 			target: { x: 100, y: 10 },
 		});