Migrate more core components
This commit is contained in:
Dane Everitt
parent
136e4b5b7b
commit
33e09b5619
7 changed files with 223 additions and 184 deletions
14
resources/assets/scripts/components/core/Icon.ts
Normal file
14
resources/assets/scripts/components/core/Icon.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import Vue from 'vue';
|
||||
import { replace } from 'feather-icons';
|
||||
|
||||
export default Vue.component('icon', {
|
||||
props: {
|
||||
name: {type: String, default: 'circle'},
|
||||
},
|
||||
mounted: function () {
|
||||
replace();
|
||||
},
|
||||
template: `
|
||||
<i data-feather="{{ name }}"></i>
|
||||
`,
|
||||
});
|
||||
46
resources/assets/scripts/components/core/Modal.ts
Normal file
46
resources/assets/scripts/components/core/Modal.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import Vue from 'vue';
|
||||
import Icon from "./Icon";
|
||||
|
||||
export default Vue.component('modal', {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
modalName: { type: String, default: 'modal' },
|
||||
show: { type: Boolean, default: false },
|
||||
closeOnEsc: { type: Boolean, default: true },
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
if (this.$props.closeOnEsc) {
|
||||
document.addEventListener('keydown', e => {
|
||||
if (this.show && e.key === 'Escape') {
|
||||
this.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
close: function () {
|
||||
this.$emit('close', this.$props.modalName);
|
||||
}
|
||||
},
|
||||
|
||||
template: `
|
||||
<transition name="modal">
|
||||
<div class="modal-mask" v-show="show" v-on:click="close">
|
||||
<div class="modal-container" @click.stop>
|
||||
<icon name="x"
|
||||
class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
|
||||
aria-label="Close modal"
|
||||
role="button"
|
||||
v-on:click="close"
|
||||
/>
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
`
|
||||
})
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<transition name="modal">
|
||||
<div class="modal-mask" v-show="show" v-on:click="close">
|
||||
<div class="modal-container" @click.stop>
|
||||
<x-icon class="absolute pin-r pin-t m-2 text-grey cursor-pointer" aria-label="Close modal" role="button"
|
||||
v-on:click="close"
|
||||
/>
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { XIcon } from 'vue-feather-icons';
|
||||
export default {
|
||||
name: 'modal',
|
||||
components: { XIcon },
|
||||
props: {
|
||||
modalName: { type: String, default: 'modal' },
|
||||
show: { type: Boolean, default: false },
|
||||
closeOnEsc: { type: Boolean, default: true },
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.$props.closeOnEsc) {
|
||||
document.addEventListener('keydown', e => {
|
||||
if (this.show && e.key === 'Escape') {
|
||||
this.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
close: function () {
|
||||
this.$emit('close', this.$props.modalName);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
142
resources/assets/scripts/components/core/Navigation.ts
Normal file
142
resources/assets/scripts/components/core/Navigation.ts
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
import Vue from 'vue';
|
||||
import { debounce, isObject } from 'lodash';
|
||||
import { mapState } from 'vuex';
|
||||
import {AxiosError} from "axios";
|
||||
|
||||
export default Vue.component('navigation', {
|
||||
data: function () {
|
||||
return {
|
||||
loadingResults: false,
|
||||
searchActive: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState('dashboard', ['servers']),
|
||||
searchTerm: {
|
||||
get: function (): string {
|
||||
return this.$store.getters['dashboard/getSearchTerm'];
|
||||
},
|
||||
set: function (value: string): void {
|
||||
this.$store.dispatch('dashboard/setSearchTerm', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
document.addEventListener('click', this.documentClick);
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
document.removeEventListener('click', this.documentClick);
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: debounce(function (): void {
|
||||
// @todo why is this not liked?
|
||||
// if (this.searchTerm.length >= 3) {
|
||||
// this.loadingResults = true;
|
||||
// this.gatherSearchResults();
|
||||
// }
|
||||
}, 500),
|
||||
|
||||
gatherSearchResults: function (): void {
|
||||
this.$store.dispatch('dashboard/loadServers')
|
||||
.catch((err: AxiosError) => {
|
||||
console.error(err);
|
||||
|
||||
const response = err.response;
|
||||
if (response && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.loadingResults = false;
|
||||
});
|
||||
},
|
||||
|
||||
doLogout: function () {
|
||||
this.$store.commit('auth/logout');
|
||||
window.location.assign(this.route('auth.logout'));
|
||||
},
|
||||
|
||||
documentClick: function (e: Event) {
|
||||
if (this.$refs.searchContainer) {
|
||||
if (this.$refs.searchContainer !== e.target && !(this.$refs.searchContainer as HTMLElement).contains(e.target as HTMLElement)) {
|
||||
this.searchActive = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
<div class="nav flex">
|
||||
<div class="logo flex-1">
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
Pterodactyl
|
||||
</router-link>
|
||||
</div>
|
||||
<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 && searchTerm.length >= 3) || loadingResults) && searchActive }"
|
||||
v-on:focus="searchActive = true"
|
||||
v-on:input="search"
|
||||
v-model="searchTerm"
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<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 />
|
||||
<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>
|
||||
<div class="menu flex-none">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
<icon name="server" aria-label="Server dashboard" class="h-4"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'account' }">
|
||||
<icon name="user" aria-label="Profile management" class="h-4"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('admin.index')">
|
||||
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
|
||||
<icon name="log-out" aria-label="Sign out" class="h-4"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<template>
|
||||
<div class="nav flex">
|
||||
<div class="logo flex-1">
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
Pterodactyl
|
||||
</router-link>
|
||||
</div>
|
||||
<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 && searchTerm.length >= 3) || loadingResults) && searchActive }"
|
||||
v-on:focus="searchActive = true"
|
||||
v-on:input="search"
|
||||
v-model="searchTerm"
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<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 />
|
||||
<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>
|
||||
<div class="menu flex-none">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
<server-icon aria-label="Server dashboard" class="h-4"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'account' }">
|
||||
<user-icon aria-label="Profile management" class="h-4"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('admin.index')">
|
||||
<settings-icon aria-label="Administrative controls" class="h-4"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
|
||||
<log-out-icon aria-label="Sign out" class="h-4"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
loadingResults: false,
|
||||
searchActive: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState('dashboard', ['servers']),
|
||||
searchTerm: {
|
||||
get: function () {
|
||||
return this.$store.getters['dashboard/getSearchTerm'];
|
||||
},
|
||||
set: function (value) {
|
||||
this.$store.dispatch('dashboard/setSearchTerm', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
document.addEventListener('click', this.documentClick);
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
document.removeEventListener('click', this.documentClick);
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: debounce(function () {
|
||||
if (this.searchTerm.length >= 3) {
|
||||
this.loadingResults = true;
|
||||
this.gatherSearchResults(this.searchTerm);
|
||||
}
|
||||
}, 500),
|
||||
|
||||
gatherSearchResults: function () {
|
||||
this.$store.dispatch('dashboard/loadServers')
|
||||
.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);
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.loadingResults = false;
|
||||
});
|
||||
},
|
||||
|
||||
doLogout: function () {
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue