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" pills>
            <b-nav-item
              v-for="child in text.children" :key="child.id"
              @click="$emit('open', id, child.id)"
              :active="children.includes(child.id)"
            >
              {{ child.id }}
            </b-nav-item>

            <b-button-close @click="$emit('close', id)" />
          </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.siblings"
            :id="'siblings-' + text.id"
          >
            {{ $t('siblings') }}
          </b-button>
          <b-popover
            v-if="text.siblings"
            :target="'siblings-' + text.id" triggers="click" placement="top"
          >
            <div v-for="sibling in text.siblings" :key="sibling.id">
              <h6>
                <span>{{ sibling.authors | list }},</span>
                <span>{{ sibling.title }},</span>
                <span>{{ sibling.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 },
    children: { type: Array, default: null }
  },

  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>