feat(gui-v2): clear cell data on delete key press

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

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

@@ -118,10 +118,11 @@ watch(contextMenu, () => {
 })
 
 /** handle keypress events */
-onKeyStroke(['Tab', 'Shift', ''], (e: KeyboardEvent) => {
+onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
   if (selected.row !== null && selected.col !== null) {
     /** on tab key press navigate through cells */
-    if (e.key === 'Tab') {
+    switch (e.key) {
+      case 'Tab':
         e.preventDefault()
         if (e.shiftKey) {
           if (selected.col > 0) {
@@ -138,163 +139,48 @@ onKeyStroke(['Tab', 'Shift', ''], (e: KeyboardEvent) => {
             selected.col = 0
           }
         }
-    }
+        break
-  }
+      /** on enter key press make cell editable */
-})
+      case 'Enter':
-/** on shift + tab key press navigate through cells in reverse order */
+        e.preventDefault()
-// onKeyStroke(, (e) => {
+        editEnabled = true
-//   if (selected.row !== null && selected.col !== null) {
+        break
-//     e.preventDefault()
+      /** on delete key press clear cell */
-//     if (selected.col > 0) {
+      case 'Delete':
-//       selected.col--
-//     } else if (selected.row > 0) {
-//       selected.row--
-//       selected.col = visibleColLength - 1
-//     }
-//   }
-// })
-// /** on delete key press clear the cell */
-// onKeyStroke(['Tab', 'Shift'], (e) => {
-//   if (selected.row !== null && selected.col !== null) {
-//     e.preventDefault()
-//     // check and clear cell
-//   }
-// })
-// /** on enter key press make cell editable */
-// onKeyStroke('Enter', (e) => {
-//   if (selected.row !== null && selected.col !== null) {
-//     e.preventDefault()
-//     editEnabled = true
-//   }
-// })
-
-/*
-
-async onKeyDown(e) {
-  if (selected.col === null || selected.row === null || isLocked) {
-    return;
-  }
-
-  switch (e.keyCode) {
-    // tab
-    case 9:
-      e.preventDefault();
-      this.editEnabled = {
-        col: null,
-        row: null,
-      };
-      if (e.shiftKey) {
-        if (this.selected.col > 0) {
-          this.selected.col--;
-        } else if (this.selected.row > 0) {
-          this.selected.row--;
-          this.selected.col = this.colLength - 1;
-        }
-      } else if (this.selected.col < this.colLength - 1) {
-        this.selected.col++;
-      } else if (this.selected.row < this.rowLength - 1) {
-        this.selected.row++;
-        this.selected.col = 0;
-      }
-
-      break;
-    // delete
-    case 46:
         {
-      if (this.editEnabled.col != null && this.editEnabled.row != null) {
+          e.preventDefault()
-        return;
+          const rowObj = data.value[selected.row]
-      }
+          const columnObj = fields.value[selected.col]
-
-      const rowObj = this.data[this.selected.row].row;
-      const columnObj = this.availableColumns[this.selected.col];
 
-      if (
+          if (isVirtualCol(columnObj)) {
-        // this.isRequired(columnObj, rowObj, true) ||
+            return
-        columnObj.virtual
-      ) {
-        return;
           }
 
-      this.$set(rowObj, columnObj.title, null);
+          rowObj.row[columnObj.title] = null
           // update/save cell value
-      this.onCellValueChange(this.selected.col, this.selected.row, columnObj, true);
+          await updateOrSaveRow(rowObj, columnObj.title)
-    }
-      break;
-    // left
-    case 37:
-      if (this.rightToLeftLanguages.includes(this.$store.state.settings.language)) {
-        if (this.selected.col < this.colLength - 1) {
-          this.selected.col++;
-        }
-      } else if (this.selected.col > 0) {
-        this.selected.col--;
-      }
-      break;
-    // right
-    case 39:
-      if (this.rightToLeftLanguages.includes(this.$store.state.settings.language)) {
-        if (this.selected.col > 0) {
-          this.selected.col--;
-        }
-      } else if (this.selected.col < this.colLength - 1) {
-        this.selected.col++;
-      }
-      break;
-    // up
-    case 38:
-      if (this.selected.row > 0) {
-        this.selected.row--;
-      }
-      break;
-    // down
-    case 40:
-      if (this.selected.row < this.rowLength - 1) {
-        this.selected.row++;
-      }
-      break;
-    // enter
-    case 13:
-      this.makeEditable(this.selected.col, this.selected.row);
-      break;
-    default: {
-      if (this.editEnabled.col != null && this.editEnabled.row != null) {
-        return;
-      }
-
-      const rowObj = this.data[this.selected.row].row;
-      const columnObj = this.availableColumns[this.selected.col];
-
-      if (e.metaKey || e.ctrlKey) {
-        switch (e.keyCode) {
-          // copy - ctrl/cmd +c
-          case 67:
-            copyTextToClipboard(rowObj[columnObj.title] || '');
-            break;
-          // // paste ctrl/cmd + v
-          // case 86: {
-          //   const text = await navigator.clipboard.readText()
-          //   this.$set(rowObj, columnObj.title, text)
-          // }
-          // break
-        }
-      }
-
-      if (e.ctrlKey || e.altKey || e.metaKey) {
-        return;
-      }
-
-      if (e.key && e.key.length === 1) {
-        if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) {
-          return this.$toast.info("Update not allowed for table which doesn't have primary Key").goAway(3000);
-        }
-
-        this.$set(this.data[this.selected.row].row, this.availableColumns[this.selected.col].title, '');
-        this.editEnabled = { ...this.selected };
         }
+        break
+      /** on arrow key press navigate through cells */
+      case 'ArrowRight':
+        e.preventDefault()
+        if (selected.col < visibleColLength - 1) selected.col++
+        break
+      case 'ArrowLeft':
+        e.preventDefault()
+        if (selected.col > 0) selected.col--
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        if (selected.row > 0) selected.row--
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        if (selected.row < data.value.length - 1) selected.row++
+        break
     }
   }
-},
+})
-*/
 </script>
 
 <template>
@@ -357,8 +243,7 @@ async onKeyDown(e) {
                 @dblclick="editEnabled = true"
                 @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
-              <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
+                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :column="columnObj" />
-                                     :column="columnObj" />
 
                 <SmartsheetCell
                   v-else
@@ -398,9 +283,7 @@ async onKeyDown(e) {
           <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
           <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
           <div v-if="contextMenuTarget" class="nc-menu-item">Clear cell</div>
-          <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new
+          <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new row</div>
-            row
-          </div>
         </div>
       </template>
     </a-dropdown>
@@ -464,8 +347,7 @@ async onKeyDown(e) {
   }
 
   td.active::before {
-    background: #0040bc /*var(--v-primary-base)*/
+    background: #0040bc /*var(--v-primary-base)*/;
-  ;
     opacity: 0.1;
   }
 }