Datatables - data and api mode improvements (epicmaxco#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
shekarsiri · Apr 12, 2018 · e89a433 · e89a433
1 parent b6c0eba
commit e89a433
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 95 deletions.
diff --git 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
@@ -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/...ents/vuestic-datatable/data/local-data.js → ...board/data-visualisation-tab/TableData.js b/...ents/vuestic-datatable/data/local-data.js → ...board/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
@@ -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
       }
     }
   }