history is functionnal and with state transition

assets/css/app.scss

@@ -61,6 +61,57 @@ footer[role="tools"]{
     z-index: 8;
     background-color: $or;
     padding:1.2em $side-padding;
+    max-height: $list-item-h;
+    @include accordeon-transition($list-item-h);
+    >header{
+
+    }
+    .history-list{
+      overflow-x: hidden;
+      .wrapper{
+        height:100%;
+        // hidding the scrollbar
+        overflow-y: auto;
+        width:calc(100% + 1em);
+        padding-right: 1em;
+        >ul{
+          padding:0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      }
+      li.item{
+        box-sizing: border-box;
+        flex-basis: percentage(2/$default_sum);
+        height: $list-item-h;
+        overflow: hidden;
+        padding-bottom: 1em;
+        padding-right: 0.7em;
+        article{
+          max-height: 100%;
+          overflow: hidden;
+        }
+      }
+      article.history.item{
+        header{
+          h1{
+            font-size: 0.882em;
+            font-weight: normal;
+            margin:0 0 0.5em 0;
+          }
+        }
+        .extract{
+          p{
+            font-size: 0.882em;
+            margin:0;
+          }
+          code{
+            background-color: lighten(desaturate($rouge,20%), 20%);
+          }
+        }
+      }
+    }
   }
   #results{
     z-index: 9;
@@ -69,56 +120,61 @@ footer[role="tools"]{
     max-height: $list-item-h * 3;
     @include accordeon-transition($list-item-h * 3);
     >header{
+      .search-keys{
+        font-size: 0.756em;
+        font-weight: 500;
+      }
       .results-count{
         font-size: 0.756em;
       }
     }
     .results-list{
-    overflow-x: hidden;
+      overflow-x: hidden;
-    .wrapper{
+      .wrapper{
-      height:100%;
+        height:100%;
-      overflow-y: auto;
+        // hidding the scrollbar
-      width:calc(100% + 1em);
+        overflow-y: auto;
-      padding-right: 1em;
+        width:calc(100% + 1em);
-      >ul{
+        padding-right: 1em;
-        padding:0;
+        >ul{
-        display: flex;
+          padding:0;
-        flex-direction: row;
+          display: flex;
-        flex-wrap: wrap;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
       }
-    }
+      li.result{
-    li.result{
+        box-sizing: border-box;
-      box-sizing: border-box;
+        flex-basis: percentage(2/$default_sum);
-      flex-basis: percentage(2/$default_sum);
+        height: $list-item-h;
-      height: $list-item-h;
-      overflow: hidden;
-      padding-bottom: 1em;
-      padding-right: 0.7em;
-      article{
-        max-height: 100%;
         overflow: hidden;
-      }
+        padding-bottom: 1em;
-    }
+        padding-right: 0.7em;
-    article.result.item{
+        article{
-      header{
+          max-height: 100%;
-        h1{
+          overflow: hidden;
-          font-size: 0.882em;
-          font-weight: normal;
-          margin:0 0 0.5em 0;
         }
       }
-      .extract{
+      article.result.item{
-        p{
+        header{
-          font-size: 0.882em;
+          h1{
-          margin:0;
+            font-size: 0.882em;
+            font-weight: normal;
+            margin:0 0 0.5em 0;
+          }
         }
-        code{
+        .extract{
-          background-color: lighten(desaturate($rouge,20%), 20%);
+          p{
+            font-size: 0.882em;
+            margin:0;
+          }
+          code{
+            background-color: lighten(desaturate($rouge,20%), 20%);
+          }
         }
       }
     }
   }
-  }
   #footer-bottom{
     z-index: 10;
     padding:0 $side-padding;

src/App.vue

@@ -6,7 +6,7 @@
           class="site-title"
           tabindex="0"
         >
-          Les Guides de Paris
+          <router-link :to="{ name:'home' }">Les Guides de Paris</router-link>
         </h1>
         <HeaderMenu />
       </div>
@@ -58,7 +58,7 @@ export default {
 <style lang="scss" scoped>
 
 .container{
-  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  // font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   max-width: 1200px;
 
 }

src/components/Content/HistoryItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <article class="history item">
+    <header>
+      <h1>
+        <a
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="item.textId"
+        />
+      </h1>
+    </header>
+    <div class="extract" v-html="item.extract" />
+  </article>
+</template>
+
+<script>
+
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'HistoryItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    ...mapActions({
+      navigateToHistoryItem: 'History/navigateToItem'
+    }),
+    onclick () {
+      console.log('clicked on history item', this.item)
+      this.navigateToHistoryItem(this.item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Content/ResultItem.vue

@@ -15,6 +15,9 @@
 </template>
 
 <script>
+
+import { mapActions } from 'vuex'
+
 export default {
   name: 'ResultItem',
   props: {
@@ -23,16 +26,17 @@ export default {
       required: true
     }
   },
-  data: () => ({
-
-  }),
   methods: {
+    ...mapActions({
+      addHistoryItem: 'History/addItem'
+    }),
     onclick () {
       console.log('clicked on result item', this.result)
-      this.$router.push({
+      this.addHistoryItem(this.result)
-        name: `item`,
+      // this.$router.push({
-        params: { uuid: this.result.uuid }
+      //   name: `item`,
-      })
+      //   params: { uuid: this.result.uuid }
+      // })
     }
   }
 }

src/components/nav/FooterTabs.vue

@@ -3,7 +3,16 @@
     <ul>
       <li class="history">
         <div class="wrapper">
-          <span>Historique de consultation</span>
+          <transition name="fade" appear>
+            <span
+              v-if="historyItems.length && !historyOpened"
+              title="Ouvrir l'historique'"
+              @click.prevent="openHistory"
+              @keydown.enter.prevent="openHistory"
+            >
+              Historique de consultation
+            </span>
+          </transition>
         </div>
       </li>
       <li class="results">
@@ -35,13 +44,21 @@ export default {
       get () { return this.$store.state.Search.opened },
       set (value) { this.$store.commit('Search/setOpened', value) }
     },
+    historyOpened: {
+      get () { return this.$store.state.History.opened },
+      set (value) { this.$store.commit('History/setOpened', value) }
+    },
     ...mapState({
-      resultsItems: state => state.Search.results
+      resultsItems: state => state.Search.results,
+      historyItems: state => state.History.items
     })
   },
   methods: {
     openResults () {
       this.resultsOpened = true
+    },
+    openHistory () {
+      this.historyOpened = true
     }
   }
 }

src/components/nav/History.vue

@@ -1,35 +1,57 @@
 <template>
-  <div id="history" class="row">
+  <transition name="accordeon" appear>
-    <header class="col-1">
+    <div
-      <h2>Historique de consultation</h2>
+      v-if="opened"
-    </header>
+      id="history"
-    <section class="col-10 history-list">
+      class="row"
-      <div class="wrapper">
+    >
-        <ul>
+      <header class="col-1">
-          <li>item</li>
+        <h2>Historique de consultation</h2>
-        </ul>
+      </header>
-      </div>
+      <section class="col-10 history-list">
-    </section>
+        <div class="wrapper">
-    <nav class="col-1 tools">
+          <ul v-if="items.length">
-      <span
+            <li v-for="item in items" :key="item.uuid" class="item">
-        class="mdi mdi-close"
+              <HistoryItem :item="item" />
-        title="close"
+            </li>
-        @click.prevent="close"
+          </ul>
-        @keydown.enter.prevent="close"
+        </div>
-      />
+      </section>
-    </nav>
+      <nav class="col-1 tools">
-  </div>
+        <span
+          class="mdi mdi-close"
+          title="close"
+          @click.prevent="close"
+          @keydown.enter.prevent="close"
+        />
+      </nav>
+    </div>
+  </transition>
 </template>
+
 <script>
+
+import HistoryItem from '../Content/HistoryItem'
+import { mapState } from 'vuex'
+
 export default {
   name: 'History',
-  data: () => ({
+  components: {
-
+    HistoryItem
-  }),
+  },
+  computed: {
+    opened: {
+      get () { return this.$store.state.History.opened },
+      set (value) { this.$store.commit('History/setOpened', value) }
+    },
+    ...mapState({
+      items: state => state.History.items
+    })
+  },
   methods: {
     close () {
       console.log('clicked on close history')
-      // this.opened = false
+      this.opened = false
     }
   }
 }

src/components/nav/Results.vue

@@ -7,6 +7,7 @@
     >
       <header class="col-1">
         <h2>Resultats</h2>
+        <span class="search-keys">{{ keys }}</span><br />
         <span class="results-count">{{ results.length }} resultat(s)</span>
       </header>
       <section class="col-10 results-list">

src/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import router from './router'
 import store from './store'
+// import { sync } from 'vuex-router-sync'
 import Meta from 'vue-meta'
 import App from './App'
 
@@ -10,6 +11,8 @@ import 'assets/css/app.scss'
 
 Vue.use(Meta)
 
+// sync(store, router) // done. Returns an unsync callback fn
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -2,13 +2,13 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Home from 'pages/Home'
-import Item from 'components/Content/Item'
+import Item from 'pages/Item'
 import Corpus from 'pages/Corpus'
 import Nominum from 'pages/Nominum'
-import NominumItem from 'components/Content/NominumItem'
+// import NominumItem from 'pages/NominumItem'
 import Locorum from 'pages/Locorum'
 import Operum from 'pages/Operum'
-import OperumItem from 'components/Content/OperumItem'
+// import OperumItem from 'pages/OperumItem'
 import Bibliographie from 'pages/Bibliographie'
 
 Vue.use(Router)
@@ -21,7 +21,7 @@ const routes = [
   },
   {
     name: 'item',
-    path: '/items/:uuid',
+    path: '/babar/:uuid',
     component: Item,
     props: true
   },
@@ -35,11 +35,11 @@ const routes = [
     path: '/nominum',
     component: Nominum
   },
-  {
+  // {
-    name: 'nominumItem',
+  //   name: 'nominumItem',
-    path: '/nominum/:id',
+  //   path: '/nominum/:id',
-    component: NominumItem
+  //   component: NominumItem
-  },
+  // },
   {
     name: 'locorum',
     path: '/locorum',
@@ -50,11 +50,11 @@ const routes = [
     path: '/operum',
     component: Operum
   },
-  {
+  // {
-    name: 'operumItem',
+  //   name: 'operumItem',
-    path: '/operum/:id',
+  //   path: '/operum/:id',
-    component: OperumItem
+  //   component: OperumItem
-  },
+  // },
   {
     name: 'bibliographie',
     path: '/bibliographie',

src/store/index.js

@@ -3,11 +3,13 @@ import Vuex from 'vuex'
 
 import Corpus from './modules/corpus'
 import Search from './modules/search'
+import History from './modules/history'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
     Corpus,
-    Search
+    Search,
+    History
   }
 })

src/store/modules/history.js

@@ -0,0 +1,46 @@
+// import { REST } from 'api/rest-axios'
+import router from '../../router'
+
+export default {
+  namespaced: true,
+  router,
+  // initial state
+  state: {
+    items: [],
+    opened: false
+  },
+
+  // getters
+  getters: {},
+
+  // mutations
+  mutations: {
+    addItem (state, item) {
+      state.items.push(item)
+    },
+    setOpened (state, opened) {
+      state.opened = opened
+    }
+  },
+
+  // actions
+  actions: {
+    addItem ({ dispatch, commit, state }, item) {
+      console.log('history add item', item, router)
+      commit('addItem', item)
+      commit('setOpened', true)
+      router.push({
+        name: `item`,
+        params: { uuid: item.uuid }
+      })
+    },
+    navigateToItem ({ dispatch, commit, state }, item) {
+      console.log('history navigate to item', item, router)
+      // commit('addItem', item)
+      router.push({
+        name: `item`,
+        params: { uuid: item.uuid }
+      })
+    }
+  }
+}