started search form and store

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
-    'vue/max-attributes-per-line': 'off'
+    'vue/max-attributes-per-line': 'off',
+    'vue/no-v-html': 'off'
   }
 }

src/components/Content/CorpusItem.vue

@@ -10,7 +10,7 @@
         />
       </h1>
     </header>
-    <div class="text-quantity" v-html="item.textsQuantity"/>
+    <div class="text-quantity" v-html="item.textsQuantity" />
   </article>
 </template>
 

src/components/nav/Search.vue

@@ -1,14 +1,50 @@
 <template>
   <div id="search">
-    Search
+    <form class="" action="index.html" method="post">
+      <label for="keywords">
+        Search
+        <input
+          id="keywords"
+          v-model="keywords"
+          type="text"
+          placeholder="search"
+        >
+      </label>
+      <input
+        id="search"
+        type="submit"
+        name="search"
+        value="Search"
+        @click.prevent="submit"
+        @keyup.enter="submit"
+      >
+    </form>
   </div>
 </template>
+
 <script>
+
+import { mapState, mapActions } from 'vuex'
+
 export default {
   name: 'Search',
-  data: () => ({
+  // data: () => ({
-
+  //   keywords: ''
-  })
+  // }),
+  computed: {
+    ...mapState({
+      keywords: state => state.Search.keywords
+    })
+  },
+  methods: {
+    ...mapActions({
+      getResults: 'Search/getResults'
+    }),
+    submit () {
+      console.log('submited', this.keywords)
+      this.getResults()
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>

src/store/index.js

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

src/store/modules/search.js

@@ -0,0 +1,42 @@
+import { REST } from 'api/rest-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state: {
+    keywords: '',
+    results: []
+  },
+
+  // getters
+  getters: {},
+
+  // mutations
+  mutations: {
+    setResults (state, content) {
+      state.results = content
+    }
+  },
+
+  // actions
+  actions: {
+    getResults ({ dispatch, commit, state }) {
+      let params = {
+        search: state.keywords
+      }
+      // console.log('Search getResults params', params);
+      let q = qs.stringify(params)
+      return REST.post(`/search?` + q)
+        .then(({ data }) => {
+          console.log('search REST: data', data)
+          // commit('setResults', data.content)
+        })
+        .catch((error) => {
+          console.warn('Issue with search', error)
+          Promise.reject(error)
+        })
+    }
+  }
+}