From b4a3ec0b535794956dac3bd38641a9e2885fcb3e Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Tue, 30 Mar 2021 15:39:30 -0400
Subject: [PATCH] Bugfix/#692 context menu butons (#700)

* fix: Context menu, change text by button.

* fix default action window as New Record.

* Add default action to run switch new and undo.

* Add colot button to undo action.

* change to plain and warning undo button.

* modifit contextmenu mobile

* remove console

* minimal change

* validate is LIstrecord

* modifit contextmenu mobile (#9)

* modifit contextmenu mobile

* remove console

* minimal change

* validate is LIstrecord

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

* add  description

* Bugfix/#692 context menu butons (#10)

* modifit contextmenu mobile

* remove console

* minimal change

* validate is LIstrecord

* add  description

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

* add icon

* Bugfix/#692 context menu butons (#11)

* modifit contextmenu mobile

* remove console

* minimal change

* validate is LIstrecord

* add  description

* add icon

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

* change size the label

* Bugfix/#692 context menu butons (#12)

* modifit contextmenu mobile

* remove console

* minimal change

* validate is LIstrecord

* add  description

* add icon

* change size the label

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

* changa size label

* add style reference

* add translations

* add icon default

* fixed position

Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>
Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>
---
 .../ContextMenu/contextMenuDesktop.vue        |  30 +-
 .../ADempiere/ContextMenu/contextMenuMixin.js |  40 +-
 .../ContextMenu/contextMenuMobile.vue         | 393 ++++++++++++------
 .../ADempiere/ContextMenu/index.vue           |   9 +-
 .../RightPanel/index.vue}                     |  31 +-
 src/lang/ADempiere/en.js                      |   1 +
 src/lang/ADempiere/es.js                      |   1 +
 src/store/modules/ADempiere/contextMenu.js    |   4 +
 src/views/ADempiere/Window/index.vue          |   3 +-
 9 files changed, 343 insertions(+), 169 deletions(-)
 rename src/components/{RightPanel/menu.vue => ADempiere/RightPanel/index.vue} (82%)

diff --git a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
index c5d1f78d..dfc655cc 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
+++ b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
@@ -3,7 +3,6 @@
     <el-menu
       ref="contextMenu"
       v-shortkey="shorcutKey"
-      :default-active="activeMenu"
       :router="false"
       class="el-menu-demo"
       mode="horizontal"
@@ -11,19 +10,6 @@
       unique-opened
       @shortkey.native="actionContextMenu"
     >
-      <!-- menu relations -->
-      <el-submenu v-if="!isEmptyChilds" class="el-menu-item" index="1">
-        <template slot="title">
-          {{ $t('components.contextMenuRelations') }}
-        </template>
-        <el-scrollbar wrap-class="scroll">
-          <items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
-        </el-scrollbar>
-      </el-submenu>
-      <el-menu-item v-else disabled index="relations">
-        {{ $t('components.contextMenuRelations') }}
-      </el-menu-item>
-
       <!-- actions or process on container -->
       <el-submenu v-if="!isEmptyValue(actions)" class="el-menu-item" index="actions" @click.native="runAction(actions[0])">
         <template slot="title">
@@ -102,6 +88,18 @@
         {{ $t('components.contextMenuActions') }}
       </el-menu-item>
 
+      <!-- menu relations -->
+      <el-submenu v-if="!isEmptyChilds" class="el-menu-item" index="1">
+        <template slot="title">
+          {{ $t('components.contextMenuRelations') }}
+        </template>
+        <el-scrollbar wrap-class="scroll">
+          <items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
+        </el-scrollbar>
+      </el-submenu>
+      <el-menu-item v-else disabled index="relations">
+        {{ $t('components.contextMenuRelations') }}
+      </el-menu-item>
       <!-- references of record -->
       <el-submenu
         :disabled="!(isReferecesContent && isLoadedReferences)"
@@ -136,6 +134,8 @@ import contextMixin from './contextMenuMixin.js'
 
 export default {
   name: 'ContextMenuDesktop',
-  mixins: [contextMixin]
+  mixins: [
+    contextMixin
+  ]
 }
 </script>
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMixin.js b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
index c7886186..9c0ca000 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuMixin.js
+++ b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
@@ -60,6 +60,10 @@ export default {
     isDisplayed: {
       type: Boolean,
       default: false
+    },
+    isListRecord: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -75,19 +79,17 @@ export default {
     }
   },
   computed: {
-    activeMenu() {
-      const { meta, path } = this.$route
-      // if set path, the sidebar will highlight the path you set
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
     getterContextMenu() {
       return this.$store.getters.getContextMenu(this.containerUuid)
     },
+    isWindow() {
+      return this.panelType === 'window'
+    },
+    isWithRecord() {
+      return !this.isEmptyValue(this.recordUuid) && this.recordUuid !== 'create-new'
+    },
     isReferecesContent() {
-      if (this.panelType === 'window' && !this.isEmptyValue(this.recordUuid) && this.recordUuid !== 'create-new') {
+      if (this.isWindow && this.isWithRecord) {
         return true
       }
       return false
@@ -160,7 +162,7 @@ export default {
       })
     },
     getDataLog() {
-      if (this.panelType === 'window') {
+      if (this.isWindow) {
         return this.$store.getters.getDataLog(this.containerUuid, this.recordUuid)
       }
       return undefined
@@ -169,7 +171,7 @@ export default {
       return this.$store.getters.getCachedReport(this.$route.params.instanceUuid).parameters
     },
     getOldRouteOfWindow() {
-      if (this.panelType === 'window') {
+      if (this.isWindow) {
         const oldRoute = this.$store.state['windowControl/index'].windowOldRoute
         if (!this.isEmptyValue(oldRoute.query.action) && oldRoute.query.action !== 'create-new' && this.$route.query.action === 'create-new') {
           return oldRoute
@@ -234,18 +236,18 @@ export default {
     '$route.query.action'(actionValue) {
       this.recordUuid = actionValue
       // only requires updating the context menu if it is Window
-      if (this.panelType === 'window') {
+      if (this.isWindow) {
         this.generateContextMenu()
         this.getReferences()
       }
     },
     isInsertRecord(newValue, oldValue) {
-      if (this.panelType === 'window' && newValue !== oldValue) {
+      if (this.isWindow && newValue !== oldValue) {
         this.generateContextMenu()
       }
     },
     getDataLog(newValue, oldValue) {
-      if (this.panelType === 'window' && newValue !== oldValue) {
+      if (this.isWindow && newValue !== oldValue) {
         this.generateContextMenu()
       }
     },
@@ -291,7 +293,7 @@ export default {
       }
     },
     refreshData() {
-      if (this.panelType === 'window') {
+      if (this.isWindow) {
         this.$store.dispatch('getDataListTab', {
           parentUuid: this.parentUuid,
           containerUuid: this.containerUuid,
@@ -350,7 +352,7 @@ export default {
       const tHeader = this.getterFieldsListHeader
       const filterVal = this.getterFieldsListValue
       let list = []
-      if (this.panelType === 'window') {
+      if (this.isWindow) {
         list = this.getDataRecord
       } else if (this.panelType === 'browser') {
         // TODO: Check usage as the selection is exported with the table menu
@@ -411,7 +413,7 @@ export default {
         })
         this.$store.dispatch('setOrder', processAction)
       }
-      if (this.panelType === 'window' && this.isEmptyValue(this.actions.find(element => element.action === 'recordAccess'))) {
+      if (this.isWindow && this.isEmptyValue(this.actions.find(element => element.action === 'recordAccess'))) {
         this.$store.dispatch('addAttribute', {
           tableName: this.tableNameCurrentTab,
           recordId: this.getCurrentRecord[this.tableNameCurrentTab + '_ID'],
@@ -446,7 +448,7 @@ export default {
             // rollback
             if (itemAction.action === 'undoModifyData') {
               itemAction.disabled = Boolean(!this.getDataLog && !this.getOldRouteOfWindow)
-            } else if (this.recordUuid === 'create-new' || !this.isInsertRecord) {
+            } else if (!this.isWithRecord || !this.isInsertRecord) {
               itemAction.disabled = true
             }
           }
@@ -670,7 +672,7 @@ export default {
       }
     },
     setShareLink() {
-      let shareLink = this.panelType === 'window' || window.location.href.includes('?') ? `${window.location.href}&` : `${window.location.href}?`
+      let shareLink = this.isWindow || window.location.href.includes('?') ? `${window.location.href}&` : `${window.location.href}?`
       if (this.$route.name === 'Report Viewer') {
         const processParameters = convertFieldsListToShareLink(this.processParametersExecuted)
         const reportFormat = this.$store.getters.getReportType
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMobile.vue b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
index fdf8197b..3d82e745 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
+++ b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
@@ -1,145 +1,141 @@
 <template>
-  <div class="container-submenu-mobile container-context-menu">
-    <el-button
-      type="text"
-      style="right: 70%;position: absolute;"
-      @click="runAction(actions[0])"
+  <div v-if="!isListRecord" class="container-submenu-mobile container-context-menu">
+    <!-- actions or process on container -->
+    <el-dropdown
+      size="mini"
+      :hide-on-click="true"
+      split-button
+      trigger="click"
+      @command="clickRunAction"
+      @click="runAction(defaultActionToRun)"
     >
-      {{ $t('components.RunProcess') }}
-    </el-button>
-    <right-menu>
-      <el-menu
-        ref="contextMenu"
-        v-shortkey="shorcutKey"
-        :default-active="activeMenu"
-        :router="false"
-        class="el-menu-demo"
-        mode="vertical"
-        menu-trigger="hover"
-        unique-opened
-        style="width: 258px; float: right;"
-      >
-        <!-- menu relations -->
-        <el-submenu v-if="!isEmptyChilds" index="relations">
-          <template slot="title">
-            <svg-icon icon-class="tree" />
-            {{ $t('components.contextMenuRelations') }}
-          </template>
-          <el-menu-item-group>
-            <el-scrollbar wrap-class="scroll">
-              <items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
-            </el-scrollbar>
-          </el-menu-item-group>
-        </el-submenu>
-        <el-menu-item v-else disabled index="relations">
-          {{ $t('components.contextMenuRelations') }}
-        </el-menu-item>
-
-        <!-- actions or process on container -->
-        <el-submenu index="actions">
-          <template slot="title">
-            <svg-icon icon-class="link" />
-            {{ $t('components.contextMenuActions') }}
-          </template>
-          <el-menu-item-group>
-            <el-scrollbar wrap-class="scroll">
-              <template v-for="(action, index) in actions">
-                <el-submenu
-                  v-if="action.childs"
-                  :key="index"
-                  :index="action.name"
-                  :disabled="action.disabled"
-                >
-                  <template slot="title">
-                    {{ action.name }}
-                  </template>
-                  <el-menu-item
-                    v-for="(child, key) in action.childs"
-                    :key="key"
-                    :index="child.uuid"
-                    @click="runAction(child)"
-                  >
-                    {{ child.name }}
-                  </el-menu-item>
-                </el-submenu>
-                <el-menu-item
-                  v-else
-                  :key="index"
-                  :index="action.name"
-                  :disabled="action.disabled"
-                  @click="runAction(action)"
-                >
-                  <svg-icon v-if="action.type === 'process'" icon-class="component" />
+      {{ defaultActionName }}
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          command="refreshData"
+        >
+          <div class="contents">
+            <div style="margin-right: 5%;margin-top: 10%;">
+              <i class="el-icon-refresh" style="font-weight: bolder;" />
+            </div>
+            <div>
+              <span class="contents">
+                <b class="label">
+                  {{ $t('components.contextMenuRefresh') }}
+                </b>
+              </span>
+              <p
+                class="description"
+              >
+                {{ $t('data.noDescription') }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+        <el-dropdown-item
+          v-for="(action, index) in actions"
+          :key="index"
+          :command="action"
+          :divided="true"
+        >
+          <div class="contents">
+            <div style="margin-right: 5%;margin-top: 10%;">
+              <i :class="iconAction(action)" style="font-weight: bolder;" />
+            </div>
+            <div>
+              <span class="contents">
+                <b class="label">
                   {{ action.name }}
-                </el-menu-item>
-              </template>
-              <!-- other actions -->
-              <el-menu-item v-show="isReport" index="downloadReport">
-                <a :href="downloads" :download="file">
-                  {{ $t('components.contextMenuDownload') }}
-                </a>
-              </el-menu-item>
-              <el-submenu
-                v-if="isManageDataRecords"
-                :disabled="isDisabledExportRecord"
-                index="exportRecord"
+                </b>
+              </span>
+              <p
+                class="description"
               >
-                <template slot="title">
-                  {{ $t('data.exportRecord') }}
-                </template>
-                <el-menu-item v-for="(format, keyFormat) in supportedTypes" :key="keyFormat" :index="keyFormat" @click.native="exportRecord(keyFormat)">
-                  {{ format }}
-                </el-menu-item>
-              </el-submenu>
-              <el-menu-item v-show="$route.name === 'Report Viewer'" index="printFormat" @click="redirect">
-                {{ $t('components.contextMenuPrintFormatSetup') }}
-              </el-menu-item>
-              <el-menu-item v-if="isManageDataRecords" index="refreshData" @click="refreshData">
-                {{ $t('components.contextMenuRefresh') }}
-              </el-menu-item>
-              <el-menu-item index="shareLink" @click="setShareLink">
-                {{ $t('components.contextMenuShareLink') }}
-              </el-menu-item>
-            </el-scrollbar>
-          </el-menu-item-group>
-        </el-submenu>
-
-        <!-- references of record -->
-        <el-submenu :disabled="!(isReferecesContent && isLoadedReferences)" class="el-menu-item" index="references">
-          <template slot="title">
-            {{ $t('components.contextMenuReferences') }}
-          </template>
-          <template v-if="references && !isEmptyValue(references.referencesList)">
-            <el-scrollbar wrap-class="scroll-child">
-              <el-menu-item
-                v-for="(reference, index) in references.referencesList"
-                :key="index"
-                :index="reference.displayName"
-                @click="openReference(reference)"
+                {{ $t('data.noDescription') }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <!-- menu relations -->
+    <el-dropdown size="mini" @command="clickRelation">
+      <el-button size="mini">
+        {{ $t('components.contextMenuRelations') }} <i class="el-icon-arrow-down el-icon--right" />
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(relation, index) in relationsList"
+          :key="index"
+          :command="relation"
+          :divided="true"
+        >
+          <div class="contents">
+            <div style="margin-right: 5%;margin-top: 10%;">
+              <svg-icon :icon-class="relation.meta.icon" />
+            </div>
+            <div>
+              <span class="contents">
+                <b class="label">
+                  {{ relation.meta.title }}
+                </b>
+              </span>
+              <p
+                class="description"
               >
-                {{ reference.displayName }}
-              </el-menu-item>
-            </el-scrollbar>
-          </template>
-          <el-menu-item v-else index="not-references" disabled>
-            {{ $t('components.withOutReferences') }}
-          </el-menu-item>
-        </el-submenu>
-      </el-menu>
-    </right-menu>
+                {{ relation.meta.description }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown size="mini" @command="clickReferences">
+      <el-button size="mini" :disabled="!(isReferecesContent && isLoadedReferences)">
+        {{ $t('components.contextMenuReferences') }} <i class="el-icon-arrow-down el-icon--right" />
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(reference, index) in references.referencesList"
+          :key="index"
+          :command="reference"
+          :divided="true"
+        >
+          <div class="contents">
+            <div>
+              <span class="contents">
+                <b class="label">
+                  {{ reference.displayName }}
+                </b>
+              </span>
+              <p
+                class="description"
+              >
+                {{ $t('data.noDescription') }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 
 <script>
 import contextMixin from './contextMenuMixin.js'
-import RightMenu from '@/components/RightPanel/menu'
 
 export default {
   name: 'ContextMenuMobile',
-  components: {
-    RightMenu
+  mixins: [
+    contextMixin
+  ],
+  data() {
+    return {
+      openedsMenu: [
+        'actions'
+      ]
+    }
   },
-  mixins: [contextMixin],
   computed: {
     isPanelTypeMobile() {
       if (['process', 'report'].includes(this.$route.meta.type)) {
@@ -147,17 +143,144 @@ export default {
       }
       return false
     },
+    isUndoAction() {
+      if (this.isWindow) {
+        if (!this.isWithRecord) {
+          return true
+        }
+      }
+      return false
+    },
+    typeOfAction() {
+      if (this.isUndoAction) {
+        return 'warning'
+      }
+      return 'default'
+    },
+    isPlain() {
+      if (this.isUndoAction) {
+        return true
+      }
+      return false
+    },
+    defaultActionToRun() {
+      if (this.isUndoAction) {
+        return this.actions[2]
+      }
+      return this.actions[0]
+    },
+    defaultActionName() {
+      if (this.isWindow) {
+        if (this.isWithRecord) {
+          return this.$t('window.newRecord')
+        }
+        return this.$t('data.undo')
+      }
+      return this.$t('components.RunProcess')
+    },
     iconDefault() {
       if (this.isPanelTypeMobile) {
         return 'component'
       }
       return 'skill'
     }
+  },
+  methods: {
+    clickRelation(item) {
+      this.$router.push({
+        name: item.name,
+        query: {
+          tabParent: 0
+        }
+      }, () => {})
+    },
+    clickRunAction(action) {
+      if (action === 'refreshData') {
+        this.refreshData()
+      } else {
+        this.runAction(action)
+      }
+    },
+    clickReferences(reference) {
+      this.openReference(reference)
+    },
+    iconAction(action) {
+      let icon
+      if (action.type === 'dataAction') {
+        switch (action.action) {
+          case 'setDefaultValues':
+            icon = 'el-icon-news'
+            break
+          case 'deleteEntity':
+            icon = 'el-icon-delete'
+            break
+          case 'undoModifyData':
+            icon = 'el-icon-refresh-left'
+            break
+          case 'lockRecord':
+            icon = 'el-icon-lock'
+            break
+          case 'unlockRecord':
+            icon = 'el-icon-unlock'
+            break
+          case 'recordAccess':
+            icon = 'el-icon-c-scale-to-original'
+            break
+        }
+      } else if (action.type === 'process') {
+        icon = 'el-icon-setting'
+      } else {
+        icon = 'el-icon-setting'
+      }
+      return icon
+    },
+    styleLabelAction(value) {
+      if (value) {
+        return 'font-size: 14px;margin-top: 0% !important;margin-left: 0px;margin-bottom: 10%;display: contents;'
+      } else {
+        return 'font-size: 14px;margin-top: 1.5% !important;margin-left: 2%;margin-bottom: 5%;display: contents;'
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
+  .el-tree-node__children {
+    overflow: hidden;
+    background-color: transparent;
+    max-width: 99%;
+    overflow: auto;
+  }
+  .el-dropdown .el-button-group {
+    display: flex;
+  }
+  .el-dropdown-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    padding: 10px 0;
+    margin: 5px 0;
+    background-color: #FFFFFF;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    max-height: 250px;
+    max-width: 220px;
+    overflow: auto;
+  }
+  .el-dropdown-menu--mini .el-dropdown-menu__item {
+    line-height: 14px;
+    padding: 0px 15px;
+    font-size: 10px;
+  }
+  .el-dropdown-menu__item--divided {
+    position: relative;
+    /* margin-top: 6px; */
+    border-top: 1px solid #e6ebf5;
+  }
   .svg-icon {
     width: 1em;
     height: 2em;
@@ -165,4 +288,18 @@ export default {
     fill: currentColor;
     overflow: hidden;
   }
+  .label {
+    font-size: 14px;
+    margin-top: 0% !important;
+    margin-left: 0px;
+    text-align: initial;
+  }
+  .description {
+    margin: 0px;
+    font-size: 12px;
+    text-align: initial;
+  }
+  .contents {
+    display: inline-flex;
+  }
 </style>
diff --git a/src/components/ADempiere/ContextMenu/index.vue b/src/components/ADempiere/ContextMenu/index.vue
index a76be1ee..d6de5b1e 100644
--- a/src/components/ADempiere/ContextMenu/index.vue
+++ b/src/components/ADempiere/ContextMenu/index.vue
@@ -10,6 +10,7 @@
     :last-parameter="lastParameter"
     :report-format="reportFormat"
     :is-insert-record="isInsertRecord"
+    :is-list-record="isListRecord"
   />
 </template>
 
@@ -55,6 +56,10 @@ export default {
     isInsertRecord: {
       type: Boolean,
       default: undefined
+    },
+    isListRecord: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -110,9 +115,9 @@ export default {
   .container-submenu-mobile {
     position: absolute;
     height: 39px !important;
-    width: 55px !important;
-    right: 0;
+    right: 0%;
     top: 0;
+    display: flex;
   }
 
   .container-submenu {
diff --git a/src/components/RightPanel/menu.vue b/src/components/ADempiere/RightPanel/index.vue
similarity index 82%
rename from src/components/RightPanel/menu.vue
rename to src/components/ADempiere/RightPanel/index.vue
index 79fce0b1..d7c4c349 100644
--- a/src/components/RightPanel/menu.vue
+++ b/src/components/ADempiere/RightPanel/index.vue
@@ -1,12 +1,21 @@
 <template>
-  <div ref="rightMenu" :class="{show:show}" class="rightMenu-container">
+  <div
+    ref="rightMenu"
+    :class="{ show: isShowRightPanel }"
+    class="rightMenu-container"
+  >
     <div class="setting">
       <div class="showme">
         <!-- <div class="rightMenu-background" /> -->
         <div class="rightMenu">
-          <div class="handle-button" :style="{'top':buttonTop+'%'}" @click="show=!show">
-            <i :class="show?'el-icon-close':'el-icon-more'" style="color: gray;" />
+          <div
+            class="handle-button"
+            :style="{ 'top': buttonTop+'%' }"
+            @click="isShowRightPanel=!isShowRightPanel"
+          >
+            <i :class="icon" style="color: gray;" />
           </div>
+
           <div class="rightMenu-items">
             <slot />
           </div>
@@ -20,7 +29,7 @@
 import { addClass, removeClass } from '@/utils'
 
 export default {
-  name: 'Menu',
+  name: 'RightPanel',
   props: {
     clickNotClose: {
       default: false,
@@ -37,6 +46,20 @@ export default {
     }
   },
   computed: {
+    isShowRightPanel: {
+      get() {
+        return this.$store.state.contextMenu.isShowRightPanel
+      },
+      set() {
+        this.$store.commit('changeShowRigthPanel')
+      }
+    },
+    icon() {
+      if (this.isShowRightPanel) {
+        return 'el-icon-close'
+      }
+      return 'el-icon-more'
+    },
     theme() {
       return this.$store.state.settings.theme
     }
diff --git a/src/lang/ADempiere/en.js b/src/lang/ADempiere/en.js
index 0200edab..5ade9467 100644
--- a/src/lang/ADempiere/en.js
+++ b/src/lang/ADempiere/en.js
@@ -319,6 +319,7 @@ export default {
     deleteRecordError: 'Error deleting record',
     exportRecord: 'Export Record',
     lockRecord: 'Lock Record',
+    noDescription: 'No Description',
     recordAccess: {
       actions: 'Record Access',
       hideRecord: 'Hide Record',
diff --git a/src/lang/ADempiere/es.js b/src/lang/ADempiere/es.js
index 0b78828c..43a4eac7 100644
--- a/src/lang/ADempiere/es.js
+++ b/src/lang/ADempiere/es.js
@@ -294,6 +294,7 @@ export default {
     deleteRecordError: 'Error al eliminar el regitro',
     exportRecord: 'Exportar Registro',
     lockRecord: 'Bloquear Registro',
+    noDescription: 'Sin Descripción',
     recordAccess: {
       actions: 'Acceso a registros',
       hideRecord: 'Ocultar Registro',
diff --git a/src/store/modules/ADempiere/contextMenu.js b/src/store/modules/ADempiere/contextMenu.js
index b4320c47..4503d165 100644
--- a/src/store/modules/ADempiere/contextMenu.js
+++ b/src/store/modules/ADempiere/contextMenu.js
@@ -13,6 +13,7 @@ import { requestListDocumentActions, requestListDocumentStatuses } from '@/api/A
 //   }
 // ]
 const initStateContextMenu = {
+  isShowRightPanel: false,
   contextMenu: [],
   listDocumentStatus: {
     defaultDocumentAction: undefined,
@@ -43,6 +44,9 @@ const contextMenu = {
     addlistDocumentStatus(state, payload) {
       state.listDocumentStatus = payload
     },
+    changeShowRigthPanel(state) {
+      state.isShowRightPanel = !state.isShowRightPanel
+    },
     resetContextMenu(state) {
       state = initStateContextMenu
     }
diff --git a/src/views/ADempiere/Window/index.vue b/src/views/ADempiere/Window/index.vue
index 78ceefa2..9cd5526c 100644
--- a/src/views/ADempiere/Window/index.vue
+++ b/src/views/ADempiere/Window/index.vue
@@ -56,7 +56,7 @@
                         :style="isWorkflowBarStatus ? 'height: 45px; background: #F5F7FA' : 'height: 40px'"
                       >
                         <el-container>
-                          <el-aside width="100%" style="width: 78vw; overflow: hidden;">
+                          <el-aside width="100%" style="overflow: hidden;">
                             <el-scrollbar>
                               <workflow-status-bar
                                 v-if="isWorkflowBarStatus"
@@ -76,6 +76,7 @@
                               :table-name="windowMetadata.currentTab.tableName"
                               :panel-type="panelType"
                               :is-insert-record="windowMetadata.currentTab.isInsertRecord"
+                              :is-list-record="isShowedRecordNavigation"
                             />
                           </el-main>
                         </el-container>