#781: click on edition title back to edition's front
This commit is contained in:
+12
-10
@@ -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
@@ -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'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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',
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user