Migrate last of the SFC's to TS files

resources/assets/scripts/api/server/createDatabase.ts

@@ -0,0 +1,30 @@
+import http from '@/api/http';
+// @ts-ignore
+import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+import {AxiosError} from "axios";
+import {ServerDatabase} from "@/api/server/types";
+
+/**
+ * Creates a new database on the system for the currently active server.
+ */
+export function createDatabase(server: string, database: string, remote: string): Promise<ServerDatabase> {
+    return new Promise((resolve, reject) => {
+        http.post(route('api.client.servers.databases', { server }), {database, remote})
+            .then(response => {
+                const copy: any = response.data.attributes;
+                copy.password = copy.relationships.password.attributes.password;
+                copy.showPassword = false;
+
+                delete copy.relationships;
+
+                resolve(copy);
+            })
+            .catch((err: AxiosError) => {
+                if (err.response && err.response.data && Array.isArray(err.response.data.errors)) {
+                    return reject(err.response.data.errors[0].detail);
+                }
+
+                return reject(err);
+            });
+    });
+}

resources/assets/scripts/api/server/types.ts

@@ -3,3 +3,16 @@ export type DirectoryContents = {
     directories: Array<string>,
     editable: Array<string>
 }
+
+export type ServerDatabase = {
+    id: string,
+    name: string,
+    connections_from: string,
+    username: string,
+    host: {
+        address: string,
+        port: number,
+    },
+    password: string,
+    showPassword: boolean,
+}

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

@@ -0,0 +1,86 @@
+import Vue from 'vue';
+import MessageBox from "@/components/MessageBox";
+import {createDatabase} from "@/api/server/createDatabase";
+
+export default Vue.component('CreateDatabaseModal', {
+    components: {MessageBox},
+
+    data: function () {
+        return {
+            loading: false,
+            showSpinner: false,
+            database: '',
+            remote: '%',
+            errorMessage: '',
+        };
+    },
+
+    computed: {
+        canSubmit: function () {
+            return this.database.length && this.remote.length;
+        },
+    },
+
+    methods: {
+        submit: function () {
+            this.showSpinner = true;
+            this.errorMessage = '';
+            this.loading = true;
+
+            createDatabase(this.$route.params.id, this.database, this.remote)
+                .then((response) => {
+                    this.$emit('database', response);
+                    this.$emit('close');
+                })
+                .catch((err: Error | string): void => {
+                    if (typeof err === 'string') {
+                        this.errorMessage = err;
+                        return;
+                    }
+
+                    console.error('A network error was encountered while processing this request.', { err });
+                })
+                .then(() => {
+                    this.loading = false;
+                    this.showSpinner = false;
+                });
+        }
+    },
+
+    template: `
+        <div>
+            <message-box 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') }"
+                >
+                <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-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>
+                </button>
+            </div>
+        </div>
+    `
+});

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

@@ -1,89 +0,0 @@
-<template>
-    <div>
-        <message-box 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') }"
-            >
-            <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 || showSpinner"
-                    v-on:click="submit"
-            >
-                <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
-                <span :class="{ hidden: showSpinner }">
-                    Create
-                </span>
-            </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,
-                showSpinner: false,
-                database: '',
-                remote: '%',
-                errorMessage: '',
-            };
-        },
-
-        computed: {
-            canSubmit: function () {
-                return this.database.length && this.remote.length;
-            },
-        },
-
-        methods: {
-            submit: function () {
-                this.showSpinner = true;
-                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;
-                    this.showSpinner = false;
-                })
-            }
-        }
-    };
-</script>
-

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

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import Icon from "@/components/core/Icon";
+import Modal from "@/components/core/Modal";
+import {ServerDatabase} from "@/api/server/types";
+import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal";
+
+export default Vue.component('DatabaseRow', {
+    components: {DeleteDatabaseModal, Modal, Icon},
+    props: {
+        database: {
+            type: Object as () => ServerDatabase,
+            required: true,
+        }
+    },
+
+    data: function () {
+        return {
+            showDeleteModal: false,
+        };
+    },
+
+    methods: {
+        revealPassword: function () {
+            this.database.showPassword = !this.database.showPassword;
+        },
+    },
+
+    template: `
+        <div class="content-box mb-6 hover:border-neutral-200">
+            <div class="flex items-center text-neutral-800">
+                <icon name="database" class="flex-none text-green-500"></icon>
+                <div class="flex-1 px-4">
+                    <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Database Name</p>
+                    <p>{{database.name}}</p>
+                </div>
+                <div class="flex-1 px-4">
+                    <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Username</p>
+                    <p>{{database.username}}</p>
+                </div>
+                <div class="flex-1 px-4">
+                    <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Password</p>
+                    <p>
+                        <code class="text-sm cursor-pointer" v-on:click="revealPassword">
+                            <span class="select-none" v-if="!database.showPassword">
+                                <icon name="lock" class="h-3"/> &bull;&bull;&bull;&bull;&bull;&bull;
+                            </span>
+                            <span v-else>{{database.password}}</span>
+                        </code>
+                    </p>
+                </div>
+                <div class="flex-1 px-4">
+                    <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Server</p>
+                    <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
+                </div>
+                <div class="flex-none px-4">
+                    <button class="btn btn-xs btn-secondary btn-red" v-on:click="showDeleteModal = true">
+                        <icon name="trash-2" class="w-3 h-3 mx-1"/>
+                    </button>
+                </div>
+            </div>
+            <modal :show="showDeleteModal" v-on:close="showDeleteModal = false">
+                <DeleteDatabaseModal
+                        :database="database"
+                        v-on:close="showDeleteModal = false"
+                        v-if="showDeleteModal"
+                />
+            </modal>
+        </div>
+    `,
+})

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

@@ -1,68 +0,0 @@
-<template>
-    <div class="content-box mb-6 hover:border-neutral-500">
-        <div class="flex items-center text-neutral-800">
-            <database-icon class="flex-none text-green-500"></database-icon>
-            <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Database Name</p>
-                <p>{{database.name}}</p>
-            </div>
-            <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Username</p>
-                <p>{{database.username}}</p>
-            </div>
-            <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Password</p>
-                <p>
-                    <code class="text-sm cursor-pointer" v-on:click="revealPassword">
-                        <span class="select-none" v-if="!database.showPassword">
-                            <lock-icon class="h-3"/> &bull;&bull;&bull;&bull;&bull;&bull;
-                        </span>
-                        <span v-else>{{database.password}}</span>
-                    </code>
-                </p>
-            </div>
-            <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Server</p>
-                <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
-            </div>
-            <div class="flex-none px-4">
-                <button class="btn btn-xs btn-secondary btn-red" v-on:click="showDeleteModal = true">
-                    <trash2-icon class="w-3 h-3 mx-1"/>
-                </button>
-            </div>
-        </div>
-        <modal :show="showDeleteModal" v-on:close="showDeleteModal = false">
-            <delete-database-modal
-                    :database="database"
-                    v-on:close="showDeleteModal = false"
-                    v-if="showDeleteModal"
-            />
-        </modal>
-    </div>
-</template>
-
-<script>
-    import { LockIcon, Trash2Icon, DatabaseIcon } from 'vue-feather-icons';
-    import Modal from '../../../core/Modal';
-    import DeleteDatabaseModal from './DeleteDatabaseModal';
-
-    export default {
-        name: 'database-row',
-        components: {DeleteDatabaseModal, Modal, LockIcon, Trash2Icon, DatabaseIcon},
-        props: {
-            database: {type: Object, required: true}
-        },
-
-        data: function () {
-            return {
-                showDeleteModal: false,
-            };
-        },
-
-        methods: {
-            revealPassword: function () {
-                this.database.showPassword = !this.database.showPassword;
-            },
-        },
-    };
-</script>

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

@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import {ServerDatabase} from "@/api/server/types";
+
+export default Vue.component('DeleteDatabaseModal', {
+    props: {
+        database: {
+            type: Object as () => ServerDatabase,
+            required: true
+        },
+    },
+
+    data: function () {
+        return {
+            showSpinner: false,
+            nameConfirmation: '',
+        };
+    },
+
+    computed: {
+        /**
+         * Determine if the 'Delete' button should be enabled or not. This requires the user
+         * to enter the database name before actually deleting the DB.
+         */
+        disabled: function () {
+            const splits: Array<string> = this.database.name.split('_');
+
+            return (
+                this.nameConfirmation !== this.database.name && this.nameConfirmation !== splits.slice(1).join('_')
+            );
+        }
+    },
+
+    methods: {
+        /**
+         * Handle deleting the database for the server instance.
+         */
+        deleteDatabase: function () {
+            this.nameConfirmation = '';
+            this.showSpinner = true;
+
+            window.axios.delete(this.route('api.client.servers.databases.delete', {
+                server: this.$route.params.id,
+                database: this.database.id,
+            }))
+                .then(() => {
+                    window.events.$emit('server:deleted-database', this.database.id);
+                })
+                .catch(err => {
+                    this.$flash.clear();
+                    console.error({ err });
+
+                    const response = err.response;
+                    if (response.data && typeof response.data.errors === 'object') {
+                        response.data.errors.forEach((error: any) => {
+                            this.$flash.error(error.detail);
+                        });
+                    }
+                })
+                .then(() => {
+                    this.$emit('close');
+                })
+        },
+    },
+
+    template: `
+        <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="$emit('close')">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>
+    `,
+});

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

@@ -1,81 +0,0 @@
-<template>
-    <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="$emit('close')">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>
-</template>
-
-<script>
-    export default {
-        name: 'delete-database-modal',
-        props: {
-            database: { type: Object, required: true },
-        },
-
-        data: function () {
-            return {
-                showSpinner: false,
-                nameConfirmation: '',
-            };
-        },
-
-        computed: {
-            /**
-             * Determine if the 'Delete' button should be enabled or not. This requires the user
-             * to enter the database name before actually deleting the DB.
-             */
-            disabled: function () {
-                return (
-                    this.nameConfirmation !== this.database.name
-                    && this.nameConfirmation !== this.database.name.split('_', 2)[1]
-                );
-            }
-        },
-
-        methods: {
-            /**
-             * Handle deleting the database for the server instance.
-             */
-            deleteDatabase: function () {
-                this.nameConfirmation = '';
-                this.showSpinner = true;
-
-                window.axios.delete(this.route('api.client.servers.databases.delete', {
-                    server: this.$route.params.id,
-                    database: this.database.id,
-                }))
-                    .then(() => {
-                        window.events.$emit('server:deleted-database', this.database.id);
-                    })
-                    .catch(err => {
-                        this.clearFlashes();
-                        console.error({ err });
-
-                        const response = err.response;
-                        if (response.data && typeof response.data.errors === 'object') {
-                            response.data.errors.forEach((error) => {
-                                this.error(error.detail);
-                            });
-                        }
-                    })
-                    .then(() => {
-                        this.$emit('close');
-                    })
-            },
-        }
-    };
-</script>
-

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

@@ -1,14 +1,15 @@
 import Vue from 'vue';
 import { map, filter } from 'lodash';
 import Modal from '@/components/core/Modal';
-import CreateDatabaseModal from './../components/database/CreateDatabaseModal.vue';
-import DatabaseRow from './../components/database/DatabaseRow.vue';
+import CreateDatabaseModal from './../components/database/CreateDatabaseModal';
 import Icon from "@/components/core/Icon";
+import {ServerDatabase} from "@/api/server/types";
+import DatabaseRow from "@/components/server/components/database/DatabaseRow";
 
 type DataStructure = {
     loading: boolean,
     showCreateModal: boolean,
-    databases: Array<any>,
+    databases: Array<ServerDatabase>,
 }
 
 export default Vue.component('server-databases', {
@@ -64,20 +65,14 @@ export default Vue.component('server-databases', {
          * Add the database to the list of existing databases automatically when the modal
          * is closed with a successful callback.
          */
-        handleModalCallback: function (object: any) {
-            const data = object;
-            data.password = data.relationships.password.attributes.password;
-            data.showPassword = false;
-
-            delete data.relationships;
-
+        handleModalCallback: function (data: ServerDatabase) {
             this.databases.push(data);
         },
 
         /**
          * Handle event that is removing a database.
          */
-        removeDatabase: function (databaseId: number) {
+        removeDatabase: function (databaseId: string) {
             this.databases = filter(this.databases, (database) => {
                 return database.id !== databaseId;
             });
@@ -99,13 +94,13 @@ export default Vue.component('server-databases', {
                     </div>
                 </div>
                 <div v-else>
-                    <database-row v-for="database in databases" :database="database" :key="database.name"/>
+                    <DatabaseRow v-for="database in databases" :database="database" :key="database.name"/>
                 </div>
                 <div>
                     <button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
                 </div>
                 <modal :show="showCreateModal" v-on:close="showCreateModal = false">
-                    <create-database-modal
+                    <CreateDatabaseModal
                             v-on:close="showCreateModal = false"
                             v-on:database="handleModalCallback"
                             v-if="showCreateModal"