From 1e15c60fa3c57a7d23a5ee90f6113c9a0bf58bd5 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Tue, 21 Jul 2020 12:34:39 +0200
Subject: [PATCH] #781: click on edition title back to edition's front

---
 assets/css/app.scss                   | 22 +++++-----
 src/App.vue                           | 15 ++++++-
 src/components/Content/ResultItem.vue | 49 +++++++++++++---------
 src/pages/Edition.vue                 | 59 ++++++++++++++++++---------
 src/store/modules/search.js           |  2 +-
 5 files changed, 94 insertions(+), 53 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 0f4f151..5e1014a 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -582,24 +582,26 @@ footer[role="tools"]{
         }
       }
       article.result.item{
-        header{
           h1{
             @include title3black;
             font-weight: 600;
           }
           h2{
             @include title3black;
+            text-transform: none;
           }
-        }
-        .preview{
-          font-size: 0.882em;
-          margin:0;
-          code{
-            @include fontserif;
-            background-color: lighten(desaturate($rouge,20%), 20%);
-            padding:0 0.2em;
+          span{
+            font-size: 0.882em;
           }
-        }
+        // .preview{
+        //   font-size: 0.882em;
+        //   margin:0;
+        //   code{
+        //     @include fontserif;
+        //     background-color: lighten(desaturate($rouge,20%), 20%);
+        //     padding:0 0.2em;
+        //   }
+        // }
       }
     }
   }
diff --git a/src/App.vue b/src/App.vue
index 02a9b26..34c6d15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,7 @@ import History from './components/nav/History'
 import Results from './components/nav/Results'
 import Search from './components/nav/Search'
 import FooterTabs from './components/nav/FooterTabs'
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   metaInfo: {
@@ -55,7 +55,18 @@ export default {
   },
   computed: {
     ...mapState({
-      resultsOpened: state => state.Search.opened
+      resultsOpened: state => state.Search.opened,
+      editionslist: state => state.Corpus.editionslist
+    })
+  },
+  created () {
+    if (!this.editionslist.length) {
+      this.getCorpuses()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getCorpuses: 'Corpus/getCorpuses'
     })
   }
 }
diff --git a/src/components/Content/ResultItem.vue b/src/components/Content/ResultItem.vue
index 984b352..bcf7b35 100644
--- a/src/components/Content/ResultItem.vue
+++ b/src/components/Content/ResultItem.vue
@@ -1,30 +1,31 @@
 <template>
   <article class="result item">
-    <header>
-      <h1>
-        <a
-          :href="'/edition/'+result.textId+'/'+result.uuid"
-          @click.prevent="onclick"
-          @keyup.enter="onclick"
-          v-html="result.title[0]"
-        />
-      </h1>
-      <h2>
-        <a
-          :href="'/edition/'+result.textId+'/'+result.uuid"
-          @click.prevent="onclick"
-          @keyup.enter="onclick"
-          v-html="result.textId"
-        />
-      </h2>
-    </header>
-    <p v-if="preview" class="preview" v-html="preview" />
+    <h1>
+      <a
+        :href="'/edition/'+result.textId+'/'+result.uuid"
+        @click.prevent="onclick"
+        @keyup.enter="onclick"
+        v-html="result.title[0]"
+      />
+    </h1>
+    <h2>
+      <a
+        :href="'/edition/'+result.textId+'/'+result.uuid"
+        @click.prevent="onclick"
+        @keyup.enter="onclick"
+        v-html="editionTitle"
+      />
+    </h2>
+    <!-- <p v-if="preview" class="preview" v-html="preview" /> -->
+    <aside>
+      <span>Pagination</span> | <span>Nbr mots</span>
+    </aside>
   </article>
 </template>
 
 <script>
 
-import { mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'ResultItem',
@@ -37,6 +38,14 @@ export default {
   data: () => ({
     preview: ''
   }),
+  computed: {
+    ...mapState({
+      editionsbyuuid: state => state.Corpus.editionsbyuuid
+    }),
+    editionTitle () {
+      return this.editionsbyuuid[this.result.textId].title
+    }
+  },
   created () {
     if (this.result.extract) {
       const subString = this.result.extract.substr(0, 80)
diff --git a/src/pages/Edition.vue b/src/pages/Edition.vue
index f33cac1..1f45655 100644
--- a/src/pages/Edition.vue
+++ b/src/pages/Edition.vue
@@ -4,7 +4,10 @@
       <span>Loading ...</span>
     </template>
     <template #header>
-      <h1>{{ title }}</h1>
+      <h1>
+        <router-link :to="{ name:'edition', params: { id: editionid }}">{{ title }}</router-link>
+      </h1>
+
       <p v-if="meta">{{ meta.author }}</p>
       <aside
         v-if="indexitem"
@@ -134,19 +137,36 @@ export default {
     })
   },
   watch: {
-    textid: function (newid, oldid) {
+    $route (to, from) {
+      console.log('Edition Watcher $route', from, to)
+      if (to.params.textid) {
+        // change textid when route change
+        this.textid = to.params.textid
+      } else if (this.toc) {
+        // if no textid in new route (e.g. edition front)
+        // but we have toc
+        // get the first item
+        // will be replaced by front page of edition
+        this.textid = this.toc[0].children[1].uuid
+      } else {
+        this.textid = null
+      }
+    },
+    textid (newid, oldid) {
       console.log('textid watcher', this, oldid, newid)
       this.texts = []
       this.textsuuids = []
       this.pages = []
       this.pagesOtpions = []
-      this.getTextContent(newid)
+      if (newid) {
+        this.getTextContent(newid)
+      }
     },
-    textdata: function (newtxtdata, oldtxtdata) {
+    textdata (newtxtdata, oldtxtdata) {
       console.log('textdata watcher', oldtxtdata, newtxtdata)
       this.metainfotitle = `${this.title} ${newtxtdata.meta.title}`
     },
-    page_selected: function (newp, oldp) {
+    page_selected (newp, oldp) {
       console.log('page_selected watcher', oldp, newp)
       this.scrollToPage(newp)
     }
@@ -190,7 +210,7 @@ export default {
 
     // load editions list from Corpus Store if not exist
     if (!this.editionslist.length) {
-      this.getCorpuses()
+      // this.getCorpuses()
       // subsribe to store to get the editionbyuuid list
       // https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
       this.unsubscribe = this.$store.subscribe((mutation, state) => {
@@ -210,19 +230,19 @@ export default {
       this.textid = this.$route.params.textid
     }
   },
-  beforeRouteUpdate (to, from, next) {
-    // called when the route that renders this component has changed,
-    // but this component is reused in the new route.
-    // For example, for a route with dynamic params `/foo/:id`, when we
-    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
-    // will be reused, and this hook will be called when that happens.
-    // has access to `this` component instance.
-    // console.log('beforeRouteUpdate to', to)
-    if (to.params.textid) {
-      this.textid = to.params.textid
-    }
-    next()
-  },
+  // beforeRouteUpdate (to, from, next) {
+  //   // called when the route that renders this component has changed,
+  //   // but this component is reused in the new route.
+  //   // For example, for a route with dynamic params `/foo/:id`, when we
+  //   // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
+  //   // will be reused, and this hook will be called when that happens.
+  //   // has access to `this` component instance.
+  //   // console.log('beforeRouteUpdate to', to)
+  //   if (to.params.textid) {
+  //     this.textid = to.params.textid
+  //   }
+  //   next()
+  // },
   methods: {
     ...mapActions({
       getCorpuses: 'Corpus/getCorpuses'
@@ -246,7 +266,6 @@ export default {
         })
         .catch((error) => {
           console.warn('Issue with getTextContent', error)
-          console.warn('Bad edition uuid', this.$route.params.id, this.$route)
           Promise.reject(error)
           this.$router.replace({
             name: 'notfound',
diff --git a/src/store/modules/search.js b/src/store/modules/search.js
index d4418b1..7aace5e 100644
--- a/src/store/modules/search.js
+++ b/src/store/modules/search.js
@@ -125,7 +125,7 @@ export default {
       let q = qs.stringify(params)
       return REST.get(`${window.apipath}/search?` + q)
         .then(({ data }) => {
-          // console.log('search REST: data', data.meta.quantity.quantity, state.offset + state.limit, data)
+          console.log('search REST: data', data.meta.quantity.quantity, state.offset + state.limit, data)
           commit('setIsloading', false)
           commit('setOpened', true)
           commit('setResults', data.content)