Finish migrating most everything to TS
This commit is contained in:
Dane Everitt
parent
0407e97aa1
commit
378a26a7c5
13 changed files with 209 additions and 263 deletions
|
|
@ -93,21 +93,21 @@ export default Vue.component('server', {
|
|||
<router-link :to="{ name: 'server-files' }">
|
||||
<icon name="folder" class="h-4"></icon> Files
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-subusers' }">
|
||||
<icon name="users" class="h-4"></icon> Subusers
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-schedules' }">
|
||||
<icon name="calendar" class="h-4"></icon> Schedules
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-subusers' }">-->
|
||||
<!--<icon name="users" class="h-4"></icon> Subusers-->
|
||||
<!--</router-link>-->
|
||||
<!--<router-link :to="{ name: 'server-schedules' }">-->
|
||||
<!--<icon name="calendar" class="h-4"></icon> Schedules-->
|
||||
<!--</router-link>-->
|
||||
<router-link :to="{ name: 'server-databases' }">
|
||||
<icon name="database" class="h-4"></icon> Databases
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-allocations' }">
|
||||
<icon name="globe" class="h-4"></icon> Allocations
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-settings' }">
|
||||
<icon name="settings" class="h-4"></icon> Settings
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-allocations' }">-->
|
||||
<!--<icon name="globe" class="h-4"></icon> Allocations-->
|
||||
<!--</router-link>-->
|
||||
<!--<router-link :to="{ name: 'server-settings' }">-->
|
||||
<!--<icon name="settings" class="h-4"></icon> Settings-->
|
||||
<!--</router-link>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full">
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerAllocations"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSchedules"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSettings"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerSubusers"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -2,16 +2,14 @@ import Vue from 'vue';
|
|||
import Icon from "../../../core/Icon";
|
||||
|
||||
export default Vue.component('file-context-menu', {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
components: { Icon },
|
||||
|
||||
template: `
|
||||
<div class="context-menu">
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="edit3"/>
|
||||
<icon name="edit-3"/>
|
||||
</div>
|
||||
<div class="action"><span>Rename</span></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import Vue from 'vue';
|
||||
import { formatDate } from "../../../../helpers";
|
||||
import Icon from "../../../core/Icon";
|
||||
import { formatDate } from "@/helpers";
|
||||
import Icon from "@/components/core/Icon";
|
||||
|
||||
export default Vue.component('folder-row', {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
components: { Icon },
|
||||
|
||||
props: {
|
||||
directory: {type: Object, required: true},
|
||||
|
|
@ -34,7 +32,7 @@ export default Vue.component('folder-row', {
|
|||
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\\//, '') }}"
|
||||
>
|
||||
<div class="flex-none icon">
|
||||
<folder-icon/>
|
||||
<icon name="folder"/>
|
||||
</div>
|
||||
<div class="flex-1">{{directory.name}}</div>
|
||||
<div class="flex-1 text-right text-grey-dark"></div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
export {default as Server} from './Server';
|
||||
export {default as ServerAllocations} from './ServerAllocations.vue';
|
||||
export {default as ConsolePage} from './subpages/Console';
|
||||
export {default as DatabasesPage} from './subpages/Databases.vue';
|
||||
export {default as FileManagerPage} from './subpages/FileManager.vue';
|
||||
export {default as ServerSchedules} from './ServerSchedules.vue';
|
||||
export {default as ServerSettings} from './ServerSettings.vue';
|
||||
export {default as ServerSubusers} from './ServerSubusers.vue';
|
||||
export {default as DatabasesPage} from './subpages/Databases';
|
||||
export {default as FileManagerPage} from './subpages/FileManager';
|
||||
|
|
|
|||
117
resources/assets/scripts/components/server/subpages/Databases.ts
Normal file
117
resources/assets/scripts/components/server/subpages/Databases.ts
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import Vue from 'vue';
|
||||
import { map, filter } from 'lodash';
|
||||
import Modal from '@/components/core/Modal';
|
||||
import CreateDatabaseModal from './../components/database/CreateDatabaseModal.vue';
|
||||
import DatabaseRow from './../components/database/DatabaseRow.vue';
|
||||
import Icon from "@/components/core/Icon";
|
||||
|
||||
type DataStructure = {
|
||||
loading: boolean,
|
||||
showCreateModal: boolean,
|
||||
databases: Array<any>,
|
||||
}
|
||||
|
||||
export default Vue.component('server-databases', {
|
||||
components: {DatabaseRow, CreateDatabaseModal, Modal, Icon },
|
||||
|
||||
data: function (): DataStructure {
|
||||
return {
|
||||
databases: [],
|
||||
loading: true,
|
||||
showCreateModal: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getDatabases();
|
||||
|
||||
window.events.$on('server:deleted-database', this.removeDatabase);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Get all of the databases that exist for this server.
|
||||
*/
|
||||
getDatabases: function () {
|
||||
this.$flash.clear();
|
||||
this.loading = true;
|
||||
|
||||
window.axios.get(this.route('api.client.servers.databases', {
|
||||
server: this.$route.params.id,
|
||||
include: 'password'
|
||||
}))
|
||||
.then(response => {
|
||||
this.databases = map(response.data.data, (object) => {
|
||||
const data = object.attributes;
|
||||
|
||||
data.password = data.relationships.password.attributes.password;
|
||||
data.showPassword = false;
|
||||
delete data.relationships;
|
||||
|
||||
return data;
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.$flash.error('There was an error encountered while attempting to fetch databases for this server.');
|
||||
console.error(err);
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Add the database to the list of existing databases automatically when the modal
|
||||
* is closed with a successful callback.
|
||||
*/
|
||||
handleModalCallback: function (object: any) {
|
||||
const data = object;
|
||||
data.password = data.relationships.password.attributes.password;
|
||||
data.showPassword = false;
|
||||
|
||||
delete data.relationships;
|
||||
|
||||
this.databases.push(data);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle event that is removing a database.
|
||||
*/
|
||||
removeDatabase: function (databaseId: number) {
|
||||
this.databases = filter(this.databases, (database) => {
|
||||
return database.id !== databaseId;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
template: `
|
||||
<div>
|
||||
<div v-if="loading">
|
||||
<div class="spinner spinner-xl blue"></div>
|
||||
</div>
|
||||
<div class="animate fadein" v-else>
|
||||
<div class="content-box mb-6" v-if="!databases.length">
|
||||
<div class="flex items-center">
|
||||
<icon name="database" class="flex-none text-grey-darker"></icon>
|
||||
<div class="flex-1 px-4 text-grey-darker">
|
||||
<p>You have no databases.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<database-row v-for="database in databases" :database="database" :key="database.name"/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
||||
</div>
|
||||
<modal :show="showCreateModal" v-on:close="showCreateModal = false">
|
||||
<create-database-modal
|
||||
v-on:close="showCreateModal = false"
|
||||
v-on:database="handleModalCallback"
|
||||
v-if="showCreateModal"
|
||||
/>
|
||||
</modal>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="loading">
|
||||
<div class="spinner spinner-xl blue"></div>
|
||||
</div>
|
||||
<div class="animate fadein" v-else>
|
||||
<div class="content-box mb-6" v-if="!databases.length">
|
||||
<div class="flex items-center">
|
||||
<database-icon class="flex-none text-grey-darker"></database-icon>
|
||||
<div class="flex-1 px-4 text-grey-darker">
|
||||
<p>You have no databases.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<database-row v-for="database in databases" :database="database" :key="database.name"/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
||||
</div>
|
||||
<modal :show="showCreateModal" v-on:close="showCreateModal = false">
|
||||
<create-database-modal
|
||||
v-on:close="showCreateModal = false"
|
||||
v-on:database="handleModalCallback"
|
||||
v-if="showCreateModal"
|
||||
/>
|
||||
</modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
|
||||
import map from 'lodash/map';
|
||||
import filter from 'lodash/filter';
|
||||
import Modal from '../../core/Modal';
|
||||
import CreateDatabaseModal from '../components/database/CreateDatabaseModal';
|
||||
import DatabaseRow from '../components/database/DatabaseRow';
|
||||
|
||||
export default {
|
||||
name: 'databases-page',
|
||||
components: {DatabaseRow, CreateDatabaseModal, Modal, DatabaseIcon, LockIcon, Trash2Icon },
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
databases: [],
|
||||
loading: true,
|
||||
showCreateModal: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.getDatabases();
|
||||
|
||||
window.events.$on('server:deleted-database', this.removeDatabase);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Get all of the databases that exist for this server.
|
||||
*/
|
||||
getDatabases: function () {
|
||||
this.clearFlashes();
|
||||
this.loading = true;
|
||||
|
||||
window.axios.get(this.route('api.client.servers.databases', {
|
||||
server: this.$route.params.id,
|
||||
include: 'password'
|
||||
}))
|
||||
.then(response => {
|
||||
this.databases = map(response.data.data, (object) => {
|
||||
const data = object.attributes;
|
||||
|
||||
data.password = data.relationships.password.attributes.password;
|
||||
data.showPassword = false;
|
||||
delete data.relationships;
|
||||
|
||||
return data;
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.error('There was an error encountered while attempting to fetch databases for this server.');
|
||||
console.error(err);
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Add the database to the list of existing databases automatically when the modal
|
||||
* is closed with a successful callback.
|
||||
*/
|
||||
handleModalCallback: function (object) {
|
||||
const data = object;
|
||||
data.password = data.relationships.password.attributes.password;
|
||||
data.showPassword = false;
|
||||
|
||||
delete data.relationships;
|
||||
|
||||
this.databases.push(data);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle event that is removing a database.
|
||||
*
|
||||
* @param databaseId
|
||||
*/
|
||||
removeDatabase: function (databaseId) {
|
||||
this.databases = filter(this.databases, (database) => {
|
||||
return database.id !== databaseId;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,57 +1,21 @@
|
|||
<template>
|
||||
<div class="content-box animate fadein">
|
||||
<div class="filemanager-breadcrumbs">
|
||||
/<span class="px-1">home</span><!--
|
||||
-->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
|
||||
--><span v-for="crumb in breadcrumbs" class="inline-block">
|
||||
<span v-if="crumb.path">
|
||||
/<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
|
||||
</span>
|
||||
<span v-else>
|
||||
/<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<div class="spinner spinner-xl blue"></div>
|
||||
</div>
|
||||
<div v-else-if="!loading && errorMessage">
|
||||
<div class="alert error" v-text="errorMessage"></div>
|
||||
</div>
|
||||
<div class="filemanager" v-else>
|
||||
<div class="header">
|
||||
<div class="flex-none w-8"></div>
|
||||
<div class="flex-1">Name</div>
|
||||
<div class="flex-1 text-right">Size</div>
|
||||
<div class="flex-1 text-right">Modified</div>
|
||||
<div class="flex-none w-1/6">Actions</div>
|
||||
</div>
|
||||
<div v-if="!directories.length && !files.length">
|
||||
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="directory in directories">
|
||||
<file-manager-folder-row :directory="directory"/>
|
||||
</div>
|
||||
<div v-for="file in files">
|
||||
<file-manager-file-row :file="file" :editable="editableFiles" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
import Vue from 'vue';
|
||||
import {mapState} from "vuex";
|
||||
import { map } from 'lodash';
|
||||
import getDirectoryContents from "@/api/server/getDirectoryContents";
|
||||
import FileRow from "@/components/server/components/filemanager/FileRow";
|
||||
import FolderRow from "@/components/server/components/filemanager/FolderRow";
|
||||
|
||||
<script>
|
||||
import map from 'lodash/map';
|
||||
import { mapState } from 'vuex';
|
||||
import FileManagerFileRow from '../components/filemanager/FileRow';
|
||||
import FileManagerFolderRow from '../components/filemanager/FolderRow';
|
||||
import { getDirectoryContents } from '../../../api/server/getDirectoryContents';
|
||||
|
||||
export default {
|
||||
name: 'file-manager-page',
|
||||
components: { FileManagerFolderRow, FileManagerFileRow },
|
||||
type DataStructure = {
|
||||
loading: boolean,
|
||||
errorMessage: string | null,
|
||||
currentDirectory: string,
|
||||
files: Array<any>,
|
||||
directories: Array<any>,
|
||||
editableFiles: Array<string>,
|
||||
}
|
||||
|
||||
export default Vue.component('file-manager', {
|
||||
components: { FileRow, FolderRow },
|
||||
computed: {
|
||||
...mapState('server', ['server', 'credentials']),
|
||||
...mapState('socket', ['connected']),
|
||||
|
|
@ -66,7 +30,7 @@ export default {
|
|||
return [];
|
||||
}
|
||||
|
||||
return map(directories, function (value, key) {
|
||||
return map(directories, function (value: string, key: number) {
|
||||
if (key === directories.length - 1) {
|
||||
return { directoryName: value };
|
||||
}
|
||||
|
|
@ -99,18 +63,18 @@ export default {
|
|||
* so that the error message disappears and we then load in a fresh listing.
|
||||
*/
|
||||
connected: function () {
|
||||
// @ts-ignore
|
||||
if (this.connected) {
|
||||
this.listDirectory();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
data: function () {
|
||||
data: function (): DataStructure {
|
||||
return {
|
||||
currentDirectory: this.$route.params.path || '/',
|
||||
loading: true,
|
||||
errorMessage: null,
|
||||
|
||||
directories: [],
|
||||
editableFiles: [],
|
||||
files: [],
|
||||
|
|
@ -137,7 +101,7 @@ export default {
|
|||
this.errorMessage = null;
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err instanceof String) {
|
||||
if (typeof err === 'string') {
|
||||
this.errorMessage = err;
|
||||
return;
|
||||
}
|
||||
|
|
@ -149,5 +113,47 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
template: `
|
||||
<div class="content-box animate fadein">
|
||||
<div class="filemanager-breadcrumbs">
|
||||
/<span class="px-1">home</span><!--
|
||||
-->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
|
||||
--><span v-for="crumb in breadcrumbs" class="inline-block">
|
||||
<span v-if="crumb.path">
|
||||
/<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
|
||||
</span>
|
||||
<span v-else>
|
||||
/<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<div class="spinner spinner-xl blue"></div>
|
||||
</div>
|
||||
<div v-else-if="!loading && errorMessage">
|
||||
<div class="alert error" v-text="errorMessage"></div>
|
||||
</div>
|
||||
<div class="filemanager" v-else>
|
||||
<div class="header">
|
||||
<div class="flex-none w-8"></div>
|
||||
<div class="flex-1">Name</div>
|
||||
<div class="flex-1 text-right">Size</div>
|
||||
<div class="flex-1 text-right">Modified</div>
|
||||
<div class="flex-none w-1/6">Actions</div>
|
||||
</div>
|
||||
<div v-if="!directories.length && !files.length">
|
||||
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="directory in directories">
|
||||
<folder-row :directory="directory"/>
|
||||
</div>
|
||||
<div v-for="file in files">
|
||||
<file-row :file="file" :editable="editableFiles" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
|
|
@ -4,6 +4,8 @@ import {FlashInterface} from "./mixins/flash";
|
|||
import {AxiosInstance} from "axios";
|
||||
import {Vue as VueType} from "vue/types/vue";
|
||||
import {ApplicationState} from "./store/types";
|
||||
import {Route} from "vue-router";
|
||||
|
||||
// @ts-ignore
|
||||
import {Ziggy} from './helpers/ziggy';
|
||||
|
||||
|
|
@ -35,6 +37,7 @@ declare module 'vue/types/options' {
|
|||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$route: Route,
|
||||
$store: Store<any>,
|
||||
$flash: FlashInterface,
|
||||
route: (name: string, params?: object, absolute?: boolean) => string,
|
||||
|
|
|
|||
|
|
@ -11,13 +11,9 @@ import ResetPassword from './components/auth/ResetPassword';
|
|||
import User from './models/user';
|
||||
import {
|
||||
Server,
|
||||
ServerAllocations,
|
||||
ConsolePage,
|
||||
FileManagerPage,
|
||||
DatabasesPage,
|
||||
ServerSchedules,
|
||||
ServerSettings,
|
||||
ServerSubusers,
|
||||
} from './components/server';
|
||||
|
||||
const routes = [
|
||||
|
|
@ -43,11 +39,11 @@ const routes = [
|
|||
children: [
|
||||
{name: 'server', path: '', component: ConsolePage},
|
||||
{name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage},
|
||||
{name: 'server-subusers', path: 'subusers', component: ServerSubusers},
|
||||
{name: 'server-schedules', path: 'schedules', component: ServerSchedules},
|
||||
// {name: 'server-subusers', path: 'subusers', component: ServerSubusers},
|
||||
// {name: 'server-schedules', path: 'schedules', component: ServerSchedules},
|
||||
{name: 'server-databases', path: 'databases', component: DatabasesPage},
|
||||
{name: 'server-allocations', path: 'allocations', component: ServerAllocations},
|
||||
{name: 'server-settings', path: 'settings', component: ServerSettings},
|
||||
// {name: 'server-allocations', path: 'allocations', component: ServerAllocations},
|
||||
// {name: 'server-settings', path: 'settings', component: ServerSettings},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue