Migrate last of the SFC's to TS files

Author: DaneEveritt

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

@@ -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>
+    `,
+})