Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Nov 30, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/bundle/Resources/config/bazinga_js_translation.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ active_domains:
- 'ibexa_trash_ui'
- 'ibexa_user_invitation'
- 'ibexa_content_type'
- 'ibexa_dropdown'
- 'messages'
24 changes: 20 additions & 4 deletions src/bundle/Resources/public/js/scripts/core/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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);
});

Expand All @@ -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() {
Expand Down Expand Up @@ -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;
}
Expand Down
13 changes: 13 additions & 0 deletions src/bundle/Resources/public/scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
GrabowskiM marked this conversation as resolved.
Show resolved Hide resolved
line-height: calculateRem(24px);
padding: calculateRem(24px) 0;
}

&__item-check {
position: absolute;
right: calculateRem(4px);
Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/ibexa_dropdown.en.xliff
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 0 additions & 10 deletions src/bundle/Resources/translations/messages.en.xliff
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 15 additions & 8 deletions src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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, {
Expand Down Expand Up @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

class ibexa-icon?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here there's no point for this class - this class sets width and height of an element to 2rem and I need for this svg to be of dynamic size (based on widget width)

<use xlink:href="{{ ibexa_icon_path('filter-empty') }}"></use>
</svg>
<div class="ibexa-dropdown__items-list-filter-empty-message"></div>
</div>
</div>
</div>
</div>
Loading