ayanova/src/components/pick-list.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-autocomplete
-      v-bind:value="value"
+      v-model="value"
       return-object
       :items="searchResults"
       :label="label"
@@ -12,7 +12,6 @@
       :loading="searchUnderway"
       :placeholder="lt('Search')"
       :search-input.sync="searchEntry"
-      auto-select-first
       :multiple="multiple"
       :filter="customFilter"
       hide-no-data
@@ -20,6 +19,7 @@
       :no-filter="isTagFilter"
       :prepend-icon="errorIcon"
       @click:prepend="handleErrorClick"
+      auto-select-first
     >
       <template v-slot:prepend-item v-if="hasError()">
         <div class="pl-2">
@@ -27,7 +27,7 @@
         </div>
       </template>
     </v-autocomplete>
-    <!-- <div>autocomplete selected item: {{ selected }}</div>
+    <!-- <div>autocomplete selected item: {{ selected }}</div> v-bind:value="value"
     <div>searchResults: {{ searchResults }}</div> -->
   </div>
 </template>
@@ -58,11 +58,12 @@ todo: option to display icon to open the record selected, (we have the type and
 export default {
   created() {
     var vm = this;
-    console.log("CREATED:value is ", this.value);
+    // console.log("CREATED:value is ", this.value);
 
     //need to add no selection object if specified
     if (vm.noSelectionValid) {
       window.$gz.form.addNoSelectionItem(vm.searchResults);
+
       // debugger;
       //TODO: this may be needed to force new records to have a zero in their no selection valid fields rather than null
       // however it could overwrite a valid value maybe so needs further testing
@@ -73,7 +74,7 @@ export default {
     if (vm.value != null && vm.value != 0) {
       //It has a prior non empty selection that needs to be fetched
       //note that by default this will just fetch the selected record instead of the prefill list
-      console.log("STUB: created: has value, sb fetched");
+      // console.log("STUB: created: has value, sb fetched");
       var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
       vm.getList(urlParams);
     } else if (vm.preFill) {
@@ -82,17 +83,6 @@ export default {
       vm.getList();
     }
   },
-  beforeUpdate() {
-    //Set the initial list items based on the record items, this only needs to be called once at init
-    //Not sure what this is to picklist as it came from tags
-    //console.log("beforeupdate: value is ", this.value);
-    if (!this.initialized && this.value && this.value != 0) {
-      //fetch here
-
-      this.initialized = true;
-    }
-  },
-
   data() {
     return {
       searchResults: [],
@@ -133,12 +123,31 @@ export default {
     label: { type: String, default: "" }
   },
   watch: {
-    searchEntry(val) {
+    searchEntry(val, oldVal) {
       var vm = this;
       //clear any local errors
       vm.errors = [];
-      // console.log("WATCH::SEARCHENTRY TRIGGERED:", val);
+      // console.log("WATCH::SEARCHENTRY TRIGGERED: initialized=", vm.initialized);
+
+      //if the selected search entry is in the results list then it's just a selection made manually
+      //console.log("watch:searchentry search results=", vm.searchResults);
+      for (var i = 0; i < vm.searchResults.length; i++) {
+        if (vm.searchResults[i].name == val) {
+          // console.log(
+          //   "Search entry is in the search results so it was a seletion, bailing"
+          // );
+          return;
+        }
+      }
+      // console.log("val:", val);
+      // console.log("oldVal", oldVal);
+
       if (!val || vm.searchUnderway || !vm.initialized) {
+        if (!vm.initialized) {
+          vm.$nextTick(() => {
+            vm.initialized = true;
+          });
+        }
         return;
       }
       if (vm.selected != null) {
@@ -146,20 +155,22 @@ export default {
           return;
         }
       }
-      // console.log("WATCH::SEARCHENTRY doing search now");
+      // debugger;
       this.doSearch();
     },
-    // value(val) {
-    //   //this ensures the parent form gets the onchange event
-    //   //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
-    //   //To answer above it appears both are necessary for proper operation
-    //   this.$emit("input", val);
-    //   this.$emit("change", val);
-    // },
+    value(val) {
+      //this ensures the parent form gets the onchange event
+      //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
+      //To answer above it appears both are necessary for proper operation
+      this.$emit("input", val);
+      this.$emit("change", val);
+      console.log("Watch:Value triggered:", val);
+    },
     selected(val) {
       if (val && val.id) {
+        console.log("Watch:Selected triggered:", val);
         this.$emit("input", val.id);
-        //this.$emit("change", val.id);
+        this.$emit("change", val.id);
       }
     },
     errors(val) {
@@ -227,10 +238,8 @@ export default {
           vm.searchResults = res.data;
           if (vm.noSelectionValid) {
             window.$gz.form.addNoSelectionItem(vm.searchResults);
-            //   if (vm.value == null) {
-            //     vm.value = 0;
-            //   }
           }
+
           vm.searchUnderway = false;
         })
         .catch(err => {
@@ -257,7 +266,6 @@ export default {
         if (val.includes(" ")) {
           queryTerms = val.split(" ");
           if (queryTerms.length > 2) {
-            //todo: put client side localized validation error message in component
             vm.errors.push(vm.lt("ErrorPickListQueryInvalid"));
             return;
           }
@@ -293,9 +301,7 @@ export default {
             window.$gz._.startsWith(queryTerms[0], "..") &&
             window.$gz._.startsWith(queryTerms[1], "..")
           ) {
-            //todo: put client side localized validation error message in component
             vm.errors.push(vm.lt("ErrorPickListQueryInvalid"));
-
             return;
           }
 
@@ -304,9 +310,7 @@ export default {
             !window.$gz._.startsWith(queryTerms[0], "..") &&
             !window.$gz._.startsWith(queryTerms[1], "..")
           ) {
-            //todo: put client side localized validation error message in component
             vm.errors.push(vm.lt("ErrorPickListQueryInvalid"));
-
             return;
           }
         }

ayanova/src/views/home-dashboard.vue

@@ -13,7 +13,6 @@
       v-model="selectedUser"
       :ayaType="ayaType().User"
       :label="lt('User')"
-       :preFill="false"
     >
     </gz-pick-list>
     <v-divider></v-divider>