1<#assign namespace = "${namespace}_press_theme_filter" />
2<#assign
3 vocabularyId = 64873
4 categoriesPage = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/" + vocabularyId + "/taxonomy-categories?fields=id,name&restricFields=actions,availableLanguages,taxonomyCategoryUsageCount&page=1&pageSize=30").items
5/>
6
7<div class="d-none">
8 <@liferay_ui["panel-container"]
9 extended=true
10 id="${namespace + 'filterCustomPanelContainer'}"
11 markupView="lexicon"
12 persistState=true
13 >
14 <@liferay_ui.panel
15 collapsible=true
16 cssClass="search-facet"
17 id="${namespace + 'filterCustomPanel'}"
18 markupView="lexicon"
19 persistState=true
20 title="${htmlUtil.escapeAttribute(customFilterDisplayContext.getHeading())}"
21 >
22 <div class="form-group-autofit">
23 <@liferay_aui["input"]
24 cssClass="custom-filter-value-input"
25 data\-qa\-id="customFilterValueInput"
26 disabled=customFilterDisplayContext.isImmutable()
27 id="${namespace + 'themeInput'}"
28 label=""
29 name="${htmlUtil.escapeAttribute(customFilterDisplayContext.getParameterName())}"
30 useNamespace=false
31 value="${htmlUtil.escapeAttribute(customFilterDisplayContext.getFilterValue())}"
32 wrapperCssClass="form-group-item"
33 />
34
35 <@clay["button"]
36 ariaLabel='${languageUtil.get(request, "apply")}'
37 disabled=customFilterDisplayContext.isImmutable()
38 elementClasses="btn-secondary"
39 id="${namespace + 'submitThemeFilter'}"
40 label='${languageUtil.get(request, "apply")}'
41 type="submit"
42 />
43 </div>
44 </@>
45 </@>
46</div>
47
48<div id="${namespace}">
49 <select class="form-control" id="${namespace + 'selectTheme'}" multiple="true">
50 <option name="all" value="all">
51 <@liferay.language key="with-any-theme" />
52 </option>
53 <#list categoriesPage as categorie>
54 <option name="${categorie.name}" value="${categorie.id}">
55 ${categorie.name}
56 </option>
57 </#list>
58 </select>
59</div>
60
61<script>
62(function(){
63 const prefix = "assetCategoryIds:";
64 var currentThemes = $("#${namespace + 'themeInput'}").val();
65 if (currentThemes != '') {
66 currentThemes.split(" OR ").forEach(theme => {
67 $("#${namespace + 'selectTheme'} option[value='" + theme.substring(prefix.length) + "']").attr("selected", "selected");
68 })
69 }
70
71 var selectTheme = document.getElementById("${namespace + 'selectTheme'}");
72 new Choices(selectTheme, {
73 shouldSort: false,
74 placeholder: false,
75 removeItemButton: true,
76 itemSelectText: "",
77 });
78
79 if (currentThemes == '') {
80 $("#${namespace} input").attr("placeholder", "${languageUtil.get(locale, 'with-any-theme')}");
81 }
82
83 $("#${namespace + 'selectTheme'}").change(() => {
84 $("#${namespace} input").attr("placeholder", "");
85
86 var selectedValuesArray = $("#${namespace + 'selectTheme'}").val().map(selectedVal => prefix + selectedVal)
87 var selectedValues = selectedValuesArray.join(" OR ");
88 if (selectedValues.includes("all")) {
89 selectedValues = ''
90 }
91 $("#${namespace + 'themeInput'}").val(selectedValues);
92 $("#${namespace + 'submitThemeFilter'}").click();
93 })
94})()
95</script>
