fix(gui): allow user to expand row if any ongoing save/update completes

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

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" />
+                        <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>
@@ -702,7 +705,7 @@ watch(
 
   .nc-expand {
     &:not(.nc-comment) {
-      @apply hidden;
+      //@apply hidden;
     }
 
     &.nc-comment {

packages/nc-gui/composables/useViewData.ts

@@ -205,6 +205,7 @@ export function useViewData(
     ltarState: Record<string, any> = {},
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
+    formattedData.value[rowIndex].rowMeta.saving = true
     try {
       const { missingRequiredColumns, insertObj } = await populateInsertObject({
         meta: metaValue!,
@@ -225,7 +226,7 @@ export function useViewData(
 
       formattedData.value?.splice(rowIndex ?? 0, 1, {
         row: insertedData,
-        rowMeta: {},
+        rowMeta: { ...row.rowMeta, new: undefined },
         oldRow: { ...insertedData },
       })
 
@@ -233,6 +234,8 @@ export function useViewData(
       return insertedData
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
+    } finally {
+      formattedData.value[rowIndex].rowMeta.saving = false
     }
   }
 
@@ -241,6 +244,7 @@ export function useViewData(
     property: string,
     { metaValue = meta.value, viewMetaValue = viewMeta.value }: { metaValue?: TableType; viewMetaValue?: ViewType } = {},
   ) {
+    toUpdate.rowMeta.saving = true
     try {
       const id = extractPkFromRow(toUpdate.row, meta.value?.columns as ColumnType[])
 
@@ -272,6 +276,8 @@ export function useViewData(
       Object.assign(toUpdate.oldRow, updatedRowData)
     } catch (e: any) {
       message.error(`${t('msg.error.rowUpdateFailed')} ${await extractSdkResponseErrorMsg(e)}`)
+    } finally {
+      toUpdate.rowMeta.saving = false
     }
   }
 

packages/nc-gui/lib/types.ts

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