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] 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;