This commit is contained in:
2020-03-19 22:30:59 +00:00
parent 0845cf1898
commit a598e5966f
2 changed files with 85 additions and 67 deletions

View File

@@ -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;
//get the discrete search terms and verify there are max two
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;
var vm = this;
//NOTE: empty query is perfectly valid; it means get the top 100 ordered by template order
var emptyQuery = false;
if (this.searchEntry == null || this.searchEntry == "") {
emptyQuery = true;
} else {
//one term only so push it into array
queryTerms.push(val);
//Marker term, will be weeded back out later
queryTerms.push("[?]");
}
//Pre-process the query to validate and send conditionally
var val = this.searchEntry;
//get the discrete search terms and verify there are max two
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
//Is user in mid entry of a second tag (space only?)
//will appear as an empty string post split
if (queryTerms[1] == "") {
//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"
);
//Now vet the terms
//Is user in mid entry of a second tag (space only?)
//will appear as an empty string post split
if (queryTerms[1] == "") {
//mid entry of a second term, just return
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], "..") &&
!window.$gz._.startsWith(queryTerms[1], "..")
queryTerms[0] == "." ||
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;
var query = queryTerms[0];
if (queryTerms[1] != "[?]") {
query += " " + queryTerms[1];
if (!emptyQuery) {
var query = queryTerms[0];
if (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 => {

View File

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