xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-10 08:08:52 -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

100
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>
@@ -31,39 +39,41 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import "../assets/scss/_variables"; @import "../assets/scss/_variables";
.expandable-result { .expandable-result {
cursor: pointer; cursor: pointer;
}
.collapse {
display: block;
}
.search-result-link {
white-space: nowrap;
font-size: 0.75em !important;
}
.quote-list > tr {
white-space: nowrap;
&:hover {
background-color: $grey-4;
} }
}
.collapse { .quote-text {
display: block; white-space: normal;
} }
.search-result-link { .quote-speaker {
white-space: nowrap; min-width: 75px;
font-size: 0.75em !important; padding-right: 1em;
} font-weight: 600;
vertical-align: text-top;
.quote-list > tr { text-align: right;
white-space: nowrap; font-family: 'Montserrat', sans-serif;
}
&:hover { background-color: $grey-4; }
}
.quote-text {
white-space: normal;
}
.quote-speaker {
min-width: 75px;
padding-right: 1em;
font-weight: 600;
vertical-align: text-top;
text-align: right;
font-family: 'Montserrat', sans-serif;
}
</style> </style>
<script> <script>
@@ -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}`;