MrUnknownDE/panel
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/panel.git synced 2026-04-20 15:23:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

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
6 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
View File

@@ -1,48 +1,56 @@
<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
v-model="database"
v-validate="{ alpha_dash: true, max: 100 }"
:class="{ error: errors.has('database_name') }"
<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') }"
<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-primary btn-sm"
:disabled="errors.any() || !canSubmit || showSpinner"
v-on:click="submit"
<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"
>
<span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
<span :class="{ hidden: showSpinner }">
Create
</span>
Create
</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');
}
},
});