nav is going on in header menu

assets/css/app.scss

@@ -14,6 +14,12 @@ body{
 #root{
 }
 
+.red{
+  background-color: red;
+  color:white;
+
+}
+
 header[role="banner"]{
   div.wrapper{
     display: grid;
@@ -116,7 +122,7 @@ section[role="main-content"]{
     }
   }
 
-  #corpus, .index{
+  #list-corpus, .index{
     >header>h1{
       font-family: "noto_sans";
       color: $rouge;
@@ -140,6 +146,20 @@ section[role="main-content"]{
   .index{
   }
 
+  #texts{
+    .text-title{
+      font-size: 1.323em;
+      color: $bleuroi;
+      font-weight: 400;
+      margin:0;
+    }
+    span.placeName,
+    span.objectName,
+    span.persName{
+      font-weight: 600;
+    }
+  }
+
   #text{
     .content{
       color: $bleuroi;

src/components/Content/CorpusItem.vue

@@ -10,7 +10,13 @@
         />
       </h1>
     </header>
-    <div class="text-quantity" v-html="item.textsQuantity" />
+    <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>
 
@@ -29,12 +35,10 @@ export default {
   methods: {
     onclick () {
       console.log('clicked on corpus item', this.item)
-      // this.$router.push({
+      this.$router.push({
-      //   name:`article`,
+        name: `corpus`,
-      //   params: { alias:this.alias },
+        params: { id: this.item.uuid }
-      //   query: { uuid: this.item.uuid }
+      })
-      //   // meta: { uuid:this.item.uuid },
-      // })
     }
   }
 }

src/components/Content/LocorumItem.vue

@@ -9,6 +9,7 @@
           v-html="item.title"
         />
       </h1>
+      <p>{{ item.type }}</p>
     </header>
   </article>
 </template>
@@ -28,10 +29,11 @@ export default {
   methods: {
     onclick () {
       console.log('clicked on locorum item', this.item)
-      // this.$router.push({
+      this.$router.push({
-      //   name: `locorumItem`,
+        name: `locorum`,
-      //   query: { id: this.item.uuid }
+        params: { id: this.item.uuid }
-      // })
+        // query: { id: this.item.uuid }
+      })
     }
   }
 }

src/components/Content/NominumItem.vue

@@ -32,8 +32,8 @@ export default {
     onclick () {
       console.log('clicked on nominum item', this.item)
       this.$router.push({
-        name: `nominumItem`,
+        name: `nominum`,
-        query: { id: this.item.uuid }
+        params: { id: this.item.uuid }
       })
     }
   }

src/components/Content/OperumItem.vue

@@ -2,12 +2,18 @@
   <article class="operum item">
     <header>
       <h1>
+
         <a
+          v-if="item.uuid"
           :href="item.url"
           @click.prevent="onclick"
           @keyup.enter="onclick"
-          v-html="item.title"
+        >
-        />
+          {{ item.title }}
+        </a>
+        <span v-else class="red">
+          {{ item.title }}
+        </span>
       </h1>
     </header>
   </article>
@@ -28,10 +34,14 @@ export default {
   methods: {
     onclick () {
       console.log('clicked on Operum item', this.item)
-      this.$router.push({
+      if (this.item.uuid) {
-        name: `operuumItem`,
+        this.$router.push({
-        query: { id: this.item.uuid }
+          name: `operum`,
-      })
+          params: { id: this.item.uuid }
+        })
+      } else {
+        console.warn('no uuid', this.item)
+      }
     }
   }
 }

src/pages/Corpus.vue

@@ -1,52 +1,80 @@
 <template>
   <MainContentLayout id="corpus">
-    <template v-slot:header>
+    <template v-if="!content" v-slot:header>
-      <h1>Corpus</h1>
+      <span>Loading ...</span>
-      <span v-if="!items.length">Loading ...</span>
     </template>
-
+    <template v-if="content" v-slot:header>
-    <ul v-if="items.length" class="item-list">
+      <h1>{{ meta.author }}</h1>
-      <li v-for="item in items" :key="item.url">
+      <h2>{{ meta.quantity }}</h2>
-        <CorpusItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
     </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: {
+  beforeCreate () {
-    ...mapState({
+    console.log('corpus this.$route', this.$route)
-      items: state => state.Corpus.items
+    REST.get(`/corpus/` + this.$route.params.id, {})
-    })
+      .then(({ data }) => {
-  },
+        console.log('corpus REST: data', data)
-  created () {
+        this.meta = data.meta
-    if (!this.items.length) {
+        if (data.content) {
-      this.getItems()
+          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({
+    onclick (e) {
-      getItems: 'Corpus/getItems'
+      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 v-slot:nav />
-    </template>
   </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>
+      <h1 v-if="content">{{ content.title }}</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <p v-if="content">{{ content.type }}</p>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
+    <template v-slot:nav />
-      <li v-for="item in items" :key="item.url">
-        <LocorumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
   </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) {
+        if (data.content) {
-          this.items = 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>
+      <h1 v-if="content">{{ content.title }}</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
+    <template v-slot:nav />
-      <li v-for="item in items" :key="item.url">
-        <NominumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
   </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
+    console.log('nominum this.$route', this.$route)
-    // texts/gdpSauval1724
+    REST.get(`/indexNominum/` + this.$route.params.id, {})
-    REST.get(`/indexNominum`, {})
       .then(({ data }) => {
         console.log('nominum REST: data', data)
-        if (data.content.length) {
+        if (data.content) {
-          this.items = 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>
+      <h1 v-if="content">{{ content.title }}</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <span v-if="!content">Loading ...</span>
     </template>
 
-    <ul v-if="items.length" class="item-list">
+    <template v-slot:nav />
-      <li v-for="item in items" :key="item.url">
-        <OperumItem :item="item" />
-      </li>
-    </ul>
-
-    <template v-slot:nav>
-    </template>
   </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) {
+        if (data.content) {
-          this.items = 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>

src/router/index.js

@@ -3,12 +3,15 @@ import Router from 'vue-router'
 
 import Home from 'pages/Home'
 import Item from 'pages/Item'
+import ListCorpus from 'pages/ListCorpus'
 import Corpus from 'pages/Corpus'
+import Texts from 'pages/Texts'
+import IndexNominum from 'pages/IndexNominum'
+import IndexLocorum from 'pages/IndexLocorum'
+import IndexOperum from 'pages/IndexOperum'
 import Nominum from 'pages/Nominum'
-// import NominumItem from 'pages/NominumItem'
 import Locorum from 'pages/Locorum'
 import Operum from 'pages/Operum'
-// import OperumItem from 'pages/OperumItem'
 import Bibliographie from 'pages/Bibliographie'
 
 Vue.use(Router)
@@ -26,35 +29,50 @@ const routes = [
     props: true
   },
   {
-    name: 'corpus',
+    name: 'listcorpus',
     path: '/corpus',
+    component: ListCorpus
+  },
+  {
+    name: 'corpus',
+    path: '/corpus/:id',
     component: Corpus
   },
   {
-    name: 'nominum',
+    name: 'texts',
+    path: '/texts/:id',
+    component: Texts
+  },
+  {
+    name: 'indexNominum',
     path: '/nominum',
+    component: IndexNominum
+  },
+  {
+    name: 'nominum',
+    path: '/nominum/:id',
     component: Nominum
   },
-  // {
+  {
-  //   name: 'nominumItem',
+    name: 'indexLocorum',
-  //   path: '/nominum/:id',
+    path: '/locorum',
-  //   component: NominumItem
+    component: IndexLocorum
-  // },
+  },
   {
     name: 'locorum',
-    path: '/locorum',
+    path: '/locorum/:id',
     component: Locorum
   },
   {
-    name: 'operum',
+    name: 'indexOperum',
     path: '/operum',
+    component: IndexOperum
+  },
+  {
+    name: 'operum',
+    path: '/operum/:id',
     component: Operum
   },
-  // {
-  //   name: 'operumItem',
-  //   path: '/operum/:id',
-  //   component: OperumItem
-  // },
   {
     name: 'bibliographie',
     path: '/bibliographie',