ayanova/devdocs/todo.txt

@@ -48,7 +48,7 @@ CURRENT TODOs
 @@@@@@@@@@@ ROADMAP STAGE 1 and 2:
 
 
-TODO: See server TODO for the backend picklist stuff
+
 todo: make sure that the picklist control has a delay in it so it doesn't go search on every character typed
 	- make some sane limits to it
 todo: stuff below go-over and make sure nothing missed

ayanova/src/components/pick-list.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <!-- <span class="v-label v-label--active theme--light">
+      {{ lt("label here") }}
+    </span> -->
+    <v-autocomplete
+      label="lbl Widgets"
+      model="selected"
+      return-object
+      v-on:input="$emit('input', $event)"
+      :items="sourceresults"
+      item-text="name"
+      item-value="id"
+      item-disabled="!active"
+      :loading="searchUnderway"
+      :placeholder="lt('search hint here')"
+      :no-data-text="lt('NoData')"
+      :search-input.sync="searchEntry"
+      :multiple="multiple"
+      cache-items
+      hide-selected
+      hide-no-data
+      no-filter
+    >
+      <!-- <template v-slot:no-data>
+        <v-list-item>
+          <v-list-item-title>
+            Search for your favorite
+            <strong>PICKLIST ITEM</strong>
+            some kind of hint here?
+          </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>
+      selected
+      {{ value }}
+    </div>
+    <div>
+      value
+      {{ value }}
+    </div>
+    <div>
+      searchEntry
+      {{ searchEntry }}
+    </div>
+    <div>
+      sourceresults
+      {{ sourceresults }}
+    </div>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  eslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//NOTE: I had some concerns about how the selection is made, but leving it for now
+//basically the typed text stays after you select from dropdown, however, it clears as soon as you tab off
+//and in theory it could help if picking more than one tag that have similar selection criteria
+export default {
+  created() {
+    //need to add no selection object if specified
+    // var vm = this;
+    // if (vm.noSelectionValid) {
+    //   window.$gz.form.addNoSelectionItem(vm.sourceresults);
+    //   if (vm.value == null) {
+    //     vm.value = 0;
+    //   }
+    // }
+  },
+  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
+    // if (!this.initialized && this.value.length > 0) {
+    //   this.sourceresults = this.value;
+    //   this.initialized = true;
+    // }
+  },
+
+  data() {
+    return {
+      sourceresults: [],
+      selected: {},
+      searchEntry: null,
+      searchUnderway: false
+      //,initialized: false
+    };
+  },
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    ayaType: {
+      type: Number,
+      default: 0
+    },
+    includeInactive: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    noSelectionValid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    searchEntry(val) {
+      var vm = this;
+      if (!val || vm.searchUnderway) {
+        return;
+      }
+
+      console.log("watch::searchEntry,val=", val);
+      console.log("vm.selected=", vm.selected);
+      vm.searchUnderway = true;
+
+      var urlParams = "?ayaType=" + vm.ayaType;
+
+      if (val != null && val != "") {
+        urlParams += "&query=" + val; //todo: may need to urlify this?
+      }
+      if (vm.includeInactive) {
+        urlParams += "&inactive=true";
+      }
+
+      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.sourceresults = res.data;
+          vm.searchUnderway = false;
+        })
+        .catch(err => {
+          window.$gz.errorHandler.handleFormError(err);
+        });
+    },
+    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);
+    }
+  },
+
+  methods: {
+    lt: function(ltkey) {
+      return window.$gz.translation.get(ltkey);
+    }
+  },
+  beforeCreate() {
+    //check pre-requisites exist just in case
+    if (window.$gz.errorHandler.devMode()) {
+      if (!window.$gz._) {
+        throw "tag-picker: $gz._ (lodash) is required and missing";
+      }
+      if (!window.$gz.translation) {
+        throw "tag-picker: $gz.translation is required and missing";
+      }
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -36,6 +36,7 @@ import dateTimeControl from "./components/date-time-control.vue";
 import dateControl from "./components/date-control.vue";
 import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
+import pickList from "./components/pick-list.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
@@ -159,6 +160,7 @@ Vue.component("gz-date-time-picker", dateTimeControl);
 Vue.component("gz-date-picker", dateControl);
 Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);
+Vue.component("gz-pick-list", pickList);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);

ayanova/src/views/home-dashboard.vue

@@ -1,5 +1,8 @@
 <template>
-  <UnderConstruction />
+  <div>
+    <gz-pick-list v-model="selectedWidget" :ayaType="ayaType().Widget">
+    </gz-pick-list>
+  </div>
 </template>
 
 <script>
@@ -17,7 +20,7 @@ import UnderConstruction from "../components/underconstruction.vue";
  */
 export default {
   components: {
-    UnderConstruction
+    //UnderConstruction
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
@@ -26,6 +29,19 @@ export default {
       title: window.$gz.translation.get("Dashboard"),
       helpUrl: "form-home-dashboard"
     });
+  },
+  data() {
+    return {
+      selectedWidget: null
+    };
+  },
+  methods: {
+    lt: function(ltkey) {
+      return window.$gz.translation.get(ltkey);
+    },
+    ayaType: function() {
+      return window.$gz.type;
+    }
   }
 };
 </script>