xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-09 08:09:17 -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>
<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">
<table v-if="expanded" class="quote-list px-3 py-1 w-100">
<tr v-for="(quote, index) in above" :key="`quote-a-${index}`">
<td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td>
<td class="quote-text w-100 pr-3">{{ quote.text }}</td>
<tr v-for="(quote, index) in above" class="secondary" :key="`quote-a-${index}`">
<td class="quote-speaker my-3 pl-3">
<div>{{ quote.speaker }}</div>
</td>
<td class="quote-text w-100 pr-3">
<div>{{ quote.text }}</div>
</td>
</tr>
<tr>
<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>
</tr>
<tr v-for="(quote, index) in below" :key="`quote-b-${index}`">
<td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td>
<td class="quote-text w-100 pr-3">{{ quote.text }}</td>
<tr v-for="(quote, index) in below" class="secondary" :key="`quote-b-${index}`">
<td class="quote-speaker my-3 pl-3">
<div>{{ quote.speaker }}</div>
</td>
<td class="quote-text w-100 pr-3">
<div>{{ quote.text }}</div>
</td>
</tr>
</table>
<table v-else class="quote-list px-3 py-1 w-100">
<tr v-for="(quote, index) in above" :key="`quote-a-${index}`">
<tr>
<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>
@@ -31,39 +39,41 @@
</template>
<style lang="scss">
@import "../assets/scss/_variables";
@import "../assets/scss/_variables";
.expandable-result {
cursor: pointer;
.expandable-result {
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 {
display: block;
}
.quote-text {
white-space: normal;
}
.search-result-link {
white-space: nowrap;
font-size: 0.75em !important;
}
.quote-list > tr {
white-space: nowrap;
&: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;
}
.quote-speaker {
min-width: 75px;
padding-right: 1em;
font-weight: 600;
vertical-align: text-top;
text-align: right;
font-family: 'Montserrat', sans-serif;
}
</style>
<script>
@@ -74,20 +84,32 @@ export default {
data() {
return {
expanded: false,
hasExpanded: false,
fetching: false,
above: null,
below: null,
};
},
computed: {
fetched() {
return this.above !== null || this.below !== null;
},
},
methods: {
toggleExpansion() {
this.expanded = !this.expanded;
// if first time expanding, fetch quotes
if (!this.hasExpanded && this.expanded) {
if (!this.fetchQuotes()) {
this.hasExpanded = true;
this.fetchQuotes();
}
},
hover() {
if (!this.fetched && !this.fetching) {
this.fetching = true;
this.fetchQuotes();
this.fetching = false;
}
},
fetchQuotes() {
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}`;