Skip to content

Latest commit

 

History

History
316 lines (302 loc) · 12.8 KB

README.md

File metadata and controls

316 lines (302 loc) · 12.8 KB

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