feat: hotkeys to navigate inside a table resultset

src/renderer/components/WorkspaceTabQueryTable.vue

@@ -5,7 +5,6 @@
       tabindex="0"
       :style="{'height': resultsSize+'px'}"
       @keyup.delete="showDeleteConfirmModal"
-      @keydown.ctrl.a="selectAllRows($event)"
       @keydown.esc="deselectRows"
    >
       <TableContext
@@ -78,7 +77,11 @@
                   :key-usage="keyUsage"
                   :element-type="elementType"
                   :class="{'selected': selectedRows.includes(row._antares_id)}"
-                  @select-row="selectRow($event, row._antares_id)"
+                  :selected="selectedRows.includes(row._antares_id)"
+                  :selected-cell="selectedRows.length === 1 && selectedRows.includes(row._antares_id) ? selectedField : null"
+                  @start-editing="isEditingRow = true"
+                  @stop-editing="isEditingRow = false"
+                  @select-row="selectRow"
                   @update-field="updateField($event, row)"
                   @contextmenu="contextMenu"
                />
@@ -162,7 +165,9 @@ export default {
          currentSortDir: 'asc',
          resultsetIndex: 0,
          scrollElement: null,
-         rowHeight: 23
+         rowHeight: 23,
+         selectedField: null,
+         isEditingRow: false
       };
    },
    computed: {
@@ -268,9 +273,11 @@ export default {
    },
    mounted () {
       window.addEventListener('resize', this.resizeResults);
+      window.addEventListener('keydown', this.onKey);
    },
    unmounted () {
       window.removeEventListener('resize', this.resizeResults);
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       fieldType (cKey) {
@@ -447,20 +454,23 @@ export default {
             return row;
          });
       },
-      selectRow (event, row) {
+      selectRow (event, row, field) {
-         if (event.ctrlKey) {
+         this.selectedField = field;
-            if (this.selectedRows.includes(row))
+         const selectedRowId = row._antares_id;
-               this.selectedRows = this.selectedRows.filter(el => el !== row);
+
+         if (event.ctrlKey || event.metaKey) {
+            if (this.selectedRows.includes(selectedRowId))
+               this.selectedRows = this.selectedRows.filter(el => el !== selectedRowId);
             else
-               this.selectedRows.push(row);
+               this.selectedRows.push(selectedRowId);
          }
          else if (event.shiftKey) {
             if (!this.selectedRows.length)
-               this.selectedRows.push(row);
+               this.selectedRows.push(selectedRowId);
             else {
                const lastID = this.selectedRows.slice(-1)[0];
                const lastIndex = this.sortedResults.findIndex(el => el._antares_id === lastID);
-               const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === row);
+               const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === selectedRowId);
                if (lastIndex > clickedIndex) {
                   for (let i = clickedIndex; i < lastIndex; i++)
                      this.selectedRows.push(this.sortedResults[i]._antares_id);
@@ -472,17 +482,19 @@ export default {
             }
          }
          else
-            this.selectedRows = [row];
+            this.selectedRows = [selectedRowId];
       },
       selectAllRows (e) {
          if (e.target.classList.contains('editable-field')) return;
 
+         this.selectedField = 0;
          this.selectedRows = this.localResults.reduce((acc, curr) => {
             acc.push(curr._antares_id);
             return acc;
          }, []);
       },
       deselectRows () {
+         if (!this.isEditingRow)
             this.selectedRows = [];
       },
       contextMenu (event, cell) {
@@ -536,6 +548,113 @@ export default {
             content: rows,
             filename
          });
+      },
+      onKey (e) {
+         if (!this.isSelected)
+            return;
+
+         if (this.isEditingRow)
+            return;
+
+         if ((e.ctrlKey || e.metaKey) && e.code === 'KeyA' && !e.altKey)
+            this.selectAllRows(e);
+
+         // row naviation stuff
+         if ((e.code.includes('Arrow') || e.code === 'Tab') && this.sortedResults.length > 0 && !e.altKey) {
+            e.preventDefault();
+
+            const aviableFields= Object.keys(this.sortedResults[0]).slice(0, -1); // removes _antares_id
+
+            if (!this.selectedField)
+               this.selectedField = aviableFields[0];
+
+            const selectedId = this.selectedRows[0];
+            const selectedIndex = this.sortedResults.findIndex(row => row._antares_id === selectedId);
+            const selectedFieldIndex = aviableFields.findIndex(field => field === this.selectedField);
+            let nextIndex = 0;
+            let nextFieldIndex = 0;
+
+            if (selectedIndex > -1) {
+               switch (e.code) {
+                  case 'ArrowDown':
+                     nextIndex = selectedIndex + 1;
+                     nextFieldIndex = selectedFieldIndex;
+
+                     if (nextIndex > this.sortedResults.length -1)
+                        nextIndex = this.sortedResults.length -1;
+
+                     break;
+                  case 'ArrowUp':
+                     nextIndex = selectedIndex - 1;
+                     nextFieldIndex = selectedFieldIndex;
+
+                     if (nextIndex < 0)
+                        nextIndex = 0;
+
+                     break;
+
+                  case 'ArrowRight':
+                     nextIndex = selectedIndex;
+                     nextFieldIndex = selectedFieldIndex + 1;
+
+                     if (nextFieldIndex > aviableFields.length -1)
+                        nextFieldIndex = 0;
+
+                     break;
+
+                  case 'ArrowLeft':
+                     nextIndex = selectedIndex;
+                     nextFieldIndex = selectedFieldIndex - 1;
+
+                     if (nextFieldIndex < 0)
+                        nextFieldIndex = aviableFields.length -1;
+
+                     break;
+
+                  case 'Tab':
+                     nextIndex = selectedIndex;
+                     if (e.shiftKey) {
+                        nextFieldIndex = selectedFieldIndex - 1;
+                        if (nextFieldIndex < 0)
+                           nextFieldIndex = aviableFields.length -1;
+                     }
+                     else {
+                        nextFieldIndex = selectedFieldIndex + 1;
+                        if (nextFieldIndex > aviableFields.length -1)
+                           nextFieldIndex = 0;
+                     }
+               }
+            }
+
+            if (this.sortedResults[nextIndex] && nextIndex !== selectedIndex) {
+               this.selectedRows = [this.sortedResults[nextIndex]._antares_id];
+               this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
+            }
+
+            if (aviableFields[nextFieldIndex] && nextFieldIndex !== selectedFieldIndex) {
+               this.selectedField = aviableFields[nextFieldIndex];
+               this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
+            }
+         }
+      },
+      scrollToCell (el) {
+         if (!el) return;
+         const visYMin = this.scrollElement.scrollTop;
+         const visYMax = this.scrollElement.scrollTop + this.scrollElement.clientHeight - el.clientHeight;
+         const visXMin = this.scrollElement.scrollLeft;
+         const visXMax = this.scrollElement.scrollLeft + this.scrollElement.clientWidth - el.clientWidth;
+
+         if (el.offsetTop < visYMin)
+            this.scrollElement.scrollTop = el.offsetTop;
+
+         else if (el.offsetTop >= visYMax)
+            this.scrollElement.scrollTop = el.offsetTop - this.scrollElement.clientHeight + el.clientHeight;
+
+         if (el.offsetLeft < visXMin)
+            this.scrollElement.scrollLeft = el.offsetLeft;
+
+         else if (el.offsetLeft >= visXMax)
+            this.scrollElement.scrollLeft = el.offsetLeft - this.scrollElement.clientWidth + el.clientWidth;
       }
    }
 };

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -2,14 +2,15 @@
    <div
       class="tr"
       :style="{height: itemHeight+'px'}"
-      @click="selectRow($event, row._antares_id)"
    >
       <div
          v-for="(col, cKey) in row"
          v-show="cKey !== '_antares_id'"
          :key="cKey"
          class="td p-0"
-         tabindex="0"
+         :class="{selected: selectedCell === cKey}"
+         @click="selectRow($event, cKey)"
+
          @contextmenu.prevent="openContext($event, { id: row._antares_id, orgField: cKey })"
       >
          <template v-if="cKey !== '_antares_id'">
@@ -17,7 +18,7 @@
                v-if="!isInlineEditor[cKey] && fields[cKey]"
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
-               @dblclick="editON($event, col, cKey)"
+               @dblclick="editON(cKey)"
             >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length)) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
@@ -105,7 +106,7 @@
                         <div class="mr-4">
                            <b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
                         </div>
-                        <div>
+                        <div v-if="editingType">
                            <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
                         </div>
                      </div>
@@ -170,7 +171,9 @@
                      <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
                      <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
                   </div>
-                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+                  <div v-if="editingType">
+                     <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                  </div>
                </div>
                <div class="mt-3">
                   <label>{{ $t('message.uploadFile') }}</label>
@@ -230,9 +233,11 @@ export default {
       fields: Object,
       keyUsage: Array,
       itemHeight: Number,
-      elementType: { type: String, default: 'table' }
+      elementType: { type: String, default: 'table' },
+      selected: { type: Boolean, default: false },
+      selectedCell: { type: String, default: null }
    },
-   emits: ['update-field', 'select-row', 'contextmenu'],
+   emits: ['update-field', 'select-row', 'contextmenu', 'start-editing', 'stop-editing'],
    data () {
       return {
          isInlineEditor: {},
@@ -336,6 +341,9 @@ export default {
 
          return false;
       },
+      isBaseSelectField () {
+         return this.isForeignKey(this.editingField) || this.inputProps.type === 'boolean' || this.enumArray;
+      },
       enumArray () {
          if (this.fields[this.editingField] && this.fields[this.editingField].enumValues)
             return this.fields[this.editingField].enumValues.replaceAll('\'', '').split(',');
@@ -362,7 +370,20 @@ export default {
                   this.editorMode = this.availableLanguages.find(lang => lang.id === filteredLanguages[0].languageId).slug;
             })();
          }
+      },
+      selected (isSelected) {
+         if (isSelected)
+            window.addEventListener('keydown', this.onKey);
+
+         else {
+            this.editOFF();
+            window.removeEventListener('keydown', this.onKey);
          }
+      }
+   },
+   beforeUnmount () {
+      if (this.selected)
+         window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       isForeignKey (key) {
@@ -382,11 +403,10 @@ export default {
       bufferToBase64 (val) {
          return bufferToBase64(val);
       },
-      editON (event, content, field) {
+      editON (field) {
          if (!this.isEditable || this.editingType === 'none') return;
 
-         window.addEventListener('keydown', this.onKey);
+         const content = this.row[field];
-
          const type = this.fields[field].type.toUpperCase();
          this.originalContent = this.typeFormat(content, type, this.fields[field].length);
          this.editingType = type;
@@ -396,6 +416,7 @@ export default {
          if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
             this.isTextareaEditor = true;
             this.editingContent = this.typeFormat(content, type);
+            this.$emit('start-editing', field);
             return;
          }
 
@@ -405,6 +426,7 @@ export default {
                this.isMapModal = true;
                this.editingContent = this.typeFormat(content, type);
             }
+            this.$emit('start-editing', field);
             return;
          }
 
@@ -426,19 +448,21 @@ export default {
                   };
                }
             }
+            this.$emit('start-editing', field);
             return;
          }
 
          // Inline editable fields
          this.editingContent = this.originalContent;
-         this.$nextTick(() => { // Focus on input
-            event.target.blur();
-
-            this.$nextTick(() => document.querySelector('.editable-field').focus());
-         });
 
          const obj = { [field]: true };
          this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+
+         this.$nextTick(() => { // Focus on input
+            document.querySelector('.editable-field').focus();
+         });
+
+         this.$emit('start-editing', field);
       },
       editOFF () {
          if (!this.editingField) return;
@@ -451,7 +475,13 @@ export default {
                   this.editingContent = this.editingContent.slice(0, -1);
             }
 
-            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) return;// If not changed
+            // If not changed
+            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) {
+               this.editingType = null;
+               this.editingField = null;
+               this.$emit('stop-editing', this.editingField);
+               return;
+            }
 
             content = this.editingContent;
          }
@@ -472,15 +502,17 @@ export default {
             content
          });
 
+         this.$emit('stop-editing', this.editingField);
+
          this.editingType = null;
          this.editingField = null;
-         window.removeEventListener('keydown', this.onKey);
       },
       hideEditorModal () {
          this.isTextareaEditor = false;
          this.isBlobEditor = false;
          this.isMapModal = false;
          this.isMultiSpatial = false;
+         this.$emit('stop-editing', this.editingField);
       },
       downloadFile () {
          const downloadLink = document.createElement('a');
@@ -508,8 +540,8 @@ export default {
          };
          this.willBeDeleted = true;
       },
-      selectRow (event, row) {
+      selectRow (event, field) {
-         this.$emit('select-row', event, row);
+         this.$emit('select-row', event, this.row, field);
       },
       getKeyUsage (keyName) {
          if (keyName.includes('.'))
@@ -523,10 +555,17 @@ export default {
       },
       onKey (e) {
          e.stopPropagation();
-         if (e.key === 'Escape') {
+
+         if (!this.editingField && e.key === 'Enter')
+            return this.editON(this.selectedCell);
+
+         if (this.editingField && e.key === 'Enter' && !this.isBaseSelectField)
+            return this.editOFF();
+
+         if (this.editingField && e.key === 'Escape') {
             this.isInlineEditor[this.editingField] = false;
             this.editingField = null;
-            window.removeEventListener('keydown', this.onKey);
+            this.$emit('stop-editing', this.editingField);
          }
       },
       formatBytes,

src/renderer/scss/themes/dark-theme.scss

@@ -231,7 +231,8 @@
         .td {
           border-color: $body-bg-dark;
 
-          &:focus {
+          &:focus,
+          &.selected {
             box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
             background-color: rgba($color: #000, $alpha: 0.3);
           }

src/renderer/scss/themes/light-theme.scss

@@ -252,7 +252,8 @@
         .td {
           border-color: $body-bg;
 
-          &:focus {
+          &:focus,
+          &.selected {
             box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
             background-color: $body-font-color-dark;
           }