json-rules-filter 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adrian Barro Estévez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "json-rules-filter",
+  "version": "1.0.0",
+  "description": "para crear reglas avanzadas de filtrado sobre datasets JSON de forma dinámica y visual.",
+  "main": "src/jquery.jsonRulesFilter.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "keywords": [
+    "jquery-plugin",
+    "ecosystem:jquery",
+    "filter",
+    "rules",
+    "datatable-filter"
+  ],
+  "author": "Adrian Barro Estévez",
+  "license": "MIT",
+  "type": "commonjs",
+  "dependencies": {
+    "jquery": ">=3.6.0",
+    "select2": "^4.1.0-rc.0",
+    "bootstrap": "^5.3.0",
+    "@fortawesome/fontawesome-free": "^6.4.0"
+  },
+  "devDependencies": {
+    "vite": "^4.4.0"
+  },
+  "peerDependencies": {
+    "jquery": ">=1.7"
+  }
+}

package/readme.md

@@ -0,0 +1,240 @@
+# 📘 jsonRulesFilter.js
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/logic-filter.svg)](https://www.npmjs.com/package/logic-filter)
+[![jQuery Plugin](https://img.shields.io/badge/jQuery-Plugin-blue.svg)](https://jquery.com/)
+
+Plugin de **jQuery** para crear reglas avanzadas de filtrado sobre datasets JSON de forma dinámica y visual.
+
+Permite construir filtros tipo:
+- Texto (contiene, empieza por, etc.)
+- Números (mayor que, menor que, etc.)
+- Select (valores únicos del dataset)
+
+---
+
+## 🚀 Instalación
+Install via **npm**:
+
+```bash
+npm install json-rules-filter
+```
+
+Incluye las dependencias necesarias:
+
+```html
+<!-- jQuery -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<!-- Bootstrap (opcional, para estilos) -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Select2 -->
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
+
+<!-- FontAwesome (opcional para iconos) -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+<!-- jsonRulesFilter -->
+<script src="jsonRulesFilter.js"></script>
+```
+
+---
+
+## ⚙️ Uso básico
+
+```javascript
+const data = [
+    { name: "Juan", total: 100, cargo: "Admin" },
+    { name: "Ana", total: 200, cargo: "User" },
+    { name: "Luis", total: 150, cargo: "Admin" }
+];
+
+$("#miFiltro").jsonRulesFilter(data, {
+    onApply: function (rules, filteredData) {
+        console.log("Reglas:", rules);
+        console.log("Resultados:", filteredData);
+    }
+});
+```
+
+---
+
+## 🧠 Configuración
+
+### filters
+
+Define las columnas disponibles para filtrar.
+
+```javascript
+filters: [
+    {
+        name: "Total",
+        type: "number",
+        data: "total",
+        render: function(data) {
+            return data.text;
+        }
+    }
+]
+```
+
+---
+
+### language
+
+Personaliza los operadores de filtrado.
+
+```javascript
+language: {
+    string: {
+        sContain: "Contiene",
+        sEquals: "Igual a"
+    },
+    number: {
+        nEquals: "Igual a",
+        nGreatherThan: "Mayor que"
+    }
+}
+```
+
+---
+
+### buttons
+
+Configura textos y estilos de botones.
+
+```javascript
+buttons: {
+    reset: {
+        text: "Resetear",
+        className: "btn btn-link"
+    },
+    dropdown: {
+        text: "Añadir regla",
+        className: "btn btn-secondary"
+    },
+    apply: {
+        text: "Aplicar",
+        className: "btn btn-primary"
+    }
+}
+```
+
+---
+
+### title
+
+Título del componente.
+
+```javascript
+title: "Reglas de filtrado"
+```
+
+---
+
+### onApply
+
+Callback ejecutado al aplicar filtros.
+
+```javascript
+onApply: function (rules, filteredData) {
+}
+```
+
+---
+
+## 🧩 Tipos de filtros
+
+### Texto (text)
+
+- Contiene
+- No contiene
+- Igual a
+- Diferente de
+- Empieza con
+- Termina con
+
+---
+
+### Número (number)
+
+- Igual a
+- Diferente de
+- Mayor que
+- Mayor o igual que
+- Menor que
+- Menor o igual que
+
+---
+
+### Select (select)
+
+- Genera valores únicos automáticamente
+- Permite selección múltiple
+
+---
+
+## 🛠️ Métodos públicos
+
+```javascript
+$("#miFiltro").jsonRulesFilter("nombreMetodo", parametros);
+```
+
+### updateData
+
+```javascript
+$("#miFiltro").jsonRulesFilter("updateData", nuevosDatos);
+```
+
+### getAplicatedRules
+
+```javascript
+const reglas = $("#miFiltro").jsonRulesFilter("getAplicatedRules");
+```
+
+### reset
+
+```javascript
+$("#miFiltro").jsonRulesFilter("reset");
+```
+
+---
+
+## 🧪 Ejemplo completo
+
+```javascript
+const empleados = [
+    { name: "Carlos", total: 300, cargo: "Manager" },
+    { name: "Laura", total: 120, cargo: "Developer" },
+    { name: "Pedro", total: 220, cargo: "Developer" }
+];
+
+$("#filtros").jsonRulesFilter(empleados, {
+    filters: [
+        { name: "Nombre", type: "text", data: "name" },
+        { name: "Total", type: "number", data: "total" },
+        { name: "Cargo", type: "select", data: "cargo" }
+    ],
+    onApply: function (rules, results) {
+        console.log(results);
+    }
+});
+```
+
+---
+
+## 📌 Notas
+
+- Soporta propiedades anidadas (ej: user.name)
+- Usa lógica AND entre reglas
+- Basado en Select2
+- Permite múltiples instancias
+
+---
+
+## 💡 Ideas futuras
+
+- Lógica OR
+- Guardado de filtros
+- Exportar/importar reglas

package/src/jquery.jsonRulesFilter.js

@@ -0,0 +1,308 @@
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        module.exports = factory(require('jquery'));
+    } else {
+        factory(jQuery);
+    }
+}(function ($) {
+    $.fn.jsonRulesFilter = function (data, options) {
+
+        // --- COMMAND MANAGEMENT (Method calling via string) ---
+        if (typeof data === 'string') {
+            const instance = $(this).data('rulesControl');
+            if (instance && typeof instance[data] === 'function') {
+                return instance[data].apply(instance, Array.prototype.slice.call(arguments, 1));
+            }
+            return this;
+        }
+
+        // --- DEFAULT CONFIGURATION ---
+        const settings = $.extend(true, {
+            filters: [
+                { name: "Total", type: "number", data: "total", render: function(data){return data.text/*Callback to render html in options type select*/}},
+                { name: "Nombre", type: "text", data: "name", render: function(data){return data.text}},
+                { name: "Cargo", type: "select", data: "cargo", render: function(data){return data.text}}
+            ],
+            language: {
+                string: {
+                    sContain: "Contiene", sNotContain: "No contiene", sEquals: "Igual a",
+                    sDifference: "Diferente de", sStartWith: "Empieza con", sEndWith: "Termina con"
+                },
+                number: {
+                    nEquals: "Igual a", nDifference: "Diferente de", nGreatherThan: "Mayor que",
+                    nGreatherThanOrEquals: "Mayor o igual que", nLowerThan: "Menor que", nLowerThanOrEquals: "Menor o igual que"
+                }
+            },
+            title: "Reglas de filtrado",
+            buttons: {
+                reset: { text: "Resetear", className: "fw-semibold link-danger link-offset-2 link-underline link-underline-opacity-0" },
+                dropdown: { text: "Añadir regla", className: "btn btn-secondary" },
+                apply: { text: "Aplicar regla", className: "btn btn-primary" },
+            },
+            onApply: function (filtros, datosFiltrados) { }
+        }, options);
+
+        return this.each(function () {
+            const $contenedor = $(this);
+
+            // --- CONTROL OBJECT (Core Logic) ---
+            const control = {
+                data: data,
+                settings: settings,
+                $contenedor: $contenedor,
+
+                // Updates dataset from external source and refreshes the UI
+                updateData: function (newData) {
+                    this.data = newData;
+                    this.reset();
+                },
+
+                // Collects all rules currently defined in the DOM
+                getAplicatedRules: function () {
+                    const rules_items = $contenedor.find("select[name=select-rule-option]");
+                    let rulesAplicated = [];
+                    $.each(rules_items, function (index, element) {
+                        const $el = $(element);
+                        const id = $el.data("id");
+
+                        // Mapping DOM data to rule object
+                        rulesAplicated.push({
+                            optionFilter: $el.val(), // Selected operator or array of values (if select)
+                            searchValue: $(`#input-rule-search-${id}`).val(), // Text input value
+                            typeFilter: $el.data("type"), // Data type (number, text, select)
+                            dataField: $el.data("field"), // JSON key path
+                            dataName: $el.data("name"), // Display name
+                            // Text of the selected option for labels/summary
+                            optionFilterText: $el.find("option:selected").map(function(){ return $(this).text(); }).get()
+                        });
+                    })
+                    return rulesAplicated;
+                },
+
+                // Initialize UI components
+                init: function () {
+                    this.$contenedor.empty();
+                    this.render();
+                    this.bindEvents();
+                },
+
+                // Render main plugin skeleton
+                render: function () {
+                    let columnasHtml = '<div class="row g-2">';
+                    this.settings.filters.forEach((col, index) => {
+                        let icon = col.type === "number" ? "fa-solid fa-hashtag" : (col.type === "string" ? "fa-solid fa-language" : "fa-solid fa-circle-chevron-down");
+                        columnasHtml += `
+                            <li class="col-6 list-unstyled">
+                                <a class="dropdown-item dropdown-rules-item" href="#" data-column-type="${col.type}" data-column-data="${col.data}" data-column-name="${col.name}">
+                                    <i class="${icon}"></i> ${col.name}
+                                </a>
+                            </li>`;
+                        if (index % 2 !== 0 && index !== 0) columnasHtml += '</div><div class="row g-2">';
+                    });
+                    columnasHtml += "</div>";
+
+                    let template = `
+                            <div class="d-flex justify-content-between">
+                                <b><h4>${this.settings.title}</h4></b>
+                                <p><a class="${this.settings.buttons.reset.className} remove-rules-containers" href="#">${this.settings.buttons.reset.text}</a></p>
+                            </div>
+                            <div class="py-2" id="container-rules-filters"></div>
+                            <div class="mt-2">
+                                <div class="d-flex justify-content-start dropdown">
+                                    <button data-bs-popper-config='{"strategy":"fixed"}' class="${this.settings.buttons.dropdown.className} dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                        ${this.settings.buttons.dropdown.text}
+                                    </button>
+                                    <div class="dropdown-menu p-2 dropdown-rules-columns" style="min-width: 300px;">
+                                        ${columnasHtml}
+                                    </div>
+                                </div>
+                                <div class="mt-2 d-flex justify-content-start">
+                                    <button type="button" id="apply-rules-btn" class="${this.settings.buttons.apply.className}">${this.settings.buttons.apply.text}</button>
+                                </div>
+                            </div>`;
+                    this.$contenedor.append(template);
+                },
+
+                // Event delegation and listeners
+                bindEvents: function () {
+                    const self = this;
+
+                    // Add new rule row
+                    this.$contenedor.find(".dropdown-rules-item").on("click", function (e) {
+                        e.preventDefault();
+                        self.addRuleRow($(this).data("column-type"), $(this).data("column-data"), $(this).data("column-name"));
+                    });
+
+                    // Clear all rules
+                    this.$contenedor.find(".remove-rules-containers").on("click", function (e) {
+                        e.preventDefault();
+                        self.reset();
+                    });
+
+                    // Apply current filters to data
+                    this.$contenedor.find("#apply-rules-btn").on("click", function (e) {
+                        e.preventDefault();
+                        self.applyRules();
+                    });
+                },
+
+                // Resets rule container and re-runs filtering (show all)
+                reset: function () {
+                    $("#container-rules-filters").empty();
+                    this.applyRules();
+                },
+
+                // Adds a new rule row dynamically
+                addRuleRow: function (type, dataField, name) {
+                    const self = this;
+                    const $container = this.$contenedor.find("#container-rules-filters");
+                    let id_select = 0;
+
+                    // Generate unique ID for the new row based on the last element
+                    const last_container = $contenedor.find("select[name=select-rule-option]").last();
+                    if (last_container.length > 0) {
+                        id_select = last_container.data("id") + 1;
+                    }
+
+                    // Define search input template (hidden for 'select' type)
+                    const searchInput = `
+                    <div class="col-7">
+                        <label class="form-label font-bold"><span class="text-danger">*</span>${type}</label>
+                        <input type="text" class="form-control" name="input-rule-search" id="input-rule-search-${id_select}">
+                    </div>`;
+
+                    const row = `
+                        <div id="select-rule-container-${id_select}" class="d-flex justify-content-between mt-2 pt-2 mb-4 ${$contenedor.find("[name=select-rule-option]").length > 0 ? ' border-top my-3' : ""}">
+                            <div class="row flex-grow-1">
+                                <div class="col-4">
+                                    <label class="form-label font-bold">${name}</label>
+                                    <select class="form-select" ${type === 'select' ? 'multiple' : ''} data-type="${type}" data-name="${name}" data-field="${dataField}" id="select-rule-option-${id_select}" data-id="${id_select}" name="select-rule-option"></select>
+                                </div>
+                                ${type === 'select' ? '' : searchInput}
+                            </div>
+                            <div class="">
+                                <a href="#" class="link-danger btn-remove-rule" data-target="select-rule-container-${id_select}">
+                                    <i class="fa-solid fa-trash-can"></i>
+                                </a>
+                            </div>
+                        </div>`;
+
+                    $container.append(row);
+
+                    // Fetch custom render function from settings
+                    const render = self.settings.filters.find((e) => e.data === dataField).render;
+                    this.initSelect2(id_select, type, dataField, render);
+                },
+
+                // Initialize Select2 plugin on the newly created dropdown
+                initSelect2: function (id, type, dataField, render) {
+                    const self = this;
+                    const $select = this.$contenedor.find(`#select-rule-option-${id}`);
+
+                    $select.select2({
+                        width: '100%',
+                        escapeMarkup: function (markup) { return markup; }, // Allow HTML rendering in badges
+                        templateSelection: render,
+                        templateResult: render,
+                        // Load dataset based on type: unique values for 'select', operators for others
+                        data: type == 'select' ? this.getSelectValues(dataField) : this.getRuleOptions(type)
+                    });
+
+                    // Remove rule event
+                    this.$contenedor.find(`[data-target=select-rule-container-${id}]`).on("click", function (e) {
+                        e.preventDefault();
+                        $(`#select-rule-container-${id}`).remove();
+                    });
+                },
+
+                // Helper to map operator objects from language settings
+                getRuleOptions: function (type) {
+                    const lang = type === "number" ? this.settings.language.number : this.settings.language.string;
+                    return $.map(lang, function (valor, clave) {
+                        return { id: clave, text: valor };
+                    });
+                },
+
+                // Extract unique values from data to populate 'select' type filters
+                getSelectValues: function (dataField) {
+                    const getValueByPath = (obj, path) => {
+                        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+                    };
+
+                    // Using Set + JSON stringify/parse to ensure unique objects in the dropdown
+                    return [...new Set(this.data.map(function (item) {
+                        const val = getValueByPath(item, dataField);
+                        return JSON.stringify({ id: val, text: val });
+                    }))].map((e) => JSON.parse(e));
+                },
+
+                // Core filtering engine
+                applyRules: function () {
+                    const self = this;
+                    const rules = this.getAplicatedRules();
+
+                    // Utility to handle nested object properties (e.g., 'user.name')
+                    const getValueByPath = (obj, path) => {
+                        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+                    };
+
+                    const filteredResults = this.data.filter(item => {
+                        // .every ensures all active rules must be met (AND logic)
+                        return rules.every(regla => {
+                            const valorOriginal = getValueByPath(item, regla.dataField);
+                            const valorBusqueda = regla.searchValue;
+
+                            // Handle empty/null values
+                            if (valorOriginal === undefined || valorOriginal === null) return false;
+
+                            // Special logic for Multiple Select filters
+                            if(regla.typeFilter === 'select'){
+                                const selectedValues = regla.optionFilter; // Array from Select2 multiple
+                                return selectedValues.includes(valorOriginal.toString());
+                            }
+
+                            // Normalization for string and numeric comparisons
+                            const v1 = valorOriginal.toString().toLowerCase();
+                            const v2 = valorBusqueda.toString().toLowerCase();
+                            const n1 = parseFloat(valorOriginal);
+                            const n2 = parseFloat(valorBusqueda);
+
+                            // Operator mapping
+                            switch (regla.optionFilter) {
+                                // String operators
+                                case "sContain": return v1.includes(v2);
+                                case "sNotContain": return !v1.includes(v2);
+                                case "sEquals": return v1 === v2;
+                                case "sDifference": return v1 !== v2;
+                                case "sStartWith": return v1.startsWith(v2);
+                                case "sEndWith": return v1.endsWith(v2);
+
+                                // Numeric operators
+                                case "nEquals": return n1 === n2;
+                                case "nDifference": return n1 !== n2;
+                                case "nGreatherThan": return n1 > n2;
+                                case "nGreatherThanOrEquals": return n1 >= n2;
+                                case "nLowerThan": return n1 < n2;
+                                case "nLowerThanOrEquals": return n1 <= n2;
+
+                                default: return true;
+                            }
+                        });
+                    });
+
+                    // EXECUTE onApply CALLBACK
+                    if (typeof self.settings.onApply === 'function') {
+                        // Pass rules summary and filtered array to the main program
+                        self.settings.onApply.call(self.$contenedor, rules, filteredResults);
+                    }
+                }
+            };
+
+            // Store instance in data attribute and initialize
+            $contenedor.data('rulesControl', control);
+            control.init();
+        });
+    };
+}));