#781: click on edition title back to edition's front

This commit is contained in:
2020-07-21 12:34:39 +02:00
parent aebc2c28da
commit 1e15c60fa3
5 changed files with 94 additions and 53 deletions
+12 -10
View File
@@ -582,24 +582,26 @@ footer[role="tools"]{
} }
} }
article.result.item{ article.result.item{
header{
h1{ h1{
@include title3black; @include title3black;
font-weight: 600; font-weight: 600;
} }
h2{ h2{
@include title3black; @include title3black;
text-transform: none;
} }
} span{
.preview{ font-size: 0.882em;
font-size: 0.882em;
margin:0;
code{
@include fontserif;
background-color: lighten(desaturate($rouge,20%), 20%);
padding:0 0.2em;
} }
} // .preview{
// font-size: 0.882em;
// margin:0;
// code{
// @include fontserif;
// background-color: lighten(desaturate($rouge,20%), 20%);
// padding:0 0.2em;
// }
// }
} }
} }
} }
+13 -2
View File
@@ -33,7 +33,7 @@ import History from './components/nav/History'
import Results from './components/nav/Results' import Results from './components/nav/Results'
import Search from './components/nav/Search' import Search from './components/nav/Search'
import FooterTabs from './components/nav/FooterTabs' import FooterTabs from './components/nav/FooterTabs'
import { mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
export default { export default {
metaInfo: { metaInfo: {
@@ -55,7 +55,18 @@ export default {
}, },
computed: { computed: {
...mapState({ ...mapState({
resultsOpened: state => state.Search.opened resultsOpened: state => state.Search.opened,
editionslist: state => state.Corpus.editionslist
})
},
created () {
if (!this.editionslist.length) {
this.getCorpuses()
}
},
methods: {
...mapActions({
getCorpuses: 'Corpus/getCorpuses'
}) })
} }
} }
+29 -20
View File
@@ -1,30 +1,31 @@
<template> <template>
<article class="result item"> <article class="result item">
<header> <h1>
<h1> <a
<a :href="'/edition/'+result.textId+'/'+result.uuid"
:href="'/edition/'+result.textId+'/'+result.uuid" @click.prevent="onclick"
@click.prevent="onclick" @keyup.enter="onclick"
@keyup.enter="onclick" v-html="result.title[0]"
v-html="result.title[0]" />
/> </h1>
</h1> <h2>
<h2> <a
<a :href="'/edition/'+result.textId+'/'+result.uuid"
:href="'/edition/'+result.textId+'/'+result.uuid" @click.prevent="onclick"
@click.prevent="onclick" @keyup.enter="onclick"
@keyup.enter="onclick" v-html="editionTitle"
v-html="result.textId" />
/> </h2>
</h2> <!-- <p v-if="preview" class="preview" v-html="preview" /> -->
</header> <aside>
<p v-if="preview" class="preview" v-html="preview" /> <span>Pagination</span> | <span>Nbr mots</span>
</aside>
</article> </article>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapState, mapActions } from 'vuex'
export default { export default {
name: 'ResultItem', name: 'ResultItem',
@@ -37,6 +38,14 @@ export default {
data: () => ({ data: () => ({
preview: '' preview: ''
}), }),
computed: {
...mapState({
editionsbyuuid: state => state.Corpus.editionsbyuuid
}),
editionTitle () {
return this.editionsbyuuid[this.result.textId].title
}
},
created () { created () {
if (this.result.extract) { if (this.result.extract) {
const subString = this.result.extract.substr(0, 80) const subString = this.result.extract.substr(0, 80)
+39 -20
View File
@@ -4,7 +4,10 @@
<span>Loading ...</span> <span>Loading ...</span>
</template> </template>
<template #header> <template #header>
<h1>{{ title }}</h1> <h1>
<router-link :to="{ name:'edition', params: { id: editionid }}">{{ title }}</router-link>
</h1>
<p v-if="meta">{{ meta.author }}</p> <p v-if="meta">{{ meta.author }}</p>
<aside <aside
v-if="indexitem" v-if="indexitem"
@@ -134,19 +137,36 @@ export default {
}) })
}, },
watch: { watch: {
textid: function (newid, oldid) { $route (to, from) {
console.log('Edition Watcher $route', from, to)
if (to.params.textid) {
// change textid when route change
this.textid = to.params.textid
} else if (this.toc) {
// if no textid in new route (e.g. edition front)
// but we have toc
// get the first item
// will be replaced by front page of edition
this.textid = this.toc[0].children[1].uuid
} else {
this.textid = null
}
},
textid (newid, oldid) {
console.log('textid watcher', this, oldid, newid) console.log('textid watcher', this, oldid, newid)
this.texts = [] this.texts = []
this.textsuuids = [] this.textsuuids = []
this.pages = [] this.pages = []
this.pagesOtpions = [] this.pagesOtpions = []
this.getTextContent(newid) if (newid) {
this.getTextContent(newid)
}
}, },
textdata: function (newtxtdata, oldtxtdata) { textdata (newtxtdata, oldtxtdata) {
console.log('textdata watcher', oldtxtdata, newtxtdata) console.log('textdata watcher', oldtxtdata, newtxtdata)
this.metainfotitle = `${this.title} ${newtxtdata.meta.title}` this.metainfotitle = `${this.title} ${newtxtdata.meta.title}`
}, },
page_selected: function (newp, oldp) { page_selected (newp, oldp) {
console.log('page_selected watcher', oldp, newp) console.log('page_selected watcher', oldp, newp)
this.scrollToPage(newp) this.scrollToPage(newp)
} }
@@ -190,7 +210,7 @@ export default {
// load editions list from Corpus Store if not exist // load editions list from Corpus Store if not exist
if (!this.editionslist.length) { if (!this.editionslist.length) {
this.getCorpuses() // this.getCorpuses()
// subsribe to store to get the editionbyuuid list // subsribe to store to get the editionbyuuid list
// https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj // https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
this.unsubscribe = this.$store.subscribe((mutation, state) => { this.unsubscribe = this.$store.subscribe((mutation, state) => {
@@ -210,19 +230,19 @@ export default {
this.textid = this.$route.params.textid this.textid = this.$route.params.textid
} }
}, },
beforeRouteUpdate (to, from, next) { // beforeRouteUpdate (to, from, next) {
// called when the route that renders this component has changed, // // called when the route that renders this component has changed,
// but this component is reused in the new route. // // but this component is reused in the new route.
// For example, for a route with dynamic params `/foo/:id`, when we // // For example, for a route with dynamic params `/foo/:id`, when we
// navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance // // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
// will be reused, and this hook will be called when that happens. // // will be reused, and this hook will be called when that happens.
// has access to `this` component instance. // // has access to `this` component instance.
// console.log('beforeRouteUpdate to', to) // // console.log('beforeRouteUpdate to', to)
if (to.params.textid) { // if (to.params.textid) {
this.textid = to.params.textid // this.textid = to.params.textid
} // }
next() // next()
}, // },
methods: { methods: {
...mapActions({ ...mapActions({
getCorpuses: 'Corpus/getCorpuses' getCorpuses: 'Corpus/getCorpuses'
@@ -246,7 +266,6 @@ export default {
}) })
.catch((error) => { .catch((error) => {
console.warn('Issue with getTextContent', error) console.warn('Issue with getTextContent', error)
console.warn('Bad edition uuid', this.$route.params.id, this.$route)
Promise.reject(error) Promise.reject(error)
this.$router.replace({ this.$router.replace({
name: 'notfound', name: 'notfound',
+1 -1
View File
@@ -125,7 +125,7 @@ export default {
let q = qs.stringify(params) let q = qs.stringify(params)
return REST.get(`${window.apipath}/search?` + q) return REST.get(`${window.apipath}/search?` + q)
.then(({ data }) => { .then(({ data }) => {
// console.log('search REST: data', data.meta.quantity.quantity, state.offset + state.limit, data) console.log('search REST: data', data.meta.quantity.quantity, state.offset + state.limit, data)
commit('setIsloading', false) commit('setIsloading', false)
commit('setOpened', true) commit('setOpened', true)
commit('setResults', data.content) commit('setResults', data.content)