From 2cfcfe010062250582daefd48e22d7e8d5e1865f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 27 Nov 2021 11:35:01 +0530
Subject: [PATCH] refactor(gui): update debounce time, show loader instead of
 toaster(on save)

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/editableCell.vue        | 12 ++++++++----
 .../project/spreadsheet/rowsXcDataTable.vue        |  8 ++++----
 .../project/spreadsheet/views/xcGridView.vue       | 14 +++++++++++---
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index 58fb170116..a585de7605 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -5,7 +5,7 @@
     @keydown.stop.right
     @keydown.stop.up
     @keydown.stop.down
-    @keydown.stop.enter="$emit('save')"
+    @keydown.stop.enter="cahnged=false,$emit('save')"
   >
     <editable-attachment-cell
       v-if="isAttachment"
@@ -170,7 +170,7 @@ export default {
     destroyed: false,
     syncDataDebounce: debounce(async function(self) {
       await self.syncData()
-    }, 500)
+    }, 1000)
   }),
   computed: {
     localState: {
@@ -180,10 +180,14 @@ export default {
       set(val) {
         this.changed = true
         if (val !== this.value) {
+          this.$emit('input', val)
           // debugger
-          this.syncDataDebounce(this)
+          if (this.isAttachment || this.isEnum || this.isBoolean || this.isSet || this.isTime) {
+            this.syncData()
+          } else {
+            this.syncDataDebounce(this)
+          }
         }
-        this.$emit('input', val)
       }
     },
     parentListeners() {
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 9aa965da93..5924b00e9f 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -951,9 +951,9 @@ export default {
               oldRow: { ...insertedData }
             })
 
-            this.$toast.success(`${insertedData[this.primaryValueColumn] ? `${insertedData[this.primaryValueColumn]}'s r` : 'R'}ow saved successfully.`, {
+            /* this.$toast.success(`${insertedData[this.primaryValueColumn] ? `${insertedData[this.primaryValueColumn]}'s r` : 'R'}ow saved successfully.`, {
               position: 'bottom-center'
-            }).goAway(3000)
+            }).goAway(3000) */
           } catch (e) {
             if (e.response && e.response.data && e.response.data.msg) {
               this.$toast.error(e.response.data.msg).goAway(3000)
@@ -1008,9 +1008,9 @@ export default {
           this.$set(this.data[row], 'row', { ...rowObj, ...newData })
 
           this.$set(oldRow, column._cn, rowObj[column._cn])
-          this.$toast.success(`${rowObj[this.primaryValueColumn] ? `${rowObj[this.primaryValueColumn]}'s c` : 'C'}olumn '${column.cn}' updated successfully.`, {
+          /*    this.$toast.success(`${rowObj[this.primaryValueColumn] ? `${rowObj[this.primaryValueColumn]}'s c` : 'C'}olumn '${column.cn}' updated successfully.`, {
             position: 'bottom-center'
-          }).goAway(3000)
+          }).goAway(3000) */
         } catch (e) {
           if (e.response && e.response.data && e.response.data.msg) {
             this.$toast.error(e.response.data.msg).goAway(3000)
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 57c6be4a0d..01b78e601f 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -97,7 +97,7 @@
       </thead>
       <tbody v-click-outside="onClickOutside">
         <tr
-          v-for="({row:rowObj, rowMeta},row) in data"
+          v-for="({row:rowObj, rowMeta, saving},row) in data"
           :key="row"
           class=" nc-grid-row"
         >
@@ -112,6 +112,7 @@
                 class="ml-2 grey--text"
                 :class="{ 'row-no' : !isPublicView }"
               >{{ row + 1 }}</span>
+
               <template v-if="!isPublicView">
                 <v-checkbox
                   v-if="rowMeta"
@@ -122,7 +123,7 @@
                 />
                 <v-spacer />
                 <v-icon
-                  v-if="!groupedAggCount[ids[row]] && !isLocked"
+                  v-if="!groupedAggCount[ids[row]] && !isLocked && !saving"
                   color="pink"
                   small
                   class="row-expand-icon nc-row-expand-icon  mr-1 pointer"
@@ -132,13 +133,20 @@
                 </v-icon>
               </template>
               <v-chip
-                v-if="groupedAggCount[ids[row]]"
+                v-if="groupedAggCount[ids[row]] && !saving"
                 x-small
                 :color="colors[ groupedAggCount[ids[row]] % colors.length]"
                 @click="expandRow(row,rowMeta)"
               >
                 {{ groupedAggCount[ids[row]] }}
               </v-chip>
+
+              <template v-if="saving">
+                <v-spacer />
+                <v-icon small>
+                  mdi-spin mdi-loading
+                </v-icon>
+              </template>
             </div>
           </td>
           <td