From e89a43342bd1123a2cd95afefded90021fa84077 Mon Sep 17 00:00:00 2001
From: Andrei Hrabouski <smartapant@gmail.com>
Date: Thu, 12 Apr 2018 12:46:10 +0300
Subject: [PATCH] Datatables - data and api mode improvements (#159)

* feat(datatable): add css class, update vuetable-2 version

* feat(datatable): datamode - accept data as property

* fix(datatable): default per page fix

* feat(datatable): datamode - data as prop, advanced filtering

* feat(datatable): api mode - filters, http-fetch and http-options

* feat(datatable): additional button slot

* feat(datatable): filterable fields to computed

* feat(datatable): optional search field

* fix(datatable): data mode pagination path
---
 package.json                                  |   2 +-
 .../DataVisualisation.vue                     |  25 ++-
 .../data-visualisation-tab/TableData.js}      |  14 +-
 src/components/tables/Table.vue               |  18 +-
 .../vuestic-datatable/VuesticDataTable.vue    | 198 ++++++++++++------
 .../datatable-components/FilterBar.vue        |   7 +-
 .../datatable-components/ItemsPerPage.vue     |   6 +
 7 files changed, 175 insertions(+), 95 deletions(-)
 rename src/{vuestic-theme/vuestic-components/vuestic-datatable/data/local-data.js => components/dashboard/data-visualisation-tab/TableData.js} (99%)

diff --git a/package.json b/package.json
index df05e8ac1..1360aecd1 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "vue-slider-component": "2.3.3",
     "vue-toasted": "^1.1.24",
     "vue2-circle-progress": "^1.0.3",
-    "vuetable-2": "1.7.0",
+    "vuetable-2": "1.7.5",
     "vuex": "^3.0.1",
     "vuex-i18n": "^1.7.0",
     "vuex-router-sync": "5.0.0"
diff --git a/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue b/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue
index 09547d856..fc8228606 100644
--- a/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue
+++ b/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue
@@ -7,15 +7,15 @@
         </div>
       </div>
       <div class="col-md-6">
-        <vuestic-data-table :apiMode="apiMode"
-                    :data="tableData"
-                    :tableFields="tableFields"
-                    :itemsPerPage="itemsPerPage"
-                    :defaultPerPage="defaultTablePerPage"
-                    :onEachSide="onEachSide"
-                    :sortFunctions="sortFunctions"
-                    :paginationPath="paginationPath">
-        </vuestic-data-table>
+        <vuestic-data-table
+          :apiMode="apiMode"
+          :tableData="tableData"
+          :tableFields="tableFields"
+          :itemsPerPage="itemsPerPage"
+          :onEachSide="onEachSide"
+          :sortFunctions="sortFunctions"
+          :dataModeFilterableFields="dataModeFilterableFields"
+        />
       </div>
     </div>
   </div>
@@ -24,7 +24,7 @@
 <script>
   import Vue from 'vue'
   import BadgeColumn from 'components/tables/BadgeColumn.vue'
-  import LocalData from 'vuestic-components/vuestic-datatable/data/local-data'
+  import TableData from './TableData'
   import DonutChartData from './DonutChartData'
   import FieldsDef from './fields-definition'
 
@@ -38,10 +38,10 @@
         donutChartData: DonutChartData,
         apiMode: false,
         sortFunctions: FieldsDef.sortFunctions,
-        tableData: LocalData.data,
+        tableData: TableData,
         onEachSide: 1,
         tableFields: FieldsDef.tableFields,
-        paginationPath: 'pagination',
+        dataModeFilterableFields: ['name'],
         itemsPerPage: [
           {
             value: 5
@@ -50,7 +50,6 @@
             value: 6
           }
         ],
-        defaultTablePerPage: 6
       }
     }
   }
diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/data/local-data.js b/src/components/dashboard/data-visualisation-tab/TableData.js
similarity index 99%
rename from src/vuestic-theme/vuestic-components/vuestic-datatable/data/local-data.js
rename to src/components/dashboard/data-visualisation-tab/TableData.js
index 46ccfb2a5..de70138ab 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-datatable/data/local-data.js
+++ b/src/components/dashboard/data-visualisation-tab/TableData.js
@@ -1,14 +1,4 @@
 export default {
-  'pagination': {
-    'total': 200,
-    'per_page': 50,
-    'current_page': 1,
-    'last_page': 4,
-    'next_page_url': 'https://vuetable.ratiw.net/api/users?per_page=50&page=2',
-    'prev_page_url': null,
-    'from': 1,
-    'to': 50
-  },
   'data': [
     {
       'id': 1,
@@ -1360,5 +1350,7 @@ export default {
         'fax': '1-753-472-6796'
       }
     }
-  ]
+  ],
+  'filterableFields': ['name']
 }
+
diff --git a/src/components/tables/Table.vue b/src/components/tables/Table.vue
index 45ca18f98..2486ab28f 100644
--- a/src/components/tables/Table.vue
+++ b/src/components/tables/Table.vue
@@ -180,12 +180,15 @@
     <div class="row">
       <div class="col-md-12">
         <vuestic-widget :headerText="$t('tables.advanced')">
-          <vuestic-data-table :apiUrl="apiUrl"
-                      :tableFields="tableFields"
-                      :itemsPerPage="itemsPerPage"
-                      :sortFunctions="sortFunctions"
-                      :apiMode="apiMode"
-                      :paginationPath="paginationPath"></vuestic-data-table>
+          <vuestic-data-table
+            :apiUrl="apiUrl"
+            :tableFields="tableFields"
+            :itemsPerPage="itemsPerPage"
+            :defaultPerPage="defaultTablePerPage"
+            :sortFunctions="sortFunctions"
+            :apiMode="apiMode"
+            :paginationPath="paginationPath"
+          />
         </vuestic-widget>
       </div>
     </div>
@@ -211,7 +214,8 @@
         tableFields: FieldsDef.tableFields,
         itemsPerPage: ItemsPerPageDef.itemsPerPage,
         sortFunctions: FieldsDef.sortFunctions,
-        paginationPath: ''
+        paginationPath: '',
+        defaultTablePerPage: 6
       }
     }
   }
diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue
index 49d250ce2..d938bbc50 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue
@@ -1,25 +1,35 @@
 <template>
-  <div class="table-responsive">
-    <div class="d-flex flex-md-row flex-column justify-content-md-between align-items-center">
-      <filter-bar @filter="onFilterSet"></filter-bar>
-      <items-per-page :options="itemsPerPage"
-                      :defaultPerPage="defaultPerPageComputed"
-                      @items-per-page="onItemsPerPage"></items-per-page>
+  <div class="vuestic-data-table table-responsive">
+    <div class="d-flex flex-md-row flex-column align-items-center" :class="controlsAlignmentClass">
+      <filter-bar
+        @filter="onFilterSet"
+        v-show="filterInputShown"
+      />
+      <div class="datatable-controls d-flex flex-row">
+        <div class="form-group">
+          <slot name="additionalTableControl"></slot>
+        </div>
+        <items-per-page :options="itemsPerPage"
+                        :defaultPerPage="defaultPerPageComputed"
+                        @items-per-page="onItemsPerPage"
+                        v-show="perPageSelectorShown"></items-per-page>
+      </div>
     </div>
-    <vuetable ref="vuetable"
-              :apiUrl="apiUrl"
-              :apiMode="apiMode"
-              :fields="tableFields"
-              :data="tableData"
-              :dataTotal="dataCount"
-              :dataManager="dataManager"
-              :css="css.table"
-              dataPath="data"
-              v-bind:paginationPath="paginationPath"
-              :appendParams="moreParams"
-              :perPage="perPage"
-              @vuetable:pagination-data="onPaginationData">
-    </vuetable>
+    <vuetable
+      ref="vuetable"
+      :apiUrl="apiUrl"
+      :apiMode="apiMode"
+      :httpFetch="httpFetch"
+      :httpOptions="httpOptions"
+      :fields="tableFields"
+      :dataManager="dataManager"
+      :css="css.table"
+      dataPath="data"
+      :paginationPath="paginationPathComputed"
+      :appendParams="moreParams"
+      :perPage="perPage"
+      @vuetable:pagination-data="onPaginationData"
+    />
     <div class="d-flex justify-content-center mb-4">
       <vuetable-pagination ref="pagination"
                            :css="css.pagination"
@@ -38,11 +48,8 @@
   import ItemsPerPage from './datatable-components/ItemsPerPage.vue'
   import DefaultPerPageDefinition from './data/items-per-page-definition'
   import Vue from 'vue'
-  import LocalData from './data/local-data'
   import DataTableStyles from '../vuestic-datatable/data/data-table-styles'
 
-  const originalData = LocalData.data
-
   export default {
     name: 'vuestic-data-table',
     components: {
@@ -55,6 +62,18 @@
       apiUrl: {
         type: String
       },
+      httpFetch: {
+        type: Function,
+        default: null
+      },
+      httpOptions: {
+        type: Object,
+        default: () => {}
+      },
+      filterQuery: {
+        type: String,
+        default: 'filter'
+      },
       tableFields: {
         type: Array,
         required: true
@@ -63,66 +82,117 @@
         type: Array,
         default: () => DefaultPerPageDefinition.itemsPerPage
       },
+      perPageSelectorShown: {
+        type: Boolean,
+        default: true
+      },
+      filterInputShown: {
+        type: Boolean,
+        default: true
+      },
       defaultPerPage: {
         type: Number,
         default: DefaultPerPageDefinition.itemsPerPage[0].value
       },
       onEachSide: {
         type: Number,
-        default () {
-          return 2
-        }
+        default: 2
       },
       apiMode: {
         type: Boolean,
+        default: true
+      },
+      tableData: {
+        type: Object,
         default () {
-          return true
+          return {
+            data: []
+          }
         }
       },
-      data: {
-        type: Array
+      dataModeFilterableFields: {
+        type: Array,
+        default: () => []
       },
       sortFunctions: {
         type: Object
       },
       paginationPath: {
         type: String,
-        default () {
-          return ''
-        }
-      }
+        default: ''
+      },
     },
     data () {
       return {
-        tableData: LocalData,
         perPage: this.defaultPerPage,
         colorClasses: {},
-        moreParams: {},
+        filterText: '',
         dataCount: 0,
         css: DataTableStyles
       }
     },
     computed: {
+      controlsAlignmentClass () {
+        return {
+          'justify-content-md-between': this.filterInputShown,
+          'justify-content-md-end': !this.filterInputShown
+        }
+      },
+      moreParams () {
+        return {
+          [this.filterQuery]: this.filterText
+        }
+      },
+      dataModeFilterableFieldsComputed () {
+        const dataItem = this.tableData.data[0] || {}
+        const filterableFields = this.dataModeFilterableFields
+
+        if (!filterableFields.length) {
+          const itemFields = Object.keys(dataItem)
+          itemFields.forEach(field => {
+            if (typeof dataItem[field] !== 'object') {
+              filterableFields.push(field)
+            }
+          })
+        }
+
+        return filterableFields
+      },
+      filteredTableData () {
+        const txt = new RegExp(this.filterText, 'i')
+
+        let filteredData = this.tableData.data.slice()
+
+        filteredData = this.tableData.data.filter((item) => {
+          return this.dataModeFilterableFieldsComputed.some(field => {
+            const val = item[field] + ''
+            return val.search(txt) >= 0
+          })
+        })
+
+        return {
+          data: filteredData
+        }
+      },
       defaultPerPageComputed () {
         let defaultPerPage = DefaultPerPageDefinition.itemsPerPage[0].value
-        if (this.$options.propsData.itemsPerPage) {
+
+        if (this.$options.propsData.defaultPerPage) {
+          defaultPerPage = this.$options.propsData.defaultPerPage
+        } else if (this.$options.propsData.itemsPerPage) {
           defaultPerPage = this.$options.propsData.itemsPerPage[0].value
         }
+
         return defaultPerPage
+      },
+      paginationPathComputed () {
+        return this.apiMode ? this.paginationPath : 'pagination'
       }
     },
+
     methods: {
       onFilterSet (filterText) {
-        if (this.apiMode) {
-          this.moreParams = {
-            'filter': filterText
-          }
-        } else {
-          const txt = new RegExp(filterText, 'i')
-          this.tableData.data = originalData.filter(function (item) {
-            return item.name.search(txt) >= 0 || item.email.search(txt) >= 0
-          })
-        }
+        this.filterText = filterText
         Vue.nextTick(() => this.$refs.vuetable.refresh())
       },
       onItemsPerPage (itemsPerPageValue) {
@@ -136,7 +206,7 @@
         this.$refs.vuetable.changePage(page)
       },
       dataManager (sortOrder, pagination) {
-        let data = this.tableData.data
+        let data = this.filteredTableData.data
         let sortFunctions = this.sortFunctions
 
         if (sortOrder.length > 0) {
@@ -167,25 +237,31 @@
 <style lang="scss">
   @import "../../../sass/variables";
 
-  @media (max-width: 1258px) {
-    .pagination-link-btn:first-child, .pagination-link-btn:last-child {
-      display: none;
+  .vuestic-data-table {
+    .form-group {
+      margin-bottom: 1rem;
     }
 
-    .pagination-link-btn:nth-child(2) {
-      border-top-left-radius: $btn-border-radius !important;
-      border-bottom-left-radius: $btn-border-radius !important;
-    }
+    @media (max-width: 1258px) {
+      .pagination-link-btn:first-child, .pagination-link-btn:last-child {
+        display: none;
+      }
+
+      .pagination-link-btn:nth-child(2) {
+        border-top-left-radius: $btn-border-radius !important;
+        border-bottom-left-radius: $btn-border-radius !important;
+      }
 
-    .pagination-link-btn:nth-last-child(2) {
-      border-top-right-radius: $btn-border-radius !important;
-      border-bottom-right-radius: $btn-border-radius !important;
+      .pagination-link-btn:nth-last-child(2) {
+        border-top-right-radius: $btn-border-radius !important;
+        border-bottom-right-radius: $btn-border-radius !important;
+      }
     }
-  }
 
-  @media (max-width: 576px) {
-    .hide-not-focused-btn:not(.focus) {
-      display: none;
+    @media (max-width: 576px) {
+      .hide-not-focused-btn:not(.focus) {
+        display: none;
+      }
     }
   }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue
index 54401bffc..84258eaf6 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue
@@ -13,12 +13,15 @@
     name: 'filterBar',
     data () {
       return {
-        filterText: ''
+        filterText: '',
+        typingTimeout: null,
+        typingDelay: 250
       }
     },
     methods: {
       doFilter () {
-        this.$emit('filter', this.filterText)
+        this.typingTimeout && clearTimeout(this.typingTimeout)
+        this.typingTimeout = setTimeout(() => this.$emit('filter', this.filterText), this.typingDelay)
       }
     }
   }
diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue
index cb83ed558..20b46aa3a 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue
@@ -35,6 +35,11 @@
         selected: this.defaultPerPage
       }
     },
+
+    mounted () {
+      this.selectedItemsPerPage(this.selected)
+    },
+
     methods: {
       selectedItemsPerPage (optionValue) {
         this.selected = optionValue
@@ -50,6 +55,7 @@
   .btn.dropdown-toggle, .dropdown-menu {
     min-width: 13rem;
     max-width: 13rem;
+    margin-left: 1rem;
   }
 
   .dropdown-item, .dropdown-toggle {