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,24 +479,27 @@ watch(
                       </div>
                       <span class="flex-1" />
                       <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
-                        <span
+                        <a-spin v-if="row.rowMeta.saving" class="!flex items-center" />
-                          v-if="row.rowMeta?.commentCount"
+                        <template v-else>
-                          class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
+                          <span
-                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                            v-if="row.rowMeta?.commentCount"
-                          @click="expandForm(row, state)"
+                            class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
-                        >
+                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
-                          {{ row.rowMeta.commentCount }}
-                        </span>
-                        <div
-                          v-else
-                          class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
-                        >
-                          <MdiArrowExpand
-                            v-e="['c:row-expand']"
-                            class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                             @click="expandForm(row, state)"
-                          />
+                          >
-                        </div>
+                            {{ row.rowMeta.commentCount }}
+                          </span>
+                          <div
+                            v-else
+                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                          >
+                            <MdiArrowExpand
+                              v-e="['c:row-expand']"
+                              class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                              @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>