jsdialog: Add headers support for treelistbox

Change-Id: I2d7972a8bde1108648f867a3a5c4e65a98472556
Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>

2 files changed, 42 insertions, 4 deletions

diff --git a/loleaflet/css/jsdialogs.css b/loleaflet/css/jsdialogs.css
index ebea6e791b..b7669680f9 100644
--- a/loleaflet/css/jsdialogs.css
+++ b/loleaflet/css/jsdialogs.css
@@ -108,7 +108,9 @@
 }
 
 .ui-treeview-entry:hover,
-.ui-treeview-entry.selected {
+.ui-treeview-entry.selected,
+.ui-listview-entry:hover,
+.ui-listview-entry.selected {
 	background-color: silver;
 }
 
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 7bbdd2a0f4..e6dbabb5b4 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1627,12 +1627,39 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		});
 	},
 
+	_headerlistboxEntry: function (parentContainer, treeViewData, entry, builder) {
+		if (entry.selected && (entry.selected === 'true' || entry.selected === true))
+			$(parentContainer).addClass('selected');
+
+		for (var i in entry.columns) {
+			var td = L.DomUtil.create('td', '', parentContainer);
+			td.innerText = entry.columns[i].text;
+
+			$(td).click(function() {
+				console.error('click');
+				$('#' + treeViewData.id + ' .ui-listview-entry').removeClass('selected');
+				$(parentContainer).addClass('selected');
+
+				builder.callback('treeview', 'select', treeViewData, entry.row, builder);
+			});
+		}
+	},
+
 	_treelistboxControl: function (parentContainer, data, builder) {
 		var table = L.DomUtil.create('table', builder.options.cssClass + ' ui-treeview', parentContainer);
 		table.id = data.id;
 
 		var tbody = L.DomUtil.create('tbody', builder.options.cssClass + ' ui-treeview-body', table);
 
+		var isHeaderListBox = data.headers && data.headers.length !== 0;
+		if (isHeaderListBox) {
+			var headers = L.DomUtil.create('tr', builder.options.cssClass + ' ui-treeview-header', tbody);
+			for (var h in data.headers) {
+				var header = L.DomUtil.create('th', builder.options.cssClass, headers);
+				header.innerText = data.headers[h].text;
+			}
+		}
+
 		tbody.ondrop = function (ev) {
 			ev.preventDefault();
 			var row = ev.dataTransfer.getData('text');
@@ -1645,10 +1672,19 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		if (!data.entries || data.entries.length === 0)
 			return false;
 
-		var ul = L.DomUtil.create('ul', builder.options.cssClass, tbody);
+		if (isHeaderListBox) {
+			// list view with headers
+			for (var i in data.entries) {
+				var tr = L.DomUtil.create('tr', builder.options.cssClass + ' ui-listview-entry', tbody);
+				builder._headerlistboxEntry(tr, data, data.entries[i], builder);
+			}
+		} else {
+			// tree view
+			var ul = L.DomUtil.create('ul', builder.options.cssClass, tbody);
 
-		for (var i in data.entries) {
-			builder._treelistboxEntry(ul, data, data.entries[i], builder);
+			for (i in data.entries) {
+				builder._treelistboxEntry(ul, data, data.entries[i], builder);
+			}
 		}
 
 		return false;