json-rules-filter 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-rules-filter",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "para crear reglas avanzadas de filtrado sobre datasets JSON de forma dinámica y visual.",
   "main": "src/jquery.jsonRulesFilter.js",
   "scripts": {

package/readme.md

@@ -88,6 +88,10 @@ $("#miFiltro").jsonRulesFilter(data,
     onApply: function (rules, filteredData) {
         console.log("Reglas:", rules);
         console.log("Resultados:", filteredData);
+    },
+    onTakeSnapshot: function (reglas) {
+        console.log("Reglas:", rules);
+        console.log("Configuración de filtrado aplicada")
     }
 });
 ```
@@ -198,6 +202,16 @@ onApply: function (rules, filteredData) {
 }
 ```
 
+---
+### onTakeSnapshot
+
+Callback ejecutado al guardar filtros.
+
+```javascript
+onTakeSnapshot: function (rules) {
+}
+```
+
 ---
 
 ## 🧩 Tipos de filtros
@@ -277,6 +291,9 @@ $("#container-rules").jsonRulesFilter(empleados, {
         });
 
         $("#num-filters").html(reglas.length);
+    },
+    onTakeSnapshot: function (reglas) {
+        alert("Configuración de filtrado aplicada");
     }
 });
 ```
@@ -310,11 +327,11 @@ $("#container-rules").jsonRulesFilter(empleados, {
 - Usa lógica AND entre reglas
 - Basado en Select2
 - Permite múltiples instancias
+- Guardado de filtros en localStorage
+- Exportar/importar reglas
 
 ---
 
 ## 💡 Ideas futuras
 
 - Lógica OR
-- Guardado de filtros
-- Exportar/importar reglas

package/src/jquery.jsonRulesFilter.js

@@ -9,10 +9,12 @@
 }(function ($) {
     $.fn.jsonRulesFilter = function (data, options) {
 
+        const publicMethods = ['updateData', 'preloadRules', 'reset'];
+
         // --- COMMAND MANAGEMENT (Method calling via string) ---
         if (typeof data === 'string') {
             const instance = $(this).data('rulesControl');
-            if (instance && typeof instance[data] === 'function') {
+            if (instance && typeof instance[data] === 'function' && publicMethods.includes(data)) {
                 return instance[data].apply(instance, Array.prototype.slice.call(arguments, 1));
             }
             return this;
@@ -42,10 +44,12 @@
             title: { text: "Reglas de filtrado", className: "fs-6 fw-semibold" },
             buttons: {
                 reset: { text: "Resetear", className: "fw-semibold link-danger link-offset-2 link-underline link-underline-opacity-0" },
+                save: { text: "Guardar", className: "fw-semibold link-primary 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) { }
+            onApply: function (filtros, datosFiltrados) { },
+            onTakeSnapshot: function (filtros) { }
         }, options);
 
         return this.each(function () {
@@ -134,11 +138,31 @@
                     return rulesAplicated;
                 },
 
+                takeSnapshot: function(){
+                    const self = this;
+                    const rules = this.getAplicatedRules();
+                    localStorage.setItem("jsonRulesFilterData", JSON.stringify(rules));
+                     // EXECUTE onTakeSnapshot CALLBACK
+                    if (typeof self.settings.onTakeSnapshot === 'function') {
+                        // Pass rules summary and filtered array to the main program
+                        self.settings.onTakeSnapshot.call(self.$contenedor, rules);
+                    }
+                },
+
+                getSnapshot: function(){
+                    const rules = localStorage.getItem("jsonRulesFilterData");
+
+                    if(rules != null){
+                        this.preloadRules(JSON.parse(rules));
+                    }
+                },
+
                 // Initialize UI components
                 init: function () {
                     this.$contenedor.empty();
                     this.render();
                     this.bindEvents();
+                    this.getSnapshot();
                 },
 
                 // Render main plugin skeleton
@@ -167,7 +191,10 @@
                     let template = `
                             <div class="d-flex justify-content-between">
                                 <p class="${this.bs(this.settings.title.className)}">${this.settings.title.text}</p>
-                                <p><a class="${this.bs(this.settings.buttons.reset.className)} remove-rules-containers" href="#">${this.settings.buttons.reset.text}</a></p>
+                                <div class="d-flex justify-content-between">
+                                    <p class="mr-2"><a class="${this.bs(this.settings.buttons.save.className)} save-rules-snapshot" href="#">${this.settings.buttons.save.text}</a></p>
+                                    <p><a class="${this.bs(this.settings.buttons.reset.className)} remove-rules-containers" href="#">${this.settings.buttons.reset.text}</a></p>
+                                </div>
                             </div>
                             <div class="py-2 container-rules-filters"></div>
                             <div class="mt-2">
@@ -183,6 +210,7 @@
                                     <button type="button" id="apply-rules-btn" class="${this.bs(this.settings.buttons.apply.className)}">${this.settings.buttons.apply.text}</button>
                                 </div>
                             </div>`;
+
                     this.$contenedor.append(template);
                     if (this.settings.scrollY !== false) {
                         const maxHeight = typeof this.settings.scrollY === 'number' ?
@@ -244,6 +272,12 @@
                         self.reset();
                     });
 
+                    // Save all rules
+                    this.$contenedor.find(".save-rules-snapshot").on("click", function (e) {
+                        e.preventDefault();
+                        self.takeSnapshot();
+                    });
+
                     // Apply current filters to data
                     this.$contenedor.find("#apply-rules-btn").on("click", function (e) {
                         e.preventDefault();
@@ -337,7 +371,7 @@
 
                     // 1. Extraemos los valores únicos de la base de datos actual
                     let uniqueOptions = [...new Set(this.data.map(function (item) {
-                        const val = getValueByPath(item, dataField).toString();
+                        const val = getValueByPath(item, dataField)?.toString();
                         if (val !== undefined && val !== null) {
                             return JSON.stringify({ id: val, text: val });
                         }