github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2947/head
Pranav C 2 years ago
parent
8f008248ef
commit
40e8e4b6e5
1 changed files with 137 additions and 255 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      packages/nc-gui-v2/components/smartsheet/Grid.vue

198
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -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
}
}
}
}
})
/** on shift + tab key press navigate through cells in reverse order */
// onKeyStroke(, (e) => {
// if (selected.row !== null && selected.col !== null) {
// e.preventDefault()
// if (selected.col > 0) {
// 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:
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
editEnabled = true
break
/** on delete key press clear cell */
case 'Delete':
{
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];
e.preventDefault()
const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if (
// this.isRequired(columnObj, rowObj, true) ||
columnObj.virtual
) {
return;
if (isVirtualCol(columnObj)) {
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);
}
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 };
await updateOrSaveRow(rowObj, columnObj.title)
}
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]"
:column="columnObj" />
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :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
row
</div>
<div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new 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;
}
}

Write Preview
Loading…
Cancel
Save