fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

Starting implementation context on query Table

This commit is contained in:
Fabio 2020-07-10 19:51:36 +02:00
parent d1aaad276b
commit 307a32aff6
5 changed files with 129 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/BaseContextMenu.vue
View File

@ -41,6 +41,8 @@ export default {
.context{
display: flex;
position: absolute;
color: $body-font-color;
font-size: 16px;
z-index: 400;
justify-content: center;
align-items: center;

108
src/renderer/components/WorkspaceQueryTable.vue
View File

@ -1,66 +1,76 @@
<template>
<BaseVirtualScroll
v-if="results.rows"
ref="resultTable"
:items="localResults"
:item-height="25"
class="vscroll"
:style="{'height': resultsSize+'px'}"
>
<template slot-scope="{ items }">
<div class="table table-hover">
<div class="thead">
<div class="tr">
<div
v-for="field in fields"
:key="field.name"
class="th"
>
<div class="table-column-title">
<i
v-if="field.key"
class="material-icons column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
>vpn_key</i>
<span>{{ field.name }}</span>
<div>
<TableContext
v-if="isContext"
:context-event="contextEvent"
@closeContext="isContext = false"
/>
<BaseVirtualScroll
v-if="results.rows"
ref="resultTable"
:items="localResults"
:item-height="25"
class="vscroll"
:style="{'height': resultsSize+'px'}"
>
<template slot-scope="{ items }">
<div class="table table-hover">
<div class="thead">
<div class="tr">
<div
v-for="field in fields"
:key="field.name"
class="th"
>
<div class="table-column-title">
<i
v-if="field.key"
class="material-icons column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
>vpn_key</i>
<span>{{ field.name }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="tbody">
<div
v-for="row in items"
:key="row._id"
class="tr"
>
<WorkspaceQueryTableCell
v-for="(col, cKey) in row"
:key="cKey"
:content="col"
:field="cKey"
:precision="fieldPrecision(cKey)"
:type="fieldType(cKey)"
@updateField="updateField($event, row[primaryField.name])"
/>
<div class="tbody">
<div
v-for="row in items"
:key="row._id"
class="tr"
>
<WorkspaceQueryTableCell
v-for="(col, cKey) in row"
:key="cKey"
:content="col"
:field="cKey"
:precision="fieldPrecision(cKey)"
:type="fieldType(cKey)"
@updateField="updateField($event, row[primaryField.name])"
@cellContext="contextMenu($event)"
/>
</div>
</div>
</div>
</div>
</template>
</BaseVirtualScroll>
</template>
</BaseVirtualScroll>
</div>
</template>
<script>
import { uidGen } from 'common/libs/utilities';
import BaseVirtualScroll from '@/components/BaseVirtualScroll';
import WorkspaceQueryTableCell from '@/components/WorkspaceQueryTableCell';
import TableContext from '@/components/WorkspaceQueryTableContext';
import { mapActions } from 'vuex';
export default {
name: 'WorkspaceQueryTable',
components: {
BaseVirtualScroll,
WorkspaceQueryTableCell
WorkspaceQueryTableCell,
TableContext
},
props: {
results: Object,
@ -69,7 +79,9 @@ export default {
data () {
return {
resultsSize: 1000,
localResults: []
localResults: [],
isContext: false,
contextEvent: null
};
},
computed: {
@ -157,6 +169,10 @@ export default {
return row;
});
},
contextMenu (event) {
this.contextEvent = event;
this.isContext = true;
}
}
};

1
src/renderer/components/WorkspaceQueryTableCell.vue
View File

@ -5,6 +5,7 @@
class="td"
:class="`type-${type} p-0`"
tabindex="0"
@contextmenu.prevent="$emit('cellContext', $event)"
>
<span
v-if="!isEditing"

61
src/renderer/components/WorkspaceQueryTableContext.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<BaseContextMenu
:context-event="contextEvent"
@closeContext="$emit('closeContext')"
>
<div class="context-element" @click="showEditModal()">
<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') }}
</div>
<ConfirmModal
v-if="isConfirmModal"
@confirm="deleteConnection()"
@hide="hideConfirmModal"
>
<!-- -->
</ConfirmModal>
</BaseContextMenu>
</template>
<script>
import { mapActions } from 'vuex';
import BaseContextMenu from '@/components/BaseContextMenu';
import ConfirmModal from '@/components/BaseConfirmModal';
export default {
name: 'WorkspaceQueryTableContext',
components: {
BaseContextMenu,
ConfirmModal
},
props: {
contextEvent: MouseEvent
},
data () {
return {
isConfirmModal: false
};
},
computed: {
},
methods: {
...mapActions({
deleteConnection: 'connections/deleteConnection',
showEditModal: 'application/showEditConnModal'
}),
showConfirmModal () {
this.isConfirmModal = true;
},
hideConfirmModal () {
this.isConfirmModal = false;
}
}
};
</script>
<style>
</style>

4
src/renderer/i18n/en-US.js
View File

@ -52,7 +52,9 @@ module.exports = {
downloadingUpdate: 'Downloading update',
updateDownloaded: 'Update downloaded',
restartToInstall: 'Restart Antares to install',
unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset'
unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset',
editCell: 'Edit cell',
deleteRow: 'Delete row'
},
// Date and Time
short: {