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
2020-03-24 15:17:48 +00:00
parent 3e82ca5a5b
commit f838a56487
2 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
ayanova/src/components/pick-list.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<v-autocomplete
v-model="value"
v-bind:value="value"
v-on:input="test($event)"
return-object
:items="searchResults"
:label="label"
@@ -19,7 +20,9 @@
:no-filter="isTagFilter"
:prepend-icon="errorIcon"
@click:prepend="handleErrorClick"
@mousedown="dropdown"
auto-select-first
cache-items
>
<template v-slot:prepend-item v-if="hasError()">
<div class="pl-2">
@@ -39,8 +42,35 @@
//it would not recognize window in the function call
import _ from "../libs/lodash.min.js";
/*
States
1) Open form have a preselected Value
init: load preselected value only
change:
DROP DOWN need to drop down and have it populate with top 100
EDIT search as normal but keep preselected value until changed
2) Open form have no value
init: ALWAYS starts with no selection if no value, up to server routes to deal with 0 id selection if they need to
change
drop down, get top 100
edit and search as normal
NO VALUE
if not valid then there should be a rule enforcing that, not the control's issue
Control always has a value, either it's NO VALUE or it's a selection
DROP DOWN
if no items already loaded then fetches top 100 IN ADDITION to the preselect if present
if items already loaded then just shows those items as they are likely from a prior search and user can just search again
if user clears then drops down it acts as a fresh load of 100 items
PRE-FILL
NO prefill, fills only on user action or with defaults to save bandwidth. User must drop down to initiate action or type search text
todo: set actual seleted ID value from our local selected whole object so outer form just gets id
todo: server sends whole on drop down of empty combo?
todo: needs to fill in the selected value when the form opens regardless of what any other setting is,
in other words it needs to ensure the pre-selectedvalue is in the list
Maybe an init property sent to server with query which is used to fetch teh pre-select value
@@ -60,15 +90,14 @@ export default {
var vm = this;
// console.log("CREATED:value is ", this.value);
//need to add no selection object if specified
if (vm.noSelectionValid) {
window.$gz.form.addNoSelectionItem(vm.searchResults);
//need to add no selection object always, if it's not valid then that's a rule for the form, not the control
// debugger;
//TODO: this may be needed to force new records to have a zero in their no selection valid fields rather than null
// however it could overwrite a valid value maybe so needs further testing
//this.$emit("input", 0);
}
window.$gz.form.addNoSelectionItem(vm.searchResults);
// debugger;
//TODO: this may be needed to force new records to have a zero in their no selection valid fields rather than null
// however it could overwrite a valid value maybe so needs further testing
//this.$emit("input", 0);
//set initial value in control if selected
if (vm.value != null && vm.value != 0) {
@@ -77,11 +106,13 @@ export default {
// console.log("STUB: created: has value, sb fetched");
var urlParams = "?ayaType=" + vm.ayaType + "&preId=" + vm.value;
vm.getList(urlParams);
} else if (vm.preFill) {
//no non-empty initial value to select but list specified to pre-fill
vm.searchUnderway = true;
vm.getList();
}
// else if (vm.preFill) {
// //no non-empty initial value to select but list specified to pre-fill
// vm.searchUnderway = true;
// vm.getList();
// }
},
data() {
return {
@@ -112,14 +143,6 @@ export default {
type: Boolean,
default: false
},
noSelectionValid: {
type: Boolean,
default: false
},
preFill: {
type: Boolean,
default: true
},
label: { type: String, default: "" }
},
watch: {
@@ -158,21 +181,21 @@ export default {
// debugger;
this.doSearch();
},
value(val) {
//this ensures the parent form gets the onchange event
//not actually sure why there are two here but it worked with the datetime picker so I replicated it here
//To answer above it appears both are necessary for proper operation
this.$emit("input", val);
this.$emit("change", val);
console.log("Watch:Value triggered:", val);
},
selected(val) {
if (val && val.id) {
console.log("Watch:Selected triggered:", val);
this.$emit("input", val.id);
this.$emit("change", val.id);
}
},
// value(val) {
// //this ensures the parent form gets the onchange event
// //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
// //To answer above it appears both are necessary for proper operation
// this.$emit("input", val);
// this.$emit("change", val);
// console.log("Watch:Value triggered:", val);
// },
// selected(val) {
// if (val && val.id) {
// console.log("Watch:Selected triggered:", val);
// this.$emit("input", val.id);
// this.$emit("change", val.id);
// }
// },
errors(val) {
if (this.hasError()) {
this.errorIcon = "fa-question-circle";
@@ -195,6 +218,18 @@ export default {
data: "ay-start-form-picklist"
});
},
test(e) {
console.log("value changed deciding to emit", e);
console.log("e.id=", e.id);
if (e.id != null) {
console.log("emitting:", e);
this.$emit("input", e.id);
this.$emit("change", e.id);
}
},
dropdown(e) {
console.log("DROPDOWN FIRED", e);
},
customFilter(item, queryText, itemText) {
//NOTE: I wanted this to work with tags but all it does is highlight all of each row if tag query is present
//I guess because it later on attempts to do the highlighting and can't find all the entered query
@@ -236,9 +271,8 @@ export default {
}
vm.searchResults = res.data;
if (vm.noSelectionValid) {
window.$gz.form.addNoSelectionItem(vm.searchResults);
}
window.$gz.form.addNoSelectionItem(vm.searchResults);
vm.searchUnderway = false;
})
@@ -332,27 +366,6 @@ export default {
urlParams += "&inactive=true";
}
this.getList(urlParams);
// console.log("dosearch: calling api.get.picklist for type ", this.ayaType);
// window.$gz.api
// .get("PickList/List" + urlParams)
// .then(res => {
// 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 => {
// window.$gz.errorHandler.handleFormError(err);
// });
//------------
}, 300) //did some checking, 200-300ms seems to be the most common debounce time for ajax search queries
},

2
ayanova/src/views/home-dashboard.vue
View File

@@ -4,8 +4,6 @@
v-model="selectedWidget"
:ayaType="ayaType().Widget"
:label="lt('Widget')"
noSelectionValid
:preFill="false"
>
</gz-pick-list>
<v-divider></v-divider>