New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

filter-creator

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

filter-creator

modal filter creator for spider-city

0.1.17
npm

Version published: 7 years ago

Weekly downloads: 9; decreased by-65.38%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

filter-creator

Ejecución del creador de filtros

Carga del módulo en cliente

En uno de nuestros ficheros HTML, JSP... debemos hacer referencia a la librería de la siguiente manera:

<script src='<%=request.getContextPath() %>/resources/js/filter/FilterCreator.dist.min.js' charset="UTF-8"></script>

Inicilizar el componete

Debemos inicializar el componente de la siguiente manera.

<script type="text/javascript" charset="UTF-8">
        var initConfig = {            
            locale: 'locale',
            dateFormats: {dateFormats},
            contextPath: 'contextPath',
            theme: 'theme'
        };
		FilterCreator.init(initConfig);
</script>

locale: Idioma que se usará
dateFormats: objeto en el que le pasamos los formatos de las fechas. Ejemplo:

{ "year": "YYYY", "month": "MM/YYYY", "day": "DD/YYYY/MM", "week": "DD/MM/YYYY WW" }
contextPath: elcontexto de donde se obtendran los datos de servidor
theme: tema que se usará para generar los filtros. Las constantes se obtienen de la siguiente manera:

FilterCreator.THEMES.NONE FilterCreator.THEMES.BOOTSTRAP FilterCreator.THEMES.IK_WI_2 FilterCreator.THEMES.IK_WI_3

Ejemplo:

<script type="text/javascript" charset="UTF-8">

        var initConfig = {
            locale: 'eu',
            dateFormats: {
                "year": "YYYY",
                "month": "MM/YYYY",
                "day": "DD/YYYY/MM",
                "week": "DD/MM/YYYY WW"
            },
            contextPath: 'http://localhost:8087',
            theme: 'theme'
        };
		FilterCreator.init(initConfig);
</script>

Generar el filtro

Generaremos el filtro con la funcion generateFilter que acepta un solo parametro que es un objeto con parametros de configuración de dicho filtro.

var filterConfig = {            
    targetContainerId: string,
    data: object,
    ajaxUrl: string,
    type: string,
    callback: function,
    small: boolean
};
FilterCreator.generateFilter(filterConfig);

Las propiedades del objeto son las siguientes:

targetContainerId: contenedor donde se renderizara el filtro
data: Objeto con la definicion de los inputs que se renderizaran. Si ajaxUrl no es null, esta propiedad se ignora.
ajaxUrl: url de la ruta donde obtendrenos los inputs que se renderizaran.
type: tipo de renderizado del filtro (se explica más profundamente más adelante)
callback: [opcional] funcion que seejecutara despues de renderizar el filtro
small: [opcional] en caso de renderizar un modal, boolean para poner el modal con un ancho de 400px en vez de 600px

Ejemplo con datos en crudo:

var filterData = 
    [
         [
             {
                 "type": "number",
                 "name": "number1",
                 "label": "number 1"
             }
         ]
    ];
var filterConfig = {            
    targetContainerId: 'filterContainer',
    data: filterData,
    type: FilterCrator.FILTER_TYPES.PLAIN_FILTER
};
FilterCreator.generateFilter(filterConfig);

Ejemplo con datos obtenidos desde servidor:

var url = "data/filterData";
var filterConfig = {            
    targetContainerId: 'filterContainer',
    ajaxUrl: url,
    type: FilterCrator.FILTER_TYPES.PLAIN_FILTER
};
FilterCreator.generateFilter(filterConfig);

###Tipos de filtro

FilterCrator.FILTER_TYPES.PLAIN_FILTER

Se renderiza el filtro en el contenedor indicado en targetContainerId.

FilterCrator.FILTER_TYPES.CHART_MODAL_FILTER

Es la misma funcionalidad de Añadir un filtro especifico (mas adelante en la documentacion).

Genera el filtro en un modal (tipo bootstrap) con el id {targetContainerId]+-filter. Por ejemplo, si targetContainerId es container, el id del modal generado sería container-filter.

El boton que enseña dicho modal es responsabilidad del usuario.

FilterCrator.FILTER_TYPES.TABLE_MODAL_FILTER

Es la misma funcionalidad de Añadir un filtro de componente tabla (mas adelante en la documentacion).

Genera el filtro en un modal con el id {targetContainerId]+-filter. Por ejemplo, si targetContainerId es container, el id del modal generado sería container-filter.

FilterCrator.FILTER_TYPES.MULTIPLE_CHART_MODAL_FILTER

Es la misma funcionalidad de Añadir un filtro general (mas adelante en la documentacion).

Genera el filtro en un modal con el id filterModalque afecta a todos los graficos puestos en targetContainerId (separados por coma).l modal generado sería container-filter.

Añadir un filtro especifico (deprecated)

Por último necesitamos un div que lo contenga, cuyo id le proporcionaremos al componente.

El segundo parametro es un array de arrays. Cada array es un conjunto de inputs que se agruparan en un contenedor con la clase "well" de bootstrap.

FilterCreator.render("id del contenedor del grafico",
    [
        [{input1A}, {input1B}, ...],
        [{input2A}, {input2B}, ...],
        ...
    ],
    {options} [optional]
);

Ejemplo:

FilterCreator.render("chart",
    [
        [
            {"type": "text", "name": "inputPru", "defaultValue": "default", "label": "label"},
            {"type": "date", "name": "date2", "label": "date2"}
        ],
        [
            {"type": "dateFromTo", "name": "dateFromTo", "label": "label3"}
        ]
    ],
    {small: true}
);

Añadir un filtro general (deprecated)

Elprimer parametro es una lista de los graficos a los que afecta el filtro separado por puntocoma ";".

El segundo parametro es un array de arrays. Cada array es un conjunto de inputs que se agruparan en un contenedor con la clase "well" de bootstrap.

FilterCreator.renderGeneral("content-intensity;content-users;content-duration",
    [
        [{input1A}, {input1B}, ...],
        [{input2A}, {input2B}, ...],
        ...
    ],
    {options} [optional]
);

Ejemplo:

FilterCreator.renderGeneral("chart",
    [
        [
            {"type": "text", "name": "inputPru", "defaultValue": "default", "label": "label"},
            {"type": "date", "name": "date2", "label": "date2"}
        ],
        [
            {"type": "dateFromTo", "name": "dateFromTo", "label": "label3"}
        ]
    ]
);

Añadir un filtro de componente tabla (deprecated)

El comportamiento es igual que el de un filtro especifico, pero en vez de a la funcion render se le llama a la funcion renderForTable con los mismos parametros.

##Definicion del parametro opcional "options"

{
    "small": true,
    "callback": function(){}
}

small: [optional] El modal por defecto tiene un tamaño de 600px. Si le ponemos la opcion small a true tendra un ancho de 400px. Util cuando solo tenemos un imput y así centrarlo. Ese input tambien debe tener un tamaño de 12 columnas. callback: [optional] Callback que se ejecutara al finalizar el renderizado del formulario.