- remove glyphicons- fonts

- add local open sans
- reactive solr search
- display flex for same height of columns
- add .babelrec
- add reactivesearch-vue components

resources/assets/js/search/App.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <!-- <div>{{ bar }}</div> -->
+    <!-- Search input section -->
+    <div class="row">
+      <div class="twelve columns">
+        <vs-input @search="onSearch"></vs-input>
+      </div>
+    </div>
+
+    <!-- Results section -->
+    <div class="results">
+      <div class="card" v-for="item in results" :key="item.id">
+        <img
+          v-if="item.thumb"
+          class="card-img-top"
+          :src="item.thumb"
+          :alt="item.title"
+          @error="error(item)"
+        />
+        <div class="card-body">
+          <h5 class="card-title">{{item.name}}</h5>
+          <!-- <p class="card-text" v-html="truncate(item.description || item.abstract, 50)"></p> -->
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="js">
+  import App from './app-class.js';
+  export default App;
+</script>
+
+<style lang="scss">
+#app {
+  color: #56b983;
+}
+</style>

resources/assets/js/search/app-class.js

@@ -0,0 +1,25 @@
+import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
+import VsInput from './components/vs-input.vue';
+import rdrApi from './search-results/search-api';
+
+@Component({
+  components: {   
+    VsInput
+  }
+})
+export default class App extends Vue {
+
+  results = [];
+  bar = 'bar';
+
+  async  onSearch(term) {
+    console.log(term);
+    this.results = await rdrApi.search(term);
+  }
+ 
+
+  mounted() {
+    console.log('Component mounted.')
+  }
+
+}

resources/assets/js/search/components/vs-input.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="sidebar-simplesearch">
+    <form method="GET" action="http://localhost:3002/search" accept-charset="UTF-8">
+      <input
+        class="search-input"
+        placeholder="Enter your search term..."
+        name="q"
+        type="text"
+        v-model="term"
+      />
+
+      <!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> -->
+      <button class="css-1gklxk5 ekqohx90">
+        <svg
+          alt="Search"
+          class="search-icon"
+          height="14"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 15 15"
+        >
+          <title>Search</title>
+          <path
+            d=" M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609, 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021, 0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338, 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z "
+          />
+        </svg>
+      </button>
+    </form>
+  </div>
+</template>
+
+
+<script lange="ts">
+import Vue from "vue";
+import { Component, Provide } from "vue-property-decorator";
+
+@Component({})
+export default class VsInput extends Vue {
+  term = "";
+  bar = "bar";
+  search() {
+    //console.log(this.term);
+    this.$emit("search", this.term);
+  }
+}
+</script>

resources/assets/js/search/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  el: '#search-input',
+  render: h => h(App)
+});

resources/assets/js/search/search-results/search-api.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export default {
+
+    async search (term) {
+        // solr endpoint
+        const host = 'http://voyagerdemo.com/';
+        const path = 'daily/solr/v0/select';
+        const fields = 'id,name:[name],thumb:[thumbURL],abstract,description'; // fields we want returned
+        const api = `${host}${path}?q=${term}&fl=${fields}&wt=json&rows=20`;
+       
+        const res = await axios.get(api);        
+        // const call = await fetch(api);
+        // const json = await res.json();
+        return res.data.response.docs;
+    }
+
+}