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

update pagination and results counts

parent 38a29b8e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/DictionaryView.vue
+ 29
− 68
View file @ da83e893
......@@ -4,32 +4,7 @@
<Autocomplete v-on:submit="select_result" :api="get_search_endpoint">
</Autocomplete>
<SearchToolbar v-if="$store.state.showSearchToolbar" @updatePos="update_pos" @updateScope="update_scope"/>
<v-card rounded="xl">
<v-container v-if="!article && article_info && total_results > 20"><v-row>
<v-col cols = 1>Vis</v-col>
<v-col cols=2>
<v-select :items="[10,20,30,40,50]"
/> </v-col><v-col v-if="article.info.meta.nn" cols=6>av {{article_info.meta.bm.total}} treff i
Bokmålsordboka</v-col>
<v-col cols = 1>Vis</v-col>
<v-col cols=1>
<v-text-field
_items="[10]"
value="10"
hide-details
dense
rounded
outlined
label="test"
single-line
type="number"
/> </v-col><v-col v-if="article.info.meta.nn" cols = "">av {{article_info.meta.nn.total}} treff i
Nynorskordboka</v-col>
</v-row>
<v-row><v-col cols="6"><v-pagination :value="2" circle :length="100"></v-pagination></v-col>
<v-col cols="6"><v-pagination circle :length="100"></v-pagination></v-col></v-row></v-container></v-card>
</div>
<SearchResults :results_bm="search_results.bm || []"
......@@ -130,10 +105,8 @@ function navigate_to_article(self, source) {
pos_selected: self.pos_selected,
scope: self.scope,
article_info: self.article_info,
bm_page: self.bm_page,
nn_page: self.nn_page,
nn_pp: self.nn_pp,
bm_pp: self.bm_pp}, '')
page: self.page,
perPage: self.perPage}, '')
if (source) {
self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
}
......@@ -154,6 +127,7 @@ function load_articles(self, query, offset, n, dict) {
if (n > 0 && (self.lang == dict || self.lang == "bm,nn")) {
article_IDs = article_IDs.slice(offset, offset + n)
return Promise.all(article_IDs.map((article_id) => {
return axios.get(`${ARTICLE_ENDPOINT}${dict}/article/${article_id}.json`)
......@@ -228,10 +202,8 @@ function navigate_to_query(self, word) {
scope: self.scope,
article_info: self.article_info,
search_results: self.search_results,
nn_page: self.nn_page,
bm_page: self.bm_page,
nn_pp: self.nn_pp,
bm_pp: self.bm_pp
page: self.page,
perPage: self.perPage
}, '')
})
......@@ -259,10 +231,8 @@ export default {
scope: "w",
pos_selected: "ALL",
article_info: null,
nn_page: null,
bm_page: null,
bm_pp: null,
nn_pp: null
page: null,
perPage: null,
}
},
computed: {
......@@ -281,18 +251,19 @@ export default {
},
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
}
return total
if (this.article_info) {
let total = 0
if (this.article_info.meta.bm) {
total += this.article_info.meta.bm.total
}
if (this.article_info.meta.nn) {
total += this.article_info.meta.nn.total
}
return total
}
},
connection_error: function(error) {
......@@ -382,10 +353,8 @@ export default {
pos_selected: this.pos_selected,
scope: this.scope,
article_info: this.article_info,
bm_page: this.bm_page,
nn_page: this.nn_page,
nn_pp: this.nn_pp,
bm_pp: this.bm_pp}, '')
page: this.page,
perPage: this.perPage}, '')
}else{
navigate_to_article(this, item.source)
......@@ -401,10 +370,8 @@ export default {
pos_selected: this.pos_selected,
scope: this.scope,
article_info: this.article_info,
bm_page: this.bm_page,
nn_page: this.nn_page,
nn_pp: this.nn_pp,
bm_pp: this.bm_pp}, '')
page: this.page,
perPage: this.perPage}, '')
},
return_to_results: function() {
this.article = null
......@@ -424,10 +391,8 @@ export default {
if (self.$route.query.scope) {
self.scope = self.$route.query.scope
}
if (self.$route.query.bm_page) self.bm_page = self.$route.query.bm_page
if (self.$route.query.nn_page) self.nn_page = self.$route.query.nn_page
if (self.$route.query.bm_pp) self.bm_pp = self.$route.query.bm_pp
if (self.$route.query.nn_pp) self.nn_pp = self.$route.query.nn_pp
if (self.$route.query.page) self.page = parseInt(self.$route.query.page)
if (self.$route.query.perPage) self.perPage = self.$route.query.perPage
Promise.all([
axios.get(ARTICLE_ENDPOINT + 'bm/concepts.json').then(function(response){
......@@ -461,10 +426,8 @@ export default {
pos_selected: self.pos_selected,
scope: self.scope,
article_info: self.article_info,
nn_page: self.nn_page,
bm_page: self.bm_page,
nn_pp: self.nn_pp,
bm_pp: self.bm_pp}, '')
page: self.page,
perPage: self.perPage}, '')
// words of the month
......@@ -496,10 +459,8 @@ export default {
self.pos_selected = event.pos_selected || self.pos_selected
self.scope = event.scope || self.scope
self.error = event.state.error
self.bm_page = event.state.bm_page,
self.nn_page = event.state.nn_page,
self.bm_pp = event.state.bm_pp,
self.nn_pp = event.state.nn_pp
self.page = event.state.page,
self.perPage = event.state.perPage
}
}
......
src/components/SearchResults.vue
+ 41
− 6
View file @ da83e893
<template>
<section id="search_results">
<span flat color="tertiary" class = "pagination" v-if="!$parent.article && $parent.article_info && $parent.total_results() > 20">
<v-pagination :v-model="$parent.page" :value="$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil($parent.total_results()/20)"></v-pagination>
<span class="result-counts">
<span class="total-results">{{$parent.total_results()}} treff </span>
<span v-if="$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{count_nn}}</span>
<span v-if="$parent.lang!='bm,nn'" class="dict-counts"> | {{$t('dicts_inline.'+$parent.lang)}}</span>
</span>
</span>
<div class="flex-container" :class="$vuetify.breakpoint.name">
<ul class="hits" v-if="$vuetify.breakpoint.mobile">
<li class="results-count"><span>Bokmål: {{count_bm}} treff</span><span> Nynorsk: {{count_nn}} treff</span></li>
<ul class="hits" v-if="$vuetify.breakpoint.smAndDown">
<li class="article_container" v-for="(result, index) in both_dicts" :key="index + both_hash" tabindex="-1">
<Article
:article="result"
......@@ -12,8 +21,7 @@
</Article>
</li>
</ul>
<ul class="hits" v-if="!$vuetify.breakpoint.mobile && count_bm">
<li class="results-count">Bokmålsordboka: {{count_bm}} treff</li>
<ul class="hits" v-if="!$vuetify.breakpoint.smAndDown && count_bm">
<li class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash" tabindex="-1">
<Article
:article="result"
......@@ -22,8 +30,7 @@
</Article>
</li>
</ul>
<ul class="hits" v-if="!$vuetify.breakpoint.mobile && count_nn">
<li class="results-count">Nynorskorboka: {{count_nn}} treff</li>
<ul class="hits" v-if="!$vuetify.breakpoint.smAndDown && count_nn">
<li class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash" tabindex="-1">
<Article
:article="result"
......@@ -169,4 +176,32 @@ export default {
article.righ_hand_column div.inflection-wrapper {
right: -35px;
}
.pagination {
margin-left: 10px;
display: flex;
flex-wrap: wrap;
}
.total-results {
font-weight: bold;
color: var(--v-primary-base);
}
.result-counts {
padding: 10px;
justify-content: right !important;
}
.total-results, .dict-counts {
white-space: nowrap;
}
.pagination ul {
padding-inline-start: 0px !important;
justify-content: right;
}
</style>
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