Migrate more core components
This commit is contained in:
Dane Everitt
parent
136e4b5b7b
commit
33e09b5619
7 changed files with 223 additions and 184 deletions
|
|
@ -3,6 +3,7 @@
|
|||
"dependencies": {
|
||||
"cssnano": "^4.0.3",
|
||||
"date-fns": "^1.29.0",
|
||||
"feather-icons": "^4.10.0",
|
||||
"socket.io-client": "^2.1.1",
|
||||
"vee-validate": "^2.1.0-beta.2",
|
||||
"vue": "^2.5.7",
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
"@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0-beta.49",
|
||||
"@babel/preset-env": "^7.0.0-beta.49",
|
||||
"@types/feather-icons": "^4.7.0",
|
||||
"@types/lodash": "^4.14.119",
|
||||
"@types/node": "^10.12.15",
|
||||
"@types/socket.io-client": "^1.4.32",
|
||||
|
|
|
|||
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>
|
||||
19
yarn.lock
19
yarn.lock
|
|
@ -778,6 +778,10 @@
|
|||
"@shellscape/koa-send" "^4.1.0"
|
||||
debug "^2.6.8"
|
||||
|
||||
"@types/feather-icons@^4.7.0":
|
||||
version "4.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
|
||||
|
||||
"@types/lodash@^4.14.119":
|
||||
version "4.14.119"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
|
||||
|
|
@ -1867,6 +1871,10 @@ class-utils@^0.3.5:
|
|||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.2.5:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
|
||||
clean-css@4.1.x:
|
||||
version "4.1.11"
|
||||
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
|
||||
|
|
@ -2156,6 +2164,10 @@ core-js@^2.4.0, core-js@^2.5.0:
|
|||
version "2.5.7"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
|
||||
|
||||
core-js@^2.5.3:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
|
||||
|
||||
core-util-is@~1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
|
||||
|
|
@ -3143,6 +3155,13 @@ fastparse@^1.1.1:
|
|||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
|
||||
|
||||
feather-icons@^4.10.0:
|
||||
version "4.10.0"
|
||||
resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.10.0.tgz#5c2ba00ecf6f0529e99ab445d054fa6bd0b9c8d6"
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
core-js "^2.5.3"
|
||||
|
||||
figures@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
|
||||
|
|
|
|||
Loading…
Reference in a new issue