request()

src/assets/datacite/testLogo.vue

@@ -1,8 +1,8 @@
 <template>
     <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
     <svg
-        version="1.1"
         id="Layer_1"
+        version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"

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

@@ -2,12 +2,12 @@
 // import debounce from 'lodash/debounce';
 // import { DatasetService } from "../../services/dataset.service";
 import DatasetService from "../../services/dataset.service";
-import { SolrSettings } from "@/models/solr";
+//import { SolrSettings } from "@/models/solr";
 // import { ref } from "vue";
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
 // import { Prop, Emit } from "vue-property-decorator";
 import { Dataset, Suggestion, SearchType } from "@/models/dataset";
-import { SOLR_HOST, SOLR_CORE } from "@/constants";
+//import { SOLR_HOST, SOLR_CORE } from "@/constants";
 
 @Component({
     name: "VsInput",
@@ -30,12 +30,12 @@ export default class VsInput extends Vue {
     private loading = false;
     private selectedIndex = -1;
     // private selectedDisplay = "";
-    private solr: SolrSettings = {
+    /*private solr: SolrSettings = {
         core: SOLR_CORE, //"rdr_data", // SOLR.core;
         host: SOLR_HOST, //"tethys.at",
         // core: "test_data", // SOLR.core;
         // host: "repository.geologie.ac.at",
-    };
+    };*/
     // private rdrAPI!: DatasetService;
     itemRefs!: Array<Element>;
     emits = ["filter"];
@@ -153,13 +153,26 @@ export default class VsInput extends Vue {
     }
 
     private request(): void {
-        DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe({
+        const searchUrl = 'https://tethysbackend/opensearch.xml'; //i would guess ?
-            next: (res: Dataset[]) => this.dataHandler(res),
+        const searchTerms = this.display;
-            error: (error: string) => this.errorHandler(error),
+        const searchQuery = searchUrl.replace('{searchTerms}', searchTerms);
-            complete: () => (this.loading = false),
+    
-        });
+        fetch(searchQuery)
+            .then((response) => response.text())
+            .then((xml) => {
+                // need XML parser library
+                const data = parseResponse(xml); 
+                this.dataHandler(data);
+            })
+            .catch((error) => {
+                this.errorHandler(error);
+            })
+            .finally(() => {
+                this.loading = false;
+            });
     }
     
+
     private dataHandler(datasets: Dataset[]): void {
         this.results = datasets;
         // this.$emit("search", this.display);

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

@@ -1,45 +1,33 @@
 <template>
     <div class="is-multiline">
-        <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <div class="search-box mx-auto">
                 <div class="field has-addons main-search-from-bg">
                     <div class="control is-expanded">
                         <input
                             id="search_query"
-                            v-model="display"
+                            v-model="searchTerm"
                             class="input is-medium"
                             type="text"
                             name="q"
                             autocomplete="off"
                             v-bind:placeholder="placeholder"
                             @input="searchChanged"
-                            @keydown.down="onArrowDown"
-                            @keydown.up="onArrowUp"
-                            @keydown.enter="onEnter"
-                            @keydown.tab="close"
-                            @focus="focus"
                         />
-                        <!-- <p>Display 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" /> -->
                             <i class="fas fa-search text-white"></i>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- <div class="column is-half is-offset-one-quarter"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <ul v-show="showResults" class="autocomplete-results pure-u-23-24">
                 <li v-if="isLoading" class="loading">Loading results...</li>
-
                 <li
-                    v-for="(result, i) in suggestions"
+                    v-for="(result, i) in searchResults"
                     v-else
                     v-bind:key="i"
                     v-bind:ref="setItemRef"
@@ -48,7 +36,7 @@
                     @click.prevent="select(result)"
                 >
                     <div class="small-label">
-                        <label>{{ result.value }} ({{ result.type }})</label>
+                        <label>{{ result.title }}</label>
                     </div>
                 </li>
             </ul>
@@ -56,6 +44,22 @@
     </div>
 </template>
 
+<script lang="ts">
+export default {
+    data() {
+        return {
+            searchTerm: "",
+            searchResults: [],
+        };
+    },
+    methods: {
+        searchChanged() {
+            //...
+        },
+    },
+};
+</script>
+
 <script lang="ts">
 import VsInput from "./vs-input";
 export default VsInput;

src/constants.ts

@@ -2,19 +2,16 @@
 // declare const EDGE_URL: string;
 declare const APP_URL: string;
 declare const VUE_APP_PORTAL: string;
-declare const SOLR_HOST: string;
+
-declare const SOLR_CORE: string;
 
 // const _EDGE_URL = EDGE_URL;
 // const _POINT_URL = POINT_URL;
 const _APP_URL = APP_URL;
 const _VUE_APP_PORTAL = VUE_APP_PORTAL;
-const _SOLR_HOST = SOLR_HOST;
+
-const _SOLR_CORE = SOLR_CORE;
 
 // export { _EDGE_URL as EDGE_URL };
 // export { _POINT_URL as POINT_URL };
 export { _APP_URL as APP_URL };
 export { _VUE_APP_PORTAL as VUE_APP_PORTAL };
-export { _SOLR_HOST as SOLR_HOST };
+
-export { _SOLR_CORE as SOLR_CORE };

src/models/solr.ts

@@ -1,8 +1,3 @@
-export interface SolrSettings {
-    core: string;
-    host: string;
-}
-
 export class ActiveFilterCategories {
     // count: number;
     // language!: Array<string>;

vue.config.js

@@ -2,24 +2,24 @@
 const webpack = require("webpack");
 // const { defineConfig } = require("@vue/cli-service");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
-const { VueLoaderPlugin } = require('vue-loader');
+const { VueLoaderPlugin } = require("vue-loader");
 
 module.exports = {
     publicPath: "/",
-    chainWebpack: config => {
+    chainWebpack: (config) => {
         const vueRule = config.module.rule("vue");
         vueRule.uses.clear();
         // const tsRule = config.module.rule("ts");
         // tsRule.uses.clear();
-    //       .plugin('define')
+        //       .plugin('define')
-    //       .tap(args => {
+        //       .tap(args => {
-    //           args[0] = {
+        //           args[0] = {
-    //              ...args[0],
+        //              ...args[0],
-    //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
+        //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
-    //              // other stuff
+        //              // other stuff
-    //           }
+        //           }
-    //           return args
+        //           return args
-    //        })
+        //        })
     },
     pages: {
         index: {
@@ -37,14 +37,14 @@ module.exports = {
             rules: [
                 {
                     test: /\.vue$/,
-                    loader: 'vue-loader',
+                    loader: "vue-loader",
                     options: {
                         // loaders: {
                         // 	ts: 'ts-loader',
                         // },
-                        cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
+                        cacheDirectory: "C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader",
-                        cacheIdentifier: '39baf1b4',
+                        cacheIdentifier: "39baf1b4",
-                        babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
+                        babelParserPlugins: ["jsx", "classProperties", "decorators-legacy"],
                     },
                 },
                 // {
@@ -76,17 +76,17 @@ module.exports = {
         },
         resolve: {
             alias: {
-                vue$: 'vue/dist/vue.runtime.esm-bundler.js'
+                vue$: "vue/dist/vue.runtime.esm-bundler.js",
             },
-            extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
+            extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json", ".wasm"],
         },
         plugins: [
             // new VueLoaderPlugin(),
             new webpack.DefinePlugin({
                 APP_URL: JSON.stringify(process.env.APP_URL),
                 VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),
-                SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
+                //SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
-                SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
+                //SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
             }),
             new NodePolyfillPlugin(),
         ],