1<#-- Variables -->
2<#assign specificationName = 'ics' />
3<#assign paramNameSpecificationName = cpSpecificationOptionsSearchFacetDisplayContext.getParameterName() />
4<#assign isDebug = false />
5<#assign showAllSpecificationsName = false />
6<#assign staticHost = getCXConfig("ecom-static-files") />
7
8<#-- ========================= -->
9<#-- Functions freemaker -->
10<#-- ========================= -->
11<#function getCXConfig clientExtensionName field="webApiUrl">
12 <#if !clientExtensionName?has_content><#return "" /></#if>
13 <#local encoded = urlCodec.encodeURL(clientExtensionName) />
14 <#local items = restClient.get("/c/customconfigs/?fields=clientExtensionConfig&filter=clientExtensionName eq '" + encoded + "'").items![] />
15 <#return items?has_content?then(items[0].clientExtensionConfig?eval[field]!"", "") />
16</#function>
17
18
19<#if paramNameSpecificationName == specificationName || showAllSpecificationsName>
20
21 <#-- ------------------------------------- -->
22
23<#assign sharedSearchResponse = renderRequest.getAttribute("LIFERAY_SHARED_PortletSharedSearchResponse") />
24<#assign searchResponse = sharedSearchResponse.get() />
25<#assign esResponse = searchResponse.getSearchResponse() />
26<#assign aggResult = esResponse.getAggregationResult("organismos") />
27<#list aggResult.getBuckets() as bucket>
28 <p>key: ${bucket.getKey()} - count: ${bucket.getDocCount()}</p>
29</#list>
30
31 <#-- ------------------------------------- -->
32
33
34 <#-- Variables -->
35 <#assign facetId = "facet-" + paramNameSpecificationName + "-" + renderResponse.getNamespace() />
36 <#assign facetClass = "facet-" + paramNameSpecificationName + "-combo-search-wrapper" />
37
38 <#-- ========================= -->
39 <#-- TOM SELECT framework -->
40 <#-- ========================= -->
41 <@liferay_util["html-top"] outputKey="tom-select">
42 <link href="${staticHost}/scripts/vendor/tom-select/tom-select.css" rel="stylesheet">
43 <script src="${staticHost}/scripts/vendor/tom-select/tom-select.complete.min.js"></script>
44 </@>
45
46 <#-- ========================= -->
47 <#-- CSS -->
48 <#-- ========================= -->
49 <style>
50 /* ===========================
51 Variables de fuente compartidas
52 =========================== */
53 #${facetId} {
54 --facet-font-family: Inter;
55 --facet-font-size: 14px;
56 --facet-font-weight: 400;
57 --facet-line-height: 18px;
58 --facet-letter-spacing: 0.5px;
59 --facet-color: #66757f;
60 }
61
62 /* ===========================
63 Select original — oculto desde el inicio
64 =========================== */
65 #${facetId}-select {
66 appearance: none;
67 -webkit-appearance: none;
68 visibility: hidden;
69 position: absolute;
70 }
71
72 /* ===========================
73 TomSelect — wrapper oculto hasta inicializar
74 =========================== */
75 #${facetId} .ts-wrapper {
76 width: 100%;
77 margin-bottom: 16px;
78 opacity: 0;
79 transition: opacity 0.1s ease;
80 }
81
82 #${facetId} .ts-wrapper .ts-control {
83 padding: 15.5px 16px;
84 font-family: var(--facet-font-family);
85 font-size: var(--facet-font-size);
86 font-weight: var(--facet-font-weight);
87 line-height: var(--facet-line-height);
88 letter-spacing: var(--facet-letter-spacing);
89 color: var(--facet-color);
90 text-align: left;
91 height: 55px;
92 width: 100%;
93 border-radius: 4px;
94 border: none;
95 background-color: #F5F5F5;
96 background-image: url(/documents/d/global/ico-chevron-down-2);
97 background-repeat: no-repeat;
98 background-position: right 1rem center;
99 background-size: 18px 10px;
100 box-shadow: none;
101 cursor: pointer;
102 box-sizing: border-box;
103 }
104
105 #${facetId} .ts-wrapper .ts-control:focus,
106 #${facetId} .ts-wrapper .ts-control:focus-visible {
107 background-image: url(/documents/d/global/ico-chevron-down-2);
108 background-position: right 1rem center;
109 background-size: 18px 10px;
110 outline: none;
111 box-shadow: none;
112 }
113
114 #${facetId} .ts-wrapper .ts-control .item {
115 padding-right: 0.75rem;
116 overflow: hidden;
117 text-overflow: ellipsis;
118 max-width: calc(100% - 0.75rem);
119 }
120
121 /* Ocultar flecha nativa de TomSelect */
122 #${facetId} .ts-wrapper.single .ts-control::after {
123 display: none;
124 }
125
126 /* Input de búsqueda del dropdown */
127 #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input {
128 font-family: var(--facet-font-family);
129 font-size: var(--facet-font-size);
130 font-weight: var(--facet-font-weight);
131 line-height: var(--facet-line-height);
132 letter-spacing: var(--facet-letter-spacing);
133 color: var(--facet-color);
134 padding: 8px 16px;
135 border: none;
136 border-bottom: 1px solid #d9d9d9;
137 background-color: #fff;
138 width: 100%;
139 box-sizing: border-box;
140 }
141
142 #${facetId} .ts-dropdown .dropdown-input-wrap .dropdown-input:focus {
143 outline: none;
144 box-shadow: none;
145 }
146
147 /* Opciones del dropdown */
148 #${facetId} .ts-dropdown .ts-dropdown-content .option {
149 font-family: var(--facet-font-family);
150 font-size: var(--facet-font-size);
151 font-weight: var(--facet-font-weight);
152 line-height: var(--facet-line-height);
153 letter-spacing: var(--facet-letter-spacing);
154 color: var(--facet-color);
155 padding: 8px 16px;
156 }
157
158 #${facetId} .ts-dropdown .ts-dropdown-content .option:hover,
159 #${facetId} .ts-dropdown .ts-dropdown-content .option.active {
160 background-color: #6a9bd3;
161 color: #fff;
162 }
163 </style>
164
165 <div class="checks-container ${facetClass}" id="${facetId}">
166 <div class="d-flex flex-column w-100">
167 <label class="panel-title mb-2" for="${facetId}-select">
168 ${languageUtil.get(locale, "norma." + paramNameSpecificationName)}
169 <#if isDebug>
170 <p style="font-size:11px;color:#999;font-weight:normal;">
171 (total options: ${entries?size})
172 </p>
173 <p style="font-size:11px;color:#999;font-weight:normal;">
174 (facetId: ${facetId})
175 </p>
176 </#if>
177 </label>
178
179 <#-- ========================= -->
180 <#-- SELECT UI -->
181 <#-- ========================= -->
182 <select id="${facetId}-select" data-parameter-name="${paramNameSpecificationName}">
183 <option value="">${languageUtil.get(locale, "search.cualquiera")}</option>
184 <#list entries?sort_by("displayName") as entry>
185 <option value="${htmlUtil.escape(entry.getDisplayName())}"
186 <#if entry.isSelected()>selected</#if>>
187 ${htmlUtil.escape(entry.getDisplayName())} (${entry.getFrequency()})
188 </option>
189 </#list>
190 </select>
191 </div>
192 </div>
193
194 <#-- ========================= -->
195 <#-- SCRIPT -->
196 <#-- ========================= -->
197 <script>
198 (function () {
199 var FACET_ID = '${facetId}';
200 var PARAM_NAME = '${paramNameSpecificationName}';
201
202 function applyUrlFilter(value) {
203 var url = new URL(window.location.href);
204 if (value) {
205 url.searchParams.set(PARAM_NAME, value);
206 } else {
207 url.searchParams.delete(PARAM_NAME);
208 }
209 window.location.href = url.toString();
210 }
211
212 function initFacet() {
213 var select = document.getElementById(FACET_ID + '-select');
214 if (!select) return;
215
216 if (select.tomselect) select.tomselect.destroy();
217 if (select.dataset.bound === 'true') return;
218 select.dataset.bound = 'true';
219
220 new TomSelect(select, {
221 allowEmptyOption: true,
222 maxItems: 1,
223 create: false,
224 render: {
225 no_results: function(data, escape) {
226 return '<div class="no-results">${languageUtil.get(locale, "occurrence-not-found")}</div>';
227 }
228 },
229 plugins: {
230 dropdown_input: {}
231 },
232 onDelete: function(value) {
233 this.isDelete = true;
234 },
235 onChange: function(value) {
236 if (value) {
237 this.lastValidValue = value;
238 applyUrlFilter(value);
239 return;
240 }
241 this.lastValidValue = '';
242 applyUrlFilter('');
243 },
244 onInitialize: function() {
245 this.lastValidValue = this.getValue() || '';
246 this.isDelete = false;
247 var wrapper = document.querySelector('#' + FACET_ID + ' .ts-wrapper');
248 if (wrapper) wrapper.style.opacity = '1';
249 }
250 });
251 }
252
253 if (document.readyState === 'loading') {
254 document.addEventListener('DOMContentLoaded', initFacet);
255 } else {
256 initFacet();
257 }
258 })();
259 </script>
260</#if>
