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