Add search box to server pages
This commit is contained in:
Dane Everitt
parent
b1b6a7eecd
commit
0b0b80dc6d
4 changed files with 111 additions and 10 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue