Add remote typeahead spinner and no results message, refs: hitobito/h…

…itobito_sac_cas#478
hitobito · Apr 30, 2024 · 71cbc34 · 71cbc34
1 parent b584e2f
commit 71cbc34
Show file tree

Hide file tree

Showing 2 changed files with 23 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) {