json-rules-filter 1.0.24 → 1.0.26

package/package.json

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

package/src/jquery.jsonRulesFilter.js

@@ -42,6 +42,7 @@
             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" },
             },
@@ -82,12 +83,36 @@
                     return result;
                 },
 
+                // -------------------- PUBLIC FUNCTIONS ----------//
+
                 // Updates dataset from external source and refreshes the UI
-                updateData: function (newData) {
+                updateData: function (newData, callback) {
                     this.data = newData;
-                    this.reset();
+                    //Run callback del usuario
+                    callback?.();
+                },
+
+                //Set pre-aplicated rules
+                preloadRules(rules) {
+                    const self = this;
+                    $.each(rules, function (clave, valor) {
+                        console.log(valor);
+                        self.addRuleRow(valor.typeFilter, valor.dataField, valor.dataName, valor.optionFilter, valor.searchValue);
+                    });
+                    this.applyRules();
+                },
+
+                // Resets rule container and re-runs filtering (show all)
+                reset: function (callback) {
+                    const rules = this.getAplicatedRules();
+                    $(".container-rules-filters").empty();
+                    this.applyRules();
+                    //Run callback del usuario
+                    callback?.(rules);
                 },
 
+                //--------------------------------------------------//
+
                 // Collects all rules currently defined in the DOM
                 getAplicatedRules: function () {
                     const rules_items = $contenedor.find("select[name=select-rule-option]");
@@ -110,11 +135,26 @@
                     return rulesAplicated;
                 },
 
+                takeSnapshoot: function(){
+                    const rules = this.getAplicatedRules();
+                    localStorage.setItem("jsonRulesFilterData", JSON.stringify(rules));
+                    console.log("Take snapshoot successfuly");
+                },
+
+                getSnapshoot: 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.getSnapshoot();
                 },
 
                 // Render main plugin skeleton
@@ -143,7 +183,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">
@@ -159,18 +202,19 @@
                                     <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' ?
-                        this.settings.scrollY + 'px' :
-                        this.settings.scrollY;
+                            this.settings.scrollY + 'px' :
+                            this.settings.scrollY;
 
                         this.$contenedor.find(".container-rules-filters").css({
                             "max-height": maxHeight,
                             "overflow-y": "auto",
                             "overflow-x": "hidden",
                             "margin-right": "-10px",
-                            "padding-right":"10px"
+                            "padding-right": "10px"
                         })
                     }
                 },
@@ -208,8 +252,10 @@
                     // 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"));
-                        $dropdown.dropdown("hide");
+                        self.addRuleRow($(this).data("column-type"), $(this).data("column-data"), $(this).data("column-name"), "", "");
+                        if (self.settings.bsVersion === 4) {
+                            $dropdown.dropdown("hide");
+                        }
                     });
 
                     // Clear all rules
@@ -218,6 +264,12 @@
                         self.reset();
                     });
 
+                    // Save all rules
+                    this.$contenedor.find(".save-rules-snapshot").on("click", function (e) {
+                        e.preventDefault();
+                        self.takeSnapshoot();
+                    });
+
                     // Apply current filters to data
                     this.$contenedor.find("#apply-rules-btn").on("click", function (e) {
                         e.preventDefault();
@@ -225,14 +277,8 @@
                     });
                 },
 
-                // 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) {
+                addRuleRow: function (type, dataField, name, selectedValues, searchValue) {
                     const self = this;
                     const $container = this.$contenedor.find(".container-rules-filters");
 
@@ -249,7 +295,7 @@
                     const searchInput = `
                     <div class="col-7">
                         <label class="${labelClass}"><span class="text-danger">*</span>${this.settings.language.searchLabel[type]}</label>
-                        <input type="text" class="form-control" name="input-rule-search" id="input-rule-search-${id_select}">
+                        <input type="text" class="form-control" value="${searchValue}" name="input-rule-search" id="input-rule-search-${id_select}">
                     </div>`;
 
                     const row = `
@@ -271,13 +317,15 @@
                     $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);
+                    // Initialice select2
+                    this.initSelect2(id_select, type, dataField, selectedValues, render);
                 },
 
                 // Initialize Select2 plugin on the newly created dropdown
-                initSelect2: function (id, type, dataField, render) {
+                initSelect2: function (id, type, dataField, selectedValues, render) {
                     const self = this;
                     const $select = this.$contenedor.find(`#select-rule-option-${id}`);
+                    let data = type == 'select' ? this.getSelectValues(dataField, selectedValues) : this.getRuleOptions(type);
 
                     $select.select2({
                         width: '100%',
@@ -286,7 +334,7 @@
                         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)
+                        data: data
                     });
 
                     // Remove rule event
@@ -294,6 +342,9 @@
                         e.preventDefault();
                         $(`#select-rule-container-${id}`).remove();
                     });
+
+                    // Preselected values
+                    $select.val(selectedValues).trigger('change');
                 },
 
                 // Helper to map operator objects from language settings
@@ -305,16 +356,35 @@
                 },
 
                 // Extract unique values from data to populate 'select' type filters
-                getSelectValues: function (dataField) {
+                getSelectValues: function (dataField, selectedValues) {
                     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));
+                    // 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();
+                        if (val !== undefined && val !== null) {
+                            return JSON.stringify({ id: val, text: val });
+                        }
+                        return null;
+                    }).filter(item => item !== null))].map((e) => JSON.parse(e));
+
+                    // 2. Al ser siempre un array, iteramos directamente si tiene contenido
+                    if (selectedValues && selectedValues.length > 0) {
+                        selectedValues.forEach(val => {
+                            // Si el valor no existe ya en nuestras opciones únicas, lo empujamos
+
+                            if (val && !uniqueOptions.some(opt => opt.id == val)) {
+                                uniqueOptions.push({
+                                    id: val,
+                                    text: val
+                                });
+                            }
+                        });
+                    }
+
+                    return uniqueOptions;
                 },
 
                 // Core filtering engine