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 mb-n2">
        <b-badge
          v-for="tag in node.tags" :key="tag.id"
          variant="dark" pill class="mr-2 mb-2"
        >
          {{ tag.name }}
        </b-badge>
      </div>

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

        <b-popover
          :target="'siblings-' + node.id"
          triggers="focus" placement="top" boundary="viewport"
          custom-class="popover-siblings"
        >
          <ul>
            <li v-for="sibling in node.siblings" :key="sibling.id">
              <node-view-title
                :node="sibling"
                link edition block
                @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
              />
              <node-view-body
                v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
              />
              <div class="tags mb-n2 mt-2" v-if="sibling.tags">
                <b-badge
                  v-for="tag in sibling.tags" :key="tag.id"
                  variant="dark" pill class="mr-2 mb-2"
                >
                  {{ tag.name }}
                </b-badge>
              </div>
            </li>
          </ul>
        </b-popover>
      </div>
    </div>

    <div v-if="mode === 'card' && preview" class="mt-2">
      <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
        {{ $t('text.read') }}
      </b-button>
    </div>
  </div>
</template>

<script>
import { toCommaList } from '@/helpers/common'
import { getRelation } from '@/store/utils'
import { NodeViewTitle, NodeViewBody } from '@/components/nodes'


export default {
  name: 'NodeViewFooter',

  components: {
    NodeViewTitle,
    NodeViewBody
  },

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

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

  methods: {
    toCommaList,

    onOpenSibling (parentId, popoverBtnId) {
      this.$root.$emit('bv::hide::popover', popoverBtnId)
      this.$parent.$emit('open-node', { parentId })
    },

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

<style lang="scss">
.node-view-footer {
  margin-top: auto;
  font-family: $font-family-base;
  font-size: 0.9rem;

  @include media-breakpoint-up($size-bp) {
    font-size: 1rem;
  }

  .btn-read {
    pointer-events: auto;
  }

  .btn {
    font-size: inherit;
  }
}

.popover-siblings {
  background-color: $white;
  border: $line;
  max-width: 350px;

  .popover-body {
    max-height: 70vh;
    overflow: auto;
    color: $black;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 2rem;

        &:last-of-type {
          margin-bottom: 18px;
        }
      }

      h6 {
        margin: 0;
      }
    }

    .edition {
      font-size: .7rem;
    }

    .node-view-body {
      font-size: 1rem;
      padding: 0;

      .media-container {
        display: none;
      }
    }

    .badge {
      font-size: 0.875rem;
    }
  }
}
</style>