Browse Source

first display of search results

Bachir Soussi Chiadmi 4 years ago
parent
commit
d289d17b2e

+ 44 - 0
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>

+ 26 - 2
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>

+ 1 - 1
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)