Modified components

Author: coderdiaz

src/components/ClientDatasource.vue

@@ -0,0 +1,47 @@
+<script>
+import DatasourceUtils from '../utils/DatasourceUtils'
+import Pagination from './Pagination.vue'
+import { EventBus } from '../utils/EventBus'
+export default {
+    name: 'ClientDatasource',
+    components: {
+        Pagination
+    },
+    render (h) {
+        return (<div class="vue-client-datasource"></div>)
+    },
+    data () {
+      return {
+        perpage: 10,
+        selected: null, // row and Object selected on click event
+        indexSelected: -1, // index row selected on click event
+        search: '' // word to search in the table
+      }
+    }
+}
+</script>
+<style scoped>
+.vue-datasource .panel-body {
+  padding: 0
+}
+
+.vue-datasource table {
+  margin-bottom: 0
+}
+
+.vue-datasource .panel-footer .btn-group-actions {
+  margin: 10px 0
+}
+
+.pr1 {
+  padding-right: 5px
+}
+
+.pr2 {
+  padding-right: 10px;
+}
+
+.mr1 {
+  margin-right: 5px;
+}
+</style>

src/components/ServerDatasource.vue

@@ -1,15 +1,18 @@
 <script>
+import axios from 'axios'
+import _ from 'lodash'
 import DatasourceUtils from '../utils/DatasourceUtils'
 import Pagination from './Pagination.vue'
+import MoonLoader from 'vue-spinner/src/MoonLoader.vue'
 import { EventBus } from '../utils/EventBus'
 export default {
-  name: 'Datasource',
+  name: 'ServerDatasource',
   components: {
-    Pagination
+    Pagination, MoonLoader
   },
   render (h) {
     return (
-      <div class="vue-datasource">
+      <div class="vue-server-datasource">
         <div class="panel panel-default">
           <div class="panel-heading">
             <div class="form-inline">
@@ -21,7 +24,6 @@ export default {
               </div>
               <div class="form-group pull-right">
                 <input class="form-control mr1" type="text" on-input={ (e) => this.sync('search', e.target.value) } placeholder={this.translation.placeholder_search} />
-                <button type="button" class=" btn btn-primary" on-click={ (e) => this.searching(e) }>{ this.translation.search }</button>
               </div>
               <div class="clearfix"></div>
             </div>
@@ -40,6 +42,7 @@ export default {
                 </tr>
               </tbody>
             </table>
+            { this.spinnerItem }
           </div>
           <div class="panel-footer">
             <div class="pull-left btn-group btn-group-actions">
@@ -56,11 +59,11 @@ export default {
   },
   props: {
     /**
-     * Table information
+     * Table source url
      * @type {Array}
      */
-    tableData: {
-      type: Array,
+    source: {
+      type: String,
       required: true
     },
     /**
@@ -102,21 +105,6 @@ export default {
       type: Array,
       required: true
     },
-    /**
-     * Pagination information about the table data
-     * @type {Object}
-     */
-    pagination: {
-      type: Object,
-      default () {
-        return {
-          total: 0,
-          to: 0,
-          from: 0,
-          per_page: 15
-        }
-      }
-    },
     /**
      * Action buttons
      * @type {Array}
@@ -130,19 +118,36 @@ export default {
   },
   created () {
     EventBus.$on('pagination-change', this.changePage)
+    this.setData()
   },
   data () {
     return {
       perpage: 10,
+      tableData: [],
+      loading: false,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
-      search: '' // word to search in the table
+      search: '', // word to search in the table,
+      pagination: {
+        total: 0,
+        to: 0,
+        from: 0,
+        per_page: 10,
+        current_page: 1
+      }
     }
   },
   computed: {
+    spinnerItem () {
+      if (this.loading) {
+        return <div class="vue-spinner-wrapper">
+          <moon-loader></moon-loader>
+        </div>
+      }
+    },
     limitOptions () {
       return this.limits.map((limit, index) => {
-        return <option value={ limit } selected={ this.perpage === limit }>{ limit }</option>
+        return <option value={ limit } selected={ parseInt(this.perpage) === parseInt(limit) }>{ limit }</option>
       })
     },
     columnItems () {
@@ -193,7 +198,23 @@ export default {
     searching (e) {
       this.selected = null
       this.indexSelected = -1
+      this.pagination.current_page = 1
+      this.setData()
       this.$emit('searching', this.search)
+    },
+    setData () {
+      this.loading = true
+      axios.get(`${this.source}?per_page=${this.perpage}&page=${this.pagination.current_page}&search=${this.search}`)
+      .then((response) => {
+        this.loading = false
+        this.tableData = response.data.data
+        this.pagination = response.data.pagination
+        this.perpage = this.pagination.per_page
+      })
+      .catch((error) => {
+        this.loading = false
+        console.warn(`[VueDatasource] ${error}`)
+      })
     }
   },
   watch: {
@@ -204,27 +225,53 @@ export default {
     perpage () {
       this.selected = null
       this.indexSelected = -1
+      this.pagination.current_page = 1
+      this.setData()
       this.$emit('change', {perpage: this.perpage, page: 1})
     },
     tableData () {
       this.selected = null
       this.indexSelected = -1
-    }
+    },
+    search: _.debounce(function () {
+      this.setData()
+    }, 500)
   }
 }
 </script>
-<style scoped>
-.vue-datasource .panel-body {
-  padding: 0
-}
-.vue-datasource table {
-  margin-bottom: 0
-}
-.vue-datasource .panel-footer .btn-group-actions {
-  margin: 10px 0
+<style lang="scss" scoped>
+.vue-server-datasource {
+  .panel-body {
+    position: relative;
+    padding: 0;
+  }
+  table {
+    margin-bottom: 0;
+  }
+  .panel-footer {
+    .btn-group-actions {
+      margin: 10px 0;
+    }
+  }
+  .vue-spinner-wrapper {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(229, 229, 229, 0.5);
+    
+    .v-spinner {
+      position: absolute; 
+      top: 50%;
+      left: 50%;
+      margin-left: -25px;
+      margin-top: -50px;
+    }
+  }
 }
+
 .pr1 {
-  padding-right: 5px
+  padding-right: 5px;
 }
 .pr2 {
   padding-right: 10px;