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

Write Preview
Loading…
Cancel
Save