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,24 +479,27 @@ watch(
                       </div>
                       <span class="flex-1" />
                       <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
-                        <span
-                          v-if="row.rowMeta?.commentCount"
-                          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] }"
-                          @click="expandForm(row, state)"
-                        >
-                          {{ 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"
+                        <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)"
+                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                             @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>
@@ -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
   }
 }