Merge pull request #4088 from nocodb/feat/grid-view-improvements

Fix: Grid view - miscellaneous bugs

packages/nc-gui/components/smartsheet/Form.vue

@@ -117,7 +117,7 @@ async function submitForm() {
     if (e.errorFields.length) return
   }
 
-  const insertedRowData = await insertRow(formState)
+  const insertedRowData = await insertRow({ row: formState, oldRow: {}, rowMeta: { new: true } })
 
   if (insertedRowData) {
     await syncLTARRefs(insertedRowData)

packages/nc-gui/components/smartsheet/Grid.vue

@@ -479,6 +479,8 @@ watch(
                       </div>
                       <span class="flex-1" />
                       <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                        <a-spin v-if="row.rowMeta.saving" class="!flex items-center" />
+                        <template v-else>
                           <span
                             v-if="row.rowMeta?.commentCount"
                             class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
@@ -497,6 +499,7 @@ watch(
                               @click="expandForm(row, state)"
                             />
                           </div>
+                        </template>
                       </div>
                     </div>
                   </td>

packages/nc-gui/composables/useViewData.ts

@@ -11,6 +11,7 @@ import {
   message,
   populateInsertObject,
   ref,
+  until,
   useApi,
   useGlobal,
   useI18n,
@@ -200,11 +201,13 @@ export function useViewData(
   }
 
   async function insertRow(
-    row: Record<string, any>,
+    currentRow: Row,
     rowIndex = formattedData.value?.length,
     ltarState: Record<string, any> = {},
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
+    const row = currentRow.row;
+    if (currentRow.rowMeta) currentRow.rowMeta.saving = true
     try {
       const { missingRequiredColumns, insertObj } = await populateInsertObject({
         meta: metaValue!,
@@ -223,9 +226,9 @@ export function useViewData(
         insertObj,
       )
 
-      formattedData.value?.splice(rowIndex ?? 0, 1, {
+      Object.assign(currentRow, {
-        row: insertedData,
+        row: { ...insertedData, ...row },
-        rowMeta: {},
+        rowMeta: { ...(currentRow.rowMeta || {}), new: undefined },
         oldRow: { ...insertedData },
       })
 
@@ -233,6 +236,8 @@ export function useViewData(
       return insertedData
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
+    } finally {
+      if (currentRow.rowMeta) currentRow.rowMeta.saving = false
     }
   }
 
@@ -241,6 +246,7 @@ export function useViewData(
     property: string,
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
+    if (toUpdate.rowMeta) toUpdate.rowMeta.saving = true
     try {
       const id = extractPkFromRow(toUpdate.row, meta.value?.columns as ColumnType[])
 
@@ -272,6 +278,8 @@ export function useViewData(
       Object.assign(toUpdate.oldRow, updatedRowData)
     } catch (e: any) {
       message.error(`${t('msg.error.rowUpdateFailed')} ${await extractSdkResponseErrorMsg(e)}`)
+    } finally {
+      if (toUpdate.rowMeta) toUpdate.rowMeta.saving = false
     }
   }
 
@@ -281,8 +289,11 @@ export function useViewData(
     ltarState?: Record<string, any>,
     args: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
+    // if new row and save is in progress then wait until the save is complete
+    await until(() => !(row.rowMeta?.new && row.rowMeta?.saving)).toMatch((v) => v)
+
     if (row.rowMeta.new) {
-      return await insertRow(row.row, formattedData.value.indexOf(row), ltarState, args)
+      return await insertRow(row, formattedData.value.indexOf(row), ltarState, args)
     } else {
       await updateRowProperty(row, property!, args)
     }

packages/nc-gui/lib/types.ts

@@ -57,6 +57,7 @@ export interface Row {
     selected?: boolean
     commentCount?: number
     changed?: boolean
+    saving?: boolean
   }
 }
 

packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -22,6 +22,7 @@ watch(
     until(tables)
       .toMatch((tables) => tables.length > 0)
       .then(() => {
+        loading.value = true
         getMeta(tableTitle as string, true).finally(() => (loading.value = false))
       })
   },
@@ -30,7 +31,13 @@ watch(
 </script>
 
 <template>
-  <div class="w-full h-full">
+  <div class="w-full h-full relative">
     <LazyTabsSmartsheet :active-tab="activeTab" />
+
+    <general-overlay :model-value="loading" inline transition class="!bg-opacity-15">
+      <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
+        <a-spin size="large" />
+      </div>
+    </general-overlay>
   </div>
 </template>