diff client/src/application/Topbar.vue @ 776:bb3558142b18

client: add backendrequest to search * Add request to backend for search. The output goes to the console.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 26 Sep 2018 12:43:44 +0200
parents 22c3acea700d
children 8ba1be486833
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Wed Sep 26 11:57:30 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 26 12:43:44 2018 +0200
@@ -86,10 +86,12 @@
 
 
 <script>
-import debounce from 'lodash.debounce'
+import debounce from "lodash.debounce";
 
+import { displayError } from "../application/lib/errors.js";
+import { HTTP } from "../application/lib/http";
+import Identify from "../layers/Identify";
 import Layers from "../layers/Layers";
-import Identify from "../layers/Identify";
 
 export default {
   name: "topbar",
@@ -106,13 +108,13 @@
     };
   },
   computed: {
-    searchIndicator: function () {
+    searchIndicator: function() {
       if (this.isSearching) {
-        return '⟳';
+        return "⟳";
       } else if (this.searchQueryIsDirty) {
-        return '';
+        return "";
       } else {
-        return '✓';
+        return "✓";
       }
     },
     searchbarContainerStyle() {
@@ -128,17 +130,38 @@
   watch: {
     searchQuery: function() {
       this.searchQueryIsDirty = true;
-      this.doSearch();
+      this.triggerSearch();
     }
   },
   methods: {
-    doSearch: debounce(function() {
+    doSearch() {
       this.isCalculating = true;
-      console.log("Would start search of", this.searchQuery);
+      console.log("Starting search of", this.searchQuery);
+
+      HTTP.post(
+        "/search",
+        { string: this.searchQuery },
+        {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        }
+      )
+        .then(response => {
+          console.log("got:", response.data);
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+
       this.isCalculating = false;
       this.searchQueryIsDirty = false;
-      }, 500
-    ),
+    },
     toggleSearchbar() {
       this.searchbarCollapsed = !this.searchbarCollapsed;
     },
@@ -147,7 +170,10 @@
     },
     splitScreen() {
       this.$store.commit("application/toggleSplitScreen");
-    }
+    },
+    triggerSearch: debounce(function() {
+      this.doSearch();
+    }, 500)
   }
 };
 </script>