Skip to content
Snippets Groups Projects
Commit f3f0ea6c authored by Henrik Askjer's avatar Henrik Askjer
Browse files

lazy loading of articles

parent cece38ba
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/DictionaryView.vue
+ 88
− 59
View file @ f3f0ea6c
......@@ -36,22 +36,23 @@
<div id="spinner" v-if="waiting">
<v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
</div>
<SearchResults :hits="search_results"
<SearchResults :results_bm="search_results.bm"
:results_nn="search_results.nn"
:lang="lang"
:key="lang"
:meta="this.article_info.meta"
@article-click="article_link_click"
@details-click="details_click"
v-if="search_results.length && ! waiting && ! article" />
v-if="total_results() && ! waiting && ! article" />
<div id="single_article_container" v-if="article">
<div class="return_to_results" v-if="search_results && search_results.length">
<div class="return_to_results" v-if="total_results">
<router-link :to="article.source" @click.native="return_to_results()">
<v-icon class="nav_arrow">arrow_left</v-icon>Tilbake til {{article.dictionary == 'bm' ? 'søkeresultater' : 'søkjeresultat'}}
</router-link>
</div>
<Article :key="article_key" :article="article" @article-click="article_link_click" />
</div>
<div class="welcome" v-if="! (article || error || search_results.length || waiting)">
<div class="welcome" v-if="! (article || error || total_results() || waiting)">
<div class="monthly" :class="$vuetify.breakpoint.name">
<div>
<Article :article="monthly_bm" @article-click="article_link_click" />
......@@ -106,7 +107,7 @@ function navigate_to_article(self, source) {
axios.get(ARTICLE_ENDPOINT + lang + '/article/' + self.$route.params.id + ".json")
.then(function(response){
self.article = Object.assign(response.data, {'dictionary': lang, results: self.search_results})
self.search_results = []
self.search_results = {}
self.error = null
})
.catch(function(error){
......@@ -120,7 +121,7 @@ function navigate_to_article(self, source) {
})
.then(function(response){
self.waiting_for_articles = false
history.replaceState({article: self.article, search_results: [], lang: self.lang, error: self.error, article_info: self.article_info}, '')
history.replaceState({article: self.article, search_results: {}, lang: self.lang, error: self.error, article_info: self.article_info}, '')
if (source) {
self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
}
......@@ -155,9 +156,62 @@ function navigate_to_search(self, query) {
}
*/
function load_articles(self, response, query, offset, n, dict) {
function load_articles(self, query, offset, n, dict) {
let article_IDs = self.article_info.articles[dict]
if (offset > article_IDs.length) {
n = 0
}
else if (offset + n > article_IDs.length) {
n = n + (article_IDs.length - n)
}
if (n > 0) {
article_IDs = article_IDs.slice(offset, n)
console.log("ARTICLES", dict,article_IDs)
return Promise.all(article_IDs.map((article_id) => {
return axios.get(`${ARTICLE_ENDPOINT}${dict}/article/${article_id}.json`)
}))
.then((response) => {
let results = response.map((element, index) => {
return Object.assign(element.data, {
dictionary: dict
})
})
self.article = null
if (! results.length) {
if (query.match) {
self.error = []
if (self.lang !== 'bm') {
self.error.push(`Ordet «${query.match}» finst ikkje i Nynorskordboka. Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`)
}
if (self.lang !== 'nn') self.error.push(`Ordet «${query.match}» finnes ikke i Bokmålsordboka. Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`)
} else {
self.error = [`Søk på «${query.q}» gir ingen treff i ${dicts[self.lang]}.`]
// If not advanced search
if (query.search != 2) self.error[0] += " Søk med * eller % dersom du er usikker på skrivemåten. Søketips kan du finne i «OM ORDBØKENE»."
if (self.lang == "bm") self.error[0] += ` Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`
if (self.lang == "nn") self.error[0] += ` Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`
}
}
else {
self.error = null
}
if (offset == 0) {
self.search_results[dict] = results
}
else {
self.search_results[dict] = self.search_results[dict].concat(results)
}
})
.catch(error => {
self.waiting_for_articles = false
self.connection_error(error)
})
}
}
......@@ -168,62 +222,21 @@ function navigate_to_query(self, word) {
// Get article IDs
api.get('articles?', {params: {w: query.match || query.q, dict: self.lang, scope: "w"}}).then((response) => {
self.article_info = response.data
let article_ids = response.data["articles"]
let unwrapped = []
for (const d in article_ids) {
article_ids[d].forEach(i => unwrapped.push({
dictionary: d,
id: i
}))
}
// Get individual articles
Promise.all(unwrapped.map((article) => {
return axios.get(`${ARTICLE_ENDPOINT}${article.dictionary}/article/${article.id}.json`)
}))
.then((response) => {
self.search_results = response.map((element, index) => {
return Object.assign(element.data, {
dictionary: unwrapped[index].dictionary
})
})
self.article = null
if (! self.search_results.length) {
if (query.match) {
self.error = []
if (self.lang !== 'bm') {
self.error.push(`Ordet «${query.match}» finst ikkje i Nynorskordboka. Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`)
}
if (self.lang !== 'nn') self.error.push(`Ordet «${query.match}» finnes ikke i Bokmålsordboka. Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`)
} else {
self.error = [`Søk på «${query.q}» gir ingen treff i ${dicts[self.lang]}.`]
// If not advanced search
if (query.search != 2) self.error[0] += " Søk med * eller % dersom du er usikker på skrivemåten. Søketips kan du finne i «OM ORDBØKENE»."
if (self.lang == "bm") self.error[0] += ` Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`
if (self.lang == "nn") self.error[0] += ` Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`
}
}
else {
self.error = null
}
})
.catch(error => {
self.connection_error(error)
})
self.search_results = {}
Promise.all([load_articles(self, query, 0, 10, "bm"),
load_articles(self, query, 0, 10, "nn")])
.then(() => {
self.waiting_for_articles = false
history.replaceState({
article: self.article,
search_results: self.search_results,
lang: self.lang,
error: self.error,
article_info: self.article_info
}, '')
article_info: self.article_info,
search_results: self.search_results
}, '')
})
}).catch(error =>{
self.connection_error(error)
......@@ -262,8 +275,24 @@ export default {
SearchResults
},
methods: {
total_results: function() {
if (this.search_results) {
let total = 0
if (this.search_results.bm) {
return total += this.search_results.bm.length
}
if (this.search_results.nn) {
return this.search_results.nn.length
}
console.log("TOTAL", total)
return total
}
},
connection_error: function(error) {
this.search_results = []
this.search_results = {}
if (error.response) {
this.error = []
if (this.lang !== 'bm') this.error.push(`Noko gjekk gale på serversida`)
......@@ -316,7 +345,7 @@ export default {
details_click: function(item) {
item.article.source = this.previous
this.article = item.article
history.replaceState({article: this.article, search_results: [], lang: this.lang, error: null, article_info: this.article_info}, '')
history.replaceState({article: this.article, search_results: {}, lang: this.lang, error: null, article_info: this.article_info}, '')
},
return_to_results: function() {
this.article = null
......
src/components/SearchResults.vue
+ 13
− 14
View file @ f3f0ea6c
<template>
<section id="search_results">
<div class="flex-container" :class="$vuetify.breakpoint.name">
<ul class="hits" v-if="results_bm.length">
<ul class="hits" :v-if="results_bm">
<li class="results-count">Treff i Bokmålsordboka: {{count_bm}}</li>
<li class="article_container" v-for="(result, index) in results_bm" :key="index + results_hash" tabindex="-1">
<li class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash" tabindex="-1">
<Article
:article="result"
@article-click="article_link_click"
......@@ -11,9 +11,9 @@
</Article>
</li>
</ul>
<ul class="hits" v-if="results_nn.length">
<ul class="hits" :v-if="results_nn">
<li class="results-count">Treff i Nynorskorboka: {{count_nn}}</li>
<li class="article_container" v-for="(result, index) in results_nn" :key="index + results_hash" tabindex="-1">
<li class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash" tabindex="-1">
<Article
:article="result"
@article-click="article_link_click"
......@@ -28,31 +28,30 @@
<script>
import Article from './Article.vue'
export default {
name: 'SearchResults',
props: {
hits: Array,
results_bm: Array,
results_nn: Array,
lang: String,
meta: Object
},
computed: {
right_col_class_name: function() {
if (this.$vuetify.breakpoint.mdAndUp) {
if (this.results_bm.length) {
if (this.results_bm) {
return 'righ_hand_column'
}
}
return ''
},
results_bm: function(){
return this.hits.filter(hit => hit.dictionary == 'bm')
},
results_nn: function(){
return this.hits.filter(hit => hit.dictionary == 'nn')
bm_hash: function(){
console.log("HASH_B;")
return this.results_bm.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
},
results_hash: function(){
return this.hits.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
nn_hash: function(){
console.log("HASH_NN")
return this.results_nn.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
},
count_bm: function(){
console.log(this.meta)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment