IBX-6649: Added support for spell checking (#923)

ibexa · Dec 5, 2023 · 7845004 · 7845004
1 parent aa0c1ee
commit 7845004
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 10 deletions.
diff --git a/src/bundle/Resources/public/scss/_search-criteria-tags.scss b/src/bundle/Resources/public/scss/_search-criteria-tags.scss
@@ -1,5 +1,4 @@
 .ibexa-search-criteria-tags {
-    border-bottom: calculateRem(1px) solid $ibexa-color-dark-200;
     padding-bottom: calculateRem(8px);
 
     &__tag {

diff --git a/src/bundle/Resources/public/scss/_search-form.scss b/src/bundle/Resources/public/scss/_search-form.scss
@@ -36,6 +36,11 @@
             margin-top: 0;
             font-size: $ibexa-text-font-size-extra-large;
         }
+
+        .ibexa-table-sub-header {
+            border-bottom: calculateRem(1px) solid $ibexa-color-dark-200;
+            padding-bottom: calculateRem(8px);
+        }
     }
 
     &__results-language {
@@ -109,6 +114,21 @@
         display: flex;
     }
 
+    &__spellcheck-suggestion {
+        font-style: italic;
+
+        a {
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+
+    &__no-results {
+        .ibexa-search-form__spellcheck-suggestion {
+            color: $ibexa-color-dark-400;
+        }
+    }
+
     .ibexa-btn--secondary.ibexa-btn {
         max-width: 100%;
         overflow: hidden;

diff --git a/src/bundle/Resources/translations/ibexa_search.en.xliff b/src/bundle/Resources/translations/ibexa_search.en.xliff
@@ -176,6 +176,11 @@
         <target state="new">Section</target>
         <note>key: search.section</note>
       </trans-unit>
+      <trans-unit id="923ca53f6602fe7eabe79838efdca27c2756b0fd" resname="search.spellcheck.suggestion">
+        <source>Did you mean %s?</source>
+        <target state="new">Did you mean %s?</target>
+        <note>key: search.spellcheck.suggestion</note>
+      </trans-unit>
       <trans-unit id="b484be9d33f5cd9961f4ddd89c628f2cbca2a6a1" resname="search.subtree">
         <source>Subtree</source>
         <target state="new">Subtree</target>

diff --git a/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig
@@ -1,6 +1,16 @@
 {% trans_default_domain 'ibexa_search' %}
 
 <div class="ibexa-search-criteria-tags">
+    {% if form.children.search_language.vars.value != '' %}
+        <div class="ibexa-tag ibexa-search-criteria-tags__tag">
+            <div class="ibexa-tag__content">
+                {{ 'search.in_language'|trans({
+                    '%search_language%': form.children.search_language.vars.data.name,
+                })|desc('in %search_language%')}}
+            </div>
+        </div>
+    {% endif %}
+
     {% if form.content_types.vars.data is not empty %}
         {% for content_type in form.content_types.vars.data %}
             {{ include('@ibexadesign/ui/search_tag.html.twig', {

diff --git a/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
@@ -17,10 +17,13 @@
             <h2 class="ibexa-search-form__no-results-title">
                 {{ 'search.no_results.title'|trans({'%query%': form.query.vars.value})|desc('No results found for "%query%"') }}
             </h2>
+
+            {% include '@ibexadesign/ui/search/spellcheck.html.twig' %}
+
             <div class="ibexa-search-form__no-results-subtitle">
                 {% for hint in no_results_hints %}
                     <div class="ibexa-search-form__no-results-hint">
-                        <div class="ibexa-search-form__no-results-hint-icon-wrapper">
+                        <div  class="ibexa-search-form__no-results-hint-icon-wrapper">
                             <svg class="ibexa-icon ibexa-icon--small-medium">
                                 <use xlink:href="{{ ibexa_icon_path('approved') }}"></use>
                             </svg>
@@ -182,14 +185,10 @@
             } %}
                 {% trans_default_domain 'ibexa_search' %}
                 {% block between_header_and_table %}
-                    <span class="ibexa-search-form__results-language">
-                        {% if form.children.search_language.vars.value != '' %}
-                            {{ 'search.in_language'|trans({
-                                '%search_language%': form.children.search_language.vars.data.name,
-                            })|desc('in %search_language%')}}
-                        {% endif %}
-                    </span>
-                    {% include '@ibexadesign/ui/search/criteria_tags.html.twig' %}
+                    <div class="ibexa-table-sub-header">
+                        {% include '@ibexadesign/ui/search/criteria_tags.html.twig' %}
+                        {% include '@ibexadesign/ui/search/spellcheck.html.twig' %}
+                    </div>
                 {% endblock %}
             {% endembed %}
 

diff --git a/src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig
@@ -0,0 +1,13 @@
+{% trans_default_domain 'ibexa_search' %}
+
+{% if spellcheck is not null and spellcheck.incorrect %}
+    <div class="ibexa-search-form__spellcheck-suggestion">
+        {% set suggestion_link %}
+            <a href="{{ path('ibexa.search', app.request.query|merge({'search[query]': spellcheck.query})) }}">
+                {{ spellcheck.query }}
+            </a>
+        {% endset %}
+
+        {{ 'search.spellcheck.suggestion'|trans|desc('Did you mean %s?')|e('html')|format(suggestion_link)|raw }}
+    </div>
+{% endif %}