# Angular material crud

Permite crear un cotrol CRUD simple o personalizado sobre un RESTful Api utilizando $http.

## Demo
[Aplicación Demo](https://classhp.github.io/md-crud/demo/)

## Dependecias
```javascript
{
    "angular": "~1.5.*",
    "angular-animate": "~1.5.*",
    "angular-aria": "~1.5.*",
    "angular-messages": "~1.5.*",
    "angular-sanitize": "~1.5.*",
    "angular-material": "^1.1.3",
    "angular-material-data-table": "^0.10.10",
    "mdPickers": "^0.7.5", //Opcional (para los tipos 'time' y 'datetaime')
    "moment": "^2.17.1" //Requerido por mdPickers
}
```
## CDN
[https://cdn.rawgit.com/ClassHP/md-crud/1.0.0/dist/md-crud.min.js](https://cdn.rawgit.com/ClassHP/md-crud/1.0.0/dist/md-crud.min.js)

## npm
```sh
$ npm install md-crud --save
```

## bower
```sh
$ bower install md-crud --save
```

## Configuración del CRUD
```javascript
$scope.crudOptions = {
    entity: 'Books',
    id: 'ID',
    fields: [
        {
            name: 'Title',
            label: 'Title',
            type: 'text',
            required: true
        },
        {
            name: 'type',
            label: 'Type',
            type: 'select',
            columnHidden: true,
            detailHidden: true,
            data: [
                { value: 'text', text: 'Text' },
                { value: 'integer', text: 'Integer' },
                { value: 'decimal', text: 'Decimal' }
            ],
            flex: '33'
        },
        {
            name: 'PageCount',
            label: 'Page count',
            type: function(item) { return item.type || 'text'; },
            required: true,
            flex: '33'
        },
        {
            name: 'PublishDate',
            label: 'Publish date',
            type: 'datetime',
            required: true,
            columnTemplate: '<strong>{{row.PublishDate | date:"short"}}</strong>',
            flex: '33'
        },
        {
            name: 'Description',
            label: 'Description',
            type: 'textarea',
            required: true
        },
        {
            name: 'Excerpt',
            label: 'Excerpt',
            type: 'textarea',
            required: true,
            columnHidden: true,
        }
    ]
}; 
```
### Server side
```javascript
$scope.crudOptions2 = {
    entity: 'characters',
    id: 'id',
    noEdit: true,
    noDelete: true,
    noCreate: true,
    noDetail: false,
    noSearch: false,
    fields: [
        {
            name: 'thumbnail',
            label: 'Image',
            type: 'template',
            columnTemplate: '<image src="{{row.thumbnail.path + "/standard_medium." + row.thumbnail.extension}}" style="max-height:90px"></image>'
        },
        {
            name: 'name',
            label: 'Name',
            type: 'text'
        },
        {
            name: 'description',
            label: 'Description',
            type: 'text'
        },
    ],
    serverSide: {
        searchParam: 'nameStartsWith',
        offsetParam: 'offset',
        limitParam: 'limit',
    },
    http: {
        rootApi: 'https://gateway.marvel.com:443/v1/public',
        params: {
            apikey: 'c3c80a056a45ea887f1c77c2525e66a5'
        },
        functionData: function (response, resolve, reject, method) {
            if(method == 'getById') {
                resolve({ 
                    data: response.data.data.results[0]
                });
            }
            else {
                resolve({ 
                    data: response.data.data.results,
                    total: response.data.data.total
                });
            }
        }
    },
    form: {
        onEdit: function (item) {
            item.aditionalValue = 1;
        }
    }
};
```
### Properties
| Params | Type | Details |
| ------ | ---- | ------- |
| options | Object | Objeto de configuración. |
| onLoad | Function | Evento que se ejecuta al terminar de cargar la directiva. |
| rows | Array | Arreglo de filas a mostar en CRUDs offlines. |

### Options
| Params | Type | Details |
| ------ | ---- | ------- |
| entity | string | Nombre de la entidad o tabla a consultar en el RESTfull Api. |
| id | string | Id de la entidad o tabla. |
| noEdit | Boolean | Desabilita la edición. Valor por defecto: false. |
| noDelete | Boolean | Desabilita la eliminación. Valor por defecto: false. |
| noCreate | Boolean | Desabilita la creación. Valor por defecto: false. |
| noDetail | Boolean | Desabilita la visualización de detalles. Valor por defecto: false. |
| noSearch | Boolean | Desabilita la busqueda. Valor por defecto: false. |
| fields | Array | Arreglo de campos a usar en el CRUD. |
| serverSide | Boolean, Object | Habilita el paginado y busqueda del lado del servidor. Valor por defecto: false. |
| http | Object | Configuración de las consultas al RESTfull Api. |
| formType | String | Tipo de formulario. Posibles valores: ['inline', 'window']. Valor por defecto: 'inline'. |
| deleteConfirm | Boolean | Indica si se solicitará conformación al intentar eliminar un registro. Valor por defecto: true. |
| searchText | String | Texto a buscar por defecto. |
| searchDelay | Integer | Tiempo en miliseguntos de retraso en escribir en el campo de busqueda. |
| tableLimit | Integer | Cantidad de filas por paginas a mostrar en la tabla. |
| limitOptions | Array(Integer) | Opciones para elegir la cantidad de filas a mostrar por pagina. Valor por defecto: [10, 20, 30]. |
| editOnSelect | Boolean | Desactiva la funcionalidad de detalle y al presionar la fila abre el formulario de editar. |
| noDetailButtons | Boolean | Oculta los botones de Aceptar y Cancelar del formulario de detalle. |
| noButtons | Boolean | Oculta los botones de Aceptar y Cancelar del formulario de detalle y editar. |
| offline | Boolean | Desabilita todas las funcionalidades de carga y actualización a travez de $http, utiliza como modelo de datos la propiedad 'rows' en la directiva. |
| noPaginate | Boolean | Desabilita la paginación. |
| windowFlex | String | Aplica la propiedad flex para aujustar el tamaño de las ventanas de edición y detalle. |

### Options -> fields
| Params | Type | Details |
| ------ | ---- | ------- |
| name | String | Nombre del campo. |
| label | String | Texto a mostrar como cabecera en la columna de la tabla y como etiqueta en el formulario. |
| type | String, Function | Tipo de campo. Posibles valores: ['text', 'textarea', 'email', 'integer', 'decimal', 'boolean', 'select', 'date', 'time', 'datetime', 'label', 'button']. |
| multiple | Boolean | Indica si el tipo 'select' sera se selección multiple. |
| columnHidden | Boolean | Oculta el campo en la tabla. |
| createHidden | Boolean | Oculta el formulario al crear. |
| editHidden | Boolean | Oculta el campo en el formulario al editar. |
| detailHidden | Boolean | Oculta el formulario al ver el detalle. |
| templateUrl | String | Url de la plantilla a utilizar para personalizar el formulario. |
| template | String | Template HTML con el formato a utilizar en el formulario. |
| columnTemplate | String | Plantilla a utilizar para mostrar el campo en la tabla. |
| readonly | Boolean | Coloca el campo en solo lectura o deshabilitado. |
| minlength | Integer | Define la cantidad mínima de caracteres para los campos de texto. |
| maxlength | Integer | Define la cantidad máxima de caracteres para los campos de texto. |
| pattern | String | Formato en expreción regular para los campos de texto. |
| min | Integer | Define el valor mínimo para los campos numericos. |
| max | Integer | Define el valor máximo para los campos numericos. |
| step | Integer | Define el valor de salto para campos numericos. |
| minDate | Date | Define la fecha menor a ingresar en el campo 'date'. |
| maxDate | Date | Define la fecha mayor a ingresar en el campo 'date'. |
| data | Array, Function | Función que devuelve los datos a usar en el tipo 'select'. |
| value | String | Valor a usar en el tipo 'select'. |
| text | String | Texto a usar en el tipo 'select'. |
| required | Boolean | Indica si el campo es requerido. |
| flex | String | Personaliza el tamaño y posición del campo en el formulario. |
| messagePattern | String | Personaliza el mensaje a mostrar cuando no se cumpla la expresion regular. |
| rows | Integer | Cantidad de filas iniciales en el formulatio del tipo 'textarea'. |
| columnHeader | String | Texto de la cabecera de la columna en la tabla. Por defecto es igual al campo "label". |
| styleCell | Object | Estilo CSS de la celda en la tabla. |
| hideErrorMsg | Boolean | Oculta el espacio reservado para los mensajes de error. |

### Options -> form
| Params | Type | Details |
| ------ | ---- | ------- |
| onOpen | Function | Se ejecuta cuando se abre el formulario. |
| onEdit | Function | Se ejecuta cuando se abre el formulario para editar luego de obtener el registro actualizado. |
| onCancel | Function | Se ejecuta al cancelar el formulario. |
| onSubmit | Function | Se ejecuta antes de enviar los datos del formulario. |
| onSussces | Function | Se ejecuta cuando la respuesta del formulario es correcta. |

### Options -> http
| Params | Type | Default value | Details |
| ---- | ---- | ---- | ---- |
| rootApi | String | '/api' | Configura la ruta inicial del REST Api a consultar. |
| methodGet | String | 'GET' | Metodo HTTP a utilizar para la consultas. |
| methodPost | String | 'POST' | Metodo HTTP a utilizar en la creación. |
| methodPatch | String | 'PATCH' | Metodo HTTP a utilizar en la edición. |
| methodDelete | String | 'DELETE' | Metodo HTTP a utilizar en la eliminación. |
| urlGet | String (template) | '{{rootApi}}/{{entity}}' | Url para obtener los datos de la tabla. |
| urlGetById | String (template) | '{{rootApi}}/{{entity}}/{{id}}' | Url para obtener los datos de edición o detalle. |
| urlPost | String (template) | '{{rootApi}}/{{entity}}' | Url de la creación. |
| urlPatch | String (template) | '{{rootApi}}/{{entity}}/{{id}}' | Url de la edición. |
| urlDelete | String (template) | '{{rootApi}}/{{entity}}/{{id}}' | Url de la eliminación. |
| functionHttp | Function | function(options, method) { ... } | Función usada para obtener datos desde el REST Api. |
| functionData | Function | function(response, resolve, reject, method) { resolve(response) } | Función para tratar los datos devueltos por el REST Api. |

## Directivas
```html
<md-crud options="options" onLoad="onLoad" rows="rows"></md-crud>

<md-crud-form options="options" ng-model="row" on-open="onOpen" on-edit="onEdit" on-detail="onDetail" 
    on-cancel="onCancel" on-sussces="onSussces" on-submit="onSubmit" editable="true" model-copy="true">
</md-crud-form>

<md-crud-form-base flex layout="row" layout-wrap options="options" ng-model="item" form-type="edit" 
    editable="true" form-crud="formCrud" is-loading="false">
</md-crud-form-base>
```

## Configuración global
```javascript
angular.module('app').run(['mdCrudService', function (mdCrudService) {    
    mdCrudService.setDefaultOptions({
        rootApi: '/api',
        methodGet: 'GET',
        methodPost: 'POST',
        methodPatch: 'PATCH',
        methodDelete: 'DELETE',
        urlGet: '{{rootApi}}/{{entity}}',
        urlGetById: '{{rootApi}}/{{entity}}/{{id}}',
        urlPost: '{{rootApi}}/{{entity}}',
        urlPatch: '{{rootApi}}/{{entity}}/{{id}}',
        urlDelete: '{{rootApi}}/{{entity}}/{{id}}',
        functionHttp: function(options, method) { return $q(...) },
        functionData: function(response, resolve, reject, method) { resolve(response) },
        formType: 'inline',
        deleteConfirm: true,
        tableLimit: 10,
        limitOptions: [10, 20, 30],
        translate: function(text) { return text; },
        autoRefresh: true,
        serverSide: {
            pageParam: 'page',
            offsetParam: 'offset',
            limitParam: 'limit',
            searchParam: 'search',
            dataResponse: 'data',
            totalResponse: 'total'
        }
    });
    mdCrudService.setDefaultOptions({
        editTitle: 'Edit',
        detailTitle: 'Detail',
        createTitle: 'Create',
        deleteError: 'Error while trying to delete row',
        deleteErrorTitle: 'Error deleting',
        deleteConfirmTitle: 'Delete',
        deleteConfirmMessage: 'Are you sure you want to delete the row?',
        tablePaginationPage: 'Page',
        tablePaginationRowsPerPage: 'Rows per page:',
        tablePaginationOf: 'of',
        createOption: 'Create',
        btnConfirmOk: 'Yes',
        btnConfirmCancel: 'No',
        btnAlertOk: 'Ok',
        generalErrorTitle: 'Error',
        messageRequired: 'Required',
        messageMinlength: 'Min length',
        messageMaxlength: 'Max length',
        messagePattern: 'Invalid input format.',
        messageMin: 'Min value',
        messageMax: 'Max value',
        messageMimetype: 'Invalid file type.',
        messageValid: 'Invalid input format.',
        messageMindate: 'Min date',
        messageMaxdate: 'Max date',
        formCancel: 'Cancel',
        formSubmit: 'Save'
    });
}]);
```