feat: table fields deletion

src/renderer/components/Workspace.vue

@@ -7,7 +7,7 @@
             ref="tabWrap"
             class="tab tab-block column col-12"
          >
-            <li class="tab-item">
+            <li class="tab-item d-none">
                <a class="tab-link workspace-tools-link">
                   <i class="mdi mdi-24px mdi-tools" />
                </a>

src/renderer/components/WorkspacePropsTab.vue

@@ -32,15 +32,15 @@
                   <span>{{ $t('word.add') }}</span>
                   <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
-               <button class="btn btn-dark btn-sm">
+               <button class="btn btn-dark btn-sm d-none">
                   <span>{{ $t('word.indexes') }}</span>
                   <i class="mdi mdi-24px mdi-key mdi-rotate-45 ml-1" />
                </button>
-               <button class="btn btn-dark btn-sm">
+               <button class="btn btn-dark btn-sm d-none">
                   <span>{{ $t('word.foreignKeys') }}</span>
                   <i class="mdi mdi-24px mdi-key-link ml-1" />
                </button>
-               <button class="btn btn-dark btn-sm">
+               <button class="btn btn-dark btn-sm d-none">
                   <span>{{ $t('word.options') }}</span>
                   <i class="mdi mdi-24px mdi-cogs ml-1" />
                </button>
@@ -57,6 +57,7 @@
             :table="table"
             :schema="schema"
             mode="table"
+            @remove-field="removeField"
          />
       </div>
    </div>
@@ -193,7 +194,7 @@ export default {
             const orgName = originalField.name;
 
             if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
-               changes.push({ ...this.localFields[lI], after, orgName });
+               if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
          });
 
          const params = {

src/renderer/components/WorkspacePropsTable.vue

@@ -7,8 +7,8 @@
       <TableContext
          v-if="isContext"
          :context-event="contextEvent"
-         :selected-rows="selectedRows"
+         :selected-field="selectedField"
-         @delete-selected="deleteSelected"
+         @delete-selected="removeField"
          @close-context="isContext = false"
       />
       <div ref="propTable" class="table table-hover">
@@ -100,6 +100,7 @@
                :key="row._id"
                :row="row"
                :data-types="dataTypes"
+               @contextmenu="contextMenu"
             />
          </draggable>
       </div>
@@ -110,11 +111,13 @@
 import { mapActions, mapGetters } from 'vuex';
 import draggable from 'vuedraggable';
 import TableRow from '@/components/WorkspacePropsTableRow';
+import TableContext from '@/components/WorkspacePropsTableContext';
 
 export default {
    name: 'WorkspacePropsTable',
    components: {
       TableRow,
+      TableContext,
       draggable
    },
    props: {
@@ -131,8 +134,7 @@ export default {
          localResults: [],
          isContext: false,
          contextEvent: null,
-         selectedCell: null,
+         selectedField: null,
-         selectedRows: [],
          scrollElement: null
       };
    },
@@ -186,12 +188,13 @@ export default {
       refreshScroller () {
          this.resizeResults();
       },
-      contextMenu (event, cell) {
+      contextMenu (event, uid) {
-         this.selectedCell = cell;
+         this.selectedField = uid;
-         if (!this.selectedRows.includes(cell.id))
-            this.selectedRows = [cell.id];
          this.contextEvent = event;
          this.isContext = true;
+      },
+      removeField () {
+         this.$emit('remove-field', this.selectedField);
       }
    }
 };

src/renderer/components/WorkspacePropsTableContext.vue

@@ -0,0 +1,41 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div class="context-element" @click="deleteField">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('message.deleteField') }}</span>
+      </div>
+   </BaseContextMenu>
+</template>
+
+<script>
+import BaseContextMenu from '@/components/BaseContextMenu';
+
+export default {
+   name: 'WorkspaceQueryTableContext',
+   components: {
+      BaseContextMenu
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedField: String
+   },
+   data () {
+      return {
+         isConfirmModal: false
+      };
+   },
+   computed: {
+   },
+   methods: {
+      closeContext () {
+         this.$emit('close-context');
+      },
+      deleteField () {
+         this.$emit('delete-selected');
+         this.closeContext();
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTableRow.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="tr">
+   <div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)">
       <div class="td">
          <div class="row-draggable">
             <i class="mdi mdi-drag-horizontal row-draggable-icon" />

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 
@@ -49,10 +48,6 @@ export default {
    computed: {
    },
    methods: {
-      ...mapActions({
-         deleteConnection: 'connections/deleteConnection',
-         showEditModal: 'application/showEditConnModal'
-      }),
       showConfirmModal () {
          this.isConfirmModal = true;
       },

src/renderer/i18n/en-US.js

@@ -98,7 +98,8 @@ module.exports = {
       allowNull: 'Allow NULL',
       zeroFill: 'Zero fill',
       customValue: 'Custom value',
-      onUpdate: 'On update'
+      onUpdate: 'On update',
+      deleteField: 'Delete field'
    },
    // Date and Time
    short: {