Row multi select

src/renderer/components/WorkspaceQueryTable.vue

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

src/renderer/components/WorkspaceQueryTableCell.vue

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

src/renderer/components/WorkspaceQueryTableContext.vue

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