- axios config for cors

src/App.vue

@@ -17,7 +17,7 @@
         </a>
       </div> -->
 
-        <vs-input @search-change="onSearch" title="searching solr datasets" placeholder="Enter your search term..." />
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
 
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
             <!-- <div class="tabs is-centered">

src/api/axiosSetup.ts

@@ -1,7 +1,13 @@
 import axios, { AxiosRequestConfig, AxiosInstance, AxiosPromise } from "axios";
 
 const initialization = (config: AxiosRequestConfig): AxiosInstance => {
-    axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    //axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    delete axios.defaults.headers.common["X-Requested-With"];
+    // axios.defaults.withCredentials = true;
+    // const token = document.head.querySelector('meta[name="csrf-token"]');
+    // if (token) {
+    //     axios.defaults.headers.common["X-CSRF-TOKEN"] = token.innerHTML;
+    // }
     const axiosInstance = axios.create(config);
 
     /*

src/api/config.ts

@@ -4,7 +4,12 @@ import * as qs from "qs";
 export const axiosRequestConfiguration: AxiosRequestConfig = {
     responseType: "text",
     headers: {
-        "Content-Type": "application/json",
+        // "Content-Type": "text/plain",
+        "Content-Type": "application/x-www-form-urlencoded",
+        // "Content-Type": "application/x-www-form-urlencoded",
+        // credentials: "same-origin",
+        // "Access-Control-Allow-Credentials": "true",
+        // "Access-Control-Allow-Origin": "*",
     },
     paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
 };

src/components/vs-input/vs-input.ts

@@ -12,11 +12,11 @@ import { Dataset, Suggestion, SearchType } from "@/models/dataset";
     name: "VsInput",
 })
 export default class VsInput extends Vue {
-    @Prop()
-    private title!: string;
+    // @Prop()
+    // private title!: string;
 
     @Prop({ default: "Search" })
-    private placeholder!: string;
+    readonly placeholder!: string;
 
     private display = "";
     private value!: Suggestion;
@@ -31,6 +31,7 @@ export default class VsInput extends Vue {
     };
     private rdrAPI!: DatasetService;
     itemRefs!: Array<any>;
+    emits = ["filter"];
 
     setItemRef(el: any) {
         this.itemRefs.push(el);
@@ -111,10 +112,10 @@ export default class VsInput extends Vue {
         // this.value = null;
         this.results = [];
         this.error = "";
-        this.$emit("clear");
+        // this.$emit("clear");
     }
 
-    @Emit("search-change")
+    // @Emit("search-change")
     search(): string {
         this.results = [];
         // this.$emit("search", this.display)
@@ -202,7 +203,7 @@ export default class VsInput extends Vue {
 
     onEnter(): void {
         if (this.selectedIndex === null) {
-            this.$emit("nothingSelected", this.display);
+            // this.$emit("nothingSelected", this.display);
             return;
         }
         this.select(this.suggestions[this.selectedIndex]);
@@ -210,15 +211,16 @@ export default class VsInput extends Vue {
     }
 
     @Emit("search-change")
-    select(obj: Suggestion): Suggestion {
+    private select(obj: Suggestion): Suggestion {
         // if (!obj) {
         //     return;
         // }
         this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id
         // this.display = obj; // this.formatDisplay(obj)
         this.selectedDisplay = this.display;
-        // this.$emit("search", this.value);
+
         this.close();
+        // this.$emit("update", this.value);
         return this.value;
     }
 
@@ -245,6 +247,6 @@ export default class VsInput extends Vue {
         this.results = [];
         this.error = "";
         //this.removeEventListener()
-        this.$emit("close");
+        // this.$emit("close");
     }
 }

src/components/vs-input/vs-input.vue

@@ -1,51 +1,52 @@
 <template>
-    <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
-        <div class="field has-addons">
-            <div class="control is-expanded">
-                <input
-                    id="search_query"
-                    class="input is-medium"
-                    type="text"
-                    name="q"
-                    autocomplete="off"
-                    v-model="display"
-                    v-on:input="searchChanged"
-                    v-bind:title="title"
-                    v-bind:placeholder="placeholder"
-                    v-on:keydown.down="onArrowDown"
-                    v-on:keydown.up="onArrowUp"
-                    v-on:keydown.enter="onEnter"
-                    @keydown.tab="close"
-                    v-on:focus="focus"
-                />
-                <!-- <p>Message is: {{ display }}</p> -->
-            </div>
+    <div>
+        <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <input
+                        v-on:input="searchChanged"
+                        id="search_query"
+                        class="input is-medium"
+                        type="text"
+                        name="q"
+                        autocomplete="off"
+                        v-model="display"
+                        v-bind:placeholder="placeholder"
+                        v-on:keydown.down="onArrowDown"
+                        v-on:keydown.up="onArrowUp"
+                        v-on:keydown.enter="onEnter"
+                        @keydown.tab="close"
+                        v-on:focus="focus"
+                    />
+                    <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
+                </div>
 
-            <div class="control">
-                <button class="button input is-medium search-button-icon" @click="search()">
-                    <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
-                </button>
+                <div class="control">
+                    <button class="button input is-medium search-button-icon" @click="search()">
+                        <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
+                    </button>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="autocomplete-column is-half is-offset-one-quarter">
-        <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
-            <li class="loading" v-if="isLoading">Loading results...</li>
+        <div class="autocomplete-column is-half is-offset-one-quarter">
+            <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
+                <li class="loading" v-if="isLoading">Loading results...</li>
 
-            <li
-                v-else
-                v-for="(result, i) in suggestions"
-                :key="i"
-                class="autocomplete-result-item"
-                :class="{ 'is-active': isSelected(i) }"
-                @click.prevent="select(result)"
-                :ref="setItemRef"
-            >
-                <div class="small-label">
-                    <label>{{ result.value }} ({{ result.type }})</label>
-                </div>
-            </li>
-        </ul>
+                <li
+                    v-else
+                    v-for="(result, i) in suggestions"
+                    :key="i"
+                    class="autocomplete-result-item"
+                    :class="{ 'is-active': isSelected(i) }"
+                    @click.prevent="select(result)"
+                    :ref="setItemRef"
+                >
+                    <div class="small-label">
+                        <label>{{ result.value }} ({{ result.type }})</label>
+                    </div>
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
 

src/services/dataset.service.ts

@@ -14,6 +14,7 @@ export class DatasetService {
         // const host = 'https://www.tethys.at/';''
         const host = "https://" + solrHost;
         const path = "/solr/" + solrCore + "/select?";
+        // const base = "https://geomon.geologie.ac.at/52n-sos-webapp/api/features"; //host + path;
         const base = host + path;
 
         //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    publicPath: "/test" 
+ }