ayanova/src/components/pick-list.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <v-autocomplete
-      v-model="value"
+      v-bind:value="value"
+      v-on:input="test($event)"
       return-object
       :items="searchResults"
       :label="label"
@@ -19,7 +20,9 @@
       :no-filter="isTagFilter"
       :prepend-icon="errorIcon"
       @click:prepend="handleErrorClick"
+      @mousedown="dropdown"
       auto-select-first
+      cache-items
     >
       <template v-slot:prepend-item v-if="hasError()">
         <div class="pl-2">
@@ -39,8 +42,35 @@
 //it would not recognize window in the function call
 import _ from "../libs/lodash.min.js";
 /*
+States
+1) Open form have a preselected Value
+init: load preselected value only
+change: 
+  DROP DOWN need to drop down and have it populate with top 100
+  EDIT search as normal but keep preselected value until changed
+
+2) Open form have no value
+init: ALWAYS starts with no selection if no value, up to server routes to deal with 0 id selection if they need to
+
+change 
+  drop down, get top 100
+  edit and search as normal
+
+NO VALUE
+  if not valid then there should be a rule enforcing that, not the control's issue
+
+Control always has a value, either it's NO VALUE or it's a selection
+
+DROP DOWN
+  if no items already loaded then fetches top 100 IN ADDITION to the preselect if present
+  if items already loaded then just shows those items as they are likely from a prior search and user can just search again
+  if user clears then drops down it acts as a fresh load of 100 items
+
+PRE-FILL
+  NO prefill, fills only on user action or with defaults to save bandwidth.  User must drop down to initiate action or type search text
 
 todo: set actual seleted ID value from our local selected whole object so outer form just gets id
+todo: server sends whole on drop down of empty combo?
 todo: needs to fill in the selected value when the form opens regardless of what any other setting is, 
   in other words it needs to ensure the pre-selectedvalue is in the list
   Maybe an init property sent to server with query which is used to fetch teh pre-select value
@@ -60,15 +90,14 @@ export default {
     var vm = this;
     // console.log("CREATED:value is ", this.value);
 
-    //need to add no selection object if specified
+    //need to add no selection object always, if it's not valid then that's a rule for the form, not the control
-    if (vm.noSelectionValid) {
-      window.$gz.form.addNoSelectionItem(vm.searchResults);
 
-      // debugger;
+    window.$gz.form.addNoSelectionItem(vm.searchResults);
-      //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
+    // debugger;
-      //this.$emit("input", 0);
+    //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
+    //this.$emit("input", 0);
 
     //set initial value in control if selected
     if (vm.value != null && vm.value != 0) {
@@ -77,11 +106,13 @@ export default {
       // console.log("STUB: created: has value, sb fetched");
       var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
       vm.getList(urlParams);
-    } else if (vm.preFill) {
-      //no non-empty initial value to select but list specified to pre-fill
-      vm.searchUnderway = true;
-      vm.getList();
     }
+
+    // else if (vm.preFill) {
+    //   //no non-empty initial value to select but list specified to pre-fill
+    //   vm.searchUnderway = true;
+    //   vm.getList();
+    // }
   },
   data() {
     return {
@@ -112,14 +143,6 @@ export default {
       type: Boolean,
       default: false
     },
-    noSelectionValid: {
-      type: Boolean,
-      default: false
-    },
-    preFill: {
-      type: Boolean,
-      default: true
-    },
     label: { type: String, default: "" }
   },
   watch: {
@@ -158,21 +181,21 @@ export default {
       // debugger;
       this.doSearch();
     },
-    value(val) {
+    // value(val) {
-      //this ensures the parent form gets the onchange event
+    //   //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
+    //   //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
+    //   //To answer above it appears both are necessary for proper operation
-      this.$emit("input", val);
+    //   this.$emit("input", val);
-      this.$emit("change", val);
+    //   this.$emit("change", val);
-      console.log("Watch:Value triggered:", val);
+    //   console.log("Watch:Value triggered:", val);
-    },
+    // },
-    selected(val) {
+    // selected(val) {
-      if (val && val.id) {
+    //   if (val && val.id) {
-        console.log("Watch:Selected triggered:", val);
+    //     console.log("Watch:Selected triggered:", val);
-        this.$emit("input", val.id);
+    //     this.$emit("input", val.id);
-        this.$emit("change", val.id);
+    //     this.$emit("change", val.id);
-      }
+    //   }
-    },
+    // },
     errors(val) {
       if (this.hasError()) {
         this.errorIcon = "fa-question-circle";
@@ -195,6 +218,18 @@ export default {
         data: "ay-start-form-picklist"
       });
     },
+    test(e) {
+      console.log("value changed deciding to emit", e);
+      console.log("e.id=", e.id);
+      if (e.id != null) {
+        console.log("emitting:", e);
+        this.$emit("input", e.id);
+        this.$emit("change", e.id);
+      }
+    },
+    dropdown(e) {
+      console.log("DROPDOWN FIRED", e);
+    },
     customFilter(item, queryText, itemText) {
       //NOTE: I wanted this to work with tags but all it does is highlight all of each row if tag query is present
       //I guess because it later on attempts to do the highlighting and can't find all the entered query
@@ -236,9 +271,8 @@ export default {
           }
 
           vm.searchResults = res.data;
-          if (vm.noSelectionValid) {
+
-            window.$gz.form.addNoSelectionItem(vm.searchResults);
+          window.$gz.form.addNoSelectionItem(vm.searchResults);
-          }
 
           vm.searchUnderway = false;
         })
@@ -332,27 +366,6 @@ export default {
         urlParams += "&inactive=true";
       }
       this.getList(urlParams);
-      //   console.log("dosearch: calling api.get.picklist for type ", this.ayaType);
-      //   window.$gz.api
-      //     .get("PickList/List" + urlParams)
-      //     .then(res => {
-      //       if (res.error) {
-      //         throw res.error;
-      //       }
-
-      //       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 => {
-      //       window.$gz.errorHandler.handleFormError(err);
-      //     });
-
       //------------
     }, 300) //did some checking, 200-300ms seems to be the most common debounce time for ajax search queries
   },

ayanova/src/views/home-dashboard.vue

@@ -4,8 +4,6 @@
       v-model="selectedWidget"
       :ayaType="ayaType().Widget"
       :label="lt('Widget')"
-      noSelectionValid
-      :preFill="false"
     >
     </gz-pick-list>
     <v-divider></v-divider>