diff --git a/src/bundle/Resources/config/bazinga_js_translation.yaml b/src/bundle/Resources/config/bazinga_js_translation.yaml index cb0460b3ea..762dbc83ef 100644 --- a/src/bundle/Resources/config/bazinga_js_translation.yaml +++ b/src/bundle/Resources/config/bazinga_js_translation.yaml @@ -11,4 +11,5 @@ active_domains: - 'ibexa_trash_ui' - 'ibexa_user_invitation' - 'ibexa_content_type' + - 'ibexa_dropdown' - 'messages' diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js index 9d298024ad..a1ff98d5d8 100644 --- a/src/bundle/Resources/public/js/scripts/core/dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/dropdown.js @@ -36,6 +36,7 @@ this.itemsContainer = this.container.querySelector('.ibexa-dropdown__items'); this.itemsListContainer = this.itemsContainer.querySelector('.ibexa-dropdown__items-list'); this.itemsFilterInput = this.itemsContainer.querySelector('.ibexa-dropdown__items-filter'); + this.itemsListFilterEmptyContainer = this.itemsContainer.querySelector('.ibexa-dropdown__items-list-filter-empty'); this.selectionTogglerBtn = this.itemsContainer.querySelector('.ibexa-dropdown__selection-toggler-btn'); this.isDynamic = this.container.classList.contains('ibexa-dropdown--dynamic'); @@ -308,24 +309,35 @@ } filterItems(event) { - const forceShowItems = event.currentTarget.value.length < MINIMUM_LETTERS_TO_FILTER; + const searchedTerm = event.currentTarget.value; + const forceShowItems = searchedTerm.length < MINIMUM_LETTERS_TO_FILTER; const allItems = [...this.itemsListContainer.querySelectorAll('[data-filter-value]')]; const groups = [...this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item-group')]; const separator = this.itemsListContainer.querySelector('.ibexa-dropdown__separator'); + const emptyMessage = Translator.trans( + /*@Desc("No results found for "%phrase%"")*/ 'dropdown.no_results', + { phrase: searchedTerm }, + 'ibexa_dropdown', + ); let hideSeparator = true; + let anyItemVisible = false; if (separator) { separator.setAttribute('hidden', 'hidden'); } allItems.forEach((item) => { - const isItemVisible = forceShowItems || this.compareItem(item.dataset.filterValue, event.currentTarget.value); + const isItemVisible = forceShowItems || this.compareItem(item.dataset.filterValue, searchedTerm); const isPreferredChoice = item.classList.contains('ibexa-dropdown__item--preferred-choice'); if (isPreferredChoice && isItemVisible) { hideSeparator = false; } + if (isItemVisible) { + anyItemVisible = true; + } + item.classList.toggle('ibexa-dropdown__item--hidden', !isItemVisible); }); @@ -338,6 +350,10 @@ if (separator && !hideSeparator) { separator.removeAttribute('hidden'); } + + this.itemsListContainer.toggleAttribute('hidden', !anyItemVisible); + this.itemsListFilterEmptyContainer.toggleAttribute('hidden', anyItemVisible); + this.itemsListFilterEmptyContainer.querySelector('.ibexa-dropdown__items-list-filter-empty-message').innerHTML = emptyMessage; } itemsPopoverContent() { @@ -434,9 +450,9 @@ ? Translator.trans( /*@Desc("Clear (%selected_items_count%)")*/ 'dropdown.clear', { selected_items_count: selectedItems.length }, - 'messages', + 'ibexa_dropdown', ) - : Translator.trans(/*@Desc("Select All")*/ 'dropdown.select_all', {}, 'messages'); + : Translator.trans(/*@Desc("Select All")*/ 'dropdown.select_all', {}, 'ibexa_dropdown'); this.selectionTogglerBtn.innerHTML = label; } diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index a408965546..163286f22a 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -211,6 +211,19 @@ overflow-y: auto; } + &__items-list-filter-empty { + padding: calculateRem(16px); + text-align: center; + } + + &__items-list-filter-empty-message { + color: $ibexa-color-dark-400; + font-size: $ibexa-text-font-size; + font-weight: 600; + line-height: calculateRem(24px); + padding: calculateRem(24px) 0; + } + &__item-check { position: absolute; right: calculateRem(4px); diff --git a/src/bundle/Resources/translations/ibexa_dropdown.en.xliff b/src/bundle/Resources/translations/ibexa_dropdown.en.xliff index 6690860f3c..236972311e 100644 --- a/src/bundle/Resources/translations/ibexa_dropdown.en.xliff +++ b/src/bundle/Resources/translations/ibexa_dropdown.en.xliff @@ -11,6 +11,11 @@ Clear (%selected_items_count%) key: dropdown.clear + + + + key: dropdown.no_results + Choose an option Choose an option diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff index 78c7a2faac..8b59c7a9a0 100644 --- a/src/bundle/Resources/translations/messages.en.xliff +++ b/src/bundle/Resources/translations/messages.en.xliff @@ -261,21 +261,11 @@ No results found key: dashboard.charts.no_results - - Clear (%selected_items_count%) - Clear (%selected_items_count%) - key: dropdown.clear - Search... Search... key: dropdown.search - - Select All - Select All - key: dropdown.select_all - Go back to the dashboard or search for another item.]]> Go back to the dashboard or search for another item.]]> diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig index 4405dd96a4..7d88814b04 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig @@ -123,6 +123,14 @@
+ {% block items_list_header %} + {% if items_list_header is defined %} +
+ {{ items_list_header }} +
+ {% endif %} + {% endblock items_list_header %} + {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%} {% block content %} {% endif %} - {% block items_list_header %} - {% if items_list_header is defined %} -
- {{ items_list_header }} -
- {% endif %} - {% endblock items_list_header %} -