feat: Improvement for DataTable refresh

Author: rstoenescu

dev/components/components/data-table.vue

@@ -92,7 +92,6 @@
       </div>
 
       <q-data-table
-        ref="table"
         :data="table"
         :config="config"
         :columns="columns"
@@ -140,17 +139,9 @@ export default {
         this.table.splice(row.index, 1)
       })
     },
-    refresh (start) {
-      if (!start) {
-        if (this.timeout) {
-          clearTimeout(this.timeout)
-          this.timeout = null
-        }
-        return
-      }
+    refresh (done) {
       this.timeout = setTimeout(() => {
-        this.$refs.table.toggleRefresh()
-        this.timeout = null
+        done()
       }, 5000)
     }
   },

src/vue-components/data-table/DataTable.vue

@@ -3,8 +3,11 @@
     <div v-if="hasToolbar && toolbar === ''" class="q-data-table-toolbar upper-toolbar row reverse-wrap items-center justify-end">
       <div v-if="config.title" class="q-data-table-title ellipsis auto" v-html="config.title"></div>
       <div class="row items-center">
-        <button v-if="config.refresh" class="primary clear" @click="toggleRefresh">
-          <i v-text="refreshing ? 'cached' : 'refresh'" :class="{'animate-spin-reverse': refreshing}"></i>
+        <button v-if="config.refresh && !refreshing" class="primary clear" @click="refresh">
+          <i>refresh</i>
+        </button>
+        <button v-if="refreshing" class="disabled">
+          <i class="animate-spin-reverse">cached</i>
         </button>
         <button v-if="config.filter" class="primary clear" @click="toolbar = 'filter'">
           <i>filter_list</i>
@@ -221,12 +224,17 @@ export default {
     format (row, col) {
       return col.format ? col.format(row[col.field]) : row[col.field]
     },
-    refresh (active) {
-      this.refreshing = active
-      this.$emit('refresh', active)
-    },
-    toggleRefresh () {
-      this.refresh(!this.refreshing)
+    refresh (done) {
+      if (done === true) {
+        this.refreshing = false
+        return
+      }
+      if (!this.refreshing) {
+        this.refreshing = true
+        this.$emit('refresh', () => {
+          this.refreshing = false
+        })
+      }
     }
   },
   components: {