sgGrid

Needing a -simple- dialog system for Angular-JS supporting modals, dynamic templates, dragging,
and a consisten skin for ALL the dialogs i wrote this small module.

The library is able to open nested modal dialogs, alerts and confirm.

The source is here: sgGrid.1.0.0.zip.

When the count is present:

Sample With Count

Notes

The sample can be run with Firefox, in general or by running, into the directory,

Installation

var myApp = angular.module('myApp',['sgGrid']);

Usage

The controller

The following variables must be set

	$scope.data = [];	//The ngModel
	$scope.pageSize = 10;
	$scope.maxPages = 10;
	$scope.totalCount = 0;
	$scope.currentPage = 0;
	$scope.buttons = [];	//The buttons list

First a function must be added to build the address of the REST service. It should
get

	var getAddress = function(requiredPage,pageSize,itemsToRetrieve){
		...
	}

A function to get the array of items from the response.

	var getResponseData = function(response,headers){
		...
	}

A function to get the total number of items from the response

	var getTotalCount = function(response,headers){
		...
	}

Then the load data function will be as the following. Note that we call getAddress requiring one
item more than the page size, this is to ensure that we know if a next page exists!

	$scope.loadData = function(requiredPage){
		//Sanity check
		if(!requiredPage){
			requiredPage = 0;
		}
		
		//Getting the address
		$http.get(getAddress(requiredPage,$scope.pageSize,$scope.pageSize+1))
			.success(function(response, status, headers, config){
				var data = getResponseData(response,header);
				$scope.hasNext = data.length > $scope.pageSize;
				if($scope.hasNext){
					data = data.splice(0,$scope.pageSize);
				}
				//If has a count
				listTotal = getTotalCount(response,headers);
				
				$scope.currentPage = requiredPage;
				$scope.listTotal = listTotal;
				$scope.data = data;
			});
		}

Controller without count

When the service does not return the total number of available items we can work this way.
We use the pageSize+1 element as a marker!

	$scope.loadData = function(requiredPage){
		//Sanity check
		if(!requiredPage){
			requiredPage = 0;
		}
		
		//Getting the address
		$http.get(getAddress(requiredPage,$scope.pageSize,$scope.pageSize+1))
			.success(function(response, status, headers, config){
				var data = getResponseData(response,header);
				$scope.hasNext = data.length > $scope.pageSize;
				if($scope.hasNext){
					data = data.splice(0,$scope.pageSize);
				}
				//If has a count
				listTotal =  $scope.pageSize*(requiredPage+1) + ($scope.hasNext?1:0);
				
				$scope.currentPage = requiredPage;
				$scope.listTotal = listTotal;
				$scope.data = data;
			});
		}

The template

We setup the attributes

The paginaton buttons contains the fields

<div sg-grid
	ng-model="data"
	sg-page-size="pageSize" 
	sg-load-data="loadData" 
	sg-max-pages="maxPages"
	sg-current-page="currentPage"
	sg-count="listTotal"
	sg-buttons="buttons">
	<nav>
		<ul class="pagination">
			<li ng-repeat="button in buttons" ng-class="{'active':button.selected}">
					<a ng-click="button.go()" >{{button.label}}</a>
			</li>
		</ul>
	</nav>
	<table class="table">
		<tr><th>First Name</th><th>Last Name</th><th>&nbsp;</th></tr>
		<tr ng-repeat="customer in data">
			<td>{{customer.first_name}}</td>
			<td>{{customer.last_name}}</td>
			<td>
				<button type="button" class="btn btn-default btn-sm" ng-click="show(customer)">
					<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
				</button>
			</td>
		</tr>
	</table>
</div>

History