fix: CDataTable - fix sorting function and items watcher

Author: woothu

src/components/table/CDataTable.vue

@@ -298,11 +298,12 @@ export default {
     },
     items (val, oldVal) {
       if (
-        val.length !== oldVal.length ||
-        JSON.stringify(val) !== JSON.stringify(oldVal)
+        val && oldVal && val.length === oldVal.length && 
+        JSON.stringify(val) === JSON.stringify(oldVal)
       ) {
-        this.passedItems = val
+        return
       }
+      this.passedItems = val || []
     },
     totalPages: {
       immediate: true,
@@ -313,7 +314,7 @@ export default {
   },
   computed: {
     columnFiltered () {
-      let items = this.passedItems.slice()
+      let items = this.passedItems
       if (this.columnFilter && this.columnFilter.external) {
         return items
       }
@@ -333,7 +334,7 @@ export default {
       })
     },
     tableFiltered () {
-      let items = this.columnFiltered.slice()
+      let items = this.columnFiltered
       if (!this.tableFilterState || (this.tableFilter && this.tableFilter.external)) {
         return items
       }
@@ -349,10 +350,15 @@ export default {
       if (!col || !this.rawColumnNames.includes(col) || this.sorter.external) {
         return this.tableFiltered
       }
+
       //if values in column are to be sorted by numeric value they all have to be type number
       const flip = this.sorterState.asc ? 1 : -1
-      return this.tableFiltered.slice().sort((a,b) => {
-        return (a[col] > b[col]) ? 1 * flip : ((b[col] > a[col]) ? -1 * flip : 0)
+      return this.tableFiltered.slice().sort((item , item2) => {
+        const value  = item[col]
+        const value2 = item2[col]
+        const a = typeof value === 'number' ? value : String(value)
+        const b = typeof value2 === 'number' ? value2 : String(value2)
+        return a > b ? 1 * flip : b > a ? -1 * flip : 0
       })
     },
     firstItemIndex () {

src/components/table/tests/CDataTable.spec.js

@@ -5,13 +5,13 @@ const ComponentName = 'CDataTable'
 const defaultWrapper = mount(Component)
 
 const items = [
-  {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {username: 'Estavan Lykos', registered: 2014, role: 'Staff', status: 'Banned'},
+  {username: 'Chetan Mohamed', registered: 2011, role: 'Admin', status: 'Inactive'},
+  {username: 'Derick Maximinus', registered: 212, role: 'Member', status: 'Pending'},
+  {username: 'Yiorgos Avraamu', registered: 2013, role: 'Member', status: 'Active'},
   {
     username: 'Friderik Dávid', 
-    registered: '2011/01/21',
+    registered: 1999,
     role: 'Staff', 
     status: 'Active',
     _cellClasses: { registered: 'custom-cell-class' }
@@ -45,7 +45,7 @@ function createCustomWrapper () {
       columnFilter: true,
       footer: true,
       sorterValue: { column: 'username', asc: false },
-      columnFilterValue: { registered: '2012', 'non_existing': 'smh' },
+      columnFilterValue: { registered: '2', 'non_existing': 'smh' },
       pagination: true
     }
   })
@@ -68,6 +68,9 @@ describe(ComponentName, () => {
 
     customWrapper.find('tr').findAll('th').at(3).trigger('click')
     expect(customWrapper.vm.sortedItems[0].status).toBe('Pending')
+
+    customWrapper.find('tr').findAll('th').at(1).trigger('click')
+    expect(customWrapper.vm.sortedItems[0].registered).toBe(212)
   })
   it('doesnt change sorter when clicked on not sortable column', () => {
     const oldSorterColumn = customWrapper.vm.sorter.column
@@ -91,15 +94,12 @@ describe(ComponentName, () => {
     customWrapper.find('tbody').find('tr').trigger('click')
     expect(customWrapper.emitted()['row-clicked']).toBeTruthy()
   })
-  it('correctly updates items', () => {
-    //test if watcher is not fired by coverage
+  it('correctly triggers items update', () => {
     const localWrapper = createCustomWrapper()
+    //set to cover branch, could not detect if computed prop is changed
     localWrapper.setProps({ items: items.slice() })
-    expect(localWrapper.vm.sortedItems.length).toBe(4)
-
-    const newItems = items.slice(0, 2)
-    localWrapper.setProps({ items: newItems })
-    expect(localWrapper.vm.sortedItems.length).toBe(2)
+    localWrapper.setProps({ items: null })
+    expect(localWrapper.vm.columnFiltered.length).toBe(0)
   })
   it('updates column filter on events depending on lazy modifier', () => {
     const localWrapper = createCustomWrapper()

src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

@@ -303,7 +303,7 @@ exports[`CDataTable renders correctly 2`] = `
             class=""
           >
             
-                2012/01/01
+                2013
               
           </td>
           <td
@@ -342,7 +342,7 @@ exports[`CDataTable renders correctly 2`] = `
             class=""
           >
             
-                2012/02/01
+                2014
               
           </td>
           <td
@@ -381,7 +381,7 @@ exports[`CDataTable renders correctly 2`] = `
             class=""
           >
             
-                2012/03/01
+                212
               
           </td>
           <td
@@ -420,7 +420,7 @@ exports[`CDataTable renders correctly 2`] = `
             class=""
           >
             
-                2012/02/01
+                2011
               
           </td>
           <td