Add search box to server pages

Author: DaneEveritt

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

@@ -1,11 +1,37 @@
 <template>
-    <div class="nav">
-        <div class="logo">
+    <div class="nav flex">
+        <div class="logo flex-1">
             <router-link :to="{ name: 'dashboard' }">
                 Pterodactyl
             </router-link>
         </div>
-        <div class="menu">
+        <div class="search-box flex-none" v-if="$route.name !== 'dashboard'">
+            <input type="text" class="search-input" id="searchInput" placeholder="Search..."
+                   :class="{ 'has-search-results': servers.length > 0 && 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 || !searchActive }">
+                <router-link
+                        v-for="server in servers"
+                        :key="server.identifier"
+                        :to="{ name: 'server', params: { id: server.identifier } }"
+                >
+                    <div class="flex items-center">
+                        <div class="flex-1">
+                            <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
+                            <span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
+                        </div>
+                        <div class="flex-none">
+                            <span class="pillbox bg-indigo">{{ server.node }}</span>
+                        </div>
+                    </div>
+                </router-link>
+            </div>
+        </div>
+        <div class="menu flex-none">
             <ul>
                 <li>
                     <router-link :to="{ name: 'dashboard' }">
@@ -33,12 +59,56 @@
 </template>
 
 <script>
+    import debounce from 'lodash/debounce';
+    import { mapState } from 'vuex';
     import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
 
     export default {
         name: 'navigation',
         components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
+
+        data: function () {
+            return {
+                searchActive: false,
+            };
+        },
+
+        computed: {
+            ...mapState('dashboard', ['servers']),
+            searchTerm: {
+                get: function () {
+                    return this.$store.getters['dashboard/getSearchTerm'];
+                },
+                set: function (value) {
+                    this.$store.dispatch('dashboard/setSearchTerm', value);
+                }
+            }
+        },
+
         methods: {
+            search: debounce(function () {
+                if (this.searchTerm.length > 3) {
+                    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;
+                        if (response.data && isObject(response.data.errors)) {
+                            response.data.errors.forEach(error => {
+                                this.error(error.detail);
+                            });
+                        }
+                    });
+            },
+
             doLogout: function () {
                 this.$store.commit('auth/logout');
                 return window.location = this.route('auth.logout');

resources/assets/scripts/components/dashboard/ServerBox.vue

@@ -98,7 +98,6 @@
          * Poll the API for changes every 10 seconds when the component is mounted.
          */
         mounted: function () {
-            console.log(this.server);
             this.$options.dataGetTimeout = window.setInterval(() => {
                 this.getResourceUse();
             }, 10000);

resources/assets/styles/components/miscellaneous.css

@@ -71,10 +71,6 @@ code {
         @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
     }
 
-    & .pillbox {
-        @apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
-    }
-
     & a, & a:visited {
         @apply .no-underline .text-grey-darkest;
     }
@@ -89,6 +85,10 @@ code {
     }
 }
 
+.pillbox {
+    @apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
+}
+
 .server-search {
     @apply .w-full .my-4;
 

resources/assets/styles/components/navigation.css

@@ -11,7 +11,39 @@
         }
 
         @screen xsx {
-            @apply .hidden
+            @apply .hidden;
+        }
+    }
+
+    & > .search-box {
+        & > .search-input {
+            @apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
+            width: 26rem;
+            opacity: 0.7;
+            transition: ease-in-out opacity 150ms;
+
+            &:focus {
+                @apply .border-blue-darkest;
+                opacity: 1;
+            }
+
+            &.has-search-results {
+                @apply .border-b-0 .rounded-b-none;
+                opacity: 1 !important;
+            }
+        }
+
+        & .search-results {
+            @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
+            width: 26rem;
+
+            & > a {
+                @apply .block .no-underline .p-2 .rounded;
+
+                &:hover {
+                    @apply .bg-grey-lighter;
+                }
+            }
         }
     }
 
@@ -35,7 +67,7 @@
         }
 
         @screen sm {
-            @apply .float-right .mx-8 .inline-block;
+            @apply .float-right .mr-8 .inline-block;
         }
     }
 }