From 71cbc34bf9ddd46a9c6ed3cb3ed2be794bb2297f Mon Sep 17 00:00:00 2001
From: Nils Rauch <nils.rauch@gmail.com>
Date: Tue, 30 Apr 2024 13:33:09 +0200
Subject: [PATCH] Add remote typeahead spinner and no results message, refs:
 hitobito/hitobito_sac_cas#478

---
 app/helpers/standard_form_builder.rb          |  1 +
 .../modules/remote_autocomplete.js            | 31 +++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/helpers/standard_form_builder.rb b/app/helpers/standard_form_builder.rb
index 095d8de67f..04556b3b91 100644
--- 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
index 54b9a357cd..947fee338c 100644
--- 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) {