From c67f2b20d4408df2da42b948503b28eed3bb74af Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurak@list.ru>
Date: Wed, 15 Oct 2014 15:01:17 +0300
Subject: [PATCH] layout manager: ability to make call full width wide

---
 .../res/templates/admin/layouts/grid.tpl      | 26 ++++---
 .../res/templates/admin/layouts/rows.tpl      |  4 +-
 .../client/src/views/admin/layouts/detail.js  |  6 +-
 .../client/src/views/admin/layouts/grid.js    | 78 +++++++++++++++----
 .../client/src/views/admin/layouts/rows.js    | 11 ++-
 5 files changed, 94 insertions(+), 31 deletions(-)

diff --git a/frontend/client/res/templates/admin/layouts/grid.tpl b/frontend/client/res/templates/admin/layouts/grid.tpl
index c2a9c7829c..1f8e49b725 100644
--- a/frontend/client/res/templates/admin/layouts/grid.tpl
+++ b/frontend/client/res/templates/admin/layouts/grid.tpl
@@ -55,6 +55,10 @@
 		float: left;
 	}
 	
+	#layout ul.panels ul.cells > li[data-full-width="true"] {
+		width: 94%;
+	}
+	
 	#layout ul.cells > li {
 		list-style: none;
 		border: 1px solid #CCC;
@@ -138,7 +142,7 @@
 	<div class="col-md-8">
 		<div class="well">
 			<header>Layout</header>		
-			<a href="javascript:;" data-action="add-panel">{{translate 'Add Panel' scope='Admin'}}</a>		
+			<a href="javascript:;" data-action="addPanel">{{translate 'Add Panel' scope='Admin'}}</a>		
 			<ul class="panels"></ul>
 		</div>		
 	</div>
@@ -148,7 +152,7 @@
 			<ul class="disabled cells clearfix">
 				{{#each disabledFields}}
 					<li class="cell" data-name="{{./this}}">{{translate this scope=../scope category='fields'}}
-						&nbsp;<a href="javascript:" data-action="remove-field" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>										
+						&nbsp;<a href="javascript:" data-action="removeField" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>										
 					</li>
 				{{/each}}
 			</ul>
@@ -161,7 +165,7 @@
 		<header>
 			<label><%= label %></label>&nbsp;
 			<a href="javascript:" data-action="edit-panel-label" class="edit-panel-label"><i class="glyphicon glyphicon-pencil"></i></a>
-			<a href="javascript:" style="float: right;" data-action="remove-panel" class="remove-panel"><i class="glyphicon glyphicon-remove"></i></a>
+			<a href="javascript:" style="float: right;" data-action="removePanel" class="remove-panel"><i class="glyphicon glyphicon-remove"></i></a>
 		</header>		
 		<ul class="rows">
 		<%
@@ -169,7 +173,7 @@
 				var row = rows[i];
 		%>
 			<li>
-				<div><a href="javascript:" data-action="remove-row" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
+				<div><a href="javascript:" data-action="removeRow" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
 				<ul class="cells">
 				<%
 					for (var j in row) {
@@ -179,13 +183,15 @@
 						var cell = row[j];
 						if (cell !== false) {
 				%>
-						<li class="cell" data-name="<%= cell.name %>"><%= cell.label %>
-							<a href="javascript:" data-action="remove-field" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>														
+						<li class="cell" data-name="<%= cell.name %>" data-full-width="<%= cell.fullWidth || '' %>"><%= cell.label %>
+							<a href="javascript:" data-action="removeField" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>														
 						</li>
 				<%			
 						} else {
 				%>
-						<li class="empty cell"></li>
+						<li class="empty cell">
+							<a href="javascript:" data-action="minusCell" class="remove-field"><i class="glyphicon glyphicon-minus"></i></a>
+						</li>
 				<%	
 						}
 					}
@@ -197,17 +203,17 @@
 		%>		
 		</ul>
 		<div>
-			<a href="javascript:" data-action="add-row"><i class="glyphicon glyphicon-plus"></i></a>
+			<a href="javascript:" data-action="addRow"><i class="glyphicon glyphicon-plus"></i></a>
 		</div>
 	</li>
 </div>
 
 <div id="layout-row-tpl" style="display: none;">
 	<li>
-		<div><a href="javascript:" data-action="remove-row" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
+		<div><a href="javascript:" data-action="removeRow" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
 		<ul class="cells">
 			<% for (var i = 0; i < {{columnCount}}; i++) { %>
-				<li class="empty cell"></li>
+				<li class="empty cell"><a href="javascript:" data-action="minusCell" class="remove-field"><i class="glyphicon glyphicon-minus"></i></a></li>
 			<% } %>
 		</ul>
 	</li>
diff --git a/frontend/client/res/templates/admin/layouts/rows.tpl b/frontend/client/res/templates/admin/layouts/rows.tpl
index cf49e8daf0..b4e46ca5ae 100644
--- a/frontend/client/res/templates/admin/layouts/rows.tpl
+++ b/frontend/client/res/templates/admin/layouts/rows.tpl
@@ -70,12 +70,12 @@
 			<header>{{translate 'Enabled' scope='Admin'}}</header>
 			<ul class="enabled connected">
 				{{#each layout}}
-					<li draggable="true" {{#each ../dataAttributes}}data-{{./this}}="{{prop ../this this}}" {{/each}}>
+					<li draggable="true" {{#each ../dataAttributes}}data-{{toDom this}}="{{prop ../this this}}" {{/each}}>
 						<div class="left">
 							<label>{{label}}</label>
 						</div>
 						{{#if ../editable}}
-						<div class="right"><a href="javascript:" data-action="edit-field" class="edit-field"><i class="glyphicon glyphicon-pencil"></i></a></div>
+						<div class="right"><a href="javascript:" data-action="editField" class="edit-field"><i class="glyphicon glyphicon-pencil"></i></a></div>
 						{{/if}}
 					</li>
 				{{/each}}
diff --git a/frontend/client/src/views/admin/layouts/detail.js b/frontend/client/src/views/admin/layouts/detail.js
index e1f2ccd9ae..b25cd05479 100644
--- a/frontend/client/src/views/admin/layouts/detail.js
+++ b/frontend/client/src/views/admin/layouts/detail.js
@@ -23,7 +23,11 @@ Espo.define('Views.Admin.Layouts.Detail', 'Views.Admin.Layouts.Grid', function (
 
 	return Dep.extend({
 	
-		dataAttributes: ['name'],
+		dataAttributes: ['name', 'fullWidth'],
+		
+		dataAttributesDefs: {
+			fullWidth: 'bool',
+		},
 		
 		ignoreList: ['modifiedAt', 'createdAt', 'modifiedBy', 'createdBy', 'assignedUser', 'teams'],
 	
diff --git a/frontend/client/src/views/admin/layouts/grid.js b/frontend/client/src/views/admin/layouts/grid.js
index 713c014090..68f64baa1a 100644
--- a/frontend/client/src/views/admin/layouts/grid.js
+++ b/frontend/client/src/views/admin/layouts/grid.js
@@ -44,11 +44,11 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 		},
 		
 		events: _.extend({				
-			'click #layout a[data-action="add-panel"]': function () {
+			'click #layout a[data-action="addPanel"]': function () {
 				this.addPanel();
 				this.makeDraggable();
 			},
-			'click #layout a[data-action="remove-panel"]': function (e) {
+			'click #layout a[data-action="removePanel"]': function (e) {
 				$(e.target).closest('ul.panels > li').find('ul.cells > li').each(function (i, li) {
 					if ($(li).attr('data-name')) {
 						$(li).appendTo($('#layout ul.disabled'));
@@ -56,13 +56,13 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 				});
 				$(e.target).closest('ul.panels > li').remove();
 			},
-			'click #layout a[data-action="add-row"]': function (e) {					
+			'click #layout a[data-action="addRow"]': function (e) {					
 				var tpl = this.unescape($("#layout-row-tpl").html());
 				var html = _.template(tpl);					
 				$(e.target).closest('ul.panels > li').find('ul.rows').append(html);
 				this.makeDraggable();
 			},
-			'click #layout a[data-action="remove-row"]': function (e) {
+			'click #layout a[data-action="removeRow"]': function (e) {
 				$(e.target).closest('ul.rows > li').find('ul.cells > li').each(function (i, li) {
 					if ($(li).attr('data-name')) {
 						$(li).appendTo($('#layout ul.disabled'));
@@ -70,22 +70,56 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 				});
 				$(e.target).closest('ul.rows > li').remove();
 			},
-			'click #layout a[data-action="remove-field"]': function (e) {		
+			'click #layout a[data-action="removeField"]': function (e) {		
 				var el = $(e.target).closest('li');				
 				var index = el.index();
-				var parent = el.parent();				
+				var parent = el.parent();
 			
 				el.appendTo($("ul.disabled"));
 				
 				var empty = $('<li class="empty disabled"></li>');
-				
-				if (index == 0) {
-					parent.prepend(empty);
-				} else {
-					empty.insertAfter(parent.children(':nth-child(' + index + ')'));
+				if (el.data('full-width')) {
+					for (var i = 0; i < this.columnCount; i++) {
+						parent.append(empty.clone());
+					}
+				} else {		
+							
+					if (index == 0) {
+						parent.prepend(empty);
+					} else {
+						empty.insertAfter(parent.children(':nth-child(' + index + ')'));
+					}
 				}
+				
+				el.data('full-width', null);
+				el.removeAttr('data-full-width');
+				
 				this.makeDraggable();
 			},
+			'click #layout a[data-action="minusCell"]': function (e) {
+				if (this.columnCount < 2) {
+					return;
+				}
+				$li = $(e.currentTarget).closest('li');					
+				$ul = $li.parent();
+				
+				var count = 0;
+				
+				var isEmpty = false;
+				if ($ul.children('li:not(.empty)').size() == 0) {
+					isEmpty = true;
+				}
+				
+				$ul.children('li.empty').remove();
+				$ul.children('li:not(:first-child)').remove();
+				$ul.children('li').data('full-width', true).attr('data-full-width', true);	
+				
+				if (isEmpty) {
+					$ul.append($('<li class="empty disabled"></li>').data('full-width', true).attr('data-full-width', true));
+					this.makeDraggable();
+				}	
+				
+			},
 			'click #layout a[data-action="edit-panel-label"]': function (e) {
 				var el = $(e.target).closest('header').children('label');
 				var value = el.text();
@@ -117,12 +151,21 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 		
 		addPanel: function (data) {
 			var tpl = this.unescape($("#layout-panel-tpl").html());
+			
+			var empty = false;
+			if (!data) {
+				empty = true;
+			}
+			
 			data = data || {label: 'new panel', rows: [[]]};
 							
 			data.rows.forEach(function (row) {
 				var rest = this.columnCount - row.length;
-				for (var i = 0; i < rest; i++) {
-					row.push(false);
+				
+				if (empty) {
+					for (var i = 0; i < rest; i++) {
+						row.push(false);
+					}
 				}
 				for (var i in row) {
 					if (row[i] != false) {
@@ -175,6 +218,10 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 						}
 					}
 					
+					if ($(this).data('full-width')) {
+						$(ui.draggable).data('full-width', true).attr('data-full-width', true);
+					}
+					
 					ui.draggable.css({
 						top: 0,
 						left: 0,
@@ -211,7 +258,10 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
 						if (!$(li).hasClass('empty')) {										
 							cell = {};
 							self.dataAttributes.forEach(function (attr) {
-								cell[attr] = $(li).data(attr);
+								var value = $(li).data(Espo.Utils.toDom(attr)) || null;
+								if (value) {							
+									cell[attr] = value;								
+								} 
 							});
 						}
 						row.push(cell);
diff --git a/frontend/client/src/views/admin/layouts/rows.js b/frontend/client/src/views/admin/layouts/rows.js
index 69a692c0c9..68ede95161 100644
--- a/frontend/client/src/views/admin/layouts/rows.js
+++ b/frontend/client/src/views/admin/layouts/rows.js
@@ -23,13 +23,14 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
 
 	return Dep.extend({	
 	
-		template: 'admin.layouts.rows',			
+		template: 'admin.layouts.rows',
+
 		
 		events: _.extend({
-			'click #layout a[data-action="edit-field"]': function (e) {								
+			'click #layout a[data-action="editField"]': function (e) {								
 				var data = {};
 				this.dataAttributes.forEach(function (attr) {
-					data[attr] =  $(e.target).closest('li').data(attr)
+					data[attr] =  $(e.target).closest('li').data(Espo.Utils.toDom(attr))
 				});					
 				this.openEditDialog(data);
 			},
@@ -37,6 +38,8 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
 		
 		dataAttributes: null,
 		
+		dataAttributesDefs: {},
+		
 		editable: false,
 		
 		data: function () {
@@ -64,7 +67,7 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
 			$("#layout ul.enabled > li").each(function (i, el) {
 				var o = {};
 				this.dataAttributes.forEach(function (attr) {
-					var value = $(el).data(attr);
+					var value = $(el).data(Espo.Utils.toDom(attr)) || null;
 					if (value) {
 						o[attr] = value;
 					}