redesigned index nominum item page
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<section :class="{opened: isopened}">
|
||||
<h4>
|
||||
<a
|
||||
v-if="oc.title"
|
||||
:href="'/edition/'+oc.ed.uuid+'/'+oc.uuid+'/'+form"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="oc.ed.uuid"
|
||||
:form="form"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
{{ oc.title }} <span v-if="oc.ed.uuid" class="edition">( {{ editionTitle }} )</span>
|
||||
<!-- <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span> -->
|
||||
</a>
|
||||
</h4>
|
||||
<!-- <span
|
||||
class="open-close"
|
||||
@click.prevent="onOpenPreview"
|
||||
@keyup.enter="onOpenPreview"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
|
||||
<path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" />
|
||||
</svg>
|
||||
</span> -->
|
||||
<!-- <div v-if="content" class="text" v-html="tei" /> -->
|
||||
<!-- <a
|
||||
v-if="content"
|
||||
class="lire-plus"
|
||||
:href="'/edition/'+ed.item+'/'+oc.uuid"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="ed.item"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
lire plus
|
||||
</a> -->
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// import { REST } from 'api/rest-axios'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Occurence',
|
||||
props: {
|
||||
form: String,
|
||||
oc: Object
|
||||
},
|
||||
data: () => ({
|
||||
content: null,
|
||||
isopened: false,
|
||||
tei: ''
|
||||
}),
|
||||
computed: {
|
||||
...mapState({
|
||||
editionsbyuuid: state => state.Corpus.editionsbyuuid
|
||||
}),
|
||||
editionTitle () {
|
||||
return this.editionsbyuuid[this.oc.ed.uuid].title
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log('occurence beforeCreate')
|
||||
// REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
|
||||
// .then(({ data }) => {
|
||||
// console.log('occurence text REST: data', data)
|
||||
// if (data.content) {
|
||||
// this.content = data.content
|
||||
// const subString = this.content.tei.substr(0, 500)
|
||||
// this.tei = subString.substr(0, subString.lastIndexOf(' ')) + ' …'
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.warn('Issue with nominum', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addHistoryItem: 'History/addItem'
|
||||
}),
|
||||
onGoToText (e) {
|
||||
console.log('clicked on text occurence', e, this.oc.title, this.oc.ed)
|
||||
|
||||
if (e.target.getAttribute('eduuid')) {
|
||||
this.addHistoryItem({
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid'),
|
||||
title: this.oc.title,
|
||||
editionTitle: this.editionTitle
|
||||
})
|
||||
// if (e.target.getAttribute('form')) {
|
||||
// this.$router.push({
|
||||
// name: `editiontext`,
|
||||
// params: {
|
||||
// id: e.target.getAttribute('eduuid'),
|
||||
// textid: e.target.getAttribute('uuid')
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
this.$router.push({
|
||||
name: `editiontextextract`,
|
||||
params: {
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid'),
|
||||
extract: e.target.getAttribute('form')
|
||||
}
|
||||
})
|
||||
// }
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: `edition`,
|
||||
params: {
|
||||
id: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onOpenPreview (e) {
|
||||
this.isopened = !this.isopened
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,55 +1,90 @@
|
||||
<template>
|
||||
<section class="occurences">
|
||||
<ul>
|
||||
<li
|
||||
v-for="ed in content.occurences"
|
||||
:key="ed.item"
|
||||
>
|
||||
<h3>
|
||||
<a
|
||||
:href="'/edition/'+ed.item"
|
||||
:uuid="ed.item"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="ed.biblio"
|
||||
/>
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="oc in ocAsArray(ed.occurences)"
|
||||
:key="oc.id"
|
||||
>
|
||||
<!-- <li
|
||||
v-for="oc in ed.occurences"
|
||||
:key="oc.uuid"
|
||||
> -->
|
||||
<occurence :ed="ed" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<span
|
||||
v-if="content.occurences"
|
||||
class="tab"
|
||||
:class="{ active: tab === 'occurences' }"
|
||||
@click.prevent="onclickTab('occurences')"
|
||||
@keyup.enter="onclickTab('occurences')"
|
||||
>Occurences</span>
|
||||
<span
|
||||
v-if="content.attestedForms"
|
||||
class="tab"
|
||||
:class="{ active: tab === 'formes' }"
|
||||
@click.prevent="onclickTab('formes')"
|
||||
@keyup.enter="onclickTab('formes')"
|
||||
>Formes attestées</span>
|
||||
</div>
|
||||
<section v-if="content.occurences" v-show="tab === 'occurences'" class="occurences">
|
||||
<ul>
|
||||
<li
|
||||
v-for="ed in content.occurences"
|
||||
:key="ed.item"
|
||||
>
|
||||
<h3>
|
||||
<a
|
||||
:href="'/edition/'+ed.item"
|
||||
:uuid="ed.item"
|
||||
v-html="ed.biblio"
|
||||
/>
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="oc in ocAsArray(ed.occurences)"
|
||||
:key="oc.id"
|
||||
>
|
||||
<!-- <li
|
||||
v-for="oc in ed.occurences"
|
||||
:key="oc.uuid"
|
||||
> -->
|
||||
<occurence v-if="oc.title" :ed="ed" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="content.attestedForms" v-show="tab === 'formes'" class="attested-forms-occurences">
|
||||
<!-- <h3>Attested forms</h3> -->
|
||||
<ul>
|
||||
<li v-for="(af, i) in content.attestedForms" :key="i">
|
||||
<h3 class="form">{{ af.title }}</h3>
|
||||
<ul>
|
||||
<li v-for="(oc, j) in af.occurences" :key="j">
|
||||
<forme :form="af.title" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Occurence from './Occurence'
|
||||
import Forme from './Forme'
|
||||
|
||||
export default {
|
||||
name: 'IndexItemOcurrences',
|
||||
components: {
|
||||
Occurence
|
||||
Occurence,
|
||||
Forme
|
||||
},
|
||||
props: {
|
||||
content: Object
|
||||
},
|
||||
data: () => ({
|
||||
|
||||
tab: 'occurences'
|
||||
}),
|
||||
methods: {
|
||||
ocAsArray (oc) {
|
||||
// not necesseary anymore (KB #758)
|
||||
console.log('Array.isArray(oc)', Array.isArray(oc))
|
||||
return Array.isArray(oc) ? oc : [oc]
|
||||
},
|
||||
onclickTab (tab) {
|
||||
this.tab = tab
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
{{ oc.title }}
|
||||
{{ oc.title }} <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span>
|
||||
</a>
|
||||
</h4>
|
||||
<!-- <span
|
||||
|
||||
Reference in New Issue
Block a user