feat(gui-v2): add debounce for cell value update/save

re #2962

Signed-off-by: Pranav C <pranavxc@gmail.com>

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,

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>

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])