From 72e9df5460b77cffe9260449efe8d07c4695e5fd Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 19 Oct 2021 19:22:23 +0530
Subject: [PATCH] fix: section fields orientation

- Option to render fields in a section in left-right orientation
- this is useful in cases where rendering currency values one below the other makes more sense
---
 .../PrintFormatSection.vue                    | 137 ++++++++++++------
 .../templates/print_format/macros/Data.html   |  13 +-
 2 files changed, 105 insertions(+), 45 deletions(-)

diff --git a/frappe/public/js/print_format_builder/PrintFormatSection.vue b/frappe/public/js/print_format_builder/PrintFormatSection.vue
index b278a593f7..9a065e5e26 100644
--- a/frappe/public/js/print_format_builder/PrintFormatSection.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatSection.vue
@@ -8,60 +8,54 @@
 					:placeholder="__('Section Title')"
 					v-model="section.label"
 				/>
-				<div class="dropdown">
-					<button
-						class="btn btn-xs btn-section dropdown-button"
-						data-toggle="dropdown"
+				<div class="d-flex align-items-center">
+					<div
+						class="mr-2 text-small text-muted d-flex"
+						v-if="section.field_orientation == 'left-right'"
+						:title="
+							// prettier-ignore
+							__('Render labels to the left and values to the right in this section')
+						"
 					>
-						<svg class="icon icon-sm">
-							<use xlink:href="#icon-dot-horizontal"></use>
-						</svg>
-					</button>
-					<div class="dropdown-menu dropdown-menu-right" role="menu">
-						<button class="dropdown-item" @click="$emit('add_section_above')">
-							{{ __("Add section above") }}
-						</button>
+						Label → Value
+					</div>
+					<div class="dropdown">
 						<button
-							class="dropdown-item"
-							@click="add_column"
-							v-if="section.columns.length < 4"
+							class="btn btn-xs btn-section dropdown-button"
+							data-toggle="dropdown"
 						>
-							{{ __("Add column") }}
+							<svg class="icon icon-sm">
+								<use xlink:href="#icon-dot-horizontal"></use>
+							</svg>
 						</button>
-						<button
-							class="dropdown-item"
-							@click="add_page_break"
-							v-if="!section.page_break"
+						<div
+							class="dropdown-menu dropdown-menu-right"
+							role="menu"
 						>
-							{{ __("Add page break") }}
-						</button>
-						<button
-							class="dropdown-item"
-							@click="remove_page_break"
-							v-if="section.page_break"
-						>
-							{{ __("Remove page break") }}
-						</button>
-						<button
-							class="dropdown-item"
-							@click="remove_column"
-							v-if="section.columns.length > 1"
-						>
-							{{ __("Remove column") }}
-						</button>
-						<button
-							class="dropdown-item"
-							@click="$set(section, 'remove', true)"
-						>
-							{{ __("Remove section") }}
-						</button>
+							<button
+								v-for="option in section_options"
+								class="dropdown-item"
+								@click="option.action"
+							>
+								{{ option.label }}
+							</button>
+						</div>
 					</div>
 				</div>
 			</div>
 			<div class="row section-columns">
-				<div class="column col" v-for="(column, i) in section.columns" :key="i">
+				<div
+					class="column col"
+					v-for="(column, i) in section.columns"
+					:key="i"
+				>
 					<draggable
 						class="drag-container"
+						:style="{
+							backgroundColor: column.fields.length
+								? null
+								: 'var(--gray-50)'
+						}"
 						v-model="column.fields"
 						group="fields"
 						:animation="150"
@@ -75,7 +69,10 @@
 				</div>
 			</div>
 		</div>
-		<div class="my-4 text-muted text-center font-italic" v-if="section.page_break">
+		<div
+			class="my-4 text-center text-muted font-italic"
+			v-if="section.page_break"
+		>
 			{{ __("Page Break") }}
 		</div>
 	</div>
@@ -124,6 +121,57 @@ export default {
 		get_fields(column) {
 			return column.fields.filter(df => !df.remove);
 		}
+	},
+	computed: {
+		section_options() {
+			return [
+				{
+					label: __("Add section above"),
+					action: () => this.$emit("add_section_above")
+				},
+				{
+					label: __("Add column"),
+					action: this.add_column,
+					condition: () => this.section.columns.length < 4
+				},
+				{
+					label: __("Remove column"),
+					action: this.remove_column,
+					condition: () => this.section.columns.length > 1
+				},
+				{
+					label: __("Add page break"),
+					action: this.add_page_break,
+					condition: () => !this.section.page_break
+				},
+				{
+					label: __("Remove page break"),
+					action: this.remove_page_break,
+					condition: () => this.section.page_break
+				},
+				{
+					label: __("Remove section"),
+					action: () => this.$set(this.section, "remove", true)
+				},
+				{
+					label: __("Field Orientation (Left-Right)"),
+					condition: () => !this.section.field_orientation,
+					action: () =>
+						this.$set(
+							this.section,
+							"field_orientation",
+							"left-right"
+						)
+				},
+				{
+					label: __("Field Orientation (Top-Down)"),
+					condition: () =>
+						this.section.field_orientation == "left-right",
+					action: () =>
+						this.$set(this.section, "field_orientation", "")
+				}
+			].filter(option => (option.condition ? option.condition() : true));
+		}
 	}
 };
 </script>
@@ -192,5 +240,6 @@ export default {
 .drag-container {
 	height: 100%;
 	min-height: 2rem;
+	border-radius: var(--border-radius);
 }
 </style>
diff --git a/frappe/templates/print_format/macros/Data.html b/frappe/templates/print_format/macros/Data.html
index d0c294ccf5..2fa0e1484b 100644
--- a/frappe/templates/print_format/macros/Data.html
+++ b/frappe/templates/print_format/macros/Data.html
@@ -1,4 +1,14 @@
-{% if doc.get(fieldname) %}
+{% if doc.get(df.fieldname) %}
+{%- if df.section.field_orientation == 'left-right' -%}
+<div class="field row">
+	<div class="col-6 label" {{ field_attributes(df) }}>
+		{{ df.label }}
+	</div>
+	<div class="col-6 value {{ 'text-right' if df.fieldtype in ['Int', 'Float', 'Currency'] else '' }}" {{ field_attributes(df) }}>
+		{{ doc.get_formatted(df.fieldname) }}
+	</div>
+</div>
+{%- else -%}
 <div class="field">
 	<div class="label" {{ field_attributes(df) }}>
 		{{ df.label }}
@@ -7,4 +17,5 @@
 		{{ doc.get_formatted(df.fieldname) }}
 	</div>
 </div>
+{%- endif -%}
 {% endif %}