feat: clear multiple cells

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -210,6 +210,7 @@ const {
   $$(editEnabled),
   isPkAvail,
   clearCell,
+  clearSelectedRangeOfCells,
   makeEditable,
   scrollToCell,
   (e: KeyboardEvent) => {
@@ -571,6 +572,36 @@ async function clearCell(ctx: { row: number; col: number } | null, skipUpdate =
   }
 }
 
+async function clearSelectedRangeOfCells() {
+  if (!hasEditPermission) return
+
+  const start = selectedRange.start
+  const end = selectedRange.end
+
+  const startRow = Math.min(start.row, end.row)
+  const endRow = Math.max(start.row, end.row)
+  const startCol = Math.min(start.col, end.col)
+  const endCol = Math.max(start.col, end.col)
+
+  const cols = fields.value.slice(startCol, endCol + 1)
+  const rows = data.value.slice(startRow, endRow + 1)
+  const props = []
+
+  for (const row of rows) {
+    for (const col of cols) {
+      if (!row || !col || !col.title) continue
+
+      // TODO handle LinkToAnotherRecord
+      if (isVirtualCol(col)) continue
+
+      row.row[col.title] = null
+      props.push(col.title)
+    }
+  }
+
+  await bulkUpdateRows(rows, props)
+}
+
 function makeEditable(row: Row, col: ColumnType) {
   if (!hasEditPermission || editEnabled || isView || isLocked.value || readOnly.value) {
     return
@@ -1095,6 +1126,11 @@ function addEmptyRow(row?: number) {
               <div v-e="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
             </a-menu-item>
 
+            <!--            Clear cell -->
+            <a-menu-item v-else @click="clearSelectedRangeOfCells()">
+              <div v-e="['a:row:clear-range']" class="nc-project-menu-item">Clear Cells</div>
+            </a-menu-item>
+
             <a-menu-item v-if="contextMenuTarget && selectedRange.isSingleCell()" @click="addEmptyRow(contextMenuTarget.row + 1)">
               <div v-e="['a:row:insert']" class="nc-project-menu-item">
                 <!-- Insert New Row -->

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -40,6 +40,7 @@ export function useMultiSelect(
   _editEnabled: MaybeRef<boolean>,
   isPkAvail: MaybeRef<boolean | undefined>,
   clearCell: Function,
+  clearSelectedRangeOfCells: Function,
   makeEditable: Function,
   scrollToCell?: (row?: number | null, col?: number | null) => void,
   keyEventHandler?: Function,
@@ -335,9 +336,14 @@ export function useMultiSelect(
       /** on delete key press clear cell */
       case 'Delete':
         e.preventDefault()
+
+        if (selectedRange.isSingleCell()) {
           selectedRange.clear()
 
           await clearCell(activeCell as { row: number; col: number })
+        } else {
+          await clearSelectedRangeOfCells()
+        }
         break
       /** on arrow key press navigate through cells */
       case 'ArrowRight':