ayanova/src/components/tag-picker.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-autocomplete
+    v-bind:value="value"
+    v-on:input="$emit('input', $event)"
+    :items="sourcetags"
+    :loading="tagSearchUnderway"
+    :search-input.sync="tagSearchEntry"
+    hide-selected
+    multiple
+    chips
+    clearable
+    deletable-chips
+    cache-items
+  >
+    <template slot="no-data" v-if="tagSearchEntry">
+      <v-container>
+        <v-layout row>
+          <v-layout justify-center>
+            <v-chip color="primary" text-color="white" class="display-1">
+              {{ this.normalizeTag(tagSearchEntry) }}</v-chip
+            >
+            <v-btn large icon @click="addTag()">
+              <v-icon large color="success">fa-plus-circle</v-icon>
+            </v-btn>
+          </v-layout>
+        </v-layout>
+      </v-container>
+    </template>
+
+    <template slot="append-outer">
+      <v-flex xs6 sm4>
+        PICKER VALUE: {{ value }}
+        <br />
+        PICKER SOURCE TAGS: {{ sourcetags }}
+      </v-flex>
+    </template>
+  </v-autocomplete>
+
+  <!--
+      v-on:input="$emit('input', $event.target.value)"
+       <v-autocomplete
+              v-model="obj.tags"
+              :readonly="this.formState.readOnly"
+              :label="this.$gzlocale.get('Tags')"
+              :error-messages="this.$gzform.serverErrors(this, 'tags')"
+              ref="tags"
+              @change="onChange('tags')"
+              :items="pickLists.tags"
+              :loading="tagSearchUnderway"
+              :search-input.sync="tagSearchEntry"
+              hide-selected
+              multiple
+              chips
+              clearable
+              deletable-chips
+              cache-items
+            >
+              <template slot="no-data" v-if="tagSearchEntry">
+                <v-container>
+                  <v-layout row>
+                    <v-layout justify-center>
+                      <v-chip
+                        color="primary"
+                        text-color="white"
+                        class="display-1"
+                      >
+                        {{ this.$gzutil.normalizeTag(tagSearchEntry) }}</v-chip
+                      >
+                      <v-btn large icon @click="addTag()">
+                        <v-icon large color="success">fa-plus-circle</v-icon>
+                      </v-btn>
+                    </v-layout>
+                  </v-layout>
+                </v-container>
+              </template>
+            </v-autocomplete> -->
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  eslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// import _ from "../libs/lodash.min.js";
+
+export default {
+  created() {
+    //debugger;
+  },
+  mounted() {
+    //Populate tags pick list, this is required to cache it at least once and display it when form opens
+    //  this.sourcetags = this.value;
+    //debugger;
+  },
+  beforeUpdate() {
+    if (!this.initialized && this.value.length > 0) {
+      this.sourcetags = this.value;
+      this.initialized = true;
+    }
+    //debugger;
+  },
+  updated() {
+    //debugger;
+  },
+  beforeMount() {
+    //debugger;
+  },
+  data() {
+    return {
+      sourcetags: [""],
+      testvalue: ["me", "you"],
+      //   localValue: [],
+      tagSearchEntry: null,
+      tagSearchUnderway: false,
+      initialized: false
+    };
+  },
+  props: {
+    value: Array
+  },
+  watch: {
+    tagSearchEntry(val) {
+      var vm = this;
+      if (vm.tagSearchUnderway) {
+        return;
+      }
+      vm.tagSearchUnderway = true;
+      vm.$gzapi
+        .get("TagList/picklist?query=" + val) //roles
+        .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.sourcetags = res.data;
+          vm.tagSearchUnderway = false;
+        })
+        .catch(err => {
+          vm.$gzHandleFormError(err);
+        });
+    },
+    value() {
+      // this.localValue = this.value;
+    }
+  },
+
+  methods: {
+    test(ev) {
+      debugger;
+    },
+    addTag() {
+      var theTag = this.tagSearchEntry;
+      theTag = this.normalizeTag(theTag);
+      //make sure there are no existing of the same tag?
+      this.sourcetags.push(theTag);
+      this.value.push(theTag);
+      this.tagSearchEntry = "";
+    },
+    normalizeTag(tagName) {
+      //kebab case takes care of all the things we need for tags in one go
+      tagName = _.kebabCase(tagName);
+
+      //No longer than 255 characters
+      tagName = tagName.length > 255 ? tagName.substr(0, 255 - 1) : tagName;
+
+      return tagName;
+      //
+      //             //This may be naive when we get international customers but for now supporting utf-8 and it appears it's safe to do this with unicode
+      //             inObj = inObj.ToLowerInvariant();
+      //             //No spaces in tags, replace with dashes
+      //             inObj = inObj.Replace(" ", "-");
+      //             //Remove multiple dash sequences
+      //             inObj = System.Text.RegularExpressions.Regex.Replace(inObj, "-+", "-");
+      //             //Ensure doesn't start or end with a dash
+      //             inObj = inObj.Trim('-');
+      //             //No longer than 255 characters
+      //             inObj = StringUtil.MaxLength(inObj, 255);
+      //             return inObj;
+    }
+  },
+  beforeCreate() {
+    //debugger;
+    //check pre-requisites exist just in case
+    if (this.$gzdevmode()) {
+      if (!this.$_) {
+        throw "tag-picker: $_ (lodash) is required and missing";
+      }
+      if (!this.$gzlocale) {
+        throw "tag-picker: $gzlocale is required and missing";
+      }
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -28,7 +28,10 @@ import gzform from "./api/gzform";
 import roles from "./api/authorizationroles";
 import gztype from "./api/ayatype";
 import "@/assets/css/main.css";
+
+//controls
 import dateTimeControl from "./components/date-time-control.vue";
+import tagPicker from "./components/tag-picker.vue";
 
 /////////////////////////////////////////////////////////////////
 // LIBS AND GLOBAL ITEMS
@@ -148,6 +151,7 @@ Vue.filter("boolastext", function vueFilterBoolAsText(value) {
 //GZ COMPONENTS
 //
 Vue.component("gz-date-time-picker", dateTimeControl);
+Vue.component("gz-tag-picker", tagPicker);
 
 ////////////////////////////////////////////////////////
 //3rd party ui components

ayanova/src/views/inventory-widget-edit.vue

@@ -152,7 +152,15 @@
           </v-flex>
 
           <v-flex xs12 px-2>
-            <v-autocomplete
+            <gz-tag-picker
+              :label="this.$gzlocale.get('Tags')"
+              v-model="obj.tags"
+              :readonly="this.formState.readOnly"
+              ref="tags"
+              :error-messages="this.$gzform.serverErrors(this, 'tags')"
+              @change="onChange('tags')"
+            ></gz-tag-picker>
+            <!-- <v-autocomplete
               v-model="obj.tags"
               :readonly="this.formState.readOnly"
               :label="this.$gzlocale.get('Tags')"
@@ -187,16 +195,12 @@
                   </v-layout>
                 </v-container>
               </template>
-            </v-autocomplete>
+            </v-autocomplete> -->
           </v-flex>
         </v-layout>
-        <!-- <v-layout align-left justify-center row wrap mt-5>
+        <v-layout align-left justify-center row wrap mt-5>
-          <v-flex xs6 sm4>
+          <v-flex xs6 sm4> FORMtags: {{ obj.tags }} </v-flex>
-            tags: {{ obj.tags }}
+        </v-layout>
-            <br />
-            TagPickList: {{ pickLists.tags }}
-          </v-flex>
-        </v-layout> -->
         <!-- <v-layout align-left justify-center row wrap mt-5>
           <v-flex xs6 sm4>
             READY: {{ formState.ready }}
@@ -218,7 +222,7 @@
 
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/*  eslint-disable    */
+/*  Xeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 const FORM_KEY = "inventory-widget-edit";
@@ -301,11 +305,8 @@ export default {
   data() {
     return {
       pickLists: {
-        roles: [],
+        roles: []
-        tags: [""]
       },
-      tagSearchEntry: null,
-      tagSearchUnderway: false,
       obj: {
         id: 0,
         concurrencyToken: 0,
@@ -360,29 +361,29 @@ export default {
         }
       },
       deep: true
-    },
-    tagSearchEntry(val) {
-      var vm = this;
-      if (vm.tagSearchUnderway) {
-        return;
-      }
-      vm.tagSearchUnderway = true;
-      vm.$gzapi
-        .get("TagList/picklist?query=" + val) //roles
-        .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.pickLists.tags = res.data;
-          vm.tagSearchUnderway = false;
-        })
-        .catch(err => {
-          vm.$gzHandleFormError(err);
-        });
     }
+    // tagSearchEntry(val) {
+    //   var vm = this;
+    //   if (vm.tagSearchUnderway) {
+    //     return;
+    //   }
+    //   vm.tagSearchUnderway = true;
+    //   vm.$gzapi
+    //     .get("TagList/picklist?query=" + val) //roles
+    //     .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.pickLists.tags = res.data;
+    //       vm.tagSearchUnderway = false;
+    //     })
+    //     .catch(err => {
+    //       vm.$gzHandleFormError(err);
+    //     });
+    // }
   },
   computed: {
     canSave: function() {
@@ -426,7 +427,7 @@ export default {
           } else {
             vm.obj = res.data;
             //Populate tags pick list, this is required to cache it at least once and display it when form opens
-            vm.pickLists.tags = res.data.tags;
+            // vm.pickLists.tags = res.data.tags;
 
             //Update the form status
             vm.$gzform.setFormState({
@@ -561,19 +562,20 @@ export default {
             vm.$gzHandleFormError(error, vm);
           });
       }
-    },
-    addTag() {
-      var theTag = this.tagSearchEntry;
-      theTag = this.$gzutil.normalizeTag(theTag);
-      //make sure there are no existing of the same tag?
-      this.pickLists.tags.push(theTag);
-      this.obj.tags.push(theTag);
-      this.tagSearchEntry = "";
-      this.$gzform.setFormState({
-        vm: this,
-        dirty: true
-      });
     }
+    // ,
+    // addTag() {
+    //   var theTag = this.tagSearchEntry;
+    //   theTag = this.$gzutil.normalizeTag(theTag);
+    //   //make sure there are no existing of the same tag?
+    //   this.pickLists.tags.push(theTag);
+    //   this.obj.tags.push(theTag);
+    //   this.tagSearchEntry = "";
+    //   this.$gzform.setFormState({
+    //     vm: this,
+    //     dirty: true
+    //   });
+    // }
   }
 };