From c3919db9df18c6a75e15e1b3f9fb63e0474119e4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 1 Dec 2022 19:05:48 +0530
Subject: [PATCH 1/3] fix: pass argument in correct order

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 331 +++++++++---------
 1 file changed, 166 insertions(+), 165 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index aadfaa2539..a4c0172ff4 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -154,8 +154,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-      : container.scrollLeft
+        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+        : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -165,8 +165,8 @@ const getContainerScrollForElement = (
     relativePos.bottom + (offset?.bottom || 0) > 0
       ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0)
       : relativePos.top - (offset?.top || 0) < 0
-      ? container.scrollTop + relativePos.top - (offset?.top || 0)
-      : container.scrollTop
+        ? container.scrollTop + relativePos.top - (offset?.top || 0)
+        : container.scrollTop
 
   return scroll
 }
@@ -535,7 +535,7 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
       for (const field of (args.metaValue || meta.value)?.columns ?? []) {
         if (isVirtualCol(field)) continue
         if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
-          await updateOrSaveRow(currentRow, field.title!, args)
+          await updateOrSaveRow(currentRow, field.title!, {}, args)
         }
       }
     }
@@ -653,104 +653,105 @@ const closeAddColumnDropdown = () => {
           @contextmenu="showContextMenu"
         >
           <thead ref="tableHead">
-            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
-              <th data-testid="grid-id-column">
-                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" data-testid="nc-check-all">
-                  <template v-if="!readOnly">
-                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                    <div
-                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                      class="nc-check-all w-full items-center"
-                    >
-                      <a-checkbox v-model:checked="selectedAllRecords" />
+          <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
+            <th data-testid="grid-id-column">
+              <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center"
+                   data-testid="nc-check-all">
+                <template v-if="!readOnly">
+                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                  <div
+                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                    class="nc-check-all w-full items-center"
+                  >
+                    <a-checkbox v-model:checked="selectedAllRecords" />
 
-                      <span class="flex-1" />
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="text-gray-500">#</div>
-                  </template>
-                </div>
-              </th>
-              <th
-                v-for="col in fields"
-                :key="col.title"
-                v-xc-ver-resize
-                :data-col="col.id"
-                :data-title="col.title"
-                @xcresize="onresize(col.id, $event)"
-                @xcresizing="onXcResizing(col.title, $event)"
-                @xcresized="resizingCol = null"
-              >
-                <div class="w-full h-full bg-gray-100 flex items-center">
-                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
+                    <span class="flex-1" />
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="text-gray-500">#</div>
+                </template>
+              </div>
+            </th>
+            <th
+              v-for="col in fields"
+              :key="col.title"
+              v-xc-ver-resize
+              :data-col="col.id"
+              :data-title="col.title"
+              @xcresize="onresize(col.id, $event)"
+              @xcresizing="onXcResizing(col.title, $event)"
+              @xcresized="resizingCol = null"
+            >
+              <div class="w-full h-full bg-gray-100 flex items-center">
+                <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-                </div>
-              </th>
-              <th
-                v-if="isAddingColumnAllowed"
-                v-e="['c:column:add']"
-                class="cursor-pointer"
-                @click.stop="addColumnDropdown = true"
+                <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
+              </div>
+            </th>
+            <th
+              v-if="isAddingColumnAllowed"
+              v-e="['c:column:add']"
+              class="cursor-pointer"
+              @click.stop="addColumnDropdown = true"
+            >
+              <a-dropdown
+                v-model:visible="addColumnDropdown"
+                :trigger="['click']"
+                overlay-class-name="nc-dropdown-grid-add-column"
               >
-                <a-dropdown
-                  v-model:visible="addColumnDropdown"
-                  :trigger="['click']"
-                  overlay-class-name="nc-dropdown-grid-add-column"
-                >
-                  <div class="h-full w-[60px] flex items-center justify-center">
-                    <MdiPlus class="text-sm nc-column-add" />
-                  </div>
+                <div class="h-full w-[60px] flex items-center justify-center">
+                  <MdiPlus class="text-sm nc-column-add" />
+                </div>
 
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAddProvider
-                      v-if="addColumnDropdown"
-                      :column-position="columnOrder"
-                      @submit="closeAddColumnDropdown"
-                      @cancel="closeAddColumnDropdown"
-                      @click.stop
-                      @keydown.stop
-                    />
-                  </template>
-                </a-dropdown>
-              </th>
-            </tr>
+                <template #overlay>
+                  <SmartsheetColumnEditOrAddProvider
+                    v-if="addColumnDropdown"
+                    :column-position="columnOrder"
+                    @submit="closeAddColumnDropdown"
+                    @cancel="closeAddColumnDropdown"
+                    @click.stop
+                    @keydown.stop
+                  />
+                </template>
+              </a-dropdown>
+            </th>
+          </tr>
           </thead>
           <tbody ref="tbodyEl">
-            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
-              <template #default="{ state }">
-                <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">
-                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
-                    <div class="items-center flex gap-1 min-w-[55px]">
-                      <div
-                        v-if="!readOnly || !isLocked"
-                        class="nc-row-no text-xs text-gray-500"
-                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                      >
-                        {{ rowIndex + 1 }}
-                      </div>
-                      <div
-                        v-if="!readOnly"
-                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                        class="nc-row-expand-and-checkbox"
-                      >
-                        <a-checkbox v-model:checked="row.rowMeta.selected" />
-                      </div>
-                      <span class="flex-1" />
-
-                      <div
-                        v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
-                        class="nc-expand"
-                        :data-testid="`nc-expand-${rowIndex}`"
-                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
-                      >
-                        <a-spin
-                          v-if="row.rowMeta.saving"
-                          class="!flex items-center"
-                          :data-testid="`row-save-spinner-${rowIndex}`"
-                        />
-                        <template v-else>
+          <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+            <template #default="{ state }">
+              <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">
+                <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
+                  <div class="items-center flex gap-1 min-w-[55px]">
+                    <div
+                      v-if="!readOnly || !isLocked"
+                      class="nc-row-no text-xs text-gray-500"
+                      :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                    >
+                      {{ rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-if="!readOnly"
+                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                      class="nc-row-expand-and-checkbox"
+                    >
+                      <a-checkbox v-model:checked="row.rowMeta.selected" />
+                    </div>
+                    <span class="flex-1" />
+
+                    <div
+                      v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
+                      class="nc-expand"
+                      :data-testid="`nc-expand-${rowIndex}`"
+                      :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                    >
+                      <a-spin
+                        v-if="row.rowMeta.saving"
+                        class="!flex items-center"
+                        :data-testid="`row-save-spinner-${rowIndex}`"
+                      />
+                      <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)"
@@ -759,84 +760,84 @@ const closeAddColumnDropdown = () => {
                           >
                             {{ 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
+                          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>
-                  </td>
-                  <SmartsheetTableDataCell
-                    v-for="(columnObj, colIndex) of fields"
-                    :key="columnObj.id"
-                    class="cell relative cursor-pointer nc-grid-cell"
-                    :class="{
+                  </div>
+                </td>
+                <SmartsheetTableDataCell
+                  v-for="(columnObj, colIndex) of fields"
+                  :key="columnObj.id"
+                  class="cell relative cursor-pointer nc-grid-cell"
+                  :class="{
                       'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
                       'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                     }"
-                    :data-testid="`cell-${columnObj.title}-${rowIndex}`"
-                    :data-key="rowIndex + columnObj.id"
-                    :data-col="columnObj.id"
-                    :data-title="columnObj.title"
-                    @click="selectCell(rowIndex, colIndex)"
-                    @dblclick="makeEditable(row, columnObj)"
-                    @mousedown="startSelectRange($event, rowIndex, colIndex)"
-                    @mouseover="endSelectRange(rowIndex, colIndex)"
-                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                  >
-                    <div v-if="!switchingTab" class="w-full h-full">
-                      <LazySmartsheetVirtualCell
-                        v-if="isVirtualCol(columnObj)"
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
-                        :row="row"
-                        @navigate="onNavigate"
-                      />
+                  :data-testid="`cell-${columnObj.title}-${rowIndex}`"
+                  :data-key="rowIndex + columnObj.id"
+                  :data-col="columnObj.id"
+                  :data-title="columnObj.title"
+                  @click="selectCell(rowIndex, colIndex)"
+                  @dblclick="makeEditable(row, columnObj)"
+                  @mousedown="startSelectRange($event, rowIndex, colIndex)"
+                  @mouseover="endSelectRange(rowIndex, colIndex)"
+                  @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                >
+                  <div v-if="!switchingTab" class="w-full h-full">
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(columnObj)"
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
+                      :row="row"
+                      @navigate="onNavigate"
+                    />
 
-                      <LazySmartsheetCell
-                        v-else
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :edit-enabled="
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :edit-enabled="
                           !!hasEditPermission && !!editEnabled && selectedCell.col === colIndex && selectedCell.row === rowIndex
                         "
-                        :row-index="rowIndex"
-                        :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
-                        @update:edit-enabled="editEnabled = $event"
-                        @save="updateOrSaveRow(row, columnObj.title, state)"
-                        @navigate="onNavigate"
-                        @cancel="editEnabled = false"
-                      />
-                    </div>
-                  </SmartsheetTableDataCell>
-                </tr>
-              </template>
-            </LazySmartsheetRow>
-
-            <tr v-if="isAddingEmptyRowAllowed">
-              <td
-                v-e="['c:row:add:grid-bottom']"
-                :colspan="visibleColLength + 1"
-                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
-                @click="addEmptyRow()"
-              >
-                <div class="px-2 w-full flex items-center text-gray-500">
-                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
+                      :row-index="rowIndex"
+                      :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
+                      @update:edit-enabled="editEnabled = $event"
+                      @save="updateOrSaveRow(row, columnObj.title, state)"
+                      @navigate="onNavigate"
+                      @cancel="editEnabled = false"
+                    />
+                  </div>
+                </SmartsheetTableDataCell>
+              </tr>
+            </template>
+          </LazySmartsheetRow>
+
+          <tr v-if="isAddingEmptyRowAllowed">
+            <td
+              v-e="['c:row:add:grid-bottom']"
+              :colspan="visibleColLength + 1"
+              class="text-left pointer nc-grid-add-new-cell cursor-pointer"
+              @click="addEmptyRow()"
+            >
+              <div class="px-2 w-full flex items-center text-gray-500">
+                <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
-                  <span class="ml-1">
+                <span class="ml-1">
                     {{ $t('activity.addRow') }}
                   </span>
-                </div>
-              </td>
-            </tr>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
 

From 7659cac1b20e53bc6074c6e27af302cd846505b9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 1 Dec 2022 21:40:42 +0800
Subject: [PATCH 2/3] chore(nc-gui): lint

---
 .../nc-gui/components/smartsheet/Grid.vue     | 329 +++++++++---------
 1 file changed, 164 insertions(+), 165 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index a4c0172ff4..8ff5b1d071 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -154,8 +154,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-        : container.scrollLeft
+      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+      : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -165,8 +165,8 @@ const getContainerScrollForElement = (
     relativePos.bottom + (offset?.bottom || 0) > 0
       ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0)
       : relativePos.top - (offset?.top || 0) < 0
-        ? container.scrollTop + relativePos.top - (offset?.top || 0)
-        : container.scrollTop
+      ? container.scrollTop + relativePos.top - (offset?.top || 0)
+      : container.scrollTop
 
   return scroll
 }
@@ -653,105 +653,104 @@ const closeAddColumnDropdown = () => {
           @contextmenu="showContextMenu"
         >
           <thead ref="tableHead">
-          <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
-            <th data-testid="grid-id-column">
-              <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center"
-                   data-testid="nc-check-all">
-                <template v-if="!readOnly">
-                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="nc-check-all w-full items-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
-
-                    <span class="flex-1" />
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="text-gray-500">#</div>
-                </template>
-              </div>
-            </th>
-            <th
-              v-for="col in fields"
-              :key="col.title"
-              v-xc-ver-resize
-              :data-col="col.id"
-              :data-title="col.title"
-              @xcresize="onresize(col.id, $event)"
-              @xcresizing="onXcResizing(col.title, $event)"
-              @xcresized="resizingCol = null"
-            >
-              <div class="w-full h-full bg-gray-100 flex items-center">
-                <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
+            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
+              <th data-testid="grid-id-column">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" data-testid="nc-check-all">
+                  <template v-if="!readOnly">
+                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                    <div
+                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                      class="nc-check-all w-full items-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-              </div>
-            </th>
-            <th
-              v-if="isAddingColumnAllowed"
-              v-e="['c:column:add']"
-              class="cursor-pointer"
-              @click.stop="addColumnDropdown = true"
-            >
-              <a-dropdown
-                v-model:visible="addColumnDropdown"
-                :trigger="['click']"
-                overlay-class-name="nc-dropdown-grid-add-column"
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
+                </div>
+              </th>
+              <th
+                v-for="col in fields"
+                :key="col.title"
+                v-xc-ver-resize
+                :data-col="col.id"
+                :data-title="col.title"
+                @xcresize="onresize(col.id, $event)"
+                @xcresizing="onXcResizing(col.title, $event)"
+                @xcresized="resizingCol = null"
               >
-                <div class="h-full w-[60px] flex items-center justify-center">
-                  <MdiPlus class="text-sm nc-column-add" />
+                <div class="w-full h-full bg-gray-100 flex items-center">
+                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
+
+                  <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
+              </th>
+              <th
+                v-if="isAddingColumnAllowed"
+                v-e="['c:column:add']"
+                class="cursor-pointer"
+                @click.stop="addColumnDropdown = true"
+              >
+                <a-dropdown
+                  v-model:visible="addColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-grid-add-column"
+                >
+                  <div class="h-full w-[60px] flex items-center justify-center">
+                    <MdiPlus class="text-sm nc-column-add" />
+                  </div>
 
-                <template #overlay>
-                  <SmartsheetColumnEditOrAddProvider
-                    v-if="addColumnDropdown"
-                    :column-position="columnOrder"
-                    @submit="closeAddColumnDropdown"
-                    @cancel="closeAddColumnDropdown"
-                    @click.stop
-                    @keydown.stop
-                  />
-                </template>
-              </a-dropdown>
-            </th>
-          </tr>
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAddProvider
+                      v-if="addColumnDropdown"
+                      :column-position="columnOrder"
+                      @submit="closeAddColumnDropdown"
+                      @cancel="closeAddColumnDropdown"
+                      @click.stop
+                      @keydown.stop
+                    />
+                  </template>
+                </a-dropdown>
+              </th>
+            </tr>
           </thead>
           <tbody ref="tbodyEl">
-          <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
-            <template #default="{ state }">
-              <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">
-                <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
-                  <div class="items-center flex gap-1 min-w-[55px]">
-                    <div
-                      v-if="!readOnly || !isLocked"
-                      class="nc-row-no text-xs text-gray-500"
-                      :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                    >
-                      {{ rowIndex + 1 }}
-                    </div>
-                    <div
-                      v-if="!readOnly"
-                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                      class="nc-row-expand-and-checkbox"
-                    >
-                      <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    </div>
-                    <span class="flex-1" />
-
-                    <div
-                      v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
-                      class="nc-expand"
-                      :data-testid="`nc-expand-${rowIndex}`"
-                      :class="{ 'nc-comment': row.rowMeta?.commentCount }"
-                    >
-                      <a-spin
-                        v-if="row.rowMeta.saving"
-                        class="!flex items-center"
-                        :data-testid="`row-save-spinner-${rowIndex}`"
-                      />
-                      <template v-else>
+            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+              <template #default="{ state }">
+                <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
+                    <div class="items-center flex gap-1 min-w-[55px]">
+                      <div
+                        v-if="!readOnly || !isLocked"
+                        class="nc-row-no text-xs text-gray-500"
+                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                      >
+                        {{ rowIndex + 1 }}
+                      </div>
+                      <div
+                        v-if="!readOnly"
+                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                        class="nc-row-expand-and-checkbox"
+                      >
+                        <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      </div>
+                      <span class="flex-1" />
+
+                      <div
+                        v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
+                        class="nc-expand"
+                        :data-testid="`nc-expand-${rowIndex}`"
+                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                      >
+                        <a-spin
+                          v-if="row.rowMeta.saving"
+                          class="!flex items-center"
+                          :data-testid="`row-save-spinner-${rowIndex}`"
+                        />
+                        <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)"
@@ -760,84 +759,84 @@ const closeAddColumnDropdown = () => {
                           >
                             {{ 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
+                            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>
-                  </div>
-                </td>
-                <SmartsheetTableDataCell
-                  v-for="(columnObj, colIndex) of fields"
-                  :key="columnObj.id"
-                  class="cell relative cursor-pointer nc-grid-cell"
-                  :class="{
+                  </td>
+                  <SmartsheetTableDataCell
+                    v-for="(columnObj, colIndex) of fields"
+                    :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
                       'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
                       'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                     }"
-                  :data-testid="`cell-${columnObj.title}-${rowIndex}`"
-                  :data-key="rowIndex + columnObj.id"
-                  :data-col="columnObj.id"
-                  :data-title="columnObj.title"
-                  @click="selectCell(rowIndex, colIndex)"
-                  @dblclick="makeEditable(row, columnObj)"
-                  @mousedown="startSelectRange($event, rowIndex, colIndex)"
-                  @mouseover="endSelectRange(rowIndex, colIndex)"
-                  @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                >
-                  <div v-if="!switchingTab" class="w-full h-full">
-                    <LazySmartsheetVirtualCell
-                      v-if="isVirtualCol(columnObj)"
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
-                      :row="row"
-                      @navigate="onNavigate"
-                    />
+                    :data-testid="`cell-${columnObj.title}-${rowIndex}`"
+                    :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
+                    :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
+                    @mousedown="startSelectRange($event, rowIndex, colIndex)"
+                    @mouseover="endSelectRange(rowIndex, colIndex)"
+                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                  >
+                    <div v-if="!switchingTab" class="w-full h-full">
+                      <LazySmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
+                        :row="row"
+                        @navigate="onNavigate"
+                      />
 
-                    <LazySmartsheetCell
-                      v-else
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :edit-enabled="
+                      <LazySmartsheetCell
+                        v-else
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :edit-enabled="
                           !!hasEditPermission && !!editEnabled && selectedCell.col === colIndex && selectedCell.row === rowIndex
                         "
-                      :row-index="rowIndex"
-                      :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
-                      @update:edit-enabled="editEnabled = $event"
-                      @save="updateOrSaveRow(row, columnObj.title, state)"
-                      @navigate="onNavigate"
-                      @cancel="editEnabled = false"
-                    />
-                  </div>
-                </SmartsheetTableDataCell>
-              </tr>
-            </template>
-          </LazySmartsheetRow>
-
-          <tr v-if="isAddingEmptyRowAllowed">
-            <td
-              v-e="['c:row:add:grid-bottom']"
-              :colspan="visibleColLength + 1"
-              class="text-left pointer nc-grid-add-new-cell cursor-pointer"
-              @click="addEmptyRow()"
-            >
-              <div class="px-2 w-full flex items-center text-gray-500">
-                <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
+                        :row-index="rowIndex"
+                        :active="selectedCell.col === colIndex && selectedCell.row === rowIndex"
+                        @update:edit-enabled="editEnabled = $event"
+                        @save="updateOrSaveRow(row, columnObj.title, state)"
+                        @navigate="onNavigate"
+                        @cancel="editEnabled = false"
+                      />
+                    </div>
+                  </SmartsheetTableDataCell>
+                </tr>
+              </template>
+            </LazySmartsheetRow>
+
+            <tr v-if="isAddingEmptyRowAllowed">
+              <td
+                v-e="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
+                @click="addEmptyRow()"
+              >
+                <div class="px-2 w-full flex items-center text-gray-500">
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
-                <span class="ml-1">
+                  <span class="ml-1">
                     {{ $t('activity.addRow') }}
                   </span>
-              </div>
-            </td>
-          </tr>
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
 

From c6403b62f8dc0e5bfe25a1c6306fb7040ca447ae Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 1 Dec 2022 19:33:19 +0530
Subject: [PATCH 3/3] fix: verify property exist in row object

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 8ff5b1d071..e83e2ab88d 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -534,7 +534,7 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
       currentRow.rowMeta.changed = false
       for (const field of (args.metaValue || meta.value)?.columns ?? []) {
         if (isVirtualCol(field)) continue
-        if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
+        if (field.title! in currentRow.row && currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
           await updateOrSaveRow(currentRow, field.title!, {}, args)
         }
       }