xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-12 16:13:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

add searchresult quote surrounding prefetching

Browse Source
This commit is contained in:
Xevion
2020-09-05 10:48:50 -05:00
parent 3a29cf42a0
commit 849f935245
1 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/components/SearchResult.vue
View File

@@ -1,22 +1,30 @@
<template> <template>
<b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1" v-on:click="toggleExpansion()"> <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
v-on:mouseover="hover" v-on:click="toggleExpansion" :class="[expanded ? 'expanded' : '']">
<b-card-text class="mu-2 py-1 mb-1"> <b-card-text class="mu-2 py-1 mb-1">
<table v-if="expanded" class="quote-list px-3 py-1 w-100"> <table v-if="expanded" class="quote-list px-3 py-1 w-100">
<tr v-for="(quote, index) in above" :key="`quote-a-${index}`"> <tr v-for="(quote, index) in above" class="secondary" :key="`quote-a-${index}`">
<td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td> <td class="quote-speaker my-3 pl-3">
<td class="quote-text w-100 pr-3">{{ quote.text }}</td> <div>{{ quote.speaker }}</div>
</td>
<td class="quote-text w-100 pr-3">
<div>{{ quote.text }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td> <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
<td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td> <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
</tr> </tr>
<tr v-for="(quote, index) in below" :key="`quote-b-${index}`"> <tr v-for="(quote, index) in below" class="secondary" :key="`quote-b-${index}`">
<td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td> <td class="quote-speaker my-3 pl-3">
<td class="quote-text w-100 pr-3">{{ quote.text }}</td> <div>{{ quote.speaker }}</div>
</td>
<td class="quote-text w-100 pr-3">
<div>{{ quote.text }}</div>
</td>
</tr> </tr>
</table> </table>
<table v-else class="quote-list px-3 py-1 w-100"> <table v-else class="quote-list px-3 py-1 w-100">
<tr v-for="(quote, index) in above" :key="`quote-a-${index}`">
<tr> <tr>
<td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td> <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
<td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td> <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
@@ -49,7 +57,9 @@
.quote-list > tr { .quote-list > tr {
white-space: nowrap; white-space: nowrap;
&:hover { background-color: $grey-4; } &:hover {
background-color: $grey-4;
}
} }
.quote-text { .quote-text {
@@ -74,20 +84,32 @@ export default {
data() { data() {
return { return {
expanded: false, expanded: false,
hasExpanded: false, fetching: false,
above: null, above: null,
below: null, below: null,
}; };
}, },
computed: {
fetched() {
return this.above !== null || this.below !== null;
},
},
methods: { methods: {
toggleExpansion() { toggleExpansion() {
this.expanded = !this.expanded; this.expanded = !this.expanded;
// if first time expanding, fetch quotes // if first time expanding, fetch quotes
if (!this.hasExpanded && this.expanded) { if (!this.fetchQuotes()) {
this.hasExpanded = true; this.hasExpanded = true;
this.fetchQuotes(); this.fetchQuotes();
} }
}, },
hover() {
if (!this.fetched && !this.fetching) {
this.fetching = true;
this.fetchQuotes();
this.fetching = false;
}
},
fetchQuotes() { fetchQuotes() {
const path = `${process.env.VUE_APP_BASE_APP_URL}/api/quote_surround?season=\ const path = `${process.env.VUE_APP_BASE_APP_URL}/api/quote_surround?season=\
${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`; ${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;