✨ Adds web search to Minimal View

src/components/MinimalView/MinimalSearch.vue

@@ -1,5 +1,6 @@
 <template>
-  <form>
+  <form @submit.prevent="searchSubmitted">
+    <div class="minimal-search-wrap">
       <input
         id="filter-tiles"
         v-model="input"
@@ -7,7 +8,12 @@
         class="minimal-search"
         :placeholder="$t('search.search-placeholder')"
         v-on:input="userIsTypingSomething"
-      @keydown.esc="clearFilterInput" />
+        @keydown.esc="clearFilterInput"
+      />
+      <p v-if="webSearchEnabled && input.length > 0" class="web-search-note">
+        {{ $t('search.enter-to-search-web') }}
+      </p>
+    </div>
       <i v-if="input.length > 0"
         class="clear-search"
         :title="$t('search.clear-search-tooltip')"
@@ -17,11 +23,19 @@
 
 <script>
 
+import router from '@/router';
 import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
+import ErrorHandler from '@/utils/ErrorHandler';
 import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
+import {
+  searchEngineUrls,
+  defaultSearchEngine,
+  defaultSearchOpeningMethod,
+} from '@/utils/defaults';
 
 export default {
   name: 'MinimalSearch',
+  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -32,6 +46,15 @@ export default {
       getCustomKeyShortcuts,
     };
   },
+  computed: {
+    webSearchEnabled() {
+      const { appConfig } = this.config;
+      if (appConfig && appConfig.webSearch) {
+        return !appConfig.webSearch.disableWebSearch;
+      }
+      return true;
+    },
+  },
   methods: {
     /* Emmits users's search term up to parent */
     userIsTypingSomething() {
@@ -44,6 +67,7 @@ export default {
       document.activeElement.blur(); // Remove focus
       this.akn.resetIndex(); // Reset current element index
     },
+    /* Launches a given app when hotkey pressed */
     handleHotKey(key) {
       const usersHotKeys = this.getCustomKeyShortcuts();
       usersHotKeys.forEach((hotkey) => {
@@ -52,6 +76,7 @@ export default {
         }
       });
     },
+    /* Filter results as user types */
     startFiltering(event) {
       const currentElem = document.activeElement.id;
       const { key, keyCode } = event;
@@ -72,6 +97,42 @@ export default {
         this.clearFilterInput();
       }
     },
+    /* Open web search results in users desired method */
+    launchWebSearch(url, method) {
+      switch (method) {
+        case 'newtab':
+          window.open(url, '_blank');
+          break;
+        case 'sametab':
+          window.open(url, '_self');
+          break;
+        case 'workspace':
+          router.push({ name: 'workspace', query: { url } });
+          break;
+        default:
+          ErrorHandler(`Unknown opening method: ${method}`);
+          window.open(url, '_blank');
+      }
+    },
+    /* If web search enabled, then launch search results when enter is pressed */
+    searchSubmitted() {
+      // Get search preferences from appConfig
+      const { appConfig } = this.config;
+      const searchPrefs = appConfig.webSearch || {};
+      if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
+        const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
+        // Get search engine, and make URL
+        const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
+        let searchUrl = searchEngineUrls[searchEngine];
+        if (!searchUrl) ErrorHandler(`Search engine not found - ${searchEngine}`);
+        if (searchEngine === 'custom' && searchPrefs.customSearchEngine) {
+          searchUrl = searchPrefs.customSearchEngine;
+        }
+        // Append users encoded query onto search URL, and launch
+        searchUrl += encodeURIComponent(this.input);
+        this.launchWebSearch(searchUrl, openingMethod);
+      }
+    },
   },
   mounted() {
     window.addEventListener('keydown', this.startFiltering);
@@ -89,6 +150,17 @@ export default {
   form {
     display: flex;
     align-items: center;
+    .minimal-search-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      p.web-search-note {
+        margin: 0;
+        color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
     input {
       display: inline-block;
       width: 80%;
@@ -107,7 +179,6 @@ export default {
       }
     }
     .clear-search {
-      //position: absolute;
       color: var(--minimal-view-search-color);
       padding: 0.15rem 0.5rem 0.2rem 0.5rem;
       font-style: normal;