Angular-MasterRow

Angular MasterRow is a plugin that bring MasterRow tool into AngularJs projects.

Installation

• Install AngularJS into your project;
• Install MasterRow (you can read the installation procedure in this link.
• Install Angular MasterRow, with this command:

npm install angular-masterrow --save-dev

In your project, inform the reference to the plugin:

Compacted file (smaller):

• <script src='dist/angular-masterrow.min.js' />

Editable file (bigger):

• <script src='dist/angular-masterrow.js' />

Configuration

Angular MasterRow is built as an AngularJs directive. To insert the plugin into a page, create the following tag:

<masterrow>
</masterrow>

You don't need to create any container to hold this tag. Insert the tag inside your desired controller.

The options of MasterRow must be set these attributes:

• mr-to-process-data: The main process function;
• mr-filters: The filter configuration;
• mr-pagination: The pagination configuration;
• mr-detailing: The detailing configuration;
• mr-personalization: The personalization configuration;
• mr-row-action: The action links definition.

Each attributes will receive a value from a AngularJs expression or from a scope variable. Example:

<masterrow 
        mr-to-process-data="appProcess" 
        mr-filters="appFilters" 
        mr-pagination="appPagination", 
        mr-detailing="appDetailing",
	mr-personalization="appPersonalization",
        mr-row-action="appRowAction"
></masterrow>

In the Angular module configuration, set the Angular MasterRow reference, to load this plugin to your project. As it:

var angularTestProject = angular.module('projectTestApp', ['angular-masterrow']);

In your controller object, set the scope variables. Each option must receive the same structure described in the MasterRow options. The process function also must be set, by the 'agt-to-process-data' attribute.

Look at this example, where all properties are configured:

angularTestProject.controller ('controllerTest', ['$scope', function(scope){
	scope.appFilters = {
		columnFilters: [
			{
				column: 3
			},
			{
				column: 2
			}
		]
	};

	scope.appPagination = {
		registerPerPage: 5
	};
	
	scope.appPersonalization = {
		columnRename: [
			{
				column: 1,
				newColumnName: 'Id do registro'
			}, 
			{
				column: 2,
				newColumnName: 'Nome do parceiro'
			}, 
			{
				column: 4,
				newColumnName: 'Cidade'
			}, 
		]
	};


	scope.appRowAction = {
		actionColumnName: "Ações",
		actionList: [{
			icon: 'pencil-square-o',
			toProcessAction: function (row){
				console.log('The row content is', row);
			}
		},
		{
			icon: 'times',
			toProcessAction: function (row){
				console.log('I must delete something');
			}
		},
		]
	}

	scope.appProcess = function (processParameters){

		dataToGenerate = {
			data: {
				columns: ['ID', 'Name', 'E-Mail', 'City', 'Country'],
				rows: ['1', 'Amos Batista', '[email protected]', 'Sao Paulo', 'Brazil']
			}
		};

		// Filter
		var filteredData =
		{
			data: {
				columns: ['ID', 'Name', 'E-Mail', 'City', 'Country'],
				rows: dataToGenerate.data.rows.filter( function (row){
					return (row[processParameters.filters[0].column - 1].search(processParameters.filters[0].value) >= 0) && (row[processParameters.filters[1].column - 1].search(processParameters.filters[1].value) >= 0);
				})
			}
		};

		// Pagination simulation
		var _metadata = {
			maxPages: Math.floor(filteredData.data.rows.length / 5)
		}

		filteredData =
		{
			data: {
				columns: ['ID', 'Name', 'E-Mail', 'City', 'Country'],
				rows: filteredData.data.rows.slice (processParameters.pagination.currentPage - 1, processParameters.pagination.currentPage + 4)
			}
		};

		return {
			data: filteredData.data,
			metadata: _metadata
		}
	};
}]);

External event and table refresh

By the structure of MasterRow code, it was not possible to refresh the data from the table. Or, using a field from a form to filter the data. In this case, Angular MasterRow have an Angular service, that allows the reprocessment of the function data.

• Set the 'angularMasterrowService' into the controller.

angularTestProject.controller ('controllerTest', [
	'$scope',
	'angularMasterrowService',
	function(
		scope,
		updateService
	){
	...
	});

• To refresh the function, execute the function 'executeProcess':

<p>
	<a href="" ng-click="generateNewData()">Click here to update the table</a>
</p>
scope.generateNewData = function(){
	updateService.executeProcess();
}

Customizing

As the same of the MasterRow customization, you can edit the angular-masterrow.js file to make this directive works as you want.

Used libraries and plugins

Together with the MainRow libraries, Angular-MasterRow is built, obviusly, with AngularJs framework, powered by Google (©2010-2016).

License

The project is under a MIT License. It's free to use. You just need to set the attribuition to the author. An attribuition example:

MasterRow - Developed by Amós Batista - 2016.

More information about the license, read the MIT license here:.

Author and contact

My name is Amós Batista, I'm a front-end developer. I keep a website, where you can know more about me, and my work. (http://amosbatista.com/)

If you have any question, suggest, or something else to say, you can contact me by e-mail: ([email protected])

There's also my twitter: (https://twitter.com/@amosbatista)

:happy: