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

<template>
  <b-card
    no-body tag="article"
    class="text-card rounded-0"
    :class="text ? 'text-card-'+ text.variant : ''"
  >
    <b-overlay class="h-100" :show="loading">
      <div v-if="text" class="container-fill">
        <b-card-header header-tag="header" :header-bg-variant="null">
          <div class="d-flex w-100">
            <h4 class="mr-auto">
              <template v-if="text.type === 'Textref'">
                <div class="text-authors">
                  {{ toCommaList(text.authors) }},
                </div>
              </template>
              <template v-else>
                {{ $t('variants.' + text.variant) }}
              </template>
            </h4>
            <slot name="header-extra" :text="text" />
          </div>

          <div v-if="text.type === 'Textref'">
            <div class="text-title font-weight-normal">
              <span v-if="text.preTitle" v-html="text.field_titre_regular + ','" />
              <span v-html="(text.title || '<em>pas de titre ital</em>') + ','" />
            </div>
            <div class="text-edition">
              {{ text.edition ? text.edition.name : text.edition }}
            </div>
          </div>
        </b-card-header>

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

          <div v-if="text.type === 'Textref'" class="debug">
            <div class="">
              'lien_reference': {{ text.lien_reference }}
            </div>
          </div>
          <div class="debug" v-if="text.notes">
            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_NODE', { id: this.id }).then((text) => {
      this.text = text
      this.loading = false
    })
  }
}
</script>

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

.card-header {
  background-color: transparent;

  h4 {
    margin: 0;
    font-size: 2rem;
  }
}

.card-header,
.card-body {
  font-family: $font-family-text;
  font-size: 2rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@each $color, $value in $theme-colors {
  .text-card-#{$color} {
    background-color: lighten($value, 3.25%);

    &.text-card-sub header {
      color: darken($value, 32%);
    }
  }
}

.text-card-main {
  border-right: 2px solid $black;

  .card-header,
  .card-body {
    padding: 1.625rem 1.625rem 1.625rem 2.5rem;
  }

  .card-header,
  .card-header h4,
  .card-body {
    font-size: 2.625rem;
  }
}

.text-card-sub {
  border-left: none;

  .card-header {
    padding: 1.625rem 1.875rem;
    font-size: 1.5rem !important;

    h4 {
      margin: 0;
    }
  }

  .card-body {
    padding: 0 1.875rem 1.625rem;
    font-size: 1.5rem !important;
  }
}

.ellipsis {
  max-height: 10rem;
  overflow: hidden;
}

::v-deep img {
  font-size: .5rem;
}

.debug {
  font-family: monospace;
  font-size: 1rem;
  margin: 2rem 0;
}
</style>