admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2019-06-20 23:54:53 +00:00
parent 0dfcc94862
commit b9adf7fea8
3 changed files with 249 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
ayanova/src/components/tag-picker.vue
View File

@@ -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>

4
ayanova/src/main.js
View File

@@ -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

100
ayanova/src/views/inventory-widget-edit.vue
View File

@@ -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-flex xs6 sm4>
tags: {{ obj.tags }}
<br />
TagPickList: {{ pickLists.tags }}
</v-flex>
</v-layout> -->
<v-layout align-left justify-center row wrap mt-5>
<v-flex xs6 sm4> FORMtags: {{ obj.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: [],
tags: [""]
roles: []
},
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
// });
// }
}
};