added text preview in index item's occurences list

src/components/Content/IndexItemOcurrences.vue

@@ -24,17 +24,7 @@
               v-for="oc in ed.occurences"
               :key="oc.uuid"
             > -->
-            <h4>
-              <a
-                :href="'/edition/'+ed.item+'/'+oc.uuid"
-                :uuid="oc.uuid"
-                :eduuid="ed.item"
-                @click.prevent="onclick"
-                @keyup.enter="onclick"
-              >
-                {{ oc.title }}
-              </a>
-            </h4>
+            <occurence :ed="ed" :oc="oc" />
           </li>
         </ul>
       </li>
@@ -43,8 +33,13 @@
 </template>
 
 <script>
+import Occurence from './Occurence'
+
 export default {
   name: 'IndexItemOcurrences',
+  components: {
+    Occurence
+  },
   props: {
     content: Object
   },
@@ -56,25 +51,6 @@ export default {
       // not necesseary anymore (KB #758)
       console.log('Array.isArray(oc)', Array.isArray(oc))
       return Array.isArray(oc) ? oc : [oc]
-    },
-    onclick (e) {
-      console.log('clicked on text occurence', e)
-      if (e.target.getAttribute('eduuid')) {
-        this.$router.push({
-          name: `editiontext`,
-          params: {
-            id: e.target.getAttribute('eduuid'),
-            textid: e.target.getAttribute('uuid')
-          }
-        })
-      } else {
-        this.$router.push({
-          name: `edition`,
-          params: {
-            id: e.target.getAttribute('uuid')
-          }
-        })
-      }
     }
   }
 }

src/components/Content/Occurence.vue

@@ -0,0 +1,95 @@
+<template>
+  <section :class="{opened: isopened}">
+    <h4>
+      <a
+        :href="'/edition/'+ed.item+'/'+oc.uuid"
+        :uuid="oc.uuid"
+        :eduuid="ed.item"
+        @click.prevent="onGoToText"
+        @keyup.enter="onGoToText"
+      >
+        {{ oc.title }}
+      </a>
+    </h4>
+    <span
+      class="open-close"
+      @click.prevent="onOpenPreview"
+      @keyup.enter="onOpenPreview"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
+        <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" />
+      </svg>
+    </span>
+    <div v-if="content" class="text" v-html="tei" />
+    <a
+      v-if="content"
+      class="lire-plus"
+      :href="'/edition/'+ed.item+'/'+oc.uuid"
+      :uuid="oc.uuid"
+      :eduuid="ed.item"
+      @click.prevent="onGoToText"
+      @keyup.enter="onGoToText"
+    >
+      lire plus
+    </a>
+  </section>
+</template>
+<script>
+
+import { REST } from 'api/rest-axios'
+
+export default {
+  name: 'Occurence',
+  props: {
+    ed: Object,
+    oc: Object
+  },
+  data: () => ({
+    content: null,
+    isopened: false,
+    tei: ''
+  }),
+  created () {
+    console.log('occurence beforeCreate')
+    REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
+      .then(({ data }) => {
+        console.log('occurence text REST: data', data)
+        if (data.content) {
+          this.content = data.content
+          const subString = this.content.tei.substr(0, 500)
+          this.tei = subString.substr(0, subString.lastIndexOf(' ')) + ' &hellip;'
+        }
+      })
+      .catch((error) => {
+        console.warn('Issue with nominum', error)
+        Promise.reject(error)
+      })
+  },
+  methods: {
+    onGoToText (e) {
+      console.log('clicked on text occurence', e)
+      if (e.target.getAttribute('eduuid')) {
+        this.$router.push({
+          name: `editiontext`,
+          params: {
+            id: e.target.getAttribute('eduuid'),
+            textid: e.target.getAttribute('uuid')
+          }
+        })
+      } else {
+        this.$router.push({
+          name: `edition`,
+          params: {
+            id: e.target.getAttribute('uuid')
+          }
+        })
+      }
+    },
+    onOpenPreview (e) {
+      this.isopened = !this.isopened
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>