enfrancais-app/src/pages/Library.vue

<template>
  <component-debug :component="this" class="view">
    <div class="py-3">
      <b-button @click="openText">
        add text 50
      </b-button>
    </div>

    <!-- BACKGROUND (mode) -->
    <component :is="mode" />

    <!-- FOREGROUND (texts) -->
    <section v-for="group in groups" :key="group.id" class="split-screen">
      <text-card :id="group.id" />
      <div>
        <text-card v-for="id in group.prod" :key="id" :id="id" />
      </div>
    </section>
  </component-debug>
</template>

<script>
import { CardList, CardMap, TreeMap } from './library'
import TextCard from '@/components/text/TextCard'


export default {
  name: 'Library',

  components: {
    CardList,
    CardMap,
    TreeMap,
    TextCard
  },

  metaInfo () {
    return {
      title: this.groups.length ? 'Bibliothèque - ' + this.groups[0].id : 'Bibliothèque',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  },

  props: {
    mode: { type: String, required: true },
    texts: { type: Array, required: true }
  },

  computed: {
    groups () {
      return this.texts.map(text => {
        const [id, ...prod] = text
        return { id, prod }
      })
    }
  },

  methods: {
    openText () {
      this.$router.push({
        query: {
          mode: this.mode,
          texts: [...this.texts, [50]]
        }
      })
    }
  }
}
</script>

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