115 lines
4.1 KiB
Vue
115 lines
4.1 KiB
Vue
<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-neutral-800"></icon>
|
|
<div class="flex-1 px-4 text-neutral-800">
|
|
<p>You have no databases.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<DatabaseRow v-for="database in databases" :database="database" :key="database.name"/>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
|
</div>
|
|
<Modal :show="showCreateModal" v-on:close="showCreateModal = false">
|
|
<CreateDatabaseModal
|
|
v-on:close="showCreateModal = false"
|
|
v-on:database="handleModalCallback"
|
|
v-if="showCreateModal"
|
|
/>
|
|
</modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import {filter, map} from 'lodash';
|
|
import Modal from '@/components/core/Modal.vue';
|
|
import CreateDatabaseModal from './../components/database/CreateDatabaseModal.vue';
|
|
import Icon from "@/components/core/Icon.vue";
|
|
import {ServerDatabase} from "@/api/server/types";
|
|
import DatabaseRow from "@/components/server/components/database/DatabaseRow.vue";
|
|
|
|
type DataStructure = {
|
|
loading: boolean,
|
|
showCreateModal: boolean,
|
|
databases: Array<ServerDatabase>,
|
|
}
|
|
|
|
export default Vue.extend({
|
|
name: 'ServerDatabases',
|
|
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 (data: ServerDatabase) {
|
|
this.databases.push(data);
|
|
},
|
|
|
|
/**
|
|
* Handle event that is removing a database.
|
|
*/
|
|
removeDatabase: function (databaseId: string) {
|
|
this.databases = filter(this.databases, (database) => {
|
|
return database.id !== databaseId;
|
|
});
|
|
}
|
|
},
|
|
});
|
|
</script>
|