From 30a3c0ae633687f30cb5bebf0592a3b87756bdf8 Mon Sep 17 00:00:00 2001
From: Walter Tommasi <tommsi20@gmail.com>
Date: Mon, 24 Aug 2020 23:29:39 +0200
Subject: [PATCH] Add debounce search to table

---
 packages/docs/components/Table.md             |   3 +
 packages/oruga/package-lock.json              | 125 ++++++++++++++++++
 packages/oruga/package.json                   |   1 +
 .../oruga/src/components/table/Table.spec.js  |  17 +++
 packages/oruga/src/components/table/Table.vue |  49 ++++---
 .../src/components/table/examples/Table.md    |   6 +
 packages/oruga/src/utils/helpers.spec.js      |  56 +++++++-
 7 files changed, 239 insertions(+), 18 deletions(-)

diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
index 2ecb4d7a4..115c150b3 100644
--- a/packages/docs/components/Table.md
+++ b/packages/docs/components/Table.md
@@ -791,6 +791,8 @@ title: Table
   <section>
     <o-table :data="data" :columns="columns"> </o-table>
     <hr />
+    <p>You can debounce search filter to avoid multiple filtering when typing.</p>
+    <o-table :data="data" :columns="columns" :debounce-search="1000"> </o-table>
     <p>You can also customize the search input using a scoped slot.</p>
     <o-table :data="data">
       <template v-for="column in columns">
@@ -910,6 +912,7 @@ title: Table
 | height                    | Table fixed height                                                                                                                              | number\|string | -                                       |                                                              |
 | filtersEvent              | Add a native event to filter                                                                                                                    | string         | -                                       | ''                                                           |
 | cardLayout                | Force to show table with cards layout                                                                                                           | boolean        | -                                       |                                                              |
+| debounceSearch            | Filtering debounce time (in milliseconds)                                                                                                       | number         | -                                       |                                                              |
 | showHeader                | Show header                                                                                                                                     | boolean        | -                                       | Config -> <code> 'table.showHeader': true</code>             |
 | rootClass                 |                                                                                                                                                 | string         | -                                       |                                                              |
 | wrapperClass              |                                                                                                                                                 | string         | -                                       |                                                              |
diff --git a/packages/oruga/package-lock.json b/packages/oruga/package-lock.json
index 3a7811312..18da031e5 100644
--- a/packages/oruga/package-lock.json
+++ b/packages/oruga/package-lock.json
@@ -1544,6 +1544,51 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@sinonjs/commons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
+      "integrity": "sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "@sinonjs/formatio": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-5.0.1.tgz",
+      "integrity": "sha512-KaiQ5pBf1MpS09MuA0kp6KBQt2JUOQycqVG1NZXvzeaXe5LGFqAKueIS0bw4w0P9r7KuBSVdUk5QjXsUdu2CxQ==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1",
+        "@sinonjs/samsam": "^5.0.2"
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.1.0.tgz",
+      "integrity": "sha512-42nyaQOVunX5Pm6GRJobmzbS7iLI+fhERITnETXzzwDZh+TtDr/Au3yAvXVjFmZ4wEUaE4Y3NFZfKv0bV0cbtg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.6.0",
+        "lodash.get": "^4.4.2",
+        "type-detect": "^4.0.8"
+      }
+    },
+    "@sinonjs/text-encoding": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
+      "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
+      "dev": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -10358,6 +10403,12 @@
         "promise": "^7.0.1"
       }
     },
+    "just-extend": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.1.0.tgz",
+      "integrity": "sha512-ApcjaOdVTJ7y4r08xI5wIqpvwS48Q0PBG4DJROcEkH1f8MdAiNFyFxz3xoL0LWAVwjrwPYZdVHHxhRHcx/uGLA==",
+      "dev": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -10618,6 +10669,12 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
+      "dev": true
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -11153,6 +11210,36 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "nise": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-4.0.4.tgz",
+      "integrity": "sha512-bTTRUNlemx6deJa+ZyoCUTRvH3liK5+N6VQZ4NIw90AgDXY6iPnsqplNFf6STcj+ePk0H/xqxnP75Lr0J0Fq3A==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0",
+        "@sinonjs/fake-timers": "^6.0.0",
+        "@sinonjs/text-encoding": "^0.7.1",
+        "just-extend": "^4.0.2",
+        "path-to-regexp": "^1.7.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -14280,6 +14367,38 @@
         }
       }
     },
+    "sinon": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.0.3.tgz",
+      "integrity": "sha512-IKo9MIM111+smz9JGwLmw5U1075n1YXeAq8YeSFlndCLhAL5KGn6bLgu7b/4AYHTV/LcEMcRm2wU2YiL55/6Pg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.2",
+        "@sinonjs/fake-timers": "^6.0.1",
+        "@sinonjs/formatio": "^5.0.1",
+        "@sinonjs/samsam": "^5.1.0",
+        "diff": "^4.0.2",
+        "nise": "^4.0.4",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -15551,6 +15670,12 @@
         "prelude-ls": "~1.1.2"
       }
     },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
     "type-fest": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
diff --git a/packages/oruga/package.json b/packages/oruga/package.json
index 9743fcb4a..1768a8b42 100644
--- a/packages/oruga/package.json
+++ b/packages/oruga/package.json
@@ -83,6 +83,7 @@
     "rollup-copy-plugin": "0.1.0",
     "rollup-plugin-terser": "6.1.0",
     "rollup-plugin-vue": "5.1.9",
+    "sinon": "9.0.3",
     "typescript": "3.8.3",
     "vue": "2.6.11",
     "vue-class-component": "7.2.3",
diff --git a/packages/oruga/src/components/table/Table.spec.js b/packages/oruga/src/components/table/Table.spec.js
index 43fe04925..1b69368b3 100644
--- a/packages/oruga/src/components/table/Table.spec.js
+++ b/packages/oruga/src/components/table/Table.spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils'
+import { useFakeTimers } from 'sinon'
 import OInput from '@components/input/Input'
 import OTable from '@components/table/Table'
 import { setVueInstance } from '../../utils/config'
@@ -140,5 +141,21 @@ describe('OTable', () => {
             bodyRows = wrapper.findAll('tbody tr')
             expect(bodyRows).toHaveLength(3) // Jesse, John and Justin
         })
+
+        it('debounce search filtering when debounce-search is defined', () => {
+            let clock = useFakeTimers()
+            wrapper.setProps({
+                debounceSearch: 1000
+            })
+            for (let i = 0; i < 10; i++) {
+                searchInput.vm.$emit('input', 'J'.repeat(10 - i))
+                clock.tick(500)
+                bodyRows = wrapper.findAll('tbody tr')
+                expect(bodyRows).toHaveLength(5) // No filtering yet
+            }
+            clock.tick(1000)
+            bodyRows = wrapper.findAll('tbody tr')
+            expect(bodyRows).toHaveLength(2) // Filtering after debounce
+        })
     })
 })
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index f4445f2ce..9beb10b78 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -308,7 +308,7 @@
 
 <script>
 import BaseComponentMixin from '../../utils/BaseComponentMixin'
-import { getValueByPath, indexOf, multiColumnSort, toCssDimension } from '../../utils/helpers'
+import { getValueByPath, indexOf, multiColumnSort, toCssDimension, debounce } from '../../utils/helpers'
 import config from '../../utils/config'
 import { VueInstance } from '../../utils/config'
 
@@ -557,6 +557,8 @@ export default {
         },
         /** Force to show table with cards layout */
         cardLayout: Boolean,
+        /** Filtering debounce time (in milliseconds) */
+        debounceSearch: Number,
         /** Show header */
         showHeader: {
             type: Boolean,
@@ -885,24 +887,19 @@ export default {
             this.newCheckedRows = [...rows]
         },
 
+        debounceSearch: {
+            handler(value) {
+                this.debouncedHandleFiltersChange = debounce(this, this.handleFiltersChange, value)
+            },
+            immediate: true
+        },
+
         filters: {
             handler(value) {
-                if (this.backendFiltering) {
-                    this.$emit('filters-change', value)
+                if (this.debounceSearch) {
+                    this.debouncedHandleFiltersChange(value)
                 } else {
-                    this.newData = this.data.filter(
-                        (row) => this.isRowFiltered(row))
-                    if (!this.backendPagination) {
-                        this.newDataTotal = this.newData.length
-                    }
-                    if (!this.backendSorting) {
-                        if (this.sortMultiple &&
-                            this.sortMultipleDataLocal && this.sortMultipleDataLocal.length > 0) {
-                            this.doSortMultiColumn()
-                        } else if (Object.keys(this.currentSortColumn).length > 0) {
-                            this.doSortSingleColumn(this.currentSortColumn)
-                        }
-                    }
+                    this.handleFiltersChange(value)
                 }
             },
             deep: true
@@ -972,10 +969,28 @@ export default {
                 { [this.computedClass('table', 'detailedIconExpandedClass', 'o-table-detail-icon-expanded')]: this.isVisibleDetailRow(row) }
             ]
         },
-
         onFiltersEvent(event) {
             this.$emit(`filters-event-${this.filtersEvent}`, { event, filters: this.filters })
         },
+        handleFiltersChange(value) {
+            if (this.backendFiltering) {
+                this.$emit('filters-change', value)
+            } else {
+                this.newData = this.data.filter(
+                    (row) => this.isRowFiltered(row))
+                if (!this.backendPagination) {
+                    this.newDataTotal = this.newData.length
+                }
+                if (!this.backendSorting) {
+                    if (this.sortMultiple &&
+                        this.sortMultipleDataLocal && this.sortMultipleDataLocal.length > 0) {
+                        this.doSortMultiColumn()
+                    } else if (Object.keys(this.currentSortColumn).length > 0) {
+                        this.doSortSingleColumn(this.currentSortColumn)
+                    }
+                }
+            }
+        },
         findIndexOfSortData(column) {
             const sortObj = this.sortMultipleDataComputed.filter((i) => i.field === column.field)[0]
             return this.sortMultipleDataComputed.indexOf(sortObj) + 1
diff --git a/packages/oruga/src/components/table/examples/Table.md b/packages/oruga/src/components/table/examples/Table.md
index 0af71f96f..babecbf7d 100644
--- a/packages/oruga/src/components/table/examples/Table.md
+++ b/packages/oruga/src/components/table/examples/Table.md
@@ -812,6 +812,12 @@
             :columns="columns">
         </o-table>
         <hr />
+        <p>You can debounce search filter to avoid multiple filtering when typing.</p>
+        <o-table
+            :data="data"
+            :columns="columns"
+            :debounce-search="1000">
+        </o-table>
         <p>You can also customize the search input using a scoped slot.</p>
         <o-table
             :data="data">
diff --git a/packages/oruga/src/utils/helpers.spec.js b/packages/oruga/src/utils/helpers.spec.js
index f40b45b70..eced6859f 100644
--- a/packages/oruga/src/utils/helpers.spec.js
+++ b/packages/oruga/src/utils/helpers.spec.js
@@ -1,4 +1,8 @@
-import { getValueByPath, indexOf, merge, escapeRegExpChars, removeElement } from './helpers'
+import { useFakeTimers } from 'sinon'
+import {
+    getValueByPath, indexOf, merge,
+    escapeRegExpChars, removeElement, debounce
+} from './helpers'
 
 describe('helpers', () => {
     describe('getValueByPath', () => {
@@ -143,4 +147,54 @@ describe('helpers', () => {
             expect(elm.parentNode.removeChild).toHaveBeenCalled()
         })
     })
+
+    let clock
+    let func
+    beforeEach(() => {
+        clock = useFakeTimers()
+        func = jest.fn()
+    })
+
+    afterEach(() => {
+        clock.restore()
+    })
+
+    describe('debounce', () => {
+        it('is not called immediately', () => {
+            const debouncedFunc = debounce(func, 1000)
+            debouncedFunc()
+            expect(func).toHaveBeenCalledTimes(0)
+        })
+
+        it('is not called upon several rapid calls', () => {
+            const debouncedFunc = debounce(func, 1000)
+            for (let i = 0; i < 10; i++) {
+                clock.tick(500)
+                debouncedFunc()
+            }
+            expect(func).toHaveBeenCalledTimes(0)
+        })
+
+        it('is called after debounce time', () => {
+            const debouncedFunc = debounce(func, 1000)
+            debouncedFunc()
+            clock.tick(1000)
+            expect(func).toHaveBeenCalledTimes(1)
+        })
+
+        it('is called immediately if immediate is true', () => {
+            const debouncedFunc = debounce(func, 1000, true)
+            debouncedFunc()
+            expect(func).toHaveBeenCalledTimes(1)
+        })
+
+        it('is called once upon several rapid calls if immediate is true', () => {
+            const debouncedFunc = debounce(func, 1000, true)
+            for (let i = 0; i < 10; i++) {
+                clock.tick(500)
+                debouncedFunc()
+            }
+            expect(func).toHaveBeenCalledTimes(1)
+        })
+    })
 })