Add remote typeahead spinner and no results message

Refs: hitobito/hitobito_sac_cas#478
hitobito · May 1, 2024 · 009ebab · 009ebab
1 parent b584e2f
commit 009ebab
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/app/helpers/standard_form_builder.rb b/app/helpers/standard_form_builder.rb
@@ -316,6 +316,7 @@ def person_field(attr, html_options = {}) # rubocop:disable Metrics/MethodLength
                  disabled: disabled,
                  data: { provide: 'entity',
                          id_field: "#{object_name}_#{attr_id}",
+                         no_results_message: I18n.t('global.no_list_entries'),
                          url: html_options&.dig(:data, :url) || @template.query_people_path })
   end
 

diff --git a/app/javascript/javascripts/modules/remote_autocomplete.js b/app/javascript/javascripts/modules/remote_autocomplete.js
@@ -44,21 +44,30 @@ import { mark } from "@tarekraafat/autocomplete.js/src/helpers/io";
           if (input.dataset.typeaheadDisabled === "true") return;
 
           try {
-            if (isQuickSearch) {
-              document.getElementById(QUICKSEARCH_ID).classList.add("input-loading");
-            }
+            input.classList.add("input-loading");
 
             // Fetch data via AJAX request
-            const url = new URL(input.dataset.url, location.origin)
-            const queryKey = document.getElementById(input.id).dataset.param || "q";
-            url.searchParams.set(queryKey, query)
+            const url = new URL(input.dataset.url, location.origin);
+            const queryKey =
+              document.getElementById(input.id).dataset.param || "q";
+            url.searchParams.set(queryKey, query);
             const source = await fetch(url);
             const data = await source.json();
 
-            if (isQuickSearch) {
-              document.getElementById(QUICKSEARCH_ID).classList.remove("input-loading");
+            input.classList.remove("input-loading");
+            var noResultsMessage =
+              autoCompleteInput.input.dataset.noResultsMessage;
+            if (!!noResultsMessage && !data.length) {
+              return [
+                {
+                  id: null,
+                  label: noResultsMessage,
+                  noResultsItem: true,
+                },
+              ];
+            } else {
+              return data;
             }
-            return data;
           } catch (error) {
             return error;
           }
@@ -76,6 +85,10 @@ import { mark } from "@tarekraafat/autocomplete.js/src/helpers/io";
         input: {
           selection: (event) => {
             var selection = event.detail.selection.value;
+            if (selection.noResultsItem) {
+              return;
+            }
+
             autoCompleteInput.input.value = selection.label;
 
             if (isQuickSearch) {

diff --git a/spec/features/event/events_controller_spec.rb b/spec/features/event/events_controller_spec.rb
@@ -65,6 +65,20 @@ def click_save
       end
     end
 
+    it 'shows no results message for contact and does not interact with message click' do
+      sign_in
+      visit edit_path
+
+      notification_checkbox_visible(false)
+
+      query = 'querythatdoesnotmatch'
+      fill_in 'Kontaktperson', with: query
+      expect(find('ul[role="listbox"] li[role="option"]')).to have_content 'Keine Einträge gefunden.'
+      find('ul[role="listbox"] li[role="option"]').click
+
+      expect(find('#event_contact').value).to eq(query)
+    end
+
     it 'toggles participation notifications' do
       event.update(contact: people(:top_leader))