Skip to content

Commit 4e059bb

Browse files
GrabowskiMGrabowskiM
authored
IBX-10302: Add "Suggest Taxonomy Entries" Action Type (UI) (#1673)
* IBX-10302: Add "Suggest Taxonomy Entries" Action Type (UI) * IBX-10302: Added multistep selector and fields selector
1 parent 7fe26fe commit 4e059bb

File tree

5 files changed

+122
-63
lines changed

5 files changed

+122
-63
lines changed

‎src/bundle/Resources/public/js/scripts/core/dropdown.js‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -182,25 +182,37 @@
182182
return this.onSelect(optionToSelect, true);
183183
}
184184

185-
onSelect(element, selected) {
186-
const { choiceIcon } = element.dataset;
187-
const value = JSON.stringify(String(element.dataset.value));
185+
getValueFromElement(element, isJSONValue = true) {
186+
const value = String(element.dataset.value);
188187

189-
if (this.canSelectOnlyOne && selected) {
190-
this.hideOptions();
191-
this.clearCurrentSelection(false);
188+
if (!isJSONValue) {
189+
return value;
192190
}
193191

192+
return JSON.stringify(String(element.dataset.value));
193+
}
194+
195+
onSelectSetSourceInputState(element, selected) {
196+
const value = this.getValueFromElement(element);
197+
194198
if (value) {
195199
this.sourceInput.querySelector(`[value=${value}]`).selected = selected;
200+
}
201+
}
196202

197-
if (!this.canSelectOnlyOne) {
198-
element.querySelector('.ibexa-input').checked = selected;
199-
}
203+
onSelectSetItemsListState(element, selected) {
204+
const value = this.getValueFromElement(element);
205+
206+
if (value && !this.canSelectOnlyOne) {
207+
element.querySelector('.ibexa-input').checked = selected;
200208
}
201209

202210
this.itemsListContainer.querySelector(`[data-value=${value}]`).classList.toggle('ibexa-dropdown__item--selected', selected);
211+
}
203212

213+
onSelectSetSelectionInfoState(element, selected) {
214+
const { choiceIcon } = element.dataset;
215+
const value = this.getValueFromElement(element);
204216
const selectedItemsList = this.container.querySelector('.ibexa-dropdown__selection-info');
205217

206218
if (selected) {
@@ -218,6 +230,10 @@
218230
}
219231

220232
this.fitItems();
233+
}
234+
235+
onSelectSetCurrentSelectedValueState(element) {
236+
const value = this.getValueFromElement(element);
221237

222238
if (this.currentSelectedValue !== value || !this.canSelectOnlyOne) {
223239
this.fireValueChangedEvent();
@@ -226,6 +242,18 @@
226242
}
227243
}
228244

245+
onSelect(element, selected) {
246+
if (this.canSelectOnlyOne && selected) {
247+
this.hideOptions();
248+
this.clearCurrentSelection(false);
249+
}
250+
251+
this.onSelectSetSourceInputState(element, selected);
252+
this.onSelectSetItemsListState(element, selected);
253+
this.onSelectSetSelectionInfoState(element, selected);
254+
this.onSelectSetCurrentSelectedValueState(element, selected);
255+
}
256+
229257
onInteractionOutside(event) {
230258
if (this.itemsPopover.tip.contains(event.target)) {
231259
return;
@@ -293,6 +321,13 @@
293321
this.fireValueChangedEvent();
294322
}
295323

324+
deselectOptionByValue(value) {
325+
const stringifiedValue = JSON.stringify(String(value));
326+
const optionToDeselect = this.itemsListContainer.querySelector(`.ibexa-dropdown__item[data-value=${stringifiedValue}]`);
327+
328+
return this.deselectOption(optionToDeselect);
329+
}
330+
296331
fitItems() {
297332
if (this.canSelectOnlyOne) {
298333
return;
@@ -526,7 +561,7 @@
526561
);
527562
this.itemsPopover._element.removeAttribute('title');
528563

529-
if (this.isDynamic) {
564+
if (this.isDynamic && this.canSelectOnlyOne) {
530565
this.selectFirstOption();
531566
}
532567

‎src/bundle/Resources/public/js/scripts/core/tag.view.select.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
attributeFilter: ['disabled'],
4242
attributeOldValue: true,
4343
});
44+
45+
ibexa.helpers.objectInstances.setInstance(this.container, this);
4446
}
4547

4648
toggleEmptyListState() {

‎src/bundle/Resources/public/scss/_tag-view-select.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,15 @@
107107
display: flex;
108108
}
109109

110-
&__btn-select-path {
110+
&__actions {
111111
margin-top: calculateRem(24px);
112112
}
113113

114+
&__separator {
115+
display: inline-block;
116+
padding: 0 calculateRem(16px);
117+
}
118+
114119
&:disabled,
115120
&[disabled] {
116121
@include colorful-tags($ibexa-color-dark-400, $ibexa-color-light-300);

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

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -68,45 +68,59 @@
6868
})|e('html_attr') }}"
6969
data-placeholder-template="{{ placeholder_list_item|e('html_attr') }}"
7070
>
71-
{% if no_items %}
72-
{% if not is_dynamic %}
73-
{{ placeholder_list_item }}
74-
{% endif %}
75-
{% else %}
76-
{% if value is empty %}
77-
{% if not multiple %}
78-
{% if placeholder is defined and placeholder is not none %}
79-
{% set default_label = 'dropdown.placeholder.all'|trans()|desc('All') %}
80-
81-
{% include selected_item_template_path with {
82-
value: '',
83-
label: _self.get_translated_label(placeholder, translation_domain)|trim|default(default_label),
84-
} %}
85-
{% else %}
86-
{% set first_choice = choices_flat|first %}
87-
88-
{% include selected_item_template_path with {
89-
value: first_choice.value,
90-
label: _self.get_translated_label(first_choice.label, translation_domain),
91-
icon: first_choice.icon is defined ? first_choice.icon,
92-
} %}
93-
{% endif %}
71+
{% block selection_info_content %}
72+
{% if no_items %}
73+
{% if not is_dynamic %}
74+
{{ placeholder_list_item }}
9475
{% endif %}
9576
{% else %}
96-
{% for choice in choices_flat %}
97-
{% if custom_form ? choice.value == value : choice is selectedchoice(value) %}
98-
{% set label = selected_item_label is defined
99-
? selected_item_label
100-
: _self.get_translated_label(choice.label, translation_domain)
101-
%}
77+
{% if value is empty %}
78+
{% if not multiple %}
79+
{% if placeholder is defined and placeholder is not none %}
80+
{% set default_label = 'dropdown.placeholder.all'|trans()|desc('All') %}
10281

103-
{% include selected_item_template_path with {
104-
label,
105-
value: choice.value,
106-
icon: choice.icon is defined ? choice.icon,
107-
} %}
82+
{% include selected_item_template_path with {
83+
value: '',
84+
label: _self.get_translated_label(placeholder, translation_domain)|trim|default(default_label),
85+
} %}
86+
{% else %}
87+
{% set first_choice = choices_flat|first %}
88+
89+
{% include selected_item_template_path with {
90+
value: first_choice.value,
91+
label: _self.get_translated_label(first_choice.label, translation_domain),
92+
icon: first_choice.icon is defined ? first_choice.icon,
93+
} %}
94+
{% endif %}
10895
{% endif %}
109-
{% endfor %}
96+
{% else %}
97+
{% for choice in choices_flat %}
98+
{% if custom_form ? choice.value == value : choice is selectedchoice(value) %}
99+
{% set label = selected_item_label is defined
100+
? selected_item_label
101+
: _self.get_translated_label(choice.label, translation_domain)
102+
%}
103+
104+
{% include selected_item_template_path with {
105+
label,
106+
value: choice.value,
107+
icon: choice.icon is defined ? choice.icon,
108+
} %}
109+
{% endif %}
110+
{% endfor %}
111+
{% endif %}
112+
{% if multiple %}
113+
<li
114+
class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-placeholder"
115+
{% if value is empty %}hidden{% endif %}
116+
>
117+
{% if placeholder is defined and placeholder is not none %}
118+
{{ _self.get_translated_label(placeholder, translation_domain )}}
119+
{% else %}
120+
{{ 'dropdown.placeholder'|trans|desc("Choose an option") }}
121+
{% endif %}
122+
</li>
123+
{% endif %}
110124
{% endif %}
111125
{% if multiple %}
112126
<li
@@ -122,7 +136,7 @@
122136
</span>
123137
</li>
124138
{% endif %}
125-
{% endif %}
139+
{% endblock selection_info_content %}
126140

127141
<li class="ibexa-dropdown__selected-item ibexa-dropdown__selected-item--predefined ibexa-dropdown__selected-overflow-number" hidden></li>
128142
</ul>

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -54,21 +54,24 @@
5454
attr: { hidden: true }
5555
}) }}
5656
{% endif %}
57-
<button
58-
type="button"
59-
{{ html.attributes(attr|default({})) }}
60-
>
61-
<span
62-
class="ibexa-btn__label ibexa-tag-view-select__btn-label ibexa-tag-view-select__btn-label--select"
63-
{% if is_single_select and has_value %}hidden{% endif %}
57+
<div class="ibexa-tag-view-select__actions">
58+
<button
59+
type="button"
60+
{{ html.attributes(attr|default({})) }}
6461
>
65-
{{ 'tag_view_select.select'|trans({ '%type%': type })|desc('Select %type%') }}
66-
</span>
67-
<span
68-
class="ibexa-btn__label ibexa-tag-view-select__btn-label ibexa-tag-view-select__btn-label--change"
69-
{% if (is_single_select and not has_value) or not is_single_select %}hidden{% endif %}
70-
>
71-
{{ 'tag_view_select.change'|trans({ '%type%': type })|desc('Change %type%') }}
72-
</span>
73-
</button>
62+
<span
63+
class="ibexa-btn__label ibexa-tag-view-select__btn-label ibexa-tag-view-select__btn-label--select"
64+
{% if is_single_select and has_value %}hidden{% endif %}
65+
>
66+
{{ 'tag_view_select.select'|trans({ '%type%': type })|desc('Select %type%') }}
67+
</span>
68+
<span
69+
class="ibexa-btn__label ibexa-tag-view-select__btn-label ibexa-tag-view-select__btn-label--change"
70+
{% if (is_single_select and not has_value) or not is_single_select %}hidden{% endif %}
71+
>
72+
{{ 'tag_view_select.change'|trans({ '%type%': type })|desc('Change %type%') }}
73+
</span>
74+
</button>
75+
{{ extra_actions|default('') }}
76+
</div>
7477
</div>

0 commit comments

Comments
 (0)