Get dashboard converted

Author: DaneEveritt

resources/assets/scripts/components/core/Icon.ts

@@ -9,6 +9,6 @@ export default Vue.component('icon', {
         replace();
     },
     template: `
-        <i data-feather="{{ name }}"></i>
+        <i :data-feather="name"></i>
     `,
 });

resources/assets/scripts/components/core/Navigation.ts

@@ -32,12 +32,11 @@ export default Vue.component('navigation', {
     },
 
     methods: {
-        search: debounce(function (): void {
-            // @todo why is this not liked?
-            // if (this.searchTerm.length >= 3) {
-            //     this.loadingResults = true;
-            //     this.gatherSearchResults();
-            // }
+        search: debounce(function (this: any): void {
+            if (this.searchTerm.length >= 3) {
+                this.loadingResults = true;
+                this.gatherSearchResults();
+            }
         }, 500),
 
         gatherSearchResults: function (): void {

resources/assets/scripts/components/dashboard/Dashboard.ts

@@ -0,0 +1,125 @@
+import Vue from 'vue';
+import { debounce, isObject } from 'lodash';
+import { mapState } from 'vuex';
+import Flash from "./../Flash";
+import Navigation from "./../core/Navigation";
+import {AxiosError} from "axios";
+import ServerBox from "./ServerBox";
+
+type DataStructure = {
+    backgroundedAt: Date,
+    documentVisible: boolean,
+    loading: boolean,
+    servers?: Array<any>,
+    searchTerm?: string,
+}
+
+export default Vue.component('dashboard', {
+    components: {
+        ServerBox,
+        Navigation,
+        Flash
+    },
+
+    data: function (): DataStructure {
+        return {
+            backgroundedAt: new Date(),
+            documentVisible: true,
+            loading: false,
+        }
+    },
+
+    /**
+     * Start loading the servers before the DOM $.el is created. If we already have servers
+     * stored in vuex shows those and don't fire another API call just to load them again.
+     */
+    created: function () {
+        if (!this.servers || this.servers.length === 0) {
+            this.loadServers();
+        }
+    },
+
+    /**
+     * Once the page is mounted set a function to run every 10 seconds that will
+     * iterate through the visible servers and fetch their resource usage.
+     */
+    mounted: function () {
+        (this.$refs.search as HTMLElement).focus();
+    },
+
+    computed: {
+        ...mapState('dashboard', ['servers']),
+        searchTerm: {
+            get: function (): string {
+                return this.$store.getters['dashboard/getSearchTerm'];
+            },
+            set: function (value: string): void {
+                this.$store.dispatch('dashboard/setSearchTerm', value);
+            },
+        },
+    },
+
+    methods: {
+        /**
+         * Load the user's servers and render them onto the dashboard.
+         */
+        loadServers: function () {
+            this.loading = true;
+            this.$flash.clear();
+
+            this.$store.dispatch('dashboard/loadServers')
+                .then(() => {
+                    if (!this.servers || this.servers.length === 0) {
+                        this.$flash.info(this.$t('dashboard.index.no_matches'));
+                    }
+                })
+                .catch((err: AxiosError) => {
+                    console.error(err);
+                    const response = err.response;
+                    if (response && isObject(response.data.errors)) {
+                        response.data.errors.forEach((error: any) => {
+                            this.$flash.error(error.detail);
+                        });
+                    }
+                })
+                .then(() => this.loading = false);
+        },
+
+        /**
+         * Handle a search for servers but only call the search function every 500ms
+         * at the fastest.
+         */
+        onChange: debounce(function (this: any): void {
+            this.loadServers();
+        }, 500),
+    },
+
+    template: `
+        <div>
+            <navigation/>
+            <div class="container">
+                <flash container="mt-4"/>
+                <div class="server-search animate fadein">
+                    <input type="text"
+                           :placeholder="$t('dashboard.index.search')"
+                           @input="onChange"
+                           v-model="searchTerm"
+                           ref="search"
+                    />
+                </div>
+                <div v-if="this.loading" class="my-4 animate fadein">
+                    <div class="text-center h-16">
+                        <span class="spinner spinner-xl spinner-thick blue"></span>
+                    </div>
+                </div>
+                <transition-group class="flex flex-wrap justify-center sm:justify-start" v-else>
+                    <server-box
+                            v-for="(server, index) in servers"
+                            :key="index"
+                            :server="server"
+                    />
+                </transition-group>
+            </div>
+        </div>
+    `
+});