enfrancais-app/src/components/text/TextCardBase.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 class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
              <span class="text-title d-block">{{ text.title }},</span>
              <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
            </template>
            <template v-else>
              {{ text.families[0].name }}
            </template>
          </h4>

          <slot name="header-extra" :text="text" />
        </b-card-header>

        <b-card-body :class="ellipsis ? 'ellipsis' : 'overflow-auto'">
          <div class="text-content" v-html="text.content" />

          <div class="text-notes mt-5" v-if="text.notes">
            <div v-for="note in text.notes" :key="note.number" class="mb-4 border border-dark p-2">
              <p class="m-0">
                <span class="font-weight-bold">Numéro de note :</span> {{ note.number || 'aucun ?' }}
              </p>

              <p class="m-0 font-weight-bold">
                Contenu :
              </p>
              <div v-if="note.content" v-html="note.content" />
              <div v-else>
                Aucun ?
              </div>

              <p class="m-0 font-weight-bold">
                Liens :
              </p>
              <ul v-if="note.links">
                <li v-for="link in note.links" :key="link.id" class="">
                  <span class="text-authors">{{ toCommaList(link.authors) }}</span>,
                  <span class="text-title">{{ link.title }}</span> —
                  <span>{{ link.families[0].name }}</span>
                  (id: {{ link.id }})
                </li>
              </ul>
              <div v-else>
                Aucun
              </div>
            </div>
          </div>
        </b-card-body>

        <b-card-footer>
          <div class="tags">
            <b-badge
              v-for="tag in text.tags" :key="tag.id"
              variant="dark" pill
            >
              {{ tag.name }}
            </b-badge>
          </div>

          <slot name="footer-extra" v-bind="{ text, toCommaList }" />
        </b-card-footer>
      </div>
    </b-overlay>
  </b-card>
</template>

<script>
export default {
  name: 'TextCardBase',

  props: {
    id: { type: Number, required: true },
    textData: { type: Object, default: null },
    ellipsis: { type: Boolean, default: false }
  },

  data () {
    return {
      loading: this.textData === null,
      text: this.textData
    }
  },

  methods: {
    toCommaList (arr) {
      // FIXME TEMP some texts doesn't have authors
      try {
        return arr.map(({ name }) => name).join(', ')
      } catch {
        return arr
      }
    }
  },

  created () {
    if (this.text !== null) return
    this.$store.dispatch('GET_TEXT', { id: this.id }).then((text) => {
      this.text = text
      this.loading = false
    })
  }
}
</script>

<style lang="scss" scoped>
article {
  height: 100%;
}

header {
  display: flex;

  h4 {
    display: flex;
    flex-direction: column;
  }
}

.ellipsis {
  max-height: 10rem;
  overflow: hidden;
}
</style>