nav is going on in header menu

src/pages/Corpus.vue

@@ -1,52 +1,80 @@
 <template>
   <MainContentLayout id="corpus">
-    <template v-slot:header>
-      <h1>Corpus</h1>
-      <span v-if="!items.length">Loading ...</span>
+    <template v-if="!content" v-slot:header>
+      <span>Loading ...</span>
     </template>
-
-    <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.url">
-        <CorpusItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
+    <template v-if="content" v-slot:header>
+      <h1>{{ meta.author }}</h1>
+      <h2>{{ meta.quantity }}</h2>
     </template>
+    <section
+      v-for="item in content"
+      :key="item.uuid"
+    >
+      <h3>
+        <a
+          :uuid="item.uuid"
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+        >
+          {{ item.title }}
+        </a>
+      </h3>
+      <p class="date">{{ item.date }}</p>
+      <p class="format"><span>format:</span> {{ item.format }}</p>
+      <p class="itemsNb"><span>itemsNb:</span> {{ item.itemsNb }}</p>
+      <p class="otherEditions"><span>Other Editions:</span> {{ item.otherEditions }}</p>
+      <p class="biblio">{{ item.biblio }}</p>
+    </section>
+    <template v-slot:nav />
   </MainContentLayout>
 </template>
 
 <script>
 
-import CorpusItem from '../components/Content/CorpusItem'
+import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'Corpus',
   components: {
-    CorpusItem,
     MainContentLayout
   },
   data: () => ({
-    // items: []
+    content: null,
+    meta: null
   }),
-  computed: {
-    ...mapState({
-      items: state => state.Corpus.items
-    })
-  },
-  created () {
-    if (!this.items.length) {
-      this.getItems()
-    }
+  beforeCreate () {
+    console.log('corpus this.$route', this.$route)
+    REST.get(`/corpus/` + this.$route.params.id, {})
+      .then(({ data }) => {
+        console.log('corpus REST: data', data)
+        this.meta = data.meta
+        if (data.content) {
+          if (Array.isArray(data.content)) {
+            this.content = data.content
+          } else {
+            this.content = [data.content]
+          }
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with locorum', error)
+        Promise.reject(error)
+      })
   },
   methods: {
-    ...mapActions({
-      getItems: 'Corpus/getItems'
-    })
+    onclick (e) {
+      console.log('clicked on corpus', e)
+      this.$router.push({
+        name: `texts`,
+        params: { id: e.target.getAttribute('uuid') }
+      })
+    }
   }
 }
 </script>
+
 <style lang="scss" scoped>
 </style>

src/pages/IndexLocorum.vue

@@ -0,0 +1,50 @@
+<template>
+  <MainContentLayout id="index-locorum" class="index">
+    <template v-slot:header>
+      <h1>Lieux</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.uuid">
+        <LocorumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav />
+  </MainContentLayout>
+</template>
+
+<script>
+
+import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+import LocorumItem from '../components/Content/LocorumItem'
+
+export default {
+  name: 'IndexLocorum',
+  components: {
+    LocorumItem,
+    MainContentLayout
+  },
+  data: () => ({
+    items: []
+  }),
+  beforeCreate () {
+    REST.get(`/indexLocorum`, {})
+      .then(({ data }) => {
+        console.log('index locorum REST: data', data)
+        if (data.content.length) {
+          this.items = data.content
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with index locorum', error)
+        Promise.reject(error)
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/IndexNominum.vue

@@ -0,0 +1,53 @@
+<template>
+  <MainContentLayout id="index-nominum" class="index">
+    <template v-slot:header>
+      <h1>Personnes</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.url">
+        <NominumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav />
+  </MainContentLayout>
+</template>
+
+<script>
+
+import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+import NominumItem from '../components/Content/NominumItem'
+
+export default {
+  name: 'IndexNominum',
+  components: {
+    NominumItem,
+    MainContentLayout
+  },
+  data: () => ({
+    items: []
+
+  }),
+  beforeCreate () {
+    // items/gdpLeMaire1685T01BodyFr01.003.016
+    // texts/gdpSauval1724
+    REST.get(`/indexNominum`, {})
+      .then(({ data }) => {
+        console.log('index nominum REST: data', data)
+        if (data.content.length) {
+          this.items = data.content
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with index nominum', error)
+        Promise.reject(error)
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/IndexOperum.vue

@@ -0,0 +1,50 @@
+<template>
+  <MainContentLayout id="index-operum" class="index">
+    <template v-slot:header>
+      <h1>Œuvres</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.uuid">
+        <OperumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav />
+  </MainContentLayout>
+</template>
+
+<script>
+
+import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+import OperumItem from '../components/Content/OperumItem'
+
+export default {
+  name: 'IndexOperum',
+  components: {
+    OperumItem,
+    MainContentLayout
+  },
+  data: () => ({
+    items: []
+  }),
+  beforeCreate () {
+    REST.get(`/indexOperum`, {})
+      .then(({ data }) => {
+        console.log('index operum REST: data', data)
+        if (data.content.length) {
+          this.items = data.content
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with index operum', error)
+        Promise.reject(error)
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Item.vue

@@ -7,10 +7,9 @@
       <span v-if="!loaded">Loading...</span>
     </template>
 
-    <div class="content" v-html="item.tei"/>
+    <div class="content" v-html="item.tei" />
 
-    <template v-slot:nav>
-    </template>
+    <template v-slot:nav />
   </MainContentLayout>
 </template>
 

src/pages/ListCorpus.vue

@@ -0,0 +1,51 @@
+<template>
+  <MainContentLayout id="list-corpus">
+    <template v-slot:header>
+      <h1>Corpus</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.uuid">
+        <CorpusItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav />
+  </MainContentLayout>
+</template>
+
+<script>
+
+import CorpusItem from '../components/Content/CorpusItem'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'ListCorpus',
+  components: {
+    CorpusItem,
+    MainContentLayout
+  },
+  data: () => ({
+    // items: []
+  }),
+  computed: {
+    ...mapState({
+      items: state => state.Corpus.items
+    })
+  },
+  created () {
+    if (!this.items.length) {
+      this.getItems()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Corpus/getItems'
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/pages/Locorum.vue

@@ -1,18 +1,12 @@
 <template>
-  <MainContentLayout id="locorum" class="index">
+  <MainContentLayout id="locorum">
     <template v-slot:header>
-      <h1>Lieux</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <h1 v-if="content">{{ content.title }}</h1>
+      <p v-if="content">{{ content.type }}</p>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.url">
-        <LocorumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
+    <template v-slot:nav />
   </MainContentLayout>
 </template>
 
@@ -20,23 +14,22 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import LocorumItem from '../components/Content/LocorumItem'
 
 export default {
   name: 'Locorum',
   components: {
-    LocorumItem,
     MainContentLayout
   },
   data: () => ({
-    items: []
+    content: null
   }),
   beforeCreate () {
-    REST.get(`/indexLocorum`, {})
+    console.log('locorum this.$route', this.$route)
+    REST.get(`/indexLocorum/` + this.$route.params.id, {})
       .then(({ data }) => {
         console.log('locorum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content
+        if (data.content) {
+          this.content = data.content
         }
       })
       .catch((error) => {

src/pages/Nominum.vue

@@ -1,18 +1,11 @@
 <template>
-  <MainContentLayout id="nominum" class="index">
+  <MainContentLayout id="nominum">
     <template v-slot:header>
-      <h1>Personnes</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <h1 v-if="content">{{ content.title }}</h1>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.url">
-        <NominumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
+    <template v-slot:nav />
   </MainContentLayout>
 </template>
 
@@ -20,26 +13,22 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import NominumItem from '../components/Content/NominumItem'
 
 export default {
   name: 'Nominum',
   components: {
-    NominumItem,
     MainContentLayout
   },
   data: () => ({
-    items: []
-
+    content: null
   }),
   beforeCreate () {
-    // items/gdpLeMaire1685T01BodyFr01.003.016
-    // texts/gdpSauval1724
-    REST.get(`/indexNominum`, {})
+    console.log('nominum this.$route', this.$route)
+    REST.get(`/indexNominum/` + this.$route.params.id, {})
       .then(({ data }) => {
         console.log('nominum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content
+        if (data.content) {
+          this.content = data.content
         }
       })
       .catch((error) => {

src/pages/Operum.vue

@@ -1,18 +1,11 @@
 <template>
-  <MainContentLayout id="operum" class="index">
+  <MainContentLayout id="operum">
     <template v-slot:header>
-      <h1>Œuvres</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <h1 v-if="content">{{ content.title }}</h1>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.url">
-        <OperumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
+    <template v-slot:nav />
   </MainContentLayout>
 </template>
 
@@ -20,23 +13,22 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import OperumItem from '../components/Content/OperumItem'
 
 export default {
   name: 'Operum',
   components: {
-    OperumItem,
     MainContentLayout
   },
   data: () => ({
-    items: []
+    content: null
   }),
   beforeCreate () {
-    REST.get(`/indexOperum`, {})
+    console.log('operum this.$route', this.$route)
+    REST.get(`/indexOperum/` + this.$route.params.id, {})
       .then(({ data }) => {
         console.log('operum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content
+        if (data.content) {
+          this.content = data.content
         }
       })
       .catch((error) => {

src/pages/Texts.vue

@@ -0,0 +1,57 @@
+<template>
+  <MainContentLayout id="texts">
+    <template v-if="!content" v-slot:header>
+      <span>Loading ...</span>
+    </template>
+    <template v-if="meta" v-slot:header>
+      <h1>{{ meta.title }}</h1>
+    </template>
+    <section
+      v-for="item in content"
+      :key="item.uuid"
+    >
+      <h3 class="text-title">{{ item.title }}</h3>
+      <div class="tei" v-html="item.tei" />
+    </section>
+    <template v-slot:nav />
+  </MainContentLayout>
+</template>
+
+<script>
+
+import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+
+export default {
+  name: 'Texts',
+  components: {
+    MainContentLayout
+  },
+  data: () => ({
+    content: null,
+    meta: null
+  }),
+  beforeCreate () {
+    console.log('texts this.$route', this.$route)
+    REST.get(`/texts/` + this.$route.params.id, {})
+      .then(({ data }) => {
+        console.log('texts REST: data', data)
+        this.meta = data.meta
+        if (data.content) {
+          if (Array.isArray(data.content)) {
+            this.content = data.content
+          } else {
+            this.content = [data.content]
+          }
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with locorum', error)
+        Promise.reject(error)
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>