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. 392
      packages/nc-gui-v2/components/smartsheet/Grid.vue

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

@ -118,183 +118,69 @@ 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') {
e.preventDefault()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
switch (e.key) {
case 'Tab':
e.preventDefault()
if (e.shiftKey) {
if (selected.col > 0) {
selected.col--
} else if (selected.row > 0) {
selected.row--
selected.col = visibleColLength - 1
}
} else {
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
}
}
} else {
if (selected.col < visibleColLength - 1) {
selected.col++
} else if (selected.row < data.value.length - 1) {
selected.row++
selected.col = 0
break
/** on enter key press make cell editable */
case 'Enter':
e.preventDefault()
editEnabled = true
break
/** on delete key press clear cell */
case 'Delete':
{
e.preventDefault()
const rowObj = data.value[selected.row]
const columnObj = fields.value[selected.col]
if (isVirtualCol(columnObj)) {
return
}
rowObj.row[columnObj.title] = null
// update/save cell value
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
}
}
})
/** 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:
{
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 (
// this.isRequired(columnObj, rowObj, true) ||
columnObj.virtual
) {
return;
}
this.$set(rowObj, 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 };
}
}
}
},
*/
</script>
<template>
@ -303,93 +189,92 @@ async onKeyDown(e) {
<div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
<table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
<thead>
<tr>
<th>#</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@xcresized="resizingCol = null"
>
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" />
</th>
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<th v-t="['c:column:add']" @click="addColumnDropdown = true">
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-full flex align-center justify-center">
<MdiPlusIcon class="text-sm" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
</template>
</a-dropdown>
</th>
</tr>
<tr>
<th>#</th>
<th
v-for="col in fields"
:key="col.title"
v-xc-ver-resize
:data-col="col.id"
@xcresize="onresize(col.id, $event)"
@xcresizing="onXcResizing(col.title, $event)"
@xcresized="resizingCol = null"
>
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
<SmartsheetHeaderCell v-else :column="col" />
</th>
<!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
<th v-t="['c:column:add']" @click="addColumnDropdown = true">
<a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
<div class="h-full w-full flex align-center justify-center">
<MdiPlusIcon class="text-sm" />
</div>
<template #overlay>
<SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
</template>
</a-dropdown>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
<td key="row-index" class="caption nc-grid-cell">
<div class="align-center flex w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full align-center"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" />
<MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
<tr v-for="(row, rowIndex) in data" :key="rowIndex" class="nc-grid-row group">
<td key="row-index" class="caption nc-grid-cell">
<div class="align-center flex w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full align-center"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" />
<MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
</div>
</div>
</div>
</td>
<td
v-for="(columnObj, colIndex) in fields"
:key="rowIndex + columnObj.title"
class="cell pointer nc-grid-cell"
:class="{
</td>
<td
v-for="(columnObj, colIndex) in fields"
:key="rowIndex + columnObj.title"
class="cell pointer nc-grid-cell"
:class="{
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
}"
:data-col="columnObj.id"
@click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]"
:column="columnObj" />
<SmartsheetCell
v-else
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateOrSaveRow(row, columnObj.title)"
/>
</td>
</tr>
<tr v-if="!isLocked">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell"
@click="addEmptyRow()"
>
<a-tooltip top left>
<div class="w-min flex align-center">
<MdiPlusIcon class="text-pint-500 text-xs" />
<span class="ml-1 caption grey--text">
:data-col="columnObj.id"
@click="selectCell(rowIndex, colIndex)"
@dblclick="editEnabled = true"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
>
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :column="columnObj" />
<SmartsheetCell
v-else
v-model="row.row[columnObj.title]"
:column="columnObj"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
@update:model-value="updateOrSaveRow(row, columnObj.title)"
/>
</td>
</tr>
<tr v-if="!isLocked">
<td
v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1"
class="text-left pointer nc-grid-add-new-cell"
@click="addEmptyRow()"
>
<a-tooltip top left>
<div class="w-min flex align-center">
<MdiPlusIcon class="text-pint-500 text-xs" />
<span class="ml-1 caption grey--text">
{{ $t('activity.addRow') }}
</span>
</div>
<template #title>
<span class="caption"> Add new row</span>
</template>
</a-tooltip>
</td>
</tr>
</div>
<template #title>
<span class="caption"> Add new row</span>
</template>
</a-tooltip>
</td>
</tr>
</tbody>
</table>
</div>
@ -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