history is functionnal and with state transition

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/Item.vue

@@ -1,63 +0,0 @@
-<template>
-  <transition name="fade" appear>
-    <span v-if="!loaded">Loading...</span>
-    <article v-else class="item">
-      <header>
-        <h1>
-          {{ item.title }}
-        </h1>
-      </header>
-      <section v-html="item.tei" />
-    </article>
-  </transition>
-</template>
-
-<script>
-
-import { REST } from 'api/rest-axios'
-
-export default {
-  name: 'Item',
-  props: {
-    uuid: {
-      type: String,
-      required: true
-    }
-  },
-  data: () => ({
-    loaded: false,
-    item: {}
-  }),
-  watch: {
-    '$route' (to, from) {
-      console.log('item route change')
-      this.loadItem()
-    }
-  },
-  created () {
-    console.log('Item created', this.uuid)
-    this.loadItem()
-  },
-  updated () {
-    console.log('item updated', this.uuid)
-  },
-  methods: {
-    loadItem () {
-      this.loaded = false
-      REST.get(`/items/` + this.uuid, {})
-        .then(({ data }) => {
-          console.log('item REST: data', data)
-          this.item = data.content
-          this.loaded = true
-        })
-        .catch((error) => {
-          console.warn('Issue with item', error)
-          Promise.reject(error)
-        })
-    }
-  }
-}
-</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({
-        name: `item`,
-        params: { uuid: this.result.uuid }
-      })
+      this.addHistoryItem(this.result)
+      // this.$router.push({
+      //   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">
-    <header class="col-1">
-      <h2>Historique de consultation</h2>
-    </header>
-    <section class="col-10 history-list">
-      <div class="wrapper">
-        <ul>
-          <li>item</li>
-        </ul>
-      </div>
-    </section>
-    <nav class="col-1 tools">
-      <span
-        class="mdi mdi-close"
-        title="close"
-        @click.prevent="close"
-        @keydown.enter.prevent="close"
-      />
-    </nav>
-  </div>
+  <transition name="accordeon" appear>
+    <div
+      v-if="opened"
+      id="history"
+      class="row"
+    >
+      <header class="col-1">
+        <h2>Historique de consultation</h2>
+      </header>
+      <section class="col-10 history-list">
+        <div class="wrapper">
+          <ul v-if="items.length">
+            <li v-for="item in items" :key="item.uuid" class="item">
+              <HistoryItem :item="item" />
+            </li>
+          </ul>
+        </div>
+      </section>
+      <nav class="col-1 tools">
+        <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">