md-crud

Angular material crud

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

Demo

Aplicación Demo

Dependecias

{
    "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

npm

$ npm install md-crud --save

bower

$ bower install md-crud --save

Configuración del CRUD

$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

$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

<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

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'
    });
}]);