rebuilded corpus navigation with toc

src/components/Content/CorpusItem.vue

@@ -1,48 +0,0 @@
-<template>
-  <article class="corpus item">
-    <header>
-      <h1>
-        <a
-          :href="item.url"
-          @click.prevent="onclick"
-          @keyup.enter="onclick"
-          v-html="item.title"
-        />
-      </h1>
-    </header>
-    <section>
-      <p class="author">{{ item.author }}</p>
-      <p class="date">{{ item.date }}</p>
-      <p class="editions-quantity">{{ item.editionsQuantity }}</p>
-      <p class="text-quantity">{{ item.textsQuantity }}</p>
-      <div class="edition" v-html="item.editions" />
-    </section>
-  </article>
-</template>
-
-<script>
-export default {
-  name: 'CorpusItem',
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  data: () => ({
-
-  }),
-  methods: {
-    onclick () {
-      console.log('clicked on corpus item', this.item)
-      this.$router.push({
-        name: `corpus`,
-        params: { id: this.item.uuid }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/Content/EdText.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="text">
+    <h1>{{ textdata.content.title }}</h1>
+    <div class="tei" v-html="textdata.content.tei" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EdText',
+  props: {
+    textdata: Object
+  },
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Content/TocItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <section
+    :uuid="item.uuid"
+    :level="level"
+  >
+    <component
+      :is="titlelevel"
+      v-if="title"
+      class="toc-title"
+      :uuid="item.uuid"
+    >
+      <a
+        :href="'/edition/'+editionid+'/'+item.uuid"
+        :uuid="item.uuid"
+        @click.prevent="onclick"
+        @keyup.enter="onclick"
+      >
+        {{ title }}
+      </a>
+    </component>
+    <ul v-if="children.length">
+      <li v-for="child in children" :key="child.uuid">
+        <TocItem :item="child" :level="nextLevel" :editionid="editionid" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+
+import TocItem from './TocItem'
+
+export default {
+  name: 'TocItem',
+  components: {
+    TocItem
+  },
+  props: {
+    item: Object,
+    level: Number,
+    editionid: String
+  },
+  // data: () => ({
+  //
+  // })
+  computed: {
+    children () {
+      // check if children exists and if it is an array
+      // this shoudn't be necessary
+      return this.item.children ? Array.isArray(this.item.children) ? this.item.children : [this.item.children] : []
+    },
+    title () {
+      // this shoudn't be necessary
+      if (this.item.title && Array.isArray(this.item.title)) {
+        return this.item.title.join(' ')
+      } else {
+        return this.item.title
+      }
+    },
+    titlelevel () {
+      return 'h' + this.level
+    },
+    nextLevel () {
+      return this.level + 1
+    }
+  },
+  // beforeCreate () {
+  //   console.log('editionid', this.editionid)
+  // },
+  methods: {
+    onclick (e) {
+      console.log('clicked on toc text', this.editionid, e)
+      this.$router.push({
+        name: `editiontoctext`,
+        params: {
+          id: this.editionid,
+          textid: e.target.getAttribute('uuid')
+        }
+      })
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+</style>