ayanova/src/components/pick-list.vue

@@ -29,6 +29,7 @@
       </template> -->
     </v-autocomplete>
     <div>autocomplete selected item: {{ selected }}</div>
+    <div>searchResults: {{ searchResults }}</div>
   </div>
 </template>
 <script>
@@ -39,17 +40,18 @@
 //it would not recognize window in the function call
 import _ from "../libs/lodash.min.js";
 //todo: drop down get default 100 on non-search
-//todo: empty item support
 //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
 //todo: search only property that forces user to search vs just drop down and get default 100
+//todo: append or use slot to put at end of drop down menu a "type to search for more" when the results are from an empty query only
 
 export default {
   created() {
     //need to add no selection object if specified
-    // var vm = this;
+    var vm = this;
+    vm.doSearch();
     // if (vm.noSelectionValid) {
     //   window.$gz.form.addNoSelectionItem(vm.searchResults);
     //   if (vm.value == null) {
@@ -104,7 +106,7 @@ export default {
       var vm = this;
       //clear any local errors
       vm.errors = [];
-
+      console.log("WATCH::SEARCHENTRY TRIGGERED");
       if (!val || vm.searchUnderway) {
         return;
       }
@@ -113,6 +115,7 @@ export default {
           return;
         }
       }
+      console.log("WATCH::SEARCHENTRY doing search now");
       this.doSearch();
     },
     value(val) {
@@ -129,87 +132,94 @@ export default {
       return window.$gz.translation.get(ltkey);
     },
     doSearch: _.debounce(function() {
-      var vm = this;
-
       //NOTE debounce with a watcher is a bit different
       //https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed
       //-----------------
-      //Pre-process the query to validate and send conditionally
+
-      var val = this.searchEntry;
+      var vm = this;
-      //get the discrete search terms and verify there are max two
+
-      var isATwoTermQuery = false;
+      //NOTE: empty query is perfectly valid; it means get the top 100 ordered by template order
-      var queryTerms = [];
+      var emptyQuery = false;
-      if (val.includes(" ")) {
+      if (this.searchEntry == null || this.searchEntry == "") {
-        queryTerms = val.split(" ");
+        emptyQuery = true;
-        if (queryTerms.length > 2) {
-          //todo: put client side localized validation error message in component
-          vm.errors.push("LTERROR TOO MANY TERMS");
-          return;
-        }
-        isATwoTermQuery = true;
       } else {
-        //one term only so push it into array
+        //Pre-process the query to validate and send conditionally
-        queryTerms.push(val);
+        var val = this.searchEntry;
-        //Marker term, will be weeded back out later
+        //get the discrete search terms and verify there are max two
-        queryTerms.push("[?]");
+        var isATwoTermQuery = false;
-      }
+        var queryTerms = [];
+        if (val.includes(" ")) {
+          queryTerms = val.split(" ");
+          if (queryTerms.length > 2) {
+            //todo: put client side localized validation error message in component
+            vm.errors.push("LTERROR TOO MANY TERMS");
+            return;
+          }
+          isATwoTermQuery = true;
+        } else {
+          //one term only so push it into array
+          queryTerms.push(val);
+          //Marker term, will be weeded back out later
+          queryTerms.push("[?]");
+        }
 
-      //Now vet the terms
+        //Now vet the terms
-      //Is user in mid entry of a second tag (space only?)
+        //Is user in mid entry of a second tag (space only?)
-      //will appear as an empty string post split
+        //will appear as an empty string post split
-      if (queryTerms[1] == "") {
+        if (queryTerms[1] == "") {
-        //mid entry of a second term, just return
+          //mid entry of a second term, just return
-        return;
-      }
-
-      //Is user in mid entry of tag query, just bounce back
-      if (
-        queryTerms[0] == "." ||
-        queryTerms[0] == ".." ||
-        queryTerms[1] == "." ||
-        queryTerms[1] == ".."
-      ) {
-        return;
-      }
-
-      if (isATwoTermQuery) {
-        //check that both terms aren't tags
-        if (
-          window.$gz._.startsWith(queryTerms[0], "..") &&
-          window.$gz._.startsWith(queryTerms[1], "..")
-        ) {
-          //todo: put client side localized validation error message in component
-          vm.errors.push(
-            "LTERROR if two terms one must be tag and one must be text"
-          );
           return;
         }
 
-        //check that both aren't non-tags
+        //Is user in mid entry of tag query, just bounce back
         if (
-          !window.$gz._.startsWith(queryTerms[0], "..") &&
+          queryTerms[0] == "." ||
-          !window.$gz._.startsWith(queryTerms[1], "..")
+          queryTerms[0] == ".." ||
+          queryTerms[1] == "." ||
+          queryTerms[1] == ".."
         ) {
-          //todo: put client side localized validation error message in component
-          vm.errors.push(
-            "LTERROR if two terms one must be tag and one must be text"
-          );
           return;
         }
+
+        if (isATwoTermQuery) {
+          //check that both terms aren't tags
+          if (
+            window.$gz._.startsWith(queryTerms[0], "..") &&
+            window.$gz._.startsWith(queryTerms[1], "..")
+          ) {
+            //todo: put client side localized validation error message in component
+            vm.errors.push(
+              "LTERROR if two terms one must be tag and one must be text"
+            );
+            return;
+          }
+
+          //check that both aren't non-tags
+          if (
+            !window.$gz._.startsWith(queryTerms[0], "..") &&
+            !window.$gz._.startsWith(queryTerms[1], "..")
+          ) {
+            //todo: put client side localized validation error message in component
+            vm.errors.push(
+              "LTERROR if two terms one must be tag and one must be text"
+            );
+            return;
+          }
+        }
       }
 
-      //QUERY IS VALID
+      //build url
       vm.searchUnderway = true;
 
       var urlParams = "?ayaType=" + vm.ayaType;
-
+      if (!emptyQuery) {
-      var query = queryTerms[0];
+        var query = queryTerms[0];
-      if (queryTerms[1] != "[?]") {
+        if (queryTerms[1] != "[?]") {
-        query += " " + queryTerms[1];
+          query += " " + queryTerms[1];
+        }
+        urlParams += "&query=" + query;
       }
 
-      urlParams += "&query=" + query;
-
       if (vm.includeInactive) {
         urlParams += "&inactive=true";
       }
@@ -220,7 +230,14 @@ export default {
           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 => {

ayanova/src/views/home-dashboard.vue

@@ -4,15 +4,16 @@
       v-model="selectedWidget"
       :ayaType="ayaType().Widget"
       :label="lt('Widget')"
+      noSelectionValid
     >
     </gz-pick-list>
     <v-divider></v-divider>
-    <gz-pick-list
+    <!-- <gz-pick-list
       v-model="selectedUser"
       :ayaType="ayaType().User"
       :label="lt('User')"
     >
-    </gz-pick-list>
+    </gz-pick-list> -->
     <v-divider></v-divider>
     <div>FORM Selected Widget: {{ selectedWidget }}</div>
     <div>FORM Selected User: {{ selectedUser }}</div>