QTable - pagination and ripple (Refactored) (#1589)

* QTable - pagination and ripple

- calculate number of rows after filtering
- move pagination watcher in table-pagination (preserve page on filter if it's still available)
- ripple must be clipped on bottom if it's anywhere in the table

* Update table-filter.js

* Update table-filter.js

* QTable: use extend instead of Object.assign

* QTable: optimize pagesNumber watcher

* Update table-pagination.js

dev/components/components/data-table2.vue

@@ -78,16 +78,19 @@
 
     <h4>Custom top</h4>
     <q-table
-      :data="data"
+      :data="dataDyn"
       :columns="columns"
-      :filter="filter"
-      :loading="loading"
+      :filter="filterDyn"
+      :loading="loadingDyn"
       row-key="name"
       color="primary"
     >
       <template slot="top" slot-scope="props">
-        <q-btn flat dense color="primary" icon="add" label="Add row" />
-        <q-btn class="on-right" flat dense color="primary" icon="refresh" label="Refresh" />
+        <q-btn flat dense color="primary" :disable="loadingDyn" icon="add" label="Add row" @click="addRow" />
+        <q-btn class="on-right" flat dense color="primary" :disable="loadingDyn" icon="remove" label="Remove row" @click="removeRow" />
+        <q-btn class="on-right" flat dense color="primary" :disable="loadingDyn" icon="refresh" label="Refresh" />
+        <div class="col" />
+        <q-search hide-underline color="primary" v-model="filterDyn" />
       </template>
     </q-table>
 
@@ -244,16 +247,123 @@
 </template>
 
 <script>
+import { extend } from 'quasar'
+
+const data = [
+  {
+    name: 'Frozen Yogurt',
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: '14%',
+    iron: '1%'
+  },
+  {
+    name: 'Ice cream sandwich',
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: '8%',
+    iron: '1%'
+  },
+  {
+    name: 'Eclair',
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: '6%',
+    iron: '7%'
+  },
+  {
+    name: 'Cupcake',
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: '3%',
+    iron: '8%'
+  },
+  {
+    name: 'Gingerbread',
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: '7%',
+    iron: '16%'
+  },
+  {
+    name: 'Jelly bean',
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: '0%',
+    iron: '0%'
+  },
+  {
+    name: 'Lollipop',
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: '0%',
+    iron: '2%'
+  },
+  {
+    name: 'Honeycomb',
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: '0%',
+    iron: '45%'
+  },
+  {
+    name: 'Donut',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: '2%',
+    iron: '22%'
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%'
+  }
+]
+
 export default {
   data () {
     return {
       filter: '',
+      filterDyn: '',
       serverPagination: {
         page: 1,
         rowsNumber: 10
       },
       serverData: [],
       loading: false,
+      loadingDyn: false,
       visibleColumns: ['desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'],
       selected: [],
 
@@ -274,108 +384,8 @@ export default {
         { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
         { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
       ],
-      data: [
-        {
-          name: 'Frozen Yogurt',
-          calories: 159,
-          fat: 6.0,
-          carbs: 24,
-          protein: 4.0,
-          sodium: 87,
-          calcium: '14%',
-          iron: '1%'
-        },
-        {
-          name: 'Ice cream sandwich',
-          calories: 237,
-          fat: 9.0,
-          carbs: 37,
-          protein: 4.3,
-          sodium: 129,
-          calcium: '8%',
-          iron: '1%'
-        },
-        {
-          name: 'Eclair',
-          calories: 262,
-          fat: 16.0,
-          carbs: 23,
-          protein: 6.0,
-          sodium: 337,
-          calcium: '6%',
-          iron: '7%'
-        },
-        {
-          name: 'Cupcake',
-          calories: 305,
-          fat: 3.7,
-          carbs: 67,
-          protein: 4.3,
-          sodium: 413,
-          calcium: '3%',
-          iron: '8%'
-        },
-        {
-          name: 'Gingerbread',
-          calories: 356,
-          fat: 16.0,
-          carbs: 49,
-          protein: 3.9,
-          sodium: 327,
-          calcium: '7%',
-          iron: '16%'
-        },
-        {
-          name: 'Jelly bean',
-          calories: 375,
-          fat: 0.0,
-          carbs: 94,
-          protein: 0.0,
-          sodium: 50,
-          calcium: '0%',
-          iron: '0%'
-        },
-        {
-          name: 'Lollipop',
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          protein: 0,
-          sodium: 38,
-          calcium: '0%',
-          iron: '2%'
-        },
-        {
-          name: 'Honeycomb',
-          calories: 408,
-          fat: 3.2,
-          carbs: 87,
-          protein: 6.5,
-          sodium: 562,
-          calcium: '0%',
-          iron: '45%'
-        },
-        {
-          name: 'Donut',
-          calories: 452,
-          fat: 25.0,
-          carbs: 51,
-          protein: 4.9,
-          sodium: 326,
-          calcium: '2%',
-          iron: '22%'
-        },
-        {
-          name: 'KitKat',
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          protein: 7,
-          sodium: 54,
-          calcium: '12%',
-          iron: '6%'
-        }
-      ]
+      data: [...data],
+      dataDyn: [...data]
     }
   },
   methods: {
@@ -420,6 +430,29 @@ export default {
       if (rowIndex > -1 && rowIndex < this.data.length - 1) {
         this.data.splice(rowIndex + 1, 0, this.data.splice(rowIndex, 1)[0])
       }
+    },
+    addRow () {
+      this.loadingDyn = true
+      setTimeout(() => {
+        const
+          addPoint = Math.floor(Math.random() * (this.dataDyn.length + 1)),
+          row = data[Math.floor(Math.random() * data.length)]
+        if (!row.__count) {
+          row.__count = 0
+        }
+        row.__count += 1
+        const addRow = extend({}, row, { name: `${row.name} (${row.__count})` })
+        this.dataDyn = [...this.dataDyn.slice(0, addPoint), addRow, ...this.dataDyn.slice(addPoint)]
+        this.loadingDyn = false
+      }, 500)
+    },
+    removeRow () {
+      this.loadingDyn = true
+      setTimeout(() => {
+        const removePoint = Math.floor(Math.random() * this.dataDyn.length)
+        this.dataDyn = [...this.dataDyn.slice(0, removePoint), ...this.dataDyn.slice(removePoint + 1)]
+        this.loadingDyn = false
+      }, 500)
     }
   },
   mounted () {

src/components/table/QTable.js

@@ -67,17 +67,20 @@ export default {
     }
   },
   computed: {
-    computedRows () {
+    computedData () {
       let rows = this.data.slice().map((row, i) => {
         row.__index = i
         return row
       })
 
       if (rows.length === 0) {
-        return []
+        return {
+          rowsNumber: 0,
+          rows: []
+        }
       }
       if (this.isServerSide) {
-        return rows
+        return { rows }
       }
 
       const { sortBy, descending, rowsPerPage } = this.computedPagination
@@ -90,16 +93,21 @@ export default {
         rows = this.sortMethod(rows, sortBy, descending)
       }
 
+      const rowsNumber = rows.length
+
       if (rowsPerPage) {
         rows = rows.slice(this.firstRowIndex, this.lastRowIndex)
       }
 
-      return rows
+      return { rowsNumber, rows }
+    },
+    computedRows () {
+      return this.computedData.rows
     },
     computedRowsNumber () {
       return this.isServerSide
         ? this.computedPagination.rowsNumber || 0
-        : this.data.length
+        : this.computedData.rowsNumber
     },
     nothingToDisplay () {
       return this.computedRows.length === 0

src/components/table/table-body.js

@@ -1,3 +1,4 @@
+import extend from '../../utils/extend'
 import { QCheckbox } from '../checkbox'
 
 export default {
@@ -88,7 +89,7 @@ export default {
       })
 
       data.cols = data.cols.map(col => {
-        const c = Object.assign({}, col)
+        const c = extend({}, col)
         Object.defineProperty(c, 'value', {
           get: () => this.getCellValue(col, data.row)
         })

src/components/table/table-pagination.js

@@ -1,3 +1,5 @@
+import extend from '../../utils/extend'
+
 export default {
   props: {
     pagination: Object,
@@ -18,7 +20,7 @@ export default {
   },
   computed: {
     computedPagination () {
-      return Object.assign({}, this.innerPagination, this.pagination)
+      return extend({}, this.innerPagination, this.pagination)
     },
     firstRowIndex () {
       const { page, rowsPerPage } = this.computedPagination
@@ -50,9 +52,20 @@ export default {
       }))
     }
   },
+  watch: {
+    pagesNumber (lastPage) {
+      const currentPage = this.computedPagination.page
+      if (lastPage && !currentPage) {
+        this.setPagination({ page: 1 })
+      }
+      else if (lastPage < currentPage) {
+        this.setPagination({ page: lastPage })
+      }
+    }
+  },
   methods: {
     setPagination (val) {
-      const newPagination = Object.assign({}, this.computedPagination, val)
+      const newPagination = extend({}, this.computedPagination, val)
 
       if (this.isServerSide) {
         this.requestServerInteraction({
@@ -82,6 +95,6 @@ export default {
     }
   },
   created () {
-    this.$emit('update:pagination', Object.assign({}, this.computedPagination))
+    this.$emit('update:pagination', extend({}, this.computedPagination))
   }
 }