Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show loading indicator when searching

Browse source
This commit is contained in:
Dane Everitt 2018-09-11 21:32:01 -07:00
parent 0b0b80dc6d
commit 31092df5df
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
resources/assets/scripts/components/core/Navigation.vue
View file

@ -7,28 +7,42 @@
</div>
<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 }"
:class="{ 'has-search-results': (servers.length > 0 || 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 || !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 class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive }">
<div v-if="loadingResults">
<a href="#">
<div class="flex items-center">
<div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span>
</div>
<div class="flex-none">
<span class="spinner spinner-relative"></span>
</div>
</div>
<div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span>
</a>
</div>
<div v-else>
<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>
</div>
</router-link>
</router-link>
</div>
</div>
</div>
<div class="menu flex-none">
@ -69,6 +83,7 @@
data: function () {
return {
loadingResults: false,
searchActive: false,
};
},
@ -88,6 +103,7 @@
methods: {
search: debounce(function () {
if (this.searchTerm.length > 3) {
this.loadingResults = true;
this.gatherSearchResults(this.searchTerm);
}
}, 500),
@ -106,6 +122,9 @@
this.error(error.detail);
});
}
})
.then(() => {
this.loadingResults = false;
});
},

2
resources/assets/styles/components/navigation.css
View file

@ -37,7 +37,7 @@
@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 {
& a {
@apply .block .no-underline .p-2 .rounded;
&:hover {

4
resources/assets/styles/components/spinners.css
View file

@ -15,6 +15,10 @@
left: calc(50% - (1em / 2));
}
&.spinner-relative:after {
@apply .relative;
}
&.spinner-xl:after {
@apply .h-16 .w-16;
left: calc(50% - (4rem / 2));