added content from /gdp/corpus

src/components/Content/CorpusItem.vue

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

src/pages/Corpus.vue

@@ -5,38 +5,43 @@
   >
     <h1>Corpus</h1>
     <span v-if="!items.length">Loading ...</span>
+    <div v-else class="item-list">
+      <ul>
+        <li v-for="item in items" v-bind:key="item.url">
+          <CorpusItem :item="item" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
 
-import { REST } from 'api/rest-axios'
+import CorpusItem from '../components/Content/CorpusItem'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'Corpus',
+  components: {
+    CorpusItem
+  },
   data: () => ({
-    items: []
+    // items: []
   }),
-  beforeCreate () {
-    // items/gdpLeMaire1685T01BodyFr01.003.016
-    // texts/gdpSauval1724
-    REST.get(`/corpus`, {})
-      .then(({ data }) => {
-        console.log('corpus REST: data', data)
-        // if(data.length){
-        //   commit('setItems',data)
-        //   // console.log('items.length', this.items.length);
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.loaded()
-        // }else{
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.complete()
-        // }
-      })
-      .catch((error) => {
-        console.warn('Issue with corpus', error)
-        Promise.reject(error)
-      })
+  computed: {
+    ...mapState({
+      items: state => state.Corpus.items
+    })
+  },
+  created () {
+    if (!this.items.length) {
+      this.getItems()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Corpus/getItems'
+    })
   }
 }
 </script>

src/store/index.js

@@ -1,11 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
+import Corpus from './modules/corpus'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
+    Corpus
     // search
   }
 })

src/store/modules/corpus.js

@@ -0,0 +1,35 @@
+import { REST } from 'api/rest-axios'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state: {
+    items: []
+  },
+
+  // getters
+  getters: {},
+
+  // mutations
+  mutations: {
+    setItems (state, content) {
+      state.items = state.items.concat(content)
+    }
+  },
+
+  // actions
+  actions: {
+    getItems ({ dispatch, commit, state }) {
+      return REST.get(`/corpus`, {})
+        .then(({ data }) => {
+          console.log('corpus REST: data', data)
+          commit('setItems', data.content)
+        })
+        .catch((error) => {
+          console.warn('Issue with corpus', error)
+          Promise.reject(error)
+        })
+    }
+  }
+}