From 015d2fed216efb2e856b4c92604f036a98ab4429 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 2 Aug 2022 16:11:39 +0530
Subject: [PATCH] feat(gui-v2): add debounce for cell value update/save

re #2962

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Cell.vue  | 54 +++++++++++++++++--
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts |  2 +-
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index e41018b4d9..fec01e7fe3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,25 +1,71 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { useColumn, useVModel } from '#imports'
+import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
+  editEnabled: boolean
 }
 
 interface Emits {
   (event: 'update:modelValue', value: any): void
 }
 
-const { column, ...rest } = defineProps<Props>()
+const { column, editEnabled, ...rest } = defineProps<Props>()
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits(['update:modelValue', 'save'])
 
 provide(ColumnInj, column)
 
-const vModel = useVModel(rest, 'modelValue', emit)
+provide(
+  'editEnabled',
+  computed(() => editEnabled),
+)
+
+let changed = $ref(false)
+const syncValue = useDebounceFn(function() {
+  emit('save')
+}, 1000)
+
+const isAutoSaved = $computed(() => {
+  return [
+    UITypes.SingleLineText,
+    UITypes.LongText,
+    UITypes.PhoneNumber,
+    UITypes.Email,
+    UITypes.URL,
+    UITypes.Number,
+    UITypes.Decimal,
+    UITypes.Percent,
+    UITypes.Count,
+    UITypes.AutoNumber,
+    UITypes.SpecificDBType,
+    UITypes.Geometry,
+  ].includes(column.uidt as UITypes)
+})
+
+const isManualSaved = $computed(() => {
+  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
+})
+
+const vModel = computed({
+  get: () => value,
+  set: (val) => {
+    if (val !== value) {
+      changed = true
+      emit('update:modelValue', val)
+      if (isAutoSaved) {
+        syncValue()
+      } else if (!isManualSaved) {
+        emit('save')
+      }
+    }
+  },
+})
 
 const {
   isURL,
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 0155cd5bee..bf0c1c4896 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -262,7 +262,7 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
                   v-model="row.row[columnObj.title]"
                   :column="columnObj"
                   :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                  @update:model-value="updateOrSaveRow(row, columnObj.title)"
+                  @save="updateOrSaveRow(row, columnObj.title)"
                 />
               </td>
             </tr>
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 2fc7ec96f3..6e1cec77b0 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -174,7 +174,7 @@ export function useViewData(
   const deleteRow = async (rowIndex: number) => {
     try {
       const row = formattedData.value[rowIndex]
-      if (!row.rowMeta.new){
+      if (!row.rowMeta.new) {
         const id = meta?.value?.columns
           ?.filter((c) => c.pk)
           .map((c) => row.row[c.title as any])