autocomplete default label enable hiding

COmanage · Nov 16, 2024 · 89d5b0c · 89d5b0c
1 parent a5b6b9a
commit 89d5b0c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -249,7 +249,9 @@ public function constructSPAField(string $element, string $vueElementName): stri
         'htmlId' => $matchesId[0][1],
         'fieldName' => $matchesName[0][1],
         'containerClasses' => $matchesClass[0][1],
-        'type' => 'field'
+        'type' => 'field',
+        // we want the label to be an empty string to hide the default label introduced by the module.
+        'label' => ''
       ]);
     }
 

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -2176,6 +2176,13 @@ td .alert {
   bottom: 2px;
   margin-right: -26px;
 }
+.co-loading-mini-container.over-input {
+  display: none;
+  position: absolute;
+  right: 0.5em;
+  bottom: 0.7em;
+  z-index: 100;
+}
 #co-loading span,
 #co-loading-redirect span,
 .co-loading-mini span {

diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -272,11 +272,22 @@ export default {
       }
       // Otherwise return the default
       return this.txt['autocomplete.people.label'];
+    },
+    hasAutoCompleteLabel: function() {
+      // Check to see if a label has been passed in
+      return this.options.label !== undefined && this.options.label !== ''
+    },
+    getMiniLoaderClasses: function() {
+      if(this.options.label !== undefined && this.options.label !== '') {
+        return "co-loading-mini-container d-inline ms-1"
+      } else {
+        return "co-loading-mini-container d-inline ms-1 over-input"
+      }
     }
   },
   template: `
-    <label class="mr-2" :for="this.options.htmlId">{{ this.autoCompleteLabel }}</label>
-    <MiniLoader :isLoading="loading" classes="co-loading-mini-container d-inline ms-1"/>
+    <label v-if="hasAutoCompleteLabel" class="mr-2" :for="this.options.htmlId">{{ this.autoCompleteLabel }}</label>
+    <MiniLoader :isLoading="loading" :classes="getMiniLoaderClasses"/>
     <AutoComplete 
       v-model="person"
       inputClass="cm-autocomplete"