Move everything back to vue SFCs

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

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <div v-if="loading">
+            <div class="spinner spinner-xl blue"></div>
+        </div>
+        <div class="animate fadein" v-else>
+            <div class="content-box mb-6" v-if="!databases.length">
+                <div class="flex items-center">
+                    <Icon name="database" class="flex-none text-neutral-800"></icon>
+                    <div class="flex-1 px-4 text-neutral-800">
+                        <p>You have no databases.</p>
+                    </div>
+                </div>
+            </div>
+            <div v-else>
+                <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">
+                <CreateDatabaseModal
+                        v-on:close="showCreateModal = false"
+                        v-on:database="handleModalCallback"
+                        v-if="showCreateModal"
+                />
+            </modal>
+        </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";
+    import DatabaseRow from "@/components/server/components/database/DatabaseRow.vue";
+
+    type DataStructure = {
+        loading: boolean,
+        showCreateModal: boolean,
+        databases: Array<ServerDatabase>,
+    }
+
+    export default Vue.extend({
+        name: 'ServerDatabases',
+        components: {DatabaseRow, CreateDatabaseModal, Modal, Icon},
+
+        data: function (): DataStructure {
+            return {
+                databases: [],
+                loading: true,
+                showCreateModal: false,
+            };
+        },
+
+        mounted: function () {
+            this.getDatabases();
+
+            window.events.$on('server:deleted-database', this.removeDatabase);
+        },
+
+        methods: {
+            /**
+             * Get all of the databases that exist for this server.
+             */
+            getDatabases: function () {
+                this.$flash.clear();
+                this.loading = true;
+
+                window.axios.get(this.route('api.client.servers.databases', {
+                    server: this.$route.params.id,
+                    include: 'password'
+                }))
+                    .then(response => {
+                        this.databases = map(response.data.data, (object) => {
+                            const data = object.attributes;
+
+                            data.password = data.relationships.password.attributes.password;
+                            data.showPassword = false;
+                            delete data.relationships;
+
+                            return data;
+                        });
+                    })
+                    .catch(err => {
+                        this.$flash.error('There was an error encountered while attempting to fetch databases for this server.');
+                        console.error(err);
+                    })
+                    .then(() => {
+                        this.loading = false;
+                    });
+            },
+
+            /**
+             * Add the database to the list of existing databases automatically when the modal
+             * is closed with a successful callback.
+             */
+            handleModalCallback: function (data: ServerDatabase) {
+                this.databases.push(data);
+            },
+
+            /**
+             * Handle event that is removing a database.
+             */
+            removeDatabase: function (databaseId: string) {
+                this.databases = filter(this.databases, (database) => {
+                    return database.id !== databaseId;
+                });
+            }
+        },
+    });
+</script>