Starting implementation context on query Table

src/renderer/components/BaseContextMenu.vue

@@ -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;

src/renderer/components/WorkspaceQueryTable.vue

@@ -1,4 +1,10 @@
 <template>
+   <div>
+      <TableContext
+         v-if="isContext"
+         :context-event="contextEvent"
+         @closeContext="isContext = false"
+      />
       <BaseVirtualScroll
          v-if="results.rows"
          ref="resultTable"
@@ -42,25 +48,29 @@
                         :precision="fieldPrecision(cKey)"
                         :type="fieldType(cKey)"
                         @updateField="updateField($event, row[primaryField.name])"
+                        @cellContext="contextMenu($event)"
                      />
                   </div>
                </div>
             </div>
          </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;
       }
    }
 };

src/renderer/components/WorkspaceQueryTableCell.vue

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

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -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>

src/renderer/i18n/en-US.js

@@ -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: {