|
@@ -1,5 +1,54 @@
|
|
|
<template>
|
|
|
- <component-debug :component="this" />
|
|
|
+ <b-card no-body tag="article" class="text-card">
|
|
|
+ <b-overlay class="h-100" :show="loading">
|
|
|
+ <div v-if="text" class="container-fill">
|
|
|
+ <b-card-header header-tag="header">
|
|
|
+ <h4>
|
|
|
+ <span>{{ text.authors | list }},</span>
|
|
|
+ <span>{{ text.title }},</span>
|
|
|
+ <span>{{ text.edition }}</span>
|
|
|
+ </h4>
|
|
|
+
|
|
|
+ <b-nav class="ml-auto flex-nowrap">
|
|
|
+ <b-nav-item v-for="prod in text.prods" :key="prod.id">
|
|
|
+ {{ prod.id }}
|
|
|
+ </b-nav-item>
|
|
|
+
|
|
|
+ <b-nav-item>
|
|
|
+ x
|
|
|
+ </b-nav-item>
|
|
|
+ </b-nav>
|
|
|
+ </b-card-header>
|
|
|
+
|
|
|
+ <b-card-body v-html="text.content" />
|
|
|
+
|
|
|
+ <b-card-footer>
|
|
|
+ <b-badge
|
|
|
+ v-for="tag in text.tags" :key="tag.id"
|
|
|
+ variant="dark" pill
|
|
|
+ >
|
|
|
+ {{ tag.name }}
|
|
|
+ </b-badge>
|
|
|
+
|
|
|
+ <b-button
|
|
|
+ v-if="text.bounces"
|
|
|
+ :id="'bounces-' + text.id"
|
|
|
+ >
|
|
|
+ Textes rebonds
|
|
|
+ </b-button>
|
|
|
+ <b-popover :target="'bounces-' + text.id" triggers="click" placement="top">
|
|
|
+ <div v-for="bounce in text.bounces" :key="bounce.id">
|
|
|
+ <h6>
|
|
|
+ <span>{{ bounce.authors | list }},</span>
|
|
|
+ <span>{{ bounce.title }},</span>
|
|
|
+ <span>{{ bounce.edition }}</span>
|
|
|
+ </h6>
|
|
|
+ </div>
|
|
|
+ </b-popover>
|
|
|
+ </b-card-footer>
|
|
|
+ </div>
|
|
|
+ </b-overlay>
|
|
|
+ </b-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -10,11 +59,35 @@ export default {
|
|
|
id: { type: Number, required: true }
|
|
|
},
|
|
|
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ text: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ list (arr) {
|
|
|
+ return arr.map(({ name }) => name).join(', ')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
created () {
|
|
|
- console.log('CREATED TEXTCARD', this.id)
|
|
|
+ this.$store.dispatch('GET_TEXT', { id: this.id }).then((text) => {
|
|
|
+ this.text = text
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+header {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|