Browse Source

feat(gui): Add clear option in context menu

added clear option in context menu for cells which are `nullable`, it can used to set the cell  value to null

re #this.value

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
pull/401/head
Pranav C 3 years ago
parent
commit
73e2ff06f9
  1. 29
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  2. 7
      packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

29
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@ -384,6 +384,18 @@
<span class="caption">Delete Selected Rows</span> <span class="caption">Delete Selected Rows</span>
</v-list-item> </v-list-item>
</template> </template>
<template v-if="rowContextMenu.col && !rowContextMenu.col.rqd && !rowContextMenu.col.virtual">
<v-tooltip bottom>
<template #activator="{on}">
<v-list-item v-on="on" @click="clearCellValue">
<span class="caption">Clear</span>
</v-list-item>
</template>
<span class="caption">Set column value to <strong>null</strong></span>
</v-tooltip>
</template>
<!-- <template v-if="meta.hasMany && meta.hasMany.length"> <!-- <template v-if="meta.hasMany && meta.hasMany.length">
<v-divider v-if="isEditable && !isLocked" /> <v-divider v-if="isEditable && !isLocked" />
<span class="ml-3 grey&#45;&#45;text " style="font-size: 9px">Has Many</span> <span class="ml-3 grey&#45;&#45;text " style="font-size: 9px">Has Many</span>
@ -564,7 +576,7 @@ export default {
icon: 'mdi-view-stream' icon: 'mdi-view-stream'
}, { }, {
size: 'xlarge', size: 'xlarge',
icon: 'mdi-card' icon: 'mdi-ca rd'
}], }],
rowContextMenu: null rowContextMenu: null
}), }),
@ -840,6 +852,15 @@ export default {
this.$toast.success('Deleted selected rows successfully').goAway(3000) this.$toast.success('Deleted selected rows successfully').goAway(3000)
} }
}, },
async clearCellValue() {
const { col, colIndex, row, index } = this.rowContextMenu
if (row[col._cn] === null) {
return
}
this.$set(this.data[index].row, col._cn, null)
this.onCellValueChangeFn(colIndex, index, col)
},
async insertNewRow(atEnd = false, expand = false) { async insertNewRow(atEnd = false, expand = false) {
const focusRow = atEnd ? this.rowLength : this.rowContextMenu.index + 1 const focusRow = atEnd ? this.rowLength : this.rowContextMenu.index + 1
const focusCol = this.availableColumns.findIndex(c => !c.ai) const focusCol = this.availableColumns.findIndex(c => !c.ai)
@ -924,7 +945,7 @@ export default {
} }
this.loadingData = false this.loadingData = false
}, },
showRowContextMenu(e, row, rowMeta, index) { showRowContextMenu(e, row, rowMeta, index, colIndex, col) {
e.preventDefault() e.preventDefault()
this.rowContextMenu = false this.rowContextMenu = false
this.$nextTick(() => { this.$nextTick(() => {
@ -933,7 +954,9 @@ export default {
y: e.clientY, y: e.clientY,
row, row,
index, index,
rowMeta rowMeta,
colIndex,
col
} }
}) })
}, },

7
packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@ -87,11 +87,11 @@
<tr <tr
v-for="({row:rowObj, rowMeta},row) in data" v-for="({row:rowObj, rowMeta},row) in data"
:key="row" :key="row"
@contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
> >
<td <td
style="width: 65px" style="width: 65px"
class="caption" class="caption"
@contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
> >
<div class="d-flex align-center"> <div class="d-flex align-center">
<span <span
@ -142,6 +142,7 @@
:data-col="columnObj.alias" :data-col="columnObj.alias"
@dblclick="makeEditable(col,row,columnObj.ai)" @dblclick="makeEditable(col,row,columnObj.ai)"
@click="makeSelected(col,row);" @click="makeSelected(col,row);"
@contextmenu="showRowContextMenu($event,rowObj,rowMeta,row,col, columnObj)"
> >
<virtual-cell <virtual-cell
v-if="columnObj.virtual" v-if="columnObj.virtual"
@ -448,8 +449,8 @@ export default {
expandRow(...args) { expandRow(...args) {
this.$emit('expandRow', ...args) this.$emit('expandRow', ...args)
}, },
showRowContextMenu($event, rowObj, rowMeta, row) { showRowContextMenu($event, rowObj, rowMeta, row, ...rest) {
this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row) this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row, ...rest)
}, },
onCellValueChange(col, row, column, ev) { onCellValueChange(col, row, column, ev) {
this.$emit('onCellValueChange', col, row, column, ev) this.$emit('onCellValueChange', col, row, column, ev)

Loading…
Cancel
Save