UI-2516: add way to display more entries with monster tables

2600hz · Dec 29, 2016 · 8eb2e55 · 8eb2e55
1 parent 93f591d
commit 8eb2e55
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 3 deletions.
diff --git 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
@@ -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;
 }
diff --git a/src/apps/core/views/monster-table-pageSize.html 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>
diff --git 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
@@ -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
@@ -74,6 +74,9 @@ require.config({
 		'plugins': ['jquery'],
 		'kazoosdk': ['jquery'],
 		'touch-punch': ['jqueryui'],
+		'footable': {
+			'exports': 'FooTable'
+		},
 		'underscore': {
 			'exports': '_'
 		},