1<#assign namespace = "${namespace}_animals_filter" /> 

2<#assign  

3		vocabularyId = restClient.get("/headless-admin-taxonomy/v1.0/sites/" + groupId + "/taxonomy-vocabularies?filter=name eq 'Animals' or name eq 'Animais'&fields=id&restricFields=actions,availableLanguages&page=1&pageSize=1").items[0].id 

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 + 'animalInput'}" 

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 + 'submitAnimalFilter'}" 

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 + 'selectAnimal'}" multiple="true"> 

50        <option name="all" value="all"> 

51            <@liferay.language key="all-animals" /> 

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 currentAnimals = $("#${namespace + 'animalInput'}").val(); 

65    if (currentAnimals != '') { 

66        currentAnimals.split(" OR ").forEach(animal => { 

67            $("#${namespace + 'selectAnimal'} option[value='" + animal.substring(prefix.length) + "']").attr("selected", "selected"); 

68        }) 

69    }  

70 

71    var selectAnimal = document.getElementById("${namespace + 'selectAnimal'}"); 

72    new Choices(selectAnimal, { 

73        shouldSort: false, 

74        placeholder: false, 

75        removeItemButton: true, 

76        itemSelectText: "", 

77    }); 

78 

79    if (currentAnimals == '') { 

80        $("#${namespace} input").attr("placeholder", "${languageUtil.get(locale, 'all-animals')}"); 

81    } 

82 

83    $("#${namespace + 'selectAnimal'}").change(() => { 

84        $("#${namespace} input").attr("placeholder", ""); 

85 

86        var selectedValuesArray = $("#${namespace + 'selectAnimal'}").val().map(selectedVal => prefix + selectedVal) 

87        var selectedValues = selectedValuesArray.join(" OR "); 

88        if (selectedValues.includes("all")) { 

89            selectedValues = '' 

90        } 

91        $("#${namespace + 'animalInput'}").val(selectedValues); 

92        $("#${namespace + 'submitAnimalFilter'}").click(); 

93    }) 

94})() 

95</script>