feat(data-table): add loader

renato04 · Jul 18, 2018 · e09209c · e09209c
1 parent 25a4c4b
commit e09209c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 5 deletions.
diff --git a/src/components/tables/Table.vue b/src/components/tables/Table.vue
@@ -189,7 +189,14 @@
             :apiMode="apiMode"
             :paginationPath="paginationPath"
             :queryParams="queryParams"
-          />
+          >
+            <spring-spinner
+              slot="loading"
+              :animation-duration="2500"
+              :size="70"
+              color="#4ae387"
+            />
+          </vuestic-data-table>
         </vuestic-widget>
       </div>
     </div>
@@ -203,12 +210,15 @@
   import FieldsDef from 'vuestic-components/vuestic-datatable/data/fields-definition'
   import ItemsPerPageDef from 'vuestic-components/vuestic-datatable/data/items-per-page-definition'
   import QueryParams from 'vuestic-components/vuestic-datatable/data/query-params'
+  import {SpringSpinner} from 'epic-spinners'
 
   Vue.component('badge-column', BadgeColumn)
 
   export default {
     name: 'Table',
-
+    components: {
+      SpringSpinner
+    },
     data () {
       return {
         apiUrl: 'https://vuetable.ratiw.net/api/users',

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -255,6 +255,9 @@
       "email": "Email",
       "name": "Name",
       "score": "Score"
+    },
+    "dataTable": {
+      "noDataAvailable": "No Data Available"
     }
   },
   "user": {

diff --git a/src/i18n/es.json b/src/i18n/es.json
@@ -214,6 +214,9 @@
       "email": "Email",
       "name": "Nombre",
       "score": "Puntuación"
+    },
+    "dataTable": {
+      "noDataAvailable": "No Data Available"
     }
   },
   "user": {

diff --git a/src/i18n/pt_br.json b/src/i18n/pt_br.json
@@ -231,6 +231,9 @@
       "email": "Email",
       "name": "Nome",
       "score": "Contagem"
+    },
+    "dataTable": {
+      "noDataAvailable": "No Data Available"
     }
   },
   "user": {

diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="vuestic-data-table table-responsive">
+  <div class="vuestic-data-table table-responsive"
+       :class="{'data-loading': loading}">
     <div class="d-flex flex-md-row flex-column align-items-center" :class="controlsAlignmentClass">
       <filter-bar
         @filter="onFilterSet"
@@ -17,6 +18,16 @@
                         v-show="perPageSelectorShown"></items-per-page>
       </div>
     </div>
+    <div v-show="loading" class="data-table-loading">
+      <slot name="loading">
+        <spring-spinner
+          slot="loading"
+          :animation-duration="2500"
+          :size="70"
+          color="#4ae387"
+        />
+      </slot>
+    </div>
     <vuetable
       ref="vuetable"
       :apiUrl="apiUrl"
@@ -31,7 +42,10 @@
       :appendParams="moreParams"
       :perPage="perPage"
       :queryParams="queryParams"
+      :noDataTemplate="noDataTemplate"
       @vuetable:pagination-data="onPaginationData"
+      @vuetable:loading="onLoading"
+      @vuetable:loaded="onLoaded"
     />
     <div class="d-flex justify-content-center mb-4">
       <vuetable-pagination ref="pagination"
@@ -52,10 +66,12 @@
   import DefaultPerPageDefinition from './data/items-per-page-definition'
   import Vue from 'vue'
   import DataTableStyles from '../vuestic-datatable/data/data-table-styles'
+  import SpringSpinner from 'epic-spinners/src/components/lib/SpringSpinner'
 
   export default {
     name: 'vuestic-data-table',
     components: {
+      SpringSpinner,
       FilterBar,
       Vuetable,
       VuetablePagination,
@@ -71,7 +87,8 @@
       },
       httpOptions: {
         type: Object,
-        default: () => {}
+        default: () => {
+        }
       },
       filterQuery: {
         type: String,
@@ -142,7 +159,9 @@
         colorClasses: {},
         filterText: '',
         dataCount: 0,
-        css: DataTableStyles
+        css: DataTableStyles,
+        loading: false,
+        noDataTemplate: ''
       }
     },
     computed: {
@@ -251,13 +270,25 @@
           pagination: pagination,
           data: data.slice(pagination.from - 1, pagination.to)
         }
+      },
+      onLoading () {
+        this.noDataTemplate = ''
+        this.loading = true
+        this.$emit('vuestic:loading')
+      },
+      onLoaded () {
+        this.noDataTemplate = this.$t('tables.dataTable.noDataAvailable')
+        this.loading = false
+        this.$emit('vuestic:loaded')
       }
     }
   }
 </script>
 
 <style lang="scss">
   .vuestic-data-table {
+    min-height: 24rem;
+
     .form-group {
       margin-bottom: 1rem;
     }
@@ -283,5 +314,19 @@
         display: none;
       }
     }
+
+    .data-table-loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 40%;
+      left: 50%;
+    }
+  }
+
+  .data-loading {
+    opacity: .5;
+    pointer-events: none;
   }
 </style>