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,66 +1,76 @@
 <template>
-   <BaseVirtualScroll
+   <div>
-      v-if="results.rows"
+      <TableContext
-      ref="resultTable"
+         v-if="isContext"
-      :items="localResults"
+         :context-event="contextEvent"
-      :item-height="25"
+         @closeContext="isContext = false"
-      class="vscroll"
+      />
-      :style="{'height': resultsSize+'px'}"
+      <BaseVirtualScroll
-   >
+         v-if="results.rows"
-      <template slot-scope="{ items }">
+         ref="resultTable"
-         <div class="table table-hover">
+         :items="localResults"
-            <div class="thead">
+         :item-height="25"
-               <div class="tr">
+         class="vscroll"
-                  <div
+         :style="{'height': resultsSize+'px'}"
-                     v-for="field in fields"
+      >
-                     :key="field.name"
+         <template slot-scope="{ items }">
-                     class="th"
+            <div class="table table-hover">
-                  >
+               <div class="thead">
-                     <div class="table-column-title">
+                  <div class="tr">
-                        <i
+                     <div
-                           v-if="field.key"
+                        v-for="field in fields"
-                           class="material-icons column-key c-help"
+                        :key="field.name"
-                           :class="`key-${field.key}`"
+                        class="th"
-                           :title="keyName(field.key)"
+                     >
-                        >vpn_key</i>
+                        <div class="table-column-title">
-                        <span>{{ field.name }}</span>
+                           <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 class="tbody">
+                  <div
-               <div
+                     v-for="row in items"
-                  v-for="row in items"
+                     :key="row._id"
-                  :key="row._id"
+                     class="tr"
-                  class="tr"
+                  >
-               >
+                     <WorkspaceQueryTableCell
-                  <WorkspaceQueryTableCell
+                        v-for="(col, cKey) in row"
-                     v-for="(col, cKey) in row"
+                        :key="cKey"
-                     :key="cKey"
+                        :content="col"
-                     :content="col"
+                        :field="cKey"
-                     :field="cKey"
+                        :precision="fieldPrecision(cKey)"
-                     :precision="fieldPrecision(cKey)"
+                        :type="fieldType(cKey)"
-                     :type="fieldType(cKey)"
+                        @updateField="updateField($event, row[primaryField.name])"
-                     @updateField="updateField($event, row[primaryField.name])"
+                        @cellContext="contextMenu($event)"
-                  />
+                     />
+                  </div>
                </div>
             </div>
-         </div>
+         </template>
-      </template>
+      </BaseVirtualScroll>
-   </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: {