Add ability to create new database through the UI

This commit is contained in:
Dane Everitt 2018-08-22 22:29:20 -07:00
parent 17796fb1c4
commit c28e9c1ab7
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 240 additions and 37 deletions

View file

@ -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.
*