Cleanup dashboard, make flash more customizable for pages

Author: DaneEveritt

resources/assets/scripts/components/Flash.vue

@@ -1,7 +1,12 @@
 <template>
-    <div v-if="notifications.length > 0">
-        <transition-group tag="div" class="mb-2" name="fade">
-            <div :class="item.class" class="lg:inline-flex mb-2" role="alert" :key="index" v-for="(item, index) in notifications">
+    <div v-if="notifications.length > 0" :class="this.container">
+        <transition-group tag="div" name="fade">
+            <div class="lg:inline-flex" role="alert" v-for="(item, index) in notifications"
+                :key="index"
+                :class="[item.class, {
+                    'mb-2': index < notifications.length - 1
+                }]"
+            >
                 <span class="title" v-html="item.title" v-if="item.title.length > 0"></span>
                 <span class="message" v-html="item.message"></span>
             </div>
@@ -13,6 +18,10 @@
     export default {
         name: 'flash',
         props: {
+            container: {
+                type: String,
+                default: '',
+            },
             timeout: {
                 type: Number,
                 default: 0,

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

@@ -1,14 +1,21 @@
 <template>
     <div>
+        <flash container="mt-4"/>
         <div class="server-search animate fadein">
-            <input type="text" placeholder="search for servers..."
+            <input type="text"
+                   :placeholder="$t('dashboard.index.search')"
                    @input="onChange"
                    v-model="search"
                    ref="search"
             />
         </div>
-        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
-            <div class="server-box" :key="index" v-for="(server, index) in servers.models">
+        <div v-if="this.loading" class="my-4 animate fadein">
+            <div class="text-center h-16">
+                <span class="spinner spinner-xl"></span>
+            </div>
+        </div>
+        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
+            <div class="server-box animate fadein" :key="index" v-for="(server, index) in servers.models">
                 <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
                     <div class="float-right">
                         <div class="indicator"></div>
@@ -20,10 +27,10 @@
                     </div>
                     <div class="mb-0 flex">
                         <div class="usage">
-                            <div class="indicator-title">CPU</div>
+                            <div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
                         </div>
                         <div class="usage">
-                            <div class="indicator-title">Memory</div>
+                            <div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
                         </div>
                     </div>
                     <div class="mb-4 flex text-center">
@@ -51,11 +58,14 @@
 <script>
     import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
+    import Flash from '../Flash';
 
     export default {
         name: 'dashboard',
+        components: { Flash },
         data: function () {
             return {
+                loading: true,
                 search: '',
                 servers: new ServerCollection,
             }
@@ -72,17 +82,34 @@
              * @param {string} query
              */
             loadServers: function (query = '') {
+                this.loading = true;
                 window.axios.get(this.route('api.client.index'), {
                     params: { query },
                 })
+                    .finally(() => {
+                        this.clearFlashes();
+                    })
                     .then(response => {
                         this.servers = new ServerCollection;
                         response.data.data.forEach(obj => {
                             this.servers.add(obj.attributes);
                         });
+
+                        if (this.servers.models.length === 0) {
+                            this.info(this.$t('dashboard.index.no_matches'));
+                        }
+                    })
+                    .catch(err => {
+                        console.error(err);
+                        const response = err.response;
+                        if (response.data && _.isObject(response.data.errors)) {
+                            response.data.errors.forEach(function (error) {
+                                this.error(error.detail);
+                            });
+                        }
                     })
-                    .catch(error => {
-                        console.error(error);
+                    .finally(() => {
+                        this.loading = false;
                     });
             },
 

resources/assets/styles/components/spinners.css

@@ -4,18 +4,21 @@
   position: relative;
 
   &:after {
+    @apply .border-2 .border-grey-light .absolute .block;
     animation: spinners--spin 500ms infinite linear;
     border-radius: 9999px;
-    @apply .border-2 .border-grey-light;
     border-top-color: transparent !important;
     border-right-color: transparent !important;
     content: '';
-    display: block;
     width: 1em;
     height: 1em;
     left: calc(50% - (1em / 2));
     top: calc(50% - (1em / 2));
-    position: absolute !important;
+  }
+
+  &.spinner-xl:after {
+    @apply .h-16 .w-16;
+    left: calc(50% - (4rem / 2));
   }
 
   /**

resources/lang/en/dashboard/index.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'search' => 'Search for servers...',
+    'no_matches' => 'There were no servers found matching the search criteria provided.',
+    'cpu_title' => 'CPU',
+    'memory_title' => 'Memory',
+];