# Angular-MasterRow

<img src="http://68.media.tumblr.com/5898dabe6083ae1c42814b7275fad6cf/tumblr_ogmwemH0JZ1sv5493o1_250.png" />

**Angular MasterRow** is a plugin that bring [MasterRow](https://github.com/amosbatista/MasterRow) tool into AngularJs projects.

## Installation
- Install AngularJS into your project;
- Install MasterRow (you can read the installation procedure [in this link](https://github.com/amosbatista/MasterRow#installation).
- 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](https://github.com/amosbatista/MasterRow/blob/master/README.md#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', 'amos.silva@gmail.com', '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](https://github.com/amosbatista/MasterRow#customizing), 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](https://github.com/amosbatista/MasterRow#used-libraries-and-plugins), Angular-MasterRow is built, obviusly, with [AngularJs framework](https://angularjs.org), powered by Google (©2010-2016).

## License
The project is under a [MIT License](https://en.wikipedia.org/wiki/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](http://amosbatista.com/) - 2016.

More information about the license, read the [MIT license here:](https://github.com/amosbatista/Angular-MasterRow/blob/master/LICENSE).

## 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:
(amos.silva@gmail.com)

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

:happy: