IBX-7173: As the user I want to see empty state message in dropdown while filtering

Author: GrabowskiM

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'

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 &quot;%phrase%&quot;")*/ '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;
         }

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);

src/bundle/Resources/translations/ibexa_dropdown.en.xliff

@@ -11,6 +11,11 @@
         <target state="new">Clear (%selected_items_count%)</target>
         <note>key: dropdown.clear</note>
       </trans-unit>
+      <trans-unit id="ada9f9b1f9f1b312d3b2de5dbdbcf89065f72608" resname="dropdown.no_results">
+        <source><![CDATA[No results found for &quot;%phrase%&quot;]]></source>
+        <target state="new"><![CDATA[No results found for &quot;%phrase%&quot;]]></target>
+        <note>key: dropdown.no_results</note>
+      </trans-unit>
       <trans-unit id="a3390555f717ffd9b3560f17198e5a437899967f" resname="dropdown.placeholder">
         <source>Choose an option</source>
         <target state="new">Choose an option</target>

src/bundle/Resources/translations/messages.en.xliff

@@ -261,21 +261,11 @@
         <target state="new">No results found</target>
         <note>key: dashboard.charts.no_results</note>
       </trans-unit>
-      <trans-unit id="8fedbb70c8494c057fb45930e46671a659bae616" resname="dropdown.clear">
-        <source>Clear (%selected_items_count%)</source>
-        <target state="new">Clear (%selected_items_count%)</target>
-        <note>key: dropdown.clear</note>
-      </trans-unit>
       <trans-unit id="272e650f8667b4f4fcb7032b85b98ef4a9974f0f" resname="dropdown.search">
         <source>Search...</source>
         <target state="new">Search...</target>
         <note>key: dropdown.search</note>
       </trans-unit>
-      <trans-unit id="3f446c9bfc8591ebdb9a2bc8fa98410bdcc4ced2" resname="dropdown.select_all">
-        <source>Select All</source>
-        <target state="new">Select All</target>
-        <note>key: dropdown.select_all</note>
-      </trans-unit>
       <trans-unit id="7cb40cbc703336ab1285e81ebf100b82b05a0e27" resname="error.page.403.actions">
         <source><![CDATA[Contact your administrator to request access.<br/>Go back to the <a href="%dashboard%">dashboard</a> or <a href="%search%">search</a> for another item.]]></source>
         <target state="new"><![CDATA[Contact your administrator to request access.<br/>Go back to the <a href="%dashboard%">dashboard</a> or <a href="%search%">search</a> for another item.]]></target>

src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig

@@ -123,6 +123,14 @@
             <li class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-overflow-number" hidden></li>
         </ul>
         <div class="ibexa-dropdown__items {{ items_class|default('') }} {{ choices_flat|length < min_search_items ? 'ibexa-dropdown__items--search-hidden' }}">
+            {% block items_list_header %}
+                {% if items_list_header is defined %}
+                    <div class="ibexa-dropdown__items-list-header">
+                        {{ items_list_header }}
+                    </div>
+                {% endif %}
+            {% endblock items_list_header %}
+
             {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
                 {% block content %}
                     <input
@@ -144,14 +152,6 @@
                 </button>
             {% endif %}
 
-            {% block items_list_header %}
-                {% if items_list_header is defined %}
-                    <div class="ibexa-dropdown__items-list-header">
-                        {{ items_list_header }}
-                    </div>
-                {% endif %}
-            {% endblock items_list_header %}
-
             <ul
                 class="ibexa-dropdown__items-list"
                 data-template="{{ include(list_item_template_path, {
@@ -183,6 +183,13 @@
                     {% include list_item_template_path with { choice, custom_form, icon: item_icon, icon_class: item_icon_class } %}
                 {% endfor %}
             </ul>
+
+            <div class="ibexa-dropdown__items-list-filter-empty" hidden>
+                <svg>
+                    <use xlink:href="{{ ibexa_icon_path('filter-empty') }}"></use>
+                </svg>
+                <div class="ibexa-dropdown__items-list-filter-empty-message"></div>
+            </div>
         </div>
     </div>
 </div>