123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <template>
- <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>
- <template v-if="text.type === 'Textref'">
- <span>{{ text.authors | list }},</span>
- <span>{{ text.title }},</span>
- <span>{{ text.edition }}</span>
- </template>
- <template v-else>
- {{ text.title }}
- </template>
- </h4>
- <b-nav class="ml-auto flex-nowrap">
- <b-nav-item
- v-for="prod in text.prods" :key="prod.id"
- @click="$emit('open', prod.id)"
- >
- {{ prod.id }}
- </b-nav-item>
- <b-nav-item @click="$emit('close')">
- x
- </b-nav-item>
- </b-nav>
- </b-card-header>
- <b-card-body v-html="text.content" class="overflow-auto" />
- <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
- v-if="text.bounces"
- :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>
- export default {
- name: 'TextCard',
- props: {
- id: { type: Number, required: true }
- },
- data () {
- return {
- loading: true,
- text: null
- }
- },
- filters: {
- list (arr) {
- return arr.map(({ name }) => name).join(', ')
- }
- },
- created () {
- this.$store.dispatch('GET_TEXT', { id: this.id }).then((text) => {
- this.text = text
- this.loading = false
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- article {
- height: 100%;
- // max-height: 100%;
- }
- header {
- display: flex;
- h4 {
- display: flex;
- flex-direction: column;
- }
- }
- </style>
|