enfrancais-app/src/components/text/TextCard.vue

<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">
              {{ prod.id }}
            </b-nav-item>

            <b-nav-item>
              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>