From 8eb2e55c7066544076556a53ada250fe09d038c3 Mon Sep 17 00:00:00 2001
From: Jean-Roch Maitre <odeonn@gmail.com>
Date: Wed, 28 Dec 2016 16:16:48 -0800
Subject: [PATCH] UI-2516: add way to display more entries with monster tables

---
 src/apps/core/i18n/en-US.json                 | 11 +++++++
 src/apps/core/style/app.scss                  | 19 ++++++++++++
 .../core/views/monster-table-pageSize.html    | 12 ++++++++
 src/css/lib/custom/footable-add.css           |  2 +-
 src/js/lib/monster.ui.js                      | 29 +++++++++++++++++--
 src/js/main.js                                |  3 ++
 6 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/apps/core/views/monster-table-pageSize.html

diff --git a/src/apps/core/i18n/en-US.json b/src/apps/core/i18n/en-US.json
index 1336a580c..bd9fda4ed 100644
--- a/src/apps/core/i18n/en-US.json
+++ b/src/apps/core/i18n/en-US.json
@@ -715,5 +715,16 @@
 	"__version": "v4.0",
 	"clipboard": {
 		"successCopy": "Successfully Copied to Clipboard!"
+	},
+
+	"__comment": "UI-2516: allow users to display more entities",
+	"__version": "v4.0",
+	"tablePageSize": {
+		"show": "Show",
+		"entries": "entries",
+		"ten": "10",
+		"twentyFive": "25",
+		"fifty": "50",
+		"hundred": "100"
 	}
 }
diff --git a/src/apps/core/style/app.scss b/src/apps/core/style/app.scss
index 96da545cd..0c5f417ca 100644
--- a/src/apps/core/style/app.scss
+++ b/src/apps/core/style/app.scss
@@ -629,4 +629,23 @@ body,
 .backend-pagination.full .full-load,
 .backend-pagination .partial-load {
 	display: inline-block
+}
+
+/* Page Size Table */
+.table-page-size {
+	float: right;
+	display: inline-block;
+	margin-top: 11px;
+	margin-right: 50px;
+}
+
+.table-page-size select {
+	width: 60px;
+	margin: 0 5px 3px;
+}
+
+/* hacky class to use the same style as footable labels */
+.table-page-size span.label {
+	float: none !important;
+	margin-right: 0 !important;
 }
\ No newline at end of file
diff --git a/src/apps/core/views/monster-table-pageSize.html b/src/apps/core/views/monster-table-pageSize.html
new file mode 100644
index 000000000..ee761715e
--- /dev/null
+++ b/src/apps/core/views/monster-table-pageSize.html
@@ -0,0 +1,12 @@
+<div class="table-page-size">
+	<span class="label label-default">{{i18n.tablePageSize.show}}</span>
+	<select>
+		{{#select pageSize}}
+			<option value="10">{{i18n.tablePageSize.ten}}</option>
+			<option value="25">{{i18n.tablePageSize.twentyFive}}</option>
+			<option value="50">{{i18n.tablePageSize.fifty}}</option>
+			<option value="100">{{i18n.tablePageSize.hundred}}</option>
+		{{/select}}
+	</select>
+	<span class="label label-default">{{i18n.tablePageSize.entries}}</span>
+</div>
\ No newline at end of file
diff --git a/src/css/lib/custom/footable-add.css b/src/css/lib/custom/footable-add.css
index 7c698def7..193ded85e 100644
--- a/src/css/lib/custom/footable-add.css
+++ b/src/css/lib/custom/footable-add.css
@@ -57,7 +57,7 @@ table.footable.monster-table .footable-paging ul.pagination {
 	float: right;
 }
 
-table.footable.monster-table > tfoot > tr.footable-paging > td > span.label {
+table.footable.monster-table > tfoot > tr.footable-paging > td span.label {
 	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
 	color: #333;
 	float: right;
diff --git a/src/js/lib/monster.ui.js b/src/js/lib/monster.ui.js
index 0c945537a..44d8925c7 100644
--- a/src/js/lib/monster.ui.js
+++ b/src/js/lib/monster.ui.js
@@ -2164,6 +2164,25 @@ define(function(require){
 						container.find('tbody').append(rows);
 					});
 				},
+				addPageSizeComponent = function(container, table, pPageSize) {
+					var pageSize = pPageSize || finalOptions.paging.size || 10,
+						pageSizeTemplate = $(monster.template(monster.apps.core, 'monster-table-pageSize', { pageSize: pageSize })),
+						footableInstance;
+
+					pageSizeTemplate.find('select').on('change', function() {
+						pageSize = parseInt($(this).val());
+						footableInstance = footable.get('#'+table.attr('id'));
+
+						footableInstance.pageSize(pageSize);
+
+						addPageSizeComponent(container, table, pageSize);
+
+						// This is useful so when we use the "load more" button, it uses the right page size we just set
+						finalOptions.paging.size = pageSize;
+					});
+
+					container.find('.footable-paging td').append(pageSizeTemplate);
+				},
 				filters = {
 					paginate: false
 				};
@@ -2201,6 +2220,8 @@ define(function(require){
 						var newTable = container.footable(finalOptions),
 							backendTemplate = $(monster.template(monster.apps.core, 'monster-table-backendPagination', { isFull: isAllDataLoaded }));
 
+						addPageSizeComponent(container, newTable);
+
 						monster.ui.tooltips(backendTemplate);
 
 						container.find('.footable-filtering th form').prepend(backendTemplate);
@@ -2236,13 +2257,17 @@ define(function(require){
 				finalOptions.getData(filters, function(rows, data) {
 					addRowsToBody([ rows ]);
 
-					container.footable(finalOptions);
+					var table = container.footable(finalOptions);
+
+					addPageSizeComponent(container, table);
 
 					finalOptions.afterInitialized && finalOptions.afterInitialized();
 				});
 			}
 			else {
-				container.footable(finalOptions);
+				var table = container.footable(finalOptions);
+
+				addPageSizeComponent(container, table);
 
 				finalOptions.afterInitialized && finalOptions.afterInitialized();
 			}
diff --git a/src/js/main.js b/src/js/main.js
index 986702cc9..64ac791aa 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -74,6 +74,9 @@ require.config({
 		'plugins': ['jquery'],
 		'kazoosdk': ['jquery'],
 		'touch-punch': ['jqueryui'],
+		'footable': {
+			'exports': 'FooTable'
+		},
 		'underscore': {
 			'exports': '_'
 		},