Support Record Scroll (#224)

* navigation of record UpArrow and DownArrow in table of Tab Children

* Support keyboard shortcuts

package.json

@@ -75,6 +75,7 @@
     "vue-i18n": "7.3.2",
     "vue-multipane": "^0.9.5",
     "vue-router": "3.0.4",
+    "vue-shortkey": "^3.1.7",
     "vue-split-panel": "^1.0.4",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "^2.23.2",

src/App.vue

@@ -26,6 +26,10 @@ export default {
     },
     getWindowHeight(event) {
       this.$store.dispatch('setHeight', document.documentElement.clientHeight)
+    },
+    theAction(event) {
+      console.log(event)
+      alert('ok', event)
     }
   }
 }

src/components/ADempiere/ContextMenu/contextMenuDesktop.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container-submenu container-context-menu">
-    <el-menu :default-active="activeMenu" :router="false" class="el-menu-demo" mode="horizontal" menu-trigger="hover" unique-opened @select="typeFormat">
+    <el-menu v-shortkey="{f2: ['f2'], f3: ['f3'], f5: ['f5'], f3:['ctrl', 'd']}" :default-active="activeMenu" :router="false" class="el-menu-demo" mode="horizontal" menu-trigger="hover" unique-opened @select="typeFormat" @shortkey.native="actionContextMenu">
       <template>
         <el-submenu v-if="relations !== undefined && relations.length" class="el-menu-item" index="1">
           <template slot="title">

src/components/ADempiere/ContextMenu/contextMenuMixin.js

@@ -192,6 +192,58 @@ export const contextMixin = {
   },
   methods: {
     showNotification,
+    actionContextMenu(event) {
+      console.log(event)
+      switch (event.srcKey) {
+        case 'f2':
+          this.$store.dispatch('resetPanelToNew', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            recordUuid: this.recordUuid,
+            panelType: 'window',
+            isNewRecord: true
+          })
+          break
+        case 'f3':
+          this.$store.dispatch('deleteEntity', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            recordUuid: this.recordUuid,
+            panelType: 'window',
+            isNewRecord: false
+          })
+          break
+        case 'f5':
+          if (this.panelType === 'window') {
+            this.$store.dispatch('getDataListTab', {
+              parentUuid: this.parentUuid,
+              containerUuid: this.containerUuid,
+              isRefreshPanel: true,
+              recordUuid: this.recordUuid
+            })
+          } else if (this.panelType === 'browser') {
+            this.$store.dispatch('getBrowserSearch', {
+              containerUuid: this.containerUuid,
+              isClearSelection: true
+            })
+          }
+          break
+      }
+      // this.$store.dispatch('resetPanelToNew', {
+      //   parentUuid: this.parentUuid,
+      //   containerUuid: this.containerUuid,
+      //   recordUuid: this.recordUuid,
+      //   panelType: 'window',
+      //   isNewRecord: true
+      // })
+      // this.$store.dispatch('deleteEntity', {
+      //   parentUuid: this.parentUuid,
+      //   containerUuid: this.containerUuid,
+      //   recordUuid: this.recordUuid,
+      //   panelType: 'window',
+      //   isNewRecord: false
+      // })
+    },
     refreshData() {
       if (this.panelType === 'window') {
         this.$store.dispatch('getDataListTab', {
@@ -331,6 +383,7 @@ export const contextMixin = {
       }
     },
     runAction(action) {
+      console.log(action)
       if (action.type === 'action') {
         // run process or report
         const fieldNotReady = this.$store.getters.isNotReadyForSubmit(this.$route.meta.uuid)
@@ -407,6 +460,14 @@ export const contextMixin = {
             }
           })
         } else {
+          console.log('actionaction', action.action)
+          console.log('parentUuid:', this.parentUuid)
+          console.log('containerUuid:', this.containerUuid,)
+          console.log('recordUuid:', this.recordUuid)
+          console.log('panelType:', this.panelType)
+          console.log('isNewRecord:', action.action === 'resetPanelToNew')
+          console.log('tableName:', action.tableName)
+          console.log('recordId:', action.recordId)
           this.$store.dispatch(action.action, {
             parentUuid: this.parentUuid,
             containerUuid: this.containerUuid,
@@ -417,6 +478,7 @@ export const contextMixin = {
             recordId: action.recordId
           })
             .then(response => {
+              console.log(response)
               if (response && response.isPrivateAccess) {
                 this.validatePrivateAccess(response)
               }

src/components/ADempiere/DataTable/index.vue

@@ -6,8 +6,9 @@
           <el-collapse
             v-if="isParent && isAdvancedQuery"
             v-show="isAdvancedQuery"
-            v-model="activeName"
-            accordion
+            v-model="activeNames"
+            v-shortkey="{f6: ['f6'], ctrlf: ['ctrl', 'f']}"
+            @shortkey.native="actionAdvancedQuery()"
           >
             <el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="1">
               <main-panel
@@ -151,11 +152,13 @@
           <el-table
             ref="multipleTable"
             v-loading="$route.query.action !== 'create-new' && isLoaded"
+            v-shortkey="{up: ['arrowup'], down: ['arrowdown'], left: ['arrowleft'], right: ['arrowright']}"
             :height="getHeigthTable"
             style="width: 100%"
             border
             :row-key="getterPanel.keyColumn"
             reserve-selection
+            highlight-current-row
             :row-style="rowStyle"
             :data="showTableSearch ? filterResult() : getterDataRecords"
             :element-loading-text="$t('notifications.loading')"
@@ -164,6 +167,7 @@
             cell-class-name="datatable-max-cell-height"
             :show-summary="getterPanel.isShowedTotals"
             :summary-method="getSummaries"
+            @shortkey.native="theAction"
             @row-click="handleRowClick"
             @row-dblclick="handleRowDblClick"
             @select="handleSelection"
@@ -320,6 +324,10 @@ export default {
       top: 0,
       left: 0,
       isOption: {},
+      activeNames: ['0'],
+      focusTable: false,
+      currentRow: null,
+      currentTable: 0,
       visible: this.getShowContextMenuTable,
       searchTable: '', // text from search
       defaultMaxPagination: 100,
@@ -577,6 +585,31 @@ export default {
     }
   },
   methods: {
+    actionAdvancedQuery() {
+      if (this.activeNames < 1) {
+        this.activeNames = '1'
+      } else {
+        this.activeNames = '0'
+      }
+    },
+    setCurrent(row) {
+      this.$refs.multipleTable.setCurrentRow(row)
+    },
+    setCurrentParent(row) {
+      this.$refs.Parent.setCurrentRow(row)
+    },
+    theAction(event) {
+      switch (event.srcKey) {
+        case 'up':
+          this.currentTable = this.currentTable - 1
+          break
+        case 'down':
+          this.currentTable = this.currentTable + 1
+          break
+      }
+      this.handleRowClick(this.getterDataRecords[this.currentTable])
+      return this.setCurrent(this.getterDataRecords[this.currentTable])
+    },
     sortTab(actionSequence) {
       // TODO: Refactor and remove redundant dispatchs
       this.$store.dispatch('setShowDialog', {
@@ -941,6 +974,7 @@ export default {
       row.isEdit = false
     },
     handleRowClick(row, column, event) {
+      this.currentTable = this.getterDataRecords.findIndex(item => item.UUID === row.UUID)
       if (this.isShowedPanelRecord && this.isParent) {
         if (this.uuidCurrentRecordSelected !== row.UUID) {
           this.uuidCurrentRecordSelected = row.UUID

src/main.js

@@ -52,6 +52,8 @@ Object.keys(globalMethods).forEach(key => {
 
 Vue.config.productionTip = false
 
+Vue.use(require('vue-shortkey'))
+
 new Vue({
   el: '#app',
   router,

src/views/ADempiere/Window/index.vue

@@ -56,7 +56,7 @@
           </template>
           <template slot="paneR">
             <el-container style="height: 86vh;">
-              <Split direction="vertical" @onDrag="onDrag">
+              <Split v-shortkey="['f8']" direction="vertical" @onDrag="onDrag" @shortkey.native="handleChangeShowedRecordNavigation">
                 <SplitArea :size="sizeAreaStyle" :style="splitAreaStyle">
                   <el-header style="height: 39px;">
                     <context-menu