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

<template>
  <text-card-base v-bind="$attrs">
    <template v-slot:header-extra="{ text }">
      <b-nav class="ml-auto flex-nowrap" pills>
        <template v-if="children">
          <b-nav-item
            v-for="child in text.children" :key="child.id"
            @click="onChildOpen($event, text.id, child.id)"
            :active="children.includes(child.id)"
          >
            {{ child.id }}
          </b-nav-item>
        </template>

        <b-nav-item>
          <b-button-close @click="onSelfClose($event, text.id)" />
        </b-nav-item>
      </b-nav>
    </template>

    <template v-slot:footer-extra="{ text, toCommaList }">
      <b-button
        v-if="text.siblings"
        :id="'siblings-' + text.id"
        size="sm"
      >
        {{ $t('siblings') }}
      </b-button>
      <b-popover
        v-if="text.siblings"
        :target="'siblings-' + text.id" triggers="hover" placement="top"
      >
        <div v-for="sibling in text.siblings" :key="sibling.id">
          <h6 @click="onSiblingOpen($event, sibling.id)" class="clickable">
            <span class="text-authors d-block">{{ toCommaList(sibling.authors) }},</span>
            <span class="text-title d-block">{{ sibling.title }},</span>
            <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
          </h6>
        </div>
      </b-popover>
    </template>
  </text-card-base>
</template>

<script>
import TextCardBase from './TextCardBase'


export default {
  name: 'TextCard',

  components: {
    TextCardBase
  },

  props: {
    children: { type: Array, default: null }
  },

  methods: {
    onChildOpen (_, id, childId) {
      this.$emit('open', id, childId)
    },

    onSiblingOpen (_, id) {
      this.$emit('open', id)
    },

    onSelfClose (e, id) {
      // stop the click event propagation to avoid other listeners to interact with a soon to be deleted element.
      e.stopPropagation()
      this.$emit('close', id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>