After CR

Author: OstafinL

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -8,18 +8,22 @@
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const publishedContentId = urlParams.get('publishedContentId');
+    const sendForm = () => {
+        doc.querySelector('#form_subitems_content_edit_create').click();
+    };
+    const updateForm = (contentId, languageCode) => {
+        doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
+        doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
+    };
     const handleEditItem = (content, location, isLanguageSelectorOpened) => {
         const contentId = content._id;
         const locationId = location._id;
         const languageCode = content.mainLanguageCode;
         const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
-        const updateForm = () => {
-            doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
-            doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
-        };
+
         const addDraft = () => {
-            updateForm();
-            doc.querySelector('#form_subitems_content_edit_create').click();
+            updateForm(contentId, languageCode);
+            sendForm();
             bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
         };
         const attachModalListeners = (wrapper) => {
@@ -74,10 +78,10 @@
                 if (response.status === 409) {
                     response.text().then(showModal);
                 } else if (response.status === 200) {
-                    updateForm();
+                    updateForm(contentId, languageCode);
 
                     if (!isLanguageSelectorOpened) {
-                        doc.querySelector('#form_subitems_content_edit_create').click();
+                        sendForm();
                     }
                 }
             })
@@ -205,7 +209,7 @@
     doc.body.addEventListener(
         'ibexa-sub-items:submit-version-edit-form',
         () => {
-            doc.querySelector('#form_subitems_content_edit_create').click();
+            sendForm();
         },
         false,
     );

src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js

@@ -46,7 +46,7 @@
         attachModalListeners(wrapper, form, btns);
     };
     const changeHandler = (form, btns, event) => {
-        const sendImmediately = event?.detail?.sendImmediately;
+        const sendImmediately = event?.detail?.sendImmediately ?? false;
         const contentIdInput = form.querySelector('.ibexa-extra-actions__form-field--content-info');
         const locationInput = form.querySelector('.ibexa-extra-actions__form-field--location');
         const contentId = contentIdInput.value;

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

@@ -77,8 +77,8 @@
         <note>key: edit.languages.edit</note>
       </trans-unit>
       <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
-        <source>instant.filter.languages.placeholder</source>
-        <target state="new">instant.filter.languages.placeholder</target>
+        <source>Search...</source>
+        <target state="new">Search...</target>
         <note>key: instant.filter.languages.placeholder</note>
       </trans-unit>
       <trans-unit id="de8bb1e6f538f44a79b62917155d15d17691211c" resname="instant.filter.languages.select_language.desc">

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

@@ -201,11 +201,6 @@
         <target state="new">Hide</target>
         <note>key: hide_locations_btn.label</note>
       </trans-unit>
-      <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
-        <source>Search...</source>
-        <target state="new">Search...</target>
-        <note>key: instant.filter.languages.placeholder</note>
-      </trans-unit>
       <trans-unit id="de8bb1e6f538f44a79b62917155d15d17691211c" resname="instant.filter.languages.select_language.desc">
         <source>Languages</source>
         <target state="new">Languages</target>

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

@@ -191,6 +191,11 @@
         <target state="new">Items already added to the list are marked as selected and unable to deselect.</target>
         <note>key: init_selected_locations.alert.title</note>
       </trans-unit>
+      <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
+        <source>Search...</source>
+        <target state="new">Search...</target>
+        <note>key: instant.filter.languages.placeholder</note>
+      </trans-unit>
       <trans-unit id="2d4febe56a341671c069ff47b6e6adfd2bba005c" resname="limitation.pick.error">
         <source>Could not fetch content names</source>
         <target state="new">Could not fetch content names</target>

src/bundle/Resources/views/themes/admin/content/widget/content_edit.html.twig

@@ -3,14 +3,14 @@
 
 {% set data_actions = data_actions|default('edit') %}
 {% set action = action is defined ? action : path('ibexa.content.edit') %}
-{% set checkIsPreventShow = form.language.vars.choices|length == 1 %}
+{% set check_is_prevent_show = form.language.vars.choices|length == 1 %}
 
 {% embed '@ibexadesign/ui/component/edit_content_translation_select.html.twig' with {
     title: 'content.edit.select_language'|trans|desc('Select translation'),
-    hasSearch: form.language.vars.choices|length >= 10,
+    has_search: form.language.vars.choices|length >= 10,
     filter_placeholder: 'instant.filter.languages.placeholder'|trans|desc('Search...'),
     filter_description: 'instant.filter.languages.select_language.desc'|trans|desc('Languages'),
-    extra_class: checkIsPreventShow ? 'ibexa-extra-actions--prevent-show',
+    extra_class: check_is_prevent_show ? 'ibexa-extra-actions--prevent-show',
     data_attr: {
         'data-actions': data_actions
     },

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

@@ -3,17 +3,16 @@
 {% set title = title|default('') %}
 {% set filter_placeholder = filter_placeholder|default('') %}
 {% set filter_description = filter_description|default('') %}
-{% set hasSearch = hasSearch|default(true) %}
 {% set extra_class = extra_class|default('') %}
+
 {% set container_attr = {
     class: ('ibexa-extra-actions ibexa-extra-actions--edit ibexa-extra-actions--hidden '
-        ~ (hasSearch ? 'ibexa-extra-actions--has-search ')
+        ~ (has_search ? 'ibexa-extra-actions--has-search ')
         ~ extra_class),
     }|merge(data_attr|default({})) %}
 
 <div {{ html.attributes(container_attr) }}>
-    {% block before_body %}
-    {% endblock %}
+    {% block before_body %}{% endblock %}
 
     {% block header %}
         {% if title %}
@@ -26,7 +25,7 @@
     {% block content %}
         <div class="ibexa-extra-actions__content">
             <div class="ibexa-instant-filter">
-                    <div class="ibexa-instant-filter__input-wrapper {% if not hasSearch %}ibexa-instant-filter__input-wrapper--hidden{% endif %}">
+                    <div class="ibexa-instant-filter__input-wrapper {% if not has_search %}ibexa-instant-filter__input-wrapper--hidden{% endif %}">
                         <input
                             type="text"
                             class="ibexa-instant-filter__input ibexa-input ibexa-input--text form-control"
@@ -40,8 +39,7 @@
                     </div>
                 {% endif %}
 
-                {% block content_items %}
-                {% endblock %}
+                {% block content_items %}{% endblock %}
             </div>
         </div>
     {% endblock %}
@@ -52,6 +50,5 @@
         </div>
     {% endblock %}
 
-    {% block after_body %}
-    {% endblock %}
-</div>
+    {% block after_body %}{% endblock %}
+</div>

src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig

@@ -31,7 +31,7 @@
 
         {% embed '@ibexadesign/ui/component/edit_content_translation_select.html.twig' with {
             title: 'edit_translation.languages.select_language_title'|trans|desc('Select translation'),
-            hasSearch: translations|length >= 10,
+            has_search: translations|length >= 10,
             filter_placeholder: 'edit_translation.languages.filter.placeholder'|trans|desc('Search...'),
             filter_description: 'edit_translation.languages.filter.description'|trans|desc('Languages'),
             data_attr: {

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js

@@ -1,50 +1,32 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 import { createCssClassNames } from '@ibexa-admin-ui-modules/common/helpers/css.class.names';
 
-const FILTER_TIMEOUT = 200;
-
 const InstantFilter = (props) => {
     const Translator = getTranslator();
-    const _refInstantFilter = useRef(null);
     const [filterQuery, setFilterQuery] = useState('');
-    const [itemsMap, setItemsMap] = useState([]);
     const searchInputWrapperClassName = createCssClassNames({
         'ibexa-instant-filter__input-wrapper': true,
-        'ibexa-instant-filter__input-wrapper--hidden': !props.hasSearchEnabled,
+        'ibexa-instant-filter__input-wrapper--hidden': !props.isSearchEnabled,
     });
-    let filterTimeout = null;
-
-    useEffect(() => {
-        const items = [..._refInstantFilter.current.querySelectorAll('.ibexa-instant-filter__item')];
-        const itemsMapNext = items.map((item) => ({
-            label: item.textContent.toLowerCase(),
-            element: item,
-        }));
+    const filteredItems = useMemo(() => {
+        if (!filterQuery) {
+            return props.items;
+        }
 
-        setItemsMap(itemsMapNext);
-    }, [props.items]);
-
-    useEffect(() => {
         const filterQueryLowerCase = filterQuery.toLowerCase();
 
-        filterTimeout = window.setTimeout(() => {
-            itemsMap.forEach((item) => {
-                const methodName = item.label.includes(filterQueryLowerCase) ? 'removeAttribute' : 'setAttribute';
-
-                item.element[methodName]('hidden', true);
-            });
-        }, FILTER_TIMEOUT);
+        return props.items.filter((item) => {
+            const itemLabelLowerCase = item.label.toLowerCase();
 
-        return () => {
-            window.clearTimeout(filterTimeout);
-        };
-    }, [filterQuery]);
+            return itemLabelLowerCase.includes(filterQueryLowerCase);
+        });
+    }, [props.items, filterQuery]);
 
     return (
-        <div className="ibexa-instant-filter" ref={_refInstantFilter}>
+        <div className="ibexa-instant-filter">
             <div className={searchInputWrapperClassName}>
                 <input
                     type="text"
@@ -58,7 +40,7 @@ const InstantFilter = (props) => {
                 {Translator.trans(/*@Desc("Languages")*/ 'instant.filter.languages.select_language.desc', {}, 'ibexa_sub_items')}
             </div>
             <div className="ibexa-instant-filter__items">
-                {props.items.map((item) => {
+                {filteredItems.map((item) => {
                     const radioId = `item_${item.value}`;
                     const labelClassName = createCssClassNames({
                         'form-check-label': true,
@@ -91,14 +73,14 @@ const InstantFilter = (props) => {
 };
 
 InstantFilter.propTypes = {
-    hasSearchEnabled: PropTypes.bool,
+    isSearchEnabled: PropTypes.bool,
     activeLanguage: PropTypes.string,
     items: PropTypes.array,
     handleItemChange: PropTypes.func,
 };
 
 InstantFilter.defaultProps = {
-    hasSearchEnabled: true,
+    isSearchEnabled: true,
     activeLanguage: '',
     items: [],
     handleItemChange: () => {},

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js

@@ -13,13 +13,13 @@ const LanguageSelector = (props) => {
     const discardBtnRef = useRef(null);
     const submitBtnRef = useRef(null);
     const [activeLanguage, setActiveLanguage] = useState('');
-    const hasSearchEnabled = props.languageItems.length >= MIN_ITEMS_WITH_SEARCH;
+    const isSearchEnabled = props.languageItems.length >= MIN_ITEMS_WITH_SEARCH;
     const className = createCssClassNames({
         'c-language-selector': true,
         'ibexa-extra-actions': true,
         'ibexa-extra-actions--edit': true,
         'ibexa-extra-actions--hidden': !props.isOpen,
-        'ibexa-extra-actions--has-search': hasSearchEnabled,
+        'ibexa-extra-actions--has-search': isSearchEnabled,
     });
     const closeLanguageSelector = (event) => {
         if (!event.target.closest('.c-table-view-item__btn') && !event.target.classList.contains('ibexa-instant-filter__input')) {
@@ -60,7 +60,7 @@ const LanguageSelector = (props) => {
                     items={props.languageItems}
                     activeLanguage={activeLanguage}
                     handleItemChange={handleItemChange}
-                    hasSearchEnabled={hasSearchEnabled}
+                    isSearchEnabled={isSearchEnabled}
                 />
             </div>
             <div className="ibexa-extra-actions__confirm-wrapper">