From d289d17b2e0c10da7f90129fc1b4b8e543b24da5 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Wed, 18 Sep 2019 12:06:18 +0200
Subject: [PATCH] first display of search results

---
 src/components/Content/ResultItem.vue | 44 +++++++++++++++++++++++++++
 src/components/nav/Results.vue        | 28 +++++++++++++++--
 src/store/modules/search.js           |  2 +-
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Content/ResultItem.vue

diff --git a/src/components/Content/ResultItem.vue b/src/components/Content/ResultItem.vue
new file mode 100644
index 0000000..4479c1a
--- /dev/null
+++ b/src/components/Content/ResultItem.vue
@@ -0,0 +1,44 @@
+<template>
+  <article class="result item">
+    <header>
+      <h1>
+        <a
+          :href="result.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="result.textId"
+        />
+      </h1>
+    </header>
+    <div class="extract" v-html="result.extract" />
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'ResultItem',
+  props: {
+    result: {
+      type: Object,
+      required: true
+    }
+  },
+  data: () => ({
+
+  }),
+  methods: {
+    onclick () {
+      console.log('clicked on result item', this.result)
+      // this.$router.push({
+      //   name:`article`,
+      //   params: { alias:this.alias },
+      //   query: { uuid: this.item.uuid }
+      //   // meta: { uuid:this.item.uuid },
+      // })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/nav/Results.vue b/src/components/nav/Results.vue
index 8d49260..1225274 100644
--- a/src/components/nav/Results.vue
+++ b/src/components/nav/Results.vue
@@ -1,15 +1,39 @@
 <template>
   <div id="results">
-    Results
+    <h2>Resultats</h2>
+    <h3>{{ keys }}</h3>
+    <div class="results-list">
+      <ul v-if="results.length">
+        <li v-for="result in results" :key="result.uuid">
+          <ResultItem :result="result" />
+        </li>
+      </ul>
+    </div>
+
   </div>
 </template>
+
 <script>
+
+import ResultItem from '../Content/ResultItem'
+import { mapState } from 'vuex'
+
 export default {
   name: 'Results',
+  components: {
+    ResultItem
+  },
   data: () => ({
 
-  })
+  }),
+  computed: {
+    ...mapState({
+      keys: state => state.Search.keys,
+      results: state => state.Search.results
+    })
+  }
 }
 </script>
+
 <style lang="scss" scoped>
 </style>
diff --git a/src/store/modules/search.js b/src/store/modules/search.js
index b9bbdac..2e3b8f8 100644
--- a/src/store/modules/search.js
+++ b/src/store/modules/search.js
@@ -35,7 +35,7 @@ export default {
       return REST.get(`/search?` + q)
         .then(({ data }) => {
           console.log('search REST: data', data)
-          // commit('setResults', data.content)
+          commit('setResults', data.content)
         })
         .catch((error) => {
           console.warn('Issue with search', error)