enfrancais-app/src/components/nodes/NodeViewFooter.vue

<template>
  <div
    class="node-view-footer" :class="'node-view-footer-' + mode"
  >
    <div class="d-flex w-100">
      <div class="tags">
        <b-badge
          v-for="tag in node.tags" :key="tag.id"
          variant="dark" pill
        >
          {{ tag.name }}
        </b-badge>
      </div>

      <div v-if="mode === 'view' && node.siblings">
        <b-button :id="'siblings-' + node.id">
          {{ $t('siblings') }}
        </b-button>

        <b-popover
          :target="'siblings-' + node.id" triggers="hover" placement="top"
        >
          <div v-for="sibling in node.siblings" :key="sibling.id">
            <h6>
              <a @click.prevent="onOpen(sibling.id)" href="#">
                <div class="">
                  {{ toCommaList(sibling.authors) }},
                </div>
                <div class="">
                  {{ sibling.title }},
                </div>
                <div class="">
                  {{ sibling.edition ? sibling.edition.name : sibling.edition }}
                </div>
              </a>
            </h6>
          </div>
        </b-popover>
      </div>

      <div v-if="mode === 'card'">
        <b-button @click="onOpen(node.id)" variant="outline-dark">
          {{ $t('text.read') }}
        </b-button>
      </div>
    </div>
  </div>
</template>

<script>
import { toCommaList } from '@/helpers/common'


export default {
  name: 'NodeViewFooter',

  props: {
    node: { type: Object, required: true },
    type: { type: String, required: true },
    mode: { type: String, required: true }
  },

  computed: {
    authors () {
      const authors = this.node.authors
      if (!authors) return 'Pas d\'auteur⋅rices'
      return authors.map(({ name }) => name).join(', ')
    }
  },

  methods: {
    toCommaList,

    onOpen (parentId) {
      this.$parent.$emit('open-node', { parentId })
    }
  }
}
</script>

<style lang="scss" scoped>
.node-view-footer {
  margin-top: auto;
  font-family: $font-family-base;
}
</style>