This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user