Add ability to create new database through the UI
This commit is contained in:
Dane Everitt
parent
17796fb1c4
commit
c28e9c1ab7
12 changed files with 240 additions and 37 deletions
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div v-if="notifications.length > 0" :class="this.container">
|
||||
<transition-group tag="div" name="fade">
|
||||
<div class="lg:inline-flex" role="alert" v-for="(item, index) in notifications"
|
||||
:key="index"
|
||||
:class="[item.class, {
|
||||
'mb-2': index < notifications.length - 1
|
||||
}]"
|
||||
>
|
||||
<span class="title" v-html="item.title" v-if="item.title.length > 0"></span>
|
||||
<span class="message" v-html="item.message"></span>
|
||||
<div v-for="(item, index) in notifications" :key="index">
|
||||
<message-box
|
||||
:class="[item.class, {'mb-2': index < notifications.length - 1}]"
|
||||
:title="item.title"
|
||||
:message="item.message"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageBox from './MessageBox';
|
||||
export default {
|
||||
name: 'flash',
|
||||
components: {MessageBox},
|
||||
props: {
|
||||
container: {
|
||||
type: String,
|
||||
|
|
|
|||
16
resources/assets/scripts/components/MessageBox.vue
Normal file
16
resources/assets/scripts/components/MessageBox.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="lg:inline-flex" role="alert">
|
||||
<span class="title" v-html="title" v-if="title && title.length > 0"></span>
|
||||
<span class="message" v-html="message"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'message-box',
|
||||
props: {
|
||||
title: {type: String, required: false},
|
||||
message: {type: String, required: true}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div>
|
||||
<message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
|
||||
<h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2>
|
||||
<div class="mb-6">
|
||||
<label class="input-label" for="grid-database-name">Database name</label>
|
||||
<input id="grid-database-name" type="text" class="input" name="database_name" required
|
||||
v-model="database"
|
||||
v-validate="{ alpha_dash: true, max: 100 }"
|
||||
:class="{ error: errors.has('database_name') }"
|
||||
>
|
||||
<p class="input-help error" v-show="errors.has('database_name')">{{ errors.first('database_name') }}</p>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="input-label" for="grid-database-remote">Allow connections from</label>
|
||||
<input id="grid-database-remote" type="text" class="input" name="remote" required
|
||||
v-model="remote"
|
||||
v-validate="{ regex: /^[0-9%.]{1,15}$/ }"
|
||||
:class="{ error: errors.has('remote') }"
|
||||
>
|
||||
<p class="input-help error" v-show="errors.has('remote')">{{ errors.first('remote') }}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-secondary btn-sm mr-2" v-on:click.once="$emit('close')">Cancel</button>
|
||||
<button class="btn btn-green btn-sm"
|
||||
:disabled="errors.any() || !canSubmit"
|
||||
v-on:click="submit"
|
||||
>Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageBox from '../../MessageBox';
|
||||
import get from 'lodash/get';
|
||||
|
||||
export default {
|
||||
name: 'create-database-modal',
|
||||
components: {MessageBox},
|
||||
data: function () {
|
||||
return {
|
||||
loading: false,
|
||||
database: '',
|
||||
remote: '%',
|
||||
errorMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
canSubmit: function () {
|
||||
return this.database.length && this.remote.length;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
submit: function () {
|
||||
this.errorMessage = '';
|
||||
this.loading = true;
|
||||
|
||||
window.axios.post(this.route('api.client.servers.databases', {
|
||||
server: this.$route.params.id,
|
||||
}), {
|
||||
database: this.database,
|
||||
remote: this.remote,
|
||||
}).then(response => {
|
||||
this.$emit('database', response.data.attributes);
|
||||
this.$emit('close');
|
||||
}).catch(err => {
|
||||
if (get(err, 'response.data.errors[0]')) {
|
||||
this.errorMessage = err.response.data.errors[0].detail;
|
||||
}
|
||||
|
||||
console.error('A network error was encountered while processing this request.', err.response);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div v-if="loading">
|
||||
<div class="spinner spinner-xl blue"></div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded border border-grey-light" v-else-if="!databases.length">
|
||||
<div class="context-box" v-else-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">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="bg-white p-6 rounded border border-grey-light mb-6" v-for="database in databases" :key="database.name">
|
||||
<div class="content-box mb-6" v-for="database in databases" :key="database.name">
|
||||
<div class="flex items-center text-grey-darker">
|
||||
<database-icon class="flex-none text-green"></database-icon>
|
||||
<div class="flex-1 px-4">
|
||||
|
|
@ -40,22 +40,35 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatabaseIcon, LockIcon } from 'vue-feather-icons';
|
||||
import map from 'lodash/map';
|
||||
import Modal from '../../core/Modal';
|
||||
import CreateDatabaseModal from '../components/CreateDatabaseModal';
|
||||
|
||||
export default {
|
||||
name: 'databases-page',
|
||||
components: { DatabaseIcon, LockIcon },
|
||||
components: {CreateDatabaseModal, Modal, DatabaseIcon, LockIcon },
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
loading: true,
|
||||
databases: [],
|
||||
loading: true,
|
||||
showCreateModal: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -95,6 +108,22 @@
|
|||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Add the database to the list of existing databases automatically when the modal
|
||||
* is closed with a successful callback.
|
||||
*/
|
||||
handleModalCallback: function (object) {
|
||||
console.log('handle', object);
|
||||
|
||||
const data = object;
|
||||
data.password = data.relationships.password.attributes.password;
|
||||
data.showPassword = false;
|
||||
|
||||
delete data.relationships;
|
||||
|
||||
this.databases.push(data);
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the password for a given database object.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@
|
|||
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
@apply .p-4 .uppercase .tracking-wide .text-sm;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue