Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the logic on database modals

Browse source
This commit is contained in:
Dane Everitt 2019-05-27 16:43:28 -07:00
parent 7e89e1bc00
commit d284083d20
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 64 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
View file

@ -1,10 +1,11 @@
<template>
<div>
<Modal :isVisible="isVisible" :dismissable="!showSpinner" v-on:close="closeModal">
<MessageBox class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
<h2 class="font-medium text-neutral-900 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
<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') }"
@ -13,7 +14,8 @@
</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
<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') }"
@ -21,8 +23,9 @@
<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-primary btn-sm"
<button class="btn btn-secondary btn-sm mr-2" v-on:click.once="closeModal">Cancel</button>
<button
class="btn btn-primary btn-sm"
:disabled="errors.any() || !canSubmit || showSpinner"
v-on:click="submit"
>
@ -32,17 +35,22 @@
</span>
</button>
</div>
</div>
</Modal>
</template>
<script lang="ts">
import Vue from 'vue';
import MessageBox from "@/components/MessageBox.vue";
import {createDatabase} from "@/api/server/createDatabase";
import Modal from "@/components/core/Modal.vue";
export default Vue.extend({
name: 'CreateDatabaseModal',
components: {MessageBox},
components: {Modal, MessageBox},
props: {
isVisible: { type: Boolean, default: false },
},
data: function () {
return {
@ -83,6 +91,14 @@
this.loading = false;
this.showSpinner = false;
});
},
/**
* Closes the modal and resets the entry field.
*/
closeModal: function () {
this.showSpinner = false;
this.$emit('close');
}
},
});

2
resources/assets/scripts/components/server/components/database/DatabaseRow.vue
View file

@ -33,7 +33,7 @@
</div>
<DeleteDatabaseModal
:database="database"
:show="showDeleteModal"
:isVisible="showDeleteModal"
v-on:close="showDeleteModal = false"
/>
</div>

16
resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
View file

@ -1,7 +1,5 @@
<template>
<Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
<transition name="modal">
<div>
<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
@ -19,8 +17,6 @@
</span>
</button>
</div>
</div>
</transition>
</Modal>
</template>
@ -33,14 +29,8 @@
name: 'DeleteDatabaseModal',
components: {Modal},
props: {
show: {
type: Boolean,
default: false,
},
database: {
type: Object as () => ServerDatabase,
required: true
},
isVisible: {type: Boolean, default: false },
database: { type: Object as () => ServerDatabase, required: true },
},
data: function () {

2
resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :isVisible="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
<Modal :isVisible="visible" v-on:close="onModalClose" :isVisibleCloseIcon="false" :dismissable="!isLoading">
<div>
<label class="input-label">
Directory Name

2
resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :isVisible="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
<Modal :isVisible="isVisible" v-on:close="closeModal" :isVisibleCloseIcon="false" :dismissable="!isLoading">
<MessageBox
class="alert error mb-8"
title="Error"

9
resources/assets/scripts/components/server/subpages/Databases.vue
View file

@ -18,13 +18,11 @@
<div>
<button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
</div>
<Modal :isVisible="showCreateModal" v-on:close="showCreateModal = false">
<CreateDatabaseModal
v-on:close="showCreateModal = false"
:isVisible="showCreateModal"
v-on:database="handleModalCallback"
v-if="showCreateModal"
v-on:close="showCreateModal = false"
/>
</modal>
</div>
</div>
</template>
@ -32,7 +30,6 @@
<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";
@ -46,7 +43,7 @@
export default Vue.extend({
name: 'ServerDatabases',
components: {DatabaseRow, CreateDatabaseModal, Modal, Icon},
components: {DatabaseRow, CreateDatabaseModal, Icon},
data: function (): DataStructure {
return {