[WIP] Option to align field in Print Format Builder (#2109)

frappe/print/page/print_format_builder/print_format_builder.js

@@ -198,6 +198,7 @@ frappe.PrintFormatBuilder = Class.extend({
 		this.setup_sortable();
 		this.setup_add_section();
 		this.setup_edit_heading();
+		this.setup_field_settings();
 	},
 	prepare_data: function() {
 		this.print_heading_template = null;
@@ -423,6 +424,50 @@ frappe.PrintFormatBuilder = Class.extend({
 			return false;
 		});
 	},
+	setup_field_settings: function() {
+		var me = this;
+		this.page.main.on("click", ".field-settings", function() {
+			var field = $(this).parent();
+
+			// new dialog
+			var d = new frappe.ui.Dialog({
+				title: "Set Properties",
+				fields: [
+					{
+						label:__("Label"),
+						fieldname:"label",
+						fieldtype:"Data"
+					},
+					{
+						label: __("Align Value"),
+						fieldname: "align",
+						fieldtype: "Select",
+						options: [{'label': __('Left'), 'value': 'left'}, {'label': __('Right'), 'value': 'right'}]
+					},
+				],
+			});
+			
+			d.set_value('label', field.attr("data-label"));
+			
+			d.set_primary_action(__("Update"), function() {
+				field.attr('data-align', d.get_value('align'));
+				field.attr('data-label', d.get_value('label'));
+				field.find('.field-label').html(d.get_value('label'));
+				d.hide();
+			});
+
+			// set current value
+			if(field.attr('data-align')) {
+				d.set_value('align', field.attr('data-align'));
+			} else {
+				d.set_value('align', 'left');
+			}
+
+			d.show();
+
+			return false;
+		});
+	},
 	update_columns_in_section: function(section, no_of_columns, new_no_of_columns) {
 		var col_size = 12 / new_no_of_columns,
 			me = this,
@@ -645,10 +690,21 @@ frappe.PrintFormatBuilder = Class.extend({
 				$(this).find(".print-format-builder-field").each(function() {
 					var $this = $(this),
 						fieldtype = $this.attr("data-fieldtype"),
+						align = $this.attr('data-align'),
+						label = $this.attr('data-label'),
 						df = {
 							fieldname: $this.attr("data-fieldname"),
 							print_hide: 0
 						};
+						
+					if(align) {
+						df.align = align;
+					}
+					
+					if(label) {
+						df.label = label;
+					}
+
 					if(fieldtype==="Table") {
 						// append the user selected columns to visible_columns
 						var columns = $this.attr("data-columns").split(",");

frappe/print/page/print_format_builder/print_format_builder_field.html

@@ -2,12 +2,17 @@
     {% if(field.print_hide) { %}style="background-color: #F7FAFC; color: #8D99A6;"
         title="{{ __("Hidden") }}"{% } %}
     data-fieldname="{%= field.fieldname %}"
-    data-label="{%= field.label %}"
+    data-label="{{ field.label }}"
+	
+	{% if field.align %}data-align="{{ field.align }}"{% endif %}
     data-fieldtype="{%= field.fieldtype %}"
     {% if(field.fieldtype==="Table") { %}
         data-columns="{%= me.get_visible_columns_string(field) %}"
         data-doctype="{%= field.options %}"
     {% } %}>
+    <a class="field-settings pull-right
+        btn-default btn-xs" style="padding-top: 3px">
+        <span class="octicon octicon-gear text-muted"></span></a>
     {% if(field.fieldtype==="Custom HTML") { %}
         <div class="text-right">
             <a class="edit-html btn btn-default btn-xs">
@@ -15,7 +20,7 @@
         </div>
         <div class="html-content">{%= field.options || me.get_no_content() %}</div>
     {% } else { %}
-        <span>{%= field.label %}</span>
+        <span class="field-label">{{ field.label }}</span>
         {% if(field.fieldtype==="Table") { %}
             <span> ({%= __("Table") %})</span>
             <a class="pull-right select-columns btn btn-default btn-xs">

frappe/print/page/print_format_builder/print_format_builder_section.html

@@ -1,7 +1,7 @@
 <div class="print-format-builder-section row light-bg" data-label={{ section.label || "" }}>
     <div class="print-format-builder-section-head">
         <a class="section-settings pull-right
-            btn-default btn-xs">
+            btn-default btn-xs" style="padding-top: 3px">
             <span class="octicon octicon-gear text-muted"></span></a>
         <span class="octicon octicon-three-bars drag-handle"></span>
         <span class="section-label">{{ section.label || "" }}</span>

frappe/templates/print_formats/standard_macros.html

@@ -29,7 +29,7 @@
 					<tr>
 						<th style="width: 40px" class="table-sr">Sr</th>
 						{% for tdf in visible_columns %}
-							<th style="width: {{ get_width(tdf) }};" class="{{ get_align_class(tdf.fieldtype) }}" {{ fieldmeta(df) }}>
+							<th style="width: {{ get_width(tdf) }};" class="{{ get_align_class(tdf) }}" {{ fieldmeta(df) }}>
 								{{ _(tdf.label) }}</th>
 						{% endfor %}
 					</tr>
@@ -39,7 +39,7 @@
 					<tr>
 						<td class="table-sr">{{ d.idx }}</td>
 						{% for tdf in visible_columns %}
-							<td class="{{ get_align_class(tdf.fieldtype) }}" {{ fieldmeta(df) }}>
+							<td class="{{ get_align_class(tdf) }}" {{ fieldmeta(df) }}>
                                 <div class="value">{{ print_value(tdf, d, doc) }}</div></td>
 						{% endfor %}
 					</tr>
@@ -59,13 +59,17 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 		<div class="row {% if df.bold %}important{% endif %} data-field" {{ fieldmeta(df) }}>
 			<div class="col-xs-{{ "9" if df.fieldtype=="Check" else "5" }}
 				{%- if not doc._align_labels_left %} text-right{%- endif -%}">
-				{% if df.fieldtype not in ("Image","HTML") and
+				{% if df.fieldtype not in ("Image","HTML","Check") and
 					doc.get(df.fieldname) != None %}
 				<label>{{ _(df.label) }}</label>
 				{% endif %}
+				{% if df.fieldtype == "Check" and
+				doc.get(df.fieldname) != 0 %}
+				<label>{{ _(df.label) }}</label>
+				{% endif %}
 			</div>
 			<div class="col-xs-{{ "3" if df.fieldtype=="Check" else "7" }}
-			{{ get_align_class(df.fieldtype) }} value">
+			{{ get_align_class(df) }} value">
 				{% if doc.get(df.fieldname) != None -%}
 					{{ print_value(df, doc) }}{% endif %}
 			</div>
@@ -95,7 +99,7 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 			doc.print_templates.get(df.fieldname) %}
         {% include doc.print_templates[df.fieldname] %}
 	{% elif df.fieldtype=="Check" %}
-		<i class="{{ 'icon-check' if doc[df.fieldname] else 'icon-check-empty' }}"></i>
+		<i class="{{ 'icon-check' if doc[df.fieldname] }}"></i>
 	{% elif df.fieldtype=="Image" %}
 		<img src="{{ doc[doc.meta.get_field(df.fieldname).options] }}"
 			class="img-responsive"
@@ -117,8 +121,9 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 	{%- else -%}{{ 150 }}px{% endif -%}
 {%- endmacro %}
 
-{% macro get_align_class(fieldtype) %}
-	{%- if fieldtype in ("Int", "Float", "Currency", "Check") -%}{{ "text-right" }}
+{% macro get_align_class(df) %}
+	{%- if df.align -%}{{ "text-" + df.align }}
+	{%- elif df.fieldtype in ("Int", "Float", "Currency", "Check") -%}{{ "text-right" }}
 	{%- else -%}{{ "" }}
 	{%- endif -%}
 {% endmacro %}