Make search work correctly when clicking on results

Author: DaneEveritt

resources/assets/scripts/components/core/Navigation.vue

@@ -5,15 +5,14 @@
                 Pterodactyl
             </router-link>
         </div>
-        <div class="search-box flex-none" v-if="$route.name !== 'dashboard'">
+        <div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
             <input type="text" class="search-input" id="searchInput" placeholder="Search..."
-                   :class="{ 'has-search-results': (servers.length > 0 || loadingResults) && searchActive }"
+                   :class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
                    v-on:focus="searchActive = true"
-                   v-on:blur="searchActive = false"
                    v-on:input="search"
                    v-model="searchTerm"
             />
-            <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive }">
+            <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
                 <div v-if="loadingResults">
                     <a href="#">
                         <div class="flex items-center">
@@ -26,12 +25,8 @@
                         </div>
                     </a>
                 </div>
-                <div v-else>
-                    <router-link
-                            v-for="server in servers"
-                            :key="server.identifier"
-                            :to="{ name: 'server', params: { id: server.identifier } }"
-                    >
+                <div v-else v-for="server in servers" :key="server.identifier">
+                    <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
                         <div class="flex items-center">
                             <div class="flex-1">
                                 <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
@@ -100,20 +95,24 @@
             }
         },
 
+        created: function () {
+            document.addEventListener('click', this.documentClick);
+        },
+
+        beforeDestroy: function () {
+            document.removeEventListener('click', this.documentClick);
+        },
+
         methods: {
             search: debounce(function () {
-                if (this.searchTerm.length > 3) {
+                if (this.searchTerm.length >= 3) {
                     this.loadingResults = true;
                     this.gatherSearchResults(this.searchTerm);
                 }
             }, 500),
 
             gatherSearchResults: function () {
                 this.$store.dispatch('dashboard/loadServers')
-                    .then(() => {
-                        if (this.servers.length === 0) {
-                        }
-                    })
                     .catch(err => {
                         console.error(err);
                         const response = err.response;
@@ -132,6 +131,14 @@
                 this.$store.commit('auth/logout');
                 return window.location = this.route('auth.logout');
             },
+
+            documentClick: function (e) {
+                if (this.$refs.searchContainer) {
+                    if (this.$refs.searchContainer !== e.target && !this.$refs.searchContainer.contains(e.target)) {
+                        this.searchActive = false;
+                    }
+                }
+            },
         }
     };
 </script>

resources/assets/scripts/components/server/Server.vue

@@ -18,7 +18,7 @@
                         </div>
                     </div>
                     <div class="mt-6 sidenav mr-6 bg-white border rounded">
-                        <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
+                        <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
                             <terminal-icon class="h-4"></terminal-icon> Console
                         </router-link>
                         <router-link :to="{ name: 'server-files' }">
@@ -51,7 +51,7 @@
                         </div>
                     </div>
                     -->
-                    <router-view></router-view>
+                    <router-view :key="server.identifier"></router-view>
                 </div>
             </div>
         </div>
@@ -87,6 +87,18 @@
             ...mapState('socket', ['connected', 'connectionError']),
         },
 
+        // Watch for route changes that occur with different server parameters. This occurs when a user
+        // uses the search bar. Because of the way vue-router works, it won't re-mount the server component
+        // so we will end up seeing the wrong server data if we don't perform this watch.
+        watch: {
+            '$route': function (toRoute, fromRoute) {
+                if (toRoute.params.id !== fromRoute.params.id) {
+                    this.loadingServerData = true;
+                    this.loadServer();
+                }
+            }
+        },
+
         data: function () {
             return {
                 loadingServerData: true,