mirror of https://github.com/Fabio286/antares.git
Row multi select
This commit is contained in:
parent
1a8a49eceb
commit
425ecf838d
|
|
@ -4029,9 +4029,9 @@
|
|||
}
|
||||
},
|
||||
"electron": {
|
||||
"version": "8.3.4",
|
||||
"resolved": "https://registry.npmjs.org/electron/-/electron-8.3.4.tgz",
|
||||
"integrity": "sha512-aSYXBV0PxYHmXhjGFpR0x38zbO7UTDex2JrT5tcqJpUZTY+sKdfo9PA1TpiyrHNjA5+Q8UseRUsydRedOTeZQA==",
|
||||
"version": "8.4.0",
|
||||
"resolved": "https://registry.npmjs.org/electron/-/electron-8.4.0.tgz",
|
||||
"integrity": "sha512-SpgyccM5rjDJSGcpQjiviUBT44fZlSyhcjy8RpKSnAad+co4xY1vYj6T25U1CfSk0PH/dhvcp63P2sdXHCwq/Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@electron/get": "^1.0.1",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
"devDependencies": {
|
||||
"babel-eslint": "^10.1.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"electron": "^8.3.4",
|
||||
"electron": "^8.4.0",
|
||||
"electron-builder": "^22.7.0",
|
||||
"electron-devtools-installer": "^3.1.1",
|
||||
"electron-webpack": "^2.8.2",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<TableContext
|
||||
v-if="isContext"
|
||||
:context-event="contextEvent"
|
||||
:selected-rows="selectedRows"
|
||||
@closeContext="isContext = false"
|
||||
/>
|
||||
<BaseVirtualScroll
|
||||
|
|
@ -39,6 +40,8 @@
|
|||
v-for="row in items"
|
||||
:key="row._id"
|
||||
class="tr"
|
||||
:class="{'selected': selectedRows.includes(row._id)}"
|
||||
@click="selectRow($event, row._id)"
|
||||
>
|
||||
<WorkspaceQueryTableCell
|
||||
v-for="(col, cKey) in row"
|
||||
|
|
@ -48,7 +51,7 @@
|
|||
:precision="fieldPrecision(cKey)"
|
||||
:type="fieldType(cKey)"
|
||||
@updateField="updateField($event, row[primaryField.name])"
|
||||
@cellContext="contextMenu($event)"
|
||||
@contextmenu="contextMenu($event, {id: row._id, field: cKey})"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +84,9 @@ export default {
|
|||
resultsSize: 1000,
|
||||
localResults: [],
|
||||
isContext: false,
|
||||
contextEvent: null
|
||||
contextEvent: null,
|
||||
selectedCell: null,
|
||||
selectedRows: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -149,14 +154,14 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
updateField (event, id) {
|
||||
updateField (payload, id) {
|
||||
if (!this.primaryField)
|
||||
this.addNotification({ status: 'warning', message: this.$t('message.unableEditFieldWithoutPrimary') });
|
||||
else {
|
||||
const params = {
|
||||
primary: this.primaryField.name,
|
||||
id,
|
||||
...event
|
||||
...payload
|
||||
};
|
||||
this.$emit('updateField', params);
|
||||
}
|
||||
|
|
@ -170,7 +175,37 @@ export default {
|
|||
return row;
|
||||
});
|
||||
},
|
||||
contextMenu (event) {
|
||||
selectRow (event, row) {
|
||||
if (event.ctrlKey) {
|
||||
if (this.selectedRows.includes(row))
|
||||
this.selectedRows = this.selectedRows.filter(el => el !== row);
|
||||
else
|
||||
this.selectedRows.push(row);
|
||||
}
|
||||
else if (event.shiftKey) {
|
||||
if (!this.selectedRows.length)
|
||||
this.selectedRows.push(row);
|
||||
else {
|
||||
const lastID = this.selectedRows.slice(-1)[0];
|
||||
const lastIndex = this.localResults.findIndex(el => el._id === lastID);
|
||||
const clickedIndex = this.localResults.findIndex(el => el._id === row);
|
||||
if (lastIndex > clickedIndex) {
|
||||
for (let i = clickedIndex; i < lastIndex; i++)
|
||||
this.selectedRows.push(this.localResults[i]._id);
|
||||
}
|
||||
else if (lastIndex < clickedIndex) {
|
||||
for (let i = clickedIndex; i > lastIndex; i--)
|
||||
this.selectedRows.push(this.localResults[i]._id);
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
this.selectedRows = [row];
|
||||
},
|
||||
contextMenu (event, cell) {
|
||||
this.selectedCell = cell;
|
||||
if (!this.selectedRows.includes(cell.id))
|
||||
this.selectedRows = [cell.id];
|
||||
this.contextEvent = event;
|
||||
this.isContext = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
class="td"
|
||||
:class="`type-${type} p-0`"
|
||||
tabindex="0"
|
||||
@contextmenu.prevent="$emit('cellContext', $event)"
|
||||
@contextmenu.prevent="$emit('contextmenu', $event)"
|
||||
>
|
||||
<span
|
||||
v-if="!isEditing"
|
||||
class="cell-content px-2"
|
||||
:class="isNull(content)"
|
||||
@dblclick="editON"
|
||||
>{{ content | typeFormat(type, precision) }}</span>
|
||||
>{{ content | typeFormat(type, precision) | cutText }}</span>
|
||||
<template v-else>
|
||||
<input
|
||||
v-if="inputProps.mask"
|
||||
|
|
@ -46,6 +46,10 @@ import { mask } from 'vue-the-mask';
|
|||
export default {
|
||||
name: 'WorkspaceQueryTableCell',
|
||||
filters: {
|
||||
cutText (val) {
|
||||
if (typeof val !== 'string') return val;
|
||||
return val.length > 50 ? `${val.substring(0, 50)}[...]` : val;
|
||||
},
|
||||
typeFormat (val, type, precision) {
|
||||
if (!val) return val;
|
||||
|
||||
|
|
@ -54,7 +58,7 @@ export default {
|
|||
case 'varchar':
|
||||
case 'text':
|
||||
case 'mediumtext':
|
||||
return val.substring(0, 128);
|
||||
return val;
|
||||
case 'date': {
|
||||
return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
|
||||
}
|
||||
|
|
@ -148,7 +152,7 @@ export default {
|
|||
},
|
||||
editOFF () {
|
||||
this.isEditing = false;
|
||||
if (this.localContent === this.content) return;
|
||||
if (this.localContent === this.$options.filters.typeFormat(this.content, this.type)) return;
|
||||
|
||||
const { field, type, localContent: content } = this;
|
||||
this.$emit('updateField', { field, type, content });
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
:context-event="contextEvent"
|
||||
@closeContext="$emit('closeContext')"
|
||||
>
|
||||
<div class="context-element" @click="showEditModal()">
|
||||
<div class="context-element" @click="$emit('editCell')">
|
||||
<i class="material-icons md-18 text-light pr-1">edit</i> {{ $t('message.editCell') }}
|
||||
</div>
|
||||
<div class="context-element" @click="showConfirmModal">
|
||||
<i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('message.deleteRow') }}
|
||||
<i class="material-icons md-18 text-light pr-1">delete</i> {{ $tc('message.deleteRows', selectedRows.length) }}
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
|
|
@ -32,7 +32,8 @@ export default {
|
|||
ConfirmModal
|
||||
},
|
||||
props: {
|
||||
contextEvent: MouseEvent
|
||||
contextEvent: MouseEvent,
|
||||
selectedRows: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ module.exports = {
|
|||
restartToInstall: 'Restart Antares to install',
|
||||
unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset',
|
||||
editCell: 'Edit cell',
|
||||
deleteRow: 'Delete row'
|
||||
deleteRows: 'Delete row | Delete {count} rows'
|
||||
},
|
||||
// Date and Time
|
||||
short: {
|
||||
|
|
|
|||
|
|
@ -15,11 +15,13 @@
|
|||
"varchar": seagreen,
|
||||
"text": seagreen,
|
||||
"mediumtext": seagreen,
|
||||
"longtext": seagreen,
|
||||
|
||||
"int": cornflowerblue,
|
||||
"tinyint": cornflowerblue,
|
||||
"smallint": cornflowerblue,
|
||||
"mediumint": cornflowerblue,
|
||||
"bigint": cornflowerblue,
|
||||
|
||||
"datetime": coral,
|
||||
"date": coral,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
&.table-striped {
|
||||
.tbody {
|
||||
.tr {
|
||||
&.selected{
|
||||
background: #333!important;
|
||||
}
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue