ayanova/src/components/pick-list.vue

@@ -1,26 +1,24 @@
 <template>
   <div>
-    <!-- <span class="v-label v-label--active theme--light">
-      {{ lt("label here") }}
-    </span> -->
     <v-autocomplete
-      label="lbl Widgets"
       v-model="selected"
       return-object
       :items="searchResults"
+      :label="Label"
       item-text="name"
       item-value="id"
       item-disabled="!active"
       :error-messages="errors"
       :loading="searchUnderway"
       :placeholder="lt('search hint here')"
-      :no-data-text="lt('NoData')"
       :search-input.sync="searchEntry"
       auto-select-first
       :multiple="multiple"
       no-filter
+      hide-no-data
+      clearable
     >
-      <!-- <template v-slot:no-data>no-filter  hide-selected  v-on:input="$emit('input', $event)" cache-items="false"
+      <!-- <template v-slot:no-data>no-filter  hide-selected  v-on:input="$emit('input', $event)" cache-items="false":no-data-text="lt('NoData')"
         <v-list-item>
           <v-list-item-title>
             Search for your favorite
@@ -29,37 +27,8 @@
           </v-list-item-title>
         </v-list-item>
       </template> -->
-      <!-- <template slot="no-data" v-if="searchEntry">
-        <v-container>
-          <v-row row>
-            <v-row justify-center>
-              <v-chip color="primary" text-color="white" class="display-1">
-                {{ this.normalizeTag(searchEntry) }}</v-chip
-              >
-              <v-btn large icon @click="addTag()">
-                <v-icon large color="success">fa-plus-circle</v-icon>
-              </v-btn>
-            </v-row>
-          </v-row>
-        </v-container>
-      </template> -->
     </v-autocomplete>
-    <div>
+    <div>autocomplete selected item: {{ selected }}</div>
-      selected
-      {{ selected }}
-    </div>
-    <!-- <div>
-      value
-      {{ value }}
-    </div> -->
-    <div>
-      searchEntry
-      {{ searchEntry }}
-    </div>
-    <div>
-      searchResults
-      {{ searchResults }}
-    </div>
   </div>
 </template>
 <script>
@@ -70,7 +39,10 @@
 //it would not recognize window in the function call
 import _ from "../libs/lodash.min.js";
 //todo: empty item support
-//todo: custom filter that works with tags (ignore tag part and filter as normal)
+//todo: custom filter (highlight in results) that works with tags (ignore tag part and filter as normal)
+//todo: validation error is obscured by no-data element
+//todo: set actual seleted ID value from our local selected whole object so outer form just gets id
+//todo test multiple selection
 
 export default {
   created() {
@@ -122,7 +94,8 @@ export default {
     noSelectionValid: {
       type: Boolean,
       default: false
-    }
+    },
+    Label: { type: String, default: "" }
   },
   watch: {
     searchEntry(val) {
@@ -180,7 +153,6 @@ export default {
       }
 
       //Now vet the terms
-
       //Is user in mid entry of a second tag (space only?)
       //will appear as an empty string post split
       if (queryTerms[1] == "") {
@@ -240,16 +212,12 @@ export default {
         urlParams += "&inactive=true";
       }
 
-      console.log("sending search to server ", urlParams);
       window.$gz.api
         .get("PickList/List" + urlParams)
         .then(res => {
           if (res.error) {
             throw res.error;
           }
-          //adding this to the property will automatically have it cached by the autocomplete component
-          //as cache-items has been set so this just needs to be set here once and all is well in future
-          //Any search will be kept for later so this is very efficient
           vm.searchResults = res.data;
           vm.searchUnderway = false;
         })
@@ -258,7 +226,7 @@ export default {
         });
 
       //------------
-    }, 400)//did some checking, 200-300ms seems to be the most common
+    }, 300) //did some checking, 200-300ms seems to be the most common debounce time for ajax search queries
   },
   beforeCreate() {
     //check pre-requisites exist just in case

ayanova/src/views/home-dashboard.vue

@@ -1,7 +1,17 @@
 <template>
   <div>
-    <gz-pick-list v-model="selectedWidget" :ayaType="ayaType().Widget">
+    <gz-pick-list
+      v-model="selectedWidget"
+      :ayaType="ayaType().Widget"
+      Label="Widget"
+    >
     </gz-pick-list>
+    <v-divider></v-divider>
+    <gz-pick-list v-model="selectedUser" :ayaType="ayaType().User" Label="User">
+    </gz-pick-list>
+    <v-divider></v-divider>
+    <div>FORM Selected Widget: {{ selectedWidget }}</div>
+    <div>FORM Selected User: {{ selectedUser }}</div>
   </div>
 </template>
 
@@ -32,7 +42,8 @@ export default {
   },
   data() {
     return {
-      selectedWidget: null
+      selectedWidget: null,
+      selectedUser: null
     };
   },
   methods: {