integrate data mode

ratiw · Jun 2, 2017 · 957ce3e · 957ce3e
1 parent 7d2b703
commit 957ce3e
Showing 1 changed file with 82 additions and 20 deletions.
diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
@@ -44,8 +44,8 @@
           <template v-for="field in tableFields">
             <template v-if="field.visible">
               <template v-if="isSpecialField(field.name)">
-                <td v-if="apiMode && extractName(field.name) == '__sequence'" :class="['vuetable-sequence', field.dataClass]"
-                  v-html="tablePagination.from + index">
+                <td v-if="extractName(field.name) == '__sequence'" :class="['vuetable-sequence', field.dataClass]"
+                  v-html="renderSequence(index)">
                 </td>
                 <td v-if="extractName(field.name) == '__handle'" :class="['vuetable-handle', field.dataClass]"
                   v-html="renderIconTag(['handle-icon', css.handleIcon])"
@@ -145,8 +145,18 @@ export default {
       default: true
     },
     data: {
-      type: Array,
-      default: function() {
+      type: [Array, Object],
+      default () {
+        return null
+      }
+    },
+    dataTotal: {
+      type: Number,
+      default: 0
+    },
+    dataManager: {
+      type: Function,
+      default () {
         return null
       }
     },
@@ -228,10 +238,10 @@ export default {
       type: String,
       default: 'id'
     },
-    renderIcon: {
-      type: Function,
-      default: null
-    },
+    // renderIcon: {
+    //   type: Function,
+    //   default: null
+    // },
     css: {
       type: Object,
       default () {
@@ -277,12 +287,9 @@ export default {
       this.fireEvent('initialized', this.tableFields)
     })
 
-    if (this.apiMode && this.loadOnStart) {
+    if (this.loadOnStart) {
       this.loadData()
     }
-    if (this.apiMode == false && this.data.length > 0) {
-      this.setData(this.data)
-    }
   },
   computed: {
     useDetailRow () {
@@ -307,13 +314,13 @@ export default {
     displayEmptyDataRow () {
       return this.countTableData === 0 && this.noDataTemplate.length > 0
     },
-    lessThanMinRows: function() {
+    lessThanMinRows () {
       if (this.tableData === null || this.tableData.length === 0) {
         return true
       }
       return this.tableData.length < this.minRows
     },
-    blankRows: function() {
+    blankRows () {
       if (this.tableData === null || this.tableData.length === 0) {
         return this.minRows
       }
@@ -322,6 +329,12 @@ export default {
       }
 
       return this.minRows - this.tableData.length
+    },
+    isApiMode () {
+      return this.apiMode 
+    },
+    isDataMode () {
+      return ! this.apiMode
     }
   },
   methods: {
@@ -360,7 +373,20 @@ export default {
     },
     setData (data) {
       this.apiMode = false
-      this.tableData = data
+      if (Array.isArray(data)) {
+        this.tableData = data
+        return
+      }
+
+      this.fireEvent('loading')
+
+      this.tableData = this.getObjectValue(data, this.dataPath, null)
+      this.tablePagination = this.getObjectValue(data, this.paginationPath, null)
+
+      this.$nextTick(function() {
+        this.fireEvent('pagination-data', this.tablePagination)
+        this.fireEvent('loaded')
+      })
     },
     setTitle (str) {
       if (this.isSpecialField(str)) {
@@ -379,6 +405,11 @@ export default {
 
       return title
     },
+    renderSequence (index) {
+      return this.tablePagination 
+        ? this.tablePagination.from + index 
+        : index
+    },
     isSpecialField (fieldName) {
       return fieldName.slice(0, 2) === '__'
     },
@@ -397,7 +428,10 @@ export default {
       return arr.indexOf(str) === -1
     },
     loadData (success = this.loadSuccess, failed = this.loadFailed) {
-      if (! this.apiMode) return
+      if (this.isDataMode) {
+        this.callDataManager()
+        return
+      }
 
       this.fireEvent('loading')
 
@@ -526,7 +560,7 @@ export default {
       return this.sortOrder[i].field === field.name && this.sortOrder[i].sortField === field.sortField
     },
     orderBy (field, event) {
-      if ( ! this.isSortable(field) || ! this.apiMode) return
+      if ( ! this.isSortable(field) ) return
 
       let key = this.multiSortKey.toLowerCase() + 'Key'
 
@@ -809,9 +843,37 @@ export default {
       this.tableFields[index].visible = ! this.tableFields[index].visible
     },
     renderIconTag (classes, options = '') {
-      return this.renderIcon === null
+      return typeof(this.css.renderIcon) === 'undefined'
         ? `<i class="${classes.join(' ')}" ${options}></i>`
-        : this.renderIcon(classes, options)
+        : this.css.renderIcon(classes, options)
+    },
+    makePagination (total = null, perPage = null, currentPage = null) {
+      let pagination = {}
+      total = total === null ? this.dataTotal : total
+      perPage = perPage === null ? this.perPage : perPage
+      currentPage = currentPage === null ? this.currentPage : currentPage
+
+      return {
+        'total': total,
+        'per_page': perPage,
+        'current_page': currentPage,
+        'last_page': Math.ceil(total / perPage) || 0,
+        'next_page_url': '',
+        'prev_page_url': '',
+        'from': (currentPage -1) * perPage +1,
+        'to': Math.min(currentPage * perPage, total)
+      }
+    },
+    normalizeSortOrder () {
+      this.sortOrder.forEach(function(item) {
+        item.sortField = item.sortField || item.field
+      })
+    },
+    callDataManager () {
+      if (this.dataManager === null) return
+
+      this.normalizeSortOrder()
+      this.setData(this.dataManager(this.sortOrder, this.makePagination()))
     },
     onRowClass (dataItem, index) {
       if (this.rowClassCallback !== '') {
@@ -877,7 +939,7 @@ export default {
         this.loadData();
       }
     },
-    'apiUrl': function (newVal, oldVal) {
+    'apiUrl'  (newVal, oldVal) {
       if(this.reactiveApiUrl && newVal !== oldVal)
         this.refresh()
     }