100 lines
3.6 KiB
Vue
100 lines
3.6 KiB
Vue
<template>
|
|
<Modal v-on:close="closeModal" :isVisible="isVisible" :dismissable="!showSpinner">
|
|
<h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
|
|
<p class="text-neutral-900 text-sm">This action
|
|
<strong>cannot</strong> be undone. This will permanetly delete the
|
|
<strong>{{database.name}}</strong> database and remove all associated data.</p>
|
|
<div class="mt-6">
|
|
<label class="input-label">Confirm database name</label>
|
|
<input type="text" class="input" v-model="nameConfirmation"/>
|
|
</div>
|
|
<div class="mt-6 text-right">
|
|
<button class="btn btn-sm btn-secondary mr-2" v-on:click="closeModal">Cancel</button>
|
|
<button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
|
|
<span class="spinner white" v-bind:class="{ hidden: !showSpinner }"> </span>
|
|
<span :class="{ hidden: showSpinner }">
|
|
Confirm Deletion
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import {ServerDatabase} from "@/api/server/types";
|
|
import Modal from '@/components/core/Modal.vue';
|
|
|
|
export default Vue.extend({
|
|
name: 'DeleteDatabaseModal',
|
|
components: {Modal},
|
|
props: {
|
|
isVisible: {type: Boolean, default: false },
|
|
database: { type: Object as () => ServerDatabase, required: true },
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
showSpinner: false,
|
|
nameConfirmation: '',
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* Determine if the 'Delete' button should be enabled or not. This requires the user
|
|
* to enter the database name before actually deleting the DB.
|
|
*/
|
|
disabled: function () {
|
|
const splits: Array<string> = this.database.name.split('_');
|
|
|
|
return (
|
|
this.nameConfirmation !== this.database.name && this.nameConfirmation !== splits.slice(1).join('_')
|
|
);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Handle deleting the database for the server instance.
|
|
*/
|
|
deleteDatabase: function () {
|
|
this.nameConfirmation = '';
|
|
this.showSpinner = true;
|
|
|
|
window.axios.delete(this.route('api.client.servers.databases.delete', {
|
|
server: this.$route.params.id,
|
|
database: this.database.id,
|
|
}))
|
|
.then(() => {
|
|
window.events.$emit('server:deleted-database', this.database.id);
|
|
})
|
|
.catch(err => {
|
|
this.$flash.clear();
|
|
console.error({err});
|
|
|
|
const response = err.response;
|
|
if (response.data && typeof response.data.errors === 'object') {
|
|
response.data.errors.forEach((error: any) => {
|
|
this.$flash.error(error.detail);
|
|
});
|
|
}
|
|
})
|
|
.then(() => {
|
|
this.$emit('close');
|
|
})
|
|
},
|
|
|
|
/**
|
|
* Closes the modal and resets the entry field.
|
|
*/
|
|
closeModal: function () {
|
|
this.showSpinner = false;
|
|
this.nameConfirmation = '';
|
|
|
|
this.$emit('close');
|
|
}
|
|
},
|
|
});
|
|
</script>
|