Now With Pagination

admin/tools/users.tool

@@ -20,99 +20,142 @@
 	var users = {
 		showInTable: ['firstname', 'lastname', 'email', 'membership'],
 		curUserData: null,
+		page: {
+			max: Number.MAX_VALUE,
+			cur: function() {
+				return parseInt(tools.mem.session.get('curPage'));
+			},
+			set: function(num) {
+				num = parseInt(num);
+				if (num > 0 && num < users.page.max+1)
+					tools.mem.session.set('curPage', num);
+				$('.users-cur-page-cont').html(users.page.cur());
+				users.get();
+			},
+			inc: function() {
+				users.page.set(users.page.cur() + 1);
+			},
+			dec: function() {
+				users.page.set(users.page.cur() - 1);
+			}
+		},
+		get: function() {
+			amivcore.users.GET({
+				data: {
+					'max_results': '50',
+					page: users.page.cur(),
+				}
+			}, function(ret) {
+
+				if (ret === undefined || ret['_items'].length == 0) {
+					tools.log('No Data', 'w');
+					return;
+				}
+
+				users.meta = ret['_meta'];
+				users.page.max = Math.ceil(users.meta.total / users.meta.max_results);
+				$('.users-page-max-cont').html(users.page.max);
+
+				// Clear table from previous contentent
+				$('.users-table thead, .users-table tbody').html('');
+
+				users.showInTable.forEach(function(i) {
+					$('.users-table thead tr').append('<th>' + i + '</th>');
+				});
+
+				for (var n in ret['_items']) {
+					var tmp = '';
+					users.showInTable.forEach(function(i) {
+						tmp += '<td>' + ret['_items'][n][i] + '</td>';
+					});
+					$('.users-table tbody').append('<tr data-id="' + ret['_items'][n]['id'] + '">' + tmp + '</tr>');
+				}
+				$('.users-table tbody tr').click(users.showDetails);
+			});
+		},
+
+		// Make Modal with editable table data
+		showDetails: function() {
+			amivcore.users.GET({
+				id: $(this).attr('data-id')
+			}, function(ret) {
+				curUserData = ret;
+				var tmp = '<table class="table table-hover users-user-edit-table" data-etag="' + ret['_etag'] + '"><tbody>';
+				for (var cur in ret)
+					if (cur.charAt(0) != '_')
+						tmp += '<tr><td>' + cur + '</td><td contenteditable>' + ret[cur] + '</td></tr>'
+				tmp += '</tbody></table>';
+
+				tools.modal({
+					head: ret.firstname + ' ' + ret.lastname,
+					body: tmp,
+					button: 'OK',
+					success: users.inspectUser
+				});
+
+			});;
+		},
+
+		// Check wether changes were maid and saves it in that case
+		inspectUser: function() {
+			var newUserData = {};
+			$('.users-user-edit-table tr').each(function() {
+				newUserData[$(this).children('td:nth-child(1)').html()] = $(this).children('td:nth-child(2)').html();
+			});
+			var changed = false,
+				curUserDataChanged = {};
+			for (var i in newUserData) {
+				if (newUserData[i] != String(curUserData[i])) {
+					changed = true;
+					curUserDataChanged[i] = newUserData[i];
+				}
+			}
+			if (changed) {
+				amivcore.users.PATCH({
+					id: curUserData.id,
+					header: {
+						'If-Match': $('.users-user-edit-table').attr('data-etag')
+					},
+					data: curUserDataChanged
+				}, function() {
+					tools.log('User Updated', 's');
+					users.get();
+				});
+			}
+		}
 	};
 
+	// Setup Menu
 	tools.ui.menu({
 		'<span class="glyphicon glyphicon-user" aria-hidden="true"></span>': {
 			callback: function() {}
 		},
 		'<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>': {
-			callback: function() {}
+			callback: users.page.dec
 		},
-		'<span class="users-cur-page" aria-hidden="true">0</span>': {
-			callback: function() {}
+		'<span class="users-cur-page-cont" aria-hidden="true"></span> / <span class="users-page-max-cont" aria-hidden="true"></span>': {
+			callback: function() {
+				tools.modal({
+					head: 'Go To Page:',
+					body: '<div class="form-group"><input type="number" value="' + users.page.cur() + '" class="form-control users-go-page"></div>',
+					button: 'GO',
+					success: function() {
+						users.page.set($('.users-go-page').val());
+					}
+				})
+			}
 		},
 		'<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>': {
-			callback: function() {}
+			callback: users.page.inc
 		},
 		'<span class="glyphicon glyphicon-search" aria-hidden="true"></span>': {
 			callback: function() {}
 		}
 	});
 
-	function inspectUser() {
-		var newUserData = {};
-		$('.users-user-edit-table tr').each(function() {
-			newUserData[$(this).children('td:nth-child(1)').html()] = $(this).children('td:nth-child(2)').html();
-		});
-		var changed = false,
-			curUserDataChanged = {};
-		for (var i in newUserData) {
-			if (newUserData[i] != String(curUserData[i])) {
-				changed = true;
-				curUserDataChanged[i] = newUserData[i];
-			}
-		}
-		if (changed) {
-			amivcore.users.PATCH({
-				id: curUserData.id,
-				header: {
-					'If-Match': $('.users-user-edit-table').attr('data-etag')
-				},
-				data: curUserDataChanged
-			}, function(){
-				tools.log('User Updated', 's');
-				tools.getTool('users');
-			});
-		}
-	}
-
-	function showDetails() {
-		amivcore.users.GET({
-			id: $(this).attr('data-id')
-		}, function(ret) {
-			curUserData = ret;
-			var tmp = '<table class="table table-hover users-user-edit-table" data-etag="' + ret['_etag'] + '"><tbody>';
-			for (var cur in ret)
-				if (cur.charAt(0) != '_')
-					tmp += '<tr><td>' + cur + '</td><td contenteditable>' + ret[cur] + '</td></tr>'
-			tmp += '</tbody></table>';
-
-			tools.modal({
-				head: ret.firstname + ' ' + ret.lastname,
-				body: tmp,
-				button: 'OK',
-				success: inspectUser,
-				cancel: function() {
-					console.log('Canceled');
-				}
-			});
-
-		});;
-	}
-
-	amivcore.users.GET({
-		data: {
-			//'max_results': '50'
-		}
-	}, function(ret) {
-
-		if (ret === undefined || ret['_items'].length == 0) {
-			tools.log('No Data', 'w');
-			return;
-		}
-
-		users.showInTable.forEach(function(i) {
-			$('.users-table thead tr').append('<th>' + i + '</th>');
-		});
-
-		for (var n in ret['_items']) {
-			var tmp = '';
-			users.showInTable.forEach(function(i) {
-				tmp += '<td>' + ret['_items'][n][i] + '</td>';
-			});
-			$('.users-table tbody').append('<tr data-id="' + ret['_items'][n]['id'] + '">' + tmp + '</tr>');
-		}
-		$('.users-table tbody tr').click(showDetails);
-	});
+	// Set Initail Page and get first users
+	if (users.page.cur() === null || isNaN(users.page.cur()))
+		users.page.set(1);
+	else
+		users.page.set(users.page.cur());
 </script>