From 4c2288cf971e6813eca2afb6f14e71a6f7a12f13 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Fri, 17 Jul 2020 12:59:48 +0200
Subject: [PATCH] added text preview in index item's occurences list

---
 assets/css/app.scss                           | 59 ++++++++++--
 .../Content/IndexItemOcurrences.vue           | 36 ++-----
 src/components/Content/Occurence.vue          | 95 +++++++++++++++++++
 src/pages/Nominum.vue                         |  5 +
 4 files changed, 159 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Content/Occurence.vue

diff --git a/assets/css/app.scss b/assets/css/app.scss
index d24f2bb..3f138fe 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -228,16 +228,63 @@ section[role="main-content"]{
     .occurences{
       >ul{
         >li{
-          padding:0 0 1em 0;
+          padding:0 0 2em 0;
           h3{
-            @include title2black;
-            padding:0 0 0.3em 0;
+            @include title1black;
+            padding:0 0 1em 0;
           }
           >ul{
             >li{
-              padding:0 0 0.3em 0;
-              h4{
-                @include title3black;
+              padding:0 0 1em 0;
+              section{
+                h4{
+                  @include title2black;
+                  display: inline-block;
+                }
+                span.open-close{
+                  cursor: pointer;
+                  display: inline-block;
+                  svg{
+                    transform: rotate(-90deg) scale(0.8);
+                    transition: transform 0.3s ease-in-out;
+                    path{
+                      fill:$bleuroi;
+                    }
+                  }
+                }
+                div.text{
+                  max-height: 0;
+                  transition: max-height 0.3s ease-in-out;
+                  overflow: hidden;
+                  box-sizing: content-box;
+                  p, h1, h2, h3, h4, h5, h6{
+                    margin: 0.5em 0 0 0;
+                  }
+                }
+                a.lire-plus{
+                  color: $bleuroi;
+                  opacity: 0;
+                  display: inline-block;
+                  height: 0;
+                  overflow: hidden;
+                  transition: height, opacity 0.3s ease-in-out;
+                }
+                &.opened{
+                  span.open-close{
+                    cursor: pointer;
+                    display: inline-block;
+                    svg{
+                      transform: scale(0.8) rotate(0);
+                    }
+                  }
+                  div.text{
+                    max-height:100px;
+                  }
+                  a.lire-plus{
+                    opacity: 1;
+                    height:1em;
+                  }
+                }
               }
             }
           }
diff --git a/src/components/Content/IndexItemOcurrences.vue b/src/components/Content/IndexItemOcurrences.vue
index ede3e87..8befc20 100644
--- a/src/components/Content/IndexItemOcurrences.vue
+++ b/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')
-          }
-        })
-      }
     }
   }
 }
diff --git a/src/components/Content/Occurence.vue b/src/components/Content/Occurence.vue
new file mode 100644
index 0000000..f3d8fe8
--- /dev/null
+++ b/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>
diff --git a/src/pages/Nominum.vue b/src/pages/Nominum.vue
index 6e582f7..357b50f 100644
--- a/src/pages/Nominum.vue
+++ b/src/pages/Nominum.vue
@@ -10,6 +10,11 @@
         {{ content.birthDate }}, {{ content.birthPlace }}<br>
         {{ content.deathDate }}, {{ content.deathPlace }}
       </p>
+      <!-- <ul v-if="content.attestedForms.lenght" class="attestedForms">
+        <li v-for="(item, index) in content.attestedForms" :key="index">
+
+        </li>
+      </ul> -->
     </template>
 
     <!-- default slot -->