fucking finally figured out why excerpt not showing, template had item.index as they key in two different places inside the template which apparently fucks everything up

This commit is contained in:
2020-04-08 21:56:38 +00:00
parent 5e62a838d6
commit d8f7aa9c0a
2 changed files with 90 additions and 26 deletions

View File

@@ -50,16 +50,11 @@ CURRENT TODOs
@@@@@@@@@@@ ROADMAP STAGE 2:
todo: search - center the whole thing, looks silly to the left when everything else is centered
todo: excerpt, add as part of item object and conditionally show
todo: search controller at server needs an excerpt route so client can request an excerpt for a record
todo: session cache search results and scroll position if possible to support "back and forthing"
todo: search what order should the results be retruned in, right now is by id but looks weird in list
todo: SEARCH UI
- case insensitive by default unless server overriden like picklist
- all searches without wildcards or quotes are "contains" searches by default and multiple phrases space delimited are accomodated
- if user want's an exact search then they put it in quotes like google for MUST have in that exact form and case (if case insensitive mode)
todo: search controller at server needs an excerpt route so client can request an excerpt for a record
todo: HUGE layout - go through all forms set browser to 4k ultra hd and see where things line up

View File

@@ -36,36 +36,58 @@
</v-col>
<v-col cols="12">
<p v-if="!results.length">{{ $ay.t("NoResults") }}</p>
<v-card v-if="results.length" max-width="900">
<ul>
<template v-for="item in items">
<li :key="item.index">
{{ item
}}<v-btn icon @click="getExcerpt(item)">
<v-icon color="grey lighten-1" large
>fa-info-circle</v-icon
>
</v-btn>
</li>
</template>
</ul>
<v-btn @click="testBuild()">
TEST BUILD
</v-btn>
</v-col>
<v-col cols="12">
<p v-if="!items.length">{{ $ay.t("NoResults") }}</p>
<v-card v-if="items.length" max-width="900">
<v-list>
<v-subheader v-if="maxResultsReturned">
<span>({{ $ay.t("TooManyResults") }})</span>
</v-subheader>
<template v-for="(item, i) in results">
<v-subheader :key="i" v-if="item.subheader"
<template v-for="(item,ind) in items">
<v-subheader :key="ind" v-if="item.subheader"
><v-icon large class="mr-2">{{ item.icon }}</v-icon
><span class="title">{{
item.subheader
}}</span></v-subheader
>
<v-list-item link :key="i">
<v-list-item link :key="item.index">
<v-list-item-content>
<v-list-item-title
@click="openItem"
v-text="item.name"
></v-list-item-title>
<v-list-item-subtitle>{{
item.info
}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="getExcerpt">
<v-btn icon @click="getExcerpt(item)">
<v-icon color="grey lighten-1" large
>fa-info-circle</v-icon
>
</v-btn>
</v-list-item-action>
</v-list-item>
<!-- {{ item }} -->
</template>
</v-list>
</v-card>
@@ -74,6 +96,7 @@
</v-form>
</v-col>
</v-row>
{{ items }}
</v-container>
</template>
@@ -142,13 +165,32 @@ export default {
searchPhrase: null,
searchObjectType: 0,
results: [],
items: [
{
name: "Awesome Plastic Car 32",
type: 2,
id: 7,
info: null,
index: 1
},
{
name: "Handcrafted Metal Towels 117",
type: 2,
id: 92,
subheader: "Widget",
icon: "fa-vial",
info: null,
index: 2
},
{ name: "Awesome Plastic Car 32", type: 2, id: 7, info: null, index: 3 }
],
maxResultsReturned: false,
formState: {
ready: false,
dirty: false,
valid: true,
readOnly: false,
loading: true,
loading: false,
errorBoxMessage: null,
appError: null,
serverError: {}
@@ -158,15 +200,37 @@ export default {
},
methods: {
test(item) {
item.name = "NEW NAME";
},
testBuild() {
console.log("TEST BUILD");
for (let i = 4; i < 10; i++) {
console.log("Pushing item ", i);
this.items.push({
name: "Awesome Plastic Car" + i,
type: 2,
id: 7,
info: null,
index: i
});
}
},
openItem(item) {
console.log("open item", item);
},
getExcerpt(item) {
console.log("get excerpt", item);
item.info = "***NEW INFO HERE****";
this.$forceUpdate();
// let v = this.results[i];
// console.log("getExcerpt results before:", this.results[i].info);
// v.info = "NEW INFO HERE";
// console.log("getExcerpt v after:", this.results[i].info);
// Vue.set(this.results, i, v);
},
getDataFromApi() {
let vm = this;
if (!vm.searchPhrase) {
if (!vm.searchPhrase || vm.formState.loading) {
return;
}
@@ -181,6 +245,7 @@ export default {
}
*
*/
console.log("Searching...");
window.$gz.api
.upsert(API_BASE_URL, {
phrase: vm.searchPhrase,
@@ -194,16 +259,17 @@ export default {
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
console.log("Results returned, processing...");
vm.maxResultsReturned =
res.data.searchResults.length == MAX_RESULTS;
//vm.results = res.data.searchResults;
vm.items = [];
let newResults = [];
let nDex = 0;
let lastType = -1;
for (let i = 0; i < res.data.searchResults.length; i++) {
let item = res.data.searchResults[i];
if (item.type != lastType) {
//change of type, set subheader props
let tsub = window.$gz._.find(vm.selectLists.objectTypes, [
@@ -211,20 +277,23 @@ export default {
item.type
]);
if (tsub != null) {
item["subheader"] = tsub.name;
} else {
item["subheader"] = "TYPE " + item.type;
}
//this is breaking shit
// if (tsub != null) {
// item.subheader = tsub.name;
// } else {
// item.subheader = "TYPE " + item.type;
// }
item["icon"] = window.$gz.util.iconForCoreType(item.type);
item.icon = window.$gz.util.iconForCoreType(item.type);
lastType = item.type;
}
item.info = null;
item.index = ++nDex;
newResults.push(item);
}
console.log(newResults);
vm.results = newResults;
console.log("Pusshing newResults into items now...");
vm.items = newResults;
//Update the form status
window.$gz.form.setFormState({