Fix the logic on database modals

Author: DaneEveritt

resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue

@@ -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');
             }
         },
     });

resources/assets/scripts/components/server/components/database/DatabaseRow.vue

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

resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue

@@ -1,26 +1,22 @@
 <template>
-    <Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
-        <transition name="modal">
-            <div>
-                <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 }">&nbsp;</span>
-                        <span :class="{ hidden: showSpinner }">
-                            Confirm Deletion
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </transition>
+    <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 }">&nbsp;</span>
+                <span :class="{ hidden: showSpinner }">
+                    Confirm Deletion
+                </span>
+            </button>
+        </div>
     </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 () {

resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue

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

resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue

@@ -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"

resources/assets/scripts/components/server/subpages/Databases.vue

@@ -18,21 +18,18 @@
             <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"
-                        v-on:database="handleModalCallback"
-                        v-if="showCreateModal"
-                />
-            </modal>
+            <CreateDatabaseModal
+                :isVisible="showCreateModal"
+                v-on:database="handleModalCallback"
+                v-on:close="showCreateModal = false"
+            />
         </div>
     </div>
 </template>
 
 <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 {