https://www.cccb.org/o/org.cccb.agenda/js/init-filters-module.js

1function onDomReady(fn) {
2    if (document.readyState === 'loading') {
3        document.addEventListener('DOMContentLoaded', fn, {once: true});
4    } else {
5        fn();
6    }
7}
8
9onDomReady(function () {
10    const tagsContainer = document.querySelector('.ms-filter-list');
11    const deleteFiltersBtn = document.querySelector('.delete-filters');
12    const startDateInput = document.querySelector('.start-date.datepicker-input');
13    const endDateInput = document.querySelector('.end-date.datepicker-input');
14    const selects = document.querySelectorAll('select.multiple-select-filter');
15
16
17    function createTag(label, value, selectEl) {
18        const li = document.createElement('li');
19        const span = document.createElement('span');
20        span.className = 'tag tag-dismissible';
21        span.textContent = label;
22
23        const button = document.createElement('button');
24        button.type = 'button';
25        button.className = 'mp-button btn-sm mp-btn-tertiary btn-only-icon btn-icon cccb-icon icon-close icon-sm btn-icon-right';
26        button.setAttribute('data-value', value);
27        if(selectEl)
28        button.setAttribute('data-select-id', selectEl.id);
29
30        span.appendChild(button);
31        li.appendChild(span);
32        tagsContainer.appendChild(li);
33
34        button.addEventListener('click', function () {
35            if(selectEl){
36                const selectInstance = window.multipleSelectInstances[selectEl.id];
37                if (selectInstance) {
38                    selectInstance.setSelects(
39                        selectInstance.getSelects().filter(function (v) {
40                            return v !== value;
41                        })
42                    );
43                }
44            }else{
45                const url = new URL(window.location);
46                url.searchParams.delete('relatedEntryId');
47                location.search = url.search;
48            }
49            li.remove();
50            updateDeleteButtonVisibility();
51        });
52    }
53
54    function removeAllTags() {
55        tagsContainer.innerHTML = '';
56    }
57
58    function updateDeleteButtonVisibility() {
59        const hasTags = tagsContainer ? tagsContainer.children.length > 0 : false;
60        const hasStartDate = startDateInput ? startDateInput.value.trim() !== '' : false;
61        const hasEndDate = endDateInput ? endDateInput.value.trim() !== '' : false;
62
63        if (deleteFiltersBtn) {
64            deleteFiltersBtn.style.display = hasTags || hasStartDate || hasEndDate ? 'flex' : 'none';
65        }
66    }
67
68    window.multipleSelectInstances = {};
69
70    selects.forEach(function (select) {
71        const instance = window.multipleSelect(select);
72        window.multipleSelectInstances[select.id] = instance;
73
74            // Recoger los valores iniciales seleccionados (lo cogerá del DOM)
75            const selectedValues = instance.getSelects();
76
77            selectedValues.forEach(value => {
78                const label = [...select.options].find(opt => opt.value === value)?.textContent || value;
79                createTag(label, value, select);
80            });
81
82        select.addEventListener('change', function () {
83            const selectedValues = instance.getSelects();
84
85            /*
86            const existingTags = tagsContainer.querySelectorAll('li');
87            existingTags.forEach(function (tag) {
88                const btn = tag.querySelector('button');
89                const val = btn.getAttribute('data-value');
90                const selectId = btn.getAttribute('data-select-id');
91                if (select.id === selectId && selectedValues.indexOf(val) === -1) {
92                    tag.remove();
93                }
94            });
95
96            selectedValues.forEach(function (value) {
97                const exists = Array.prototype.some.call(
98                    tagsContainer.querySelectorAll('button'),
99                    function (btn) {
100                        return btn.getAttribute('data-value') === value &&
101                            btn.getAttribute('data-select-id') === select.id;
102                    }
103                );
104                if (!exists) {
105                    const label = Array.prototype.find.call(select.options, function (opt) {
106                        return opt.value === value;
107                    });
108                    createTag(label ? label.textContent : value, value, select);
109                }
110            });
111            */
112            updateDeleteButtonVisibility();
113
114           // Aquí viene la parte nueva: construimos el nuevo query string
115            const newQueryString = Liferay.Search.FacetUtil.updateQueryString("category", selectedValues, window.location.search);
116
117            // Navegamos a la nueva URL
118            location.search  = newQueryString;
119        });
120    });

121
122    if (deleteFiltersBtn) {
123        deleteFiltersBtn.addEventListener('click', function () {
124            removeAllTags();
125            Object.values(window.multipleSelectInstances).forEach(function (instance) {
126                instance.uncheckAll();
127            });
128
129            if (startDateInput) {
130                startDateInput.value = '';
131            }
132            if (endDateInput) {
133                endDateInput.value = '';
134            }
135
136            updateDeleteButtonVisibility();
137
138
139            const url = new URL(window.location);
140            url.searchParams.delete('fechaDesde');
141            url.searchParams.delete('fechaHasta');
142            url.searchParams.delete('category');
143
144            location.search = url.search;
145        });
146    }
147
148    if (startDateInput) {
149     //   startDateInput.addEventListener('changeDate', updateStartDate);
150     //   startDateInput.addEventListener('input', updateStartDate);
151    }
152
153    if (endDateInput) {
154        //endDateInput.addEventListener('changeDate', updateEndDate);
155        //endDateInput.addEventListener('input', updateEndDate);
156    }
157
158    const container = document.querySelector(".bs-daterangepicker");
159    //container.addEventListener('changeDate', updateEndDate);
160
161    container.addEventListener("hide", () => {
162      const startInput = container.querySelector(".start-date");
163      const endInput = container.querySelector(".end-date");
164
165      if (startInput.value && endInput.value) {
166        console.log("Rango seleccionado (evento hide):", startInput.value, endInput.value);
167        updateEndDate();
168        // Aquí tu código cuando se termina la selección del rango
169      }
170    });
171
172    updateDeleteButtonVisibility();
173
174     function updateEndDate() {
175          let startVal = startDateInput.value;
176           let endVal = endDateInput.value;
177
178           if (localeLang === "en") {
179             startVal = convertEnDateToDdMmYyyy(startVal);
180             endVal = convertEnDateToDdMmYyyy(endVal);
181           }
182
183           console.log('updateEndDate:', [startVal], [endVal]);
184
185          const originalParams = new URLSearchParams(window.location.search);
186
187          const cleanedQueryString = originalParams.toString();
188
189          // Paso 2: Usar FacetUtil para construir la query con 'fechaDesde' y 'fechaHasta'
190          const newQueryString1 = Liferay.Search.FacetUtil.updateQueryString("fechaDesde", [startVal], cleanedQueryString);
191          const newQueryString2 = Liferay.Search.FacetUtil.updateQueryString("fechaHasta", [endVal], newQueryString1);
192
193
194           // Navegamos a la nueva URL
195           location.search = newQueryString2;
196           updateDeleteButtonVisibility();
197     }
198
199     function convertEnDateToDdMmYyyy(dateStr) {
200       // dateStr esperado: "MM/dd/yyyy"
201       const parts = dateStr.split('/');
202       if (parts.length !== 3) return dateStr; // mal formato, no tocar
203
204       const [month, day, year] = parts;
205       return `${day.padStart(2,'0')}/${month.padStart(2,'0')}/${year}`;
206     }
207
208     function informRelated() {
209c
210     }
211     if (relatedName!='')    createTag(relatedName, relatedName);
212});