Allows users to conduct global search via the URL

src/dispatch/static/dispatch/src/components/AppToolbar.vue

@@ -163,6 +163,7 @@ export default {
   name: "AppToolbar",
   data: () => ({
     organizations: [],
+    query: "",
   }),
   components: {
     OrganizationCreateEditDialog,
@@ -171,6 +172,7 @@ export default {
     queryString: {
       set(query) {
         this.$store.dispatch("search/setQuery", query)
+        this.query = query
       },
       get() {
         return this.$store.state.query.q
@@ -185,8 +187,9 @@ export default {
       Util.toggleFullScreen()
     },
     performSearch() {
+      let query = this.query
       this.$store.dispatch("search/getResults", this.$store.state.query)
-      this.$router.push({ name: "GlobalSearch" })
+      this.$router.push({ name: "ResultList", query: { q: query } })
     },
     toggleDarkTheme() {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark

src/dispatch/static/dispatch/src/router/config.js

@@ -524,9 +524,10 @@ export const protectedRoute = [
       children: [
         {
           path: "results",
-          name: "ResultList",
           meta: { name: "Results" },
           component: () => import("@/search/ResultList.vue"),
+          name: "ResultList",
+          props: true,
         },
       ],
     },

src/dispatch/static/dispatch/src/search/ResultList.vue

@@ -54,6 +54,7 @@
 
 <script>
 import { mapState } from "vuex"
+import { mapActions } from "vuex"
 import IncidentSummaryTable from "@/incident/IncidentSummaryTable.vue"
 import CaseSummaryTable from "@/case/CaseSummaryTable.vue"
 import TaskSummaryTable from "@/task/TaskSummaryTable.vue"
@@ -76,9 +77,27 @@ export default {
   data() {
     return {}
   },
+  created() {
+    this.fetchDetails()
+  },
+  watch: {
+    query: function (q) {
+      // update URL in browser and search for new query
+      this.$router.push({ name: "ResultList", query: { q: q } })
+      this.setQuery(q)
+      this.getResults()
+    },
+  },
 
   computed: {
     ...mapState("search", ["results", "query", "loading"]),
   },
+  methods: {
+    fetchDetails() {
+      this.setQuery(this.$route.query.q)
+      this.getResults()
+    },
+    ...mapActions("search", ["setQuery", "getResults"]),
+  },
 }
 </script>