From 8b53babb212c001869b4fd3ea13a98bf489a0891 Mon Sep 17 00:00:00 2001
From: EdwinBetanc0urt <EdwinBetanc0urt@hotmail.com>
Date: Wed, 11 Dec 2019 16:33:29 -0400
Subject: [PATCH] feat: Add support to sequence tab. (#186)

* feat: Add support to sequence tab.

* Add name to list sequence tab.

* Add multiple tab sequence as process in tab.

* Add identifier fields from source tab to sequence tab.

* Add multiple requests to get all records according to the pagination.

* Corrects the display of records in the first load.

* Correct multiple petition if parent record has not changed.

* Refresh the list of records on the source tab.

* Fix moved sequence and names to showed.

* fix identifiers list and actions.

* remove the displayed sequence.
---
 package.json                                  |   4 +-
 .../ADempiere/ContextMenu/contextMenuMixin.js |  32 +-
 .../ADempiere/ContextMenu/index.vue           |   5 -
 src/components/ADempiere/DataTable/index.vue  |  23 +-
 src/components/ADempiere/Dialog/index.vue     |  80 ++++-
 src/components/ADempiere/Panel/index.vue      |   2 +-
 .../ADempiere/SequenceOrder/index.vue         | 299 ++++++++++++++++++
 src/components/ADempiere/Tab/index.vue        |  19 +-
 src/components/ADempiere/Tab/tabChildren.vue  |  42 ++-
 src/components/ADempiere/Tab/tabMixin.js      |  23 +-
 src/lang/ADempiere/en.js                      |   5 +
 src/lang/ADempiere/es.js                      |   5 +
 src/store/modules/ADempiere/data.js           | 141 ++++++---
 src/store/modules/ADempiere/panel.js          |  38 ++-
 src/store/modules/ADempiere/processControl.js |  28 +-
 src/store/modules/ADempiere/window.js         | 108 +++++--
 src/store/modules/ADempiere/windowControl.js  | 169 +++++++++-
 src/utils/ADempiere/dictionaryUtils.js        |  16 +-
 src/views/ADempiere/Browser/index.vue         |   2 +-
 src/views/ADempiere/Process/index.vue         |   2 +-
 src/views/ADempiere/Window/index.vue          |   6 +-
 21 files changed, 854 insertions(+), 195 deletions(-)
 create mode 100644 src/components/ADempiere/SequenceOrder/index.vue

diff --git a/package.json b/package.json
index badf8368..043f42f3 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "path-to-regexp": "2.4.0",
     "screenfull": "4.2.0",
     "showdown": "1.9.0",
-    "sortablejs": "1.8.4",
+    "sortablejs": "1.10.1",
     "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
@@ -77,7 +77,7 @@
     "vue-router": "3.0.4",
     "vue-split-panel": "^1.0.4",
     "vue-splitpane": "1.0.4",
-    "vuedraggable": "^2.20.0",
+    "vuedraggable": "^2.23.2",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMixin.js b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
index c2c5859e..1f787dbf 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuMixin.js
+++ b/src/components/ADempiere/ContextMenu/contextMenuMixin.js
@@ -39,10 +39,6 @@ export const contextMixin = {
       type: String,
       default: undefined
     },
-    modalMetadata: {
-      type: Object,
-      default: () => {}
-    },
     // used only window
     isInsertRecord: {
       type: Boolean,
@@ -322,25 +318,10 @@ export const contextMixin = {
     showModal(action) {
       // TODO: Refactor and remove redundant dispatchs
       if (action.type === 'process') {
-        var processData = this.$store.getters.getProcess(action.uuid)
-        if (processData === undefined) {
-          this.$store.dispatch('getProcessFromServer', {
-            containerUuid: action.uuid,
-            routeToDelete: this.$route
-          })
-            .then(response => {
-              this.$store.dispatch('setShowDialog', {
-                type: action.type,
-                action: response
-              })
-            }).catch(error => {
-              console.warn('ContextMenu: Dictionary Process (State) - Error ' + error.code + ': ' + error.message)
-            })
-        } else {
-          this.$store.dispatch('setShowDialog', { type: action.type, action: processData })
-        }
-      } else {
-        this.$store.dispatch('setShowDialog', { type: action.type, action: this.modalMetadata })
+        this.$store.dispatch('setShowDialog', {
+          type: action.type,
+          action: action
+        })
       }
     },
     runAction(action) {
@@ -360,7 +341,10 @@ export const contextMixin = {
             }
           }
           if (this.panelType === 'process') {
-            this.$store.dispatch('setTempShareLink', { processId: this.$route.params.processId, href: window.location.href })
+            this.$store.dispatch('setTempShareLink', {
+              processId: this.$route.params.processId,
+              href: window.location.href
+            })
           }
           this.$store.dispatch(action.action, {
             action: action,
diff --git a/src/components/ADempiere/ContextMenu/index.vue b/src/components/ADempiere/ContextMenu/index.vue
index 7e8bce09..d762b3b5 100644
--- a/src/components/ADempiere/ContextMenu/index.vue
+++ b/src/components/ADempiere/ContextMenu/index.vue
@@ -8,7 +8,6 @@
     :is-report="isReport"
     :last-parameter="lastParameter"
     :report-format="reportFormat"
-    :modal-metadata="modalMetadata"
     :is-insert-record="isInsertRecord"
   />
 </template>
@@ -47,10 +46,6 @@ export default {
       type: String,
       default: undefined
     },
-    modalMetadata: {
-      type: Object,
-      default: () => {}
-    },
     // used only window
     isInsertRecord: {
       type: Boolean,
diff --git a/src/components/ADempiere/DataTable/index.vue b/src/components/ADempiere/DataTable/index.vue
index 0204c9f0..71561e1d 100644
--- a/src/components/ADempiere/DataTable/index.vue
+++ b/src/components/ADempiere/DataTable/index.vue
@@ -35,6 +35,17 @@
                   >
                     {{ $t('window.newRecord') }}
                   </el-menu-item>
+                  <template v-if="isPanelWindow && getterPanel.isAssociatedTabSequence">
+                    <el-menu-item
+                      v-for="(actionSequence, key) in getterPanel.tabsOrder"
+                      :key="key"
+                      :disabled="$route.query.action === 'create-new'"
+                      index="sort"
+                      @click="sortTab(actionSequence)"
+                    >
+                      {{ actionSequence.name }}
+                    </el-menu-item>
+                  </template>
                   <el-menu-item
                     v-if="isPanelWindow"
                     :disabled="Boolean(getDataSelection.length < 1 || (isReadOnlyParent && !isParent))"
@@ -225,7 +236,7 @@
             style="width: 100%"
             border
             :row-key="getterPanel.keyColumn"
-            :reserve-selection="true"
+            reserve-selection
             :row-style="rowStyle"
             :data="showTableSearch ? filterResult() : getterDataRecords"
             :element-loading-text="$t('notifications.loading')"
@@ -600,6 +611,14 @@ export default {
     }
   },
   methods: {
+    sortTab(actionSequence) {
+      // TODO: Refactor and remove redundant dispatchs
+      this.$store.dispatch('setShowDialog', {
+        type: 'window',
+        action: actionSequence,
+        parentRecordUuid: this.$route.query.action
+      })
+    },
     closeMenu() {
       this.$store.dispatch('showMenuTable', {
         isShowedTable: false
@@ -988,7 +1007,7 @@ export default {
         this.$store.dispatch('getPanelAndFields', {
           containerUuid: this.containerUuid,
           parentUuid: this.parentUuid,
-          type: this.panelType
+          panelType: this.panelType
         }).then(response => {
           this.isLoadPanelFromServer = true
         }).catch(error => {
diff --git a/src/components/ADempiere/Dialog/index.vue b/src/components/ADempiere/Dialog/index.vue
index 476d93a8..342c2562 100644
--- a/src/components/ADempiere/Dialog/index.vue
+++ b/src/components/ADempiere/Dialog/index.vue
@@ -2,26 +2,44 @@
   <el-dialog
     :title="modalMetadata.name"
     :visible="isVisibleDialog"
-    :show-close="false"
+    show-close
+    :before-close="closeDialog"
     :width="width + '%'"
     top="5vh"
-    :close-on-press-escape="true"
-    :close-on-click-modal="true"
+    close-on-press-escape
+    close-on-click-modal
   >
-    {{ modalMetadata.description }}
-    <main-panel
-      v-if="(modalMetadata.panelType === 'process' || modalMetadata.panelType === 'report') && !isEmptyValue(modalMetadata.uuid)"
+    {{ modalMetadata.description }}<br><br>
+    <sequence-order
+      v-if="modalMetadata.isSortTab"
+      key="order"
       :parent-uuid="parentUuid"
       :container-uuid="modalMetadata.uuid"
-      :metadata="modalMetadata"
-      :is-view="false"
-      panel-type="process"
+      :order="modalMetadata.sortOrderColumnName"
+      :included="modalMetadata.sortYesNoColumnName"
+      :identifiers-list="modalMetadata.identifierColumns"
+      :key-column="modalMetadata.keyColumn"
     />
+    <template v-else>
+      <main-panel
+        v-if="!isEmptyValue(modalMetadata.uuid)"
+        key="main-panel"
+        :parent-uuid="parentUuid"
+        :container-uuid="modalMetadata.uuid"
+        :metadata="modalMetadata"
+        :panel-type="modalMetadata.panelType"
+      />
+    </template>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="closeDialog">
+      <el-button
+        @click="closeDialog"
+      >
         {{ $t('components.dialogCancelButton') }}
       </el-button>
-      <el-button type="primary" @click="runAction(modalMetadata)">
+      <el-button
+        type="primary"
+        @click="runAction(modalMetadata)"
+      >
         {{ $t('components.dialogConfirmButton') }}
       </el-button>
     </span>
@@ -30,12 +48,14 @@
 
 <script>
 import MainPanel from '@/components/ADempiere/Panel'
+import SequenceOrder from '@/components/ADempiere/SequenceOrder'
 import { showNotification } from '@/utils/ADempiere/notification'
 
 export default {
   name: 'ModalProcess',
   components: {
-    MainPanel
+    MainPanel,
+    SequenceOrder
   },
   props: {
     parentUuid: {
@@ -55,11 +75,6 @@ export default {
       default: ''
     }
   },
-  data() {
-    return {
-      processMetadata: {}
-    }
-  },
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -80,6 +95,22 @@ export default {
       return this.$store.state.window.recordSelected
     }
   },
+  watch: {
+    isVisibleDialog(value) {
+      if (value) {
+        if (this.modalMetadata.isSortTab) {
+          const data = this.$store.getters.getDataRecordAndSelection(this.modalMetadata.containerUuid)
+          if (!data.isLoaded && !data.record.length) {
+            this.$store.dispatch('getDataListTab', {
+              parentUuid: this.modalMetadata.parentUuid,
+              containerUuid: this.modalMetadata.containerUuid,
+              isAddRecord: true
+            })
+          }
+        }
+      }
+    }
+  },
   methods: {
     showNotification,
     closeDialog() {
@@ -89,6 +120,13 @@ export default {
       })
     },
     runAction(action) {
+      if (action.isSortTab) {
+        this.$store.dispatch('updateSequence', {
+          parentUuid: this.modalMetadata.parentUuid,
+          containerUuid: this.modalMetadata.containerUuid
+        })
+        return
+      }
       if (action === undefined && this.windowRecordSelected !== undefined) {
         this.$router.push({
           name: this.$route.name,
@@ -126,3 +164,11 @@ export default {
   }
 }
 </script>
+
+<style>
+  .el-dialog__body {
+    padding: 10px 20px;
+    max-height: 65vh;
+    overflow: auto;
+  }
+</style>
diff --git a/src/components/ADempiere/Panel/index.vue b/src/components/ADempiere/Panel/index.vue
index 9540380b..5f8e29ae 100644
--- a/src/components/ADempiere/Panel/index.vue
+++ b/src/components/ADempiere/Panel/index.vue
@@ -333,7 +333,7 @@ export default {
         this.$store.dispatch('getPanelAndFields', {
           parentUuid: this.parentUuid,
           containerUuid: this.containerUuid,
-          type: this.panelType,
+          panelType: this.panelType,
           isAdvancedQuery: this.isAdvancedQuery
         }).then(() => {
           this.generatePanel(this.getterFieldList)
diff --git a/src/components/ADempiere/SequenceOrder/index.vue b/src/components/ADempiere/SequenceOrder/index.vue
new file mode 100644
index 00000000..97bca44c
--- /dev/null
+++ b/src/components/ADempiere/SequenceOrder/index.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="board">
+    <div
+      :key="1"
+      class="kanban todo"
+      header-text="Todo"
+    >
+      <div class="board-column">
+        <div class="board-column-header">
+          {{ this.$t('sequence.available') }} ({{ getterListAvaliable.length }})
+        </div>
+        <draggable
+          v-model="getterListAvaliable"
+          :group="group"
+          v-bind="$attrs"
+          class="board-column-content"
+        >
+          <div
+            v-for="element in getterListAvaliable"
+            :key="element.UUID"
+            class="board-item"
+          >
+            {{ displayedName(element) }}
+          </div>
+        </draggable>
+      </div>
+    </div>
+    <div
+      :key="2"
+      class="kanban working"
+      header-text="Working"
+    >
+      <div class="board-column">
+        <div class="board-column-header">
+          {{ this.$t('sequence.sequence') }}  ({{ getterListSequence.length }})
+        </div>
+        <draggable
+          v-model="getterListSequence"
+          :group="group"
+          v-bind="$attrs"
+          class="board-column-content"
+          @change="handleChange"
+        >
+          <div
+            v-for="element in getterListSequence"
+            :key="element.UUID"
+            class="board-item"
+          >
+            {{ displayedName(element) }}
+          </div>
+        </draggable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'SequenceOrder',
+  components: {
+    draggable
+  },
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    order: {
+      type: String,
+      required: true
+    },
+    included: {
+      type: String,
+      required: true
+    },
+    keyColumn: {
+      type: String,
+      default: undefined
+    },
+    identifiersList: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      group: 'sequence'
+    }
+  },
+  computed: {
+    getterDataRecords() {
+      return this.$store.getters.getTabSequenceRecord
+    },
+    getterListAvaliable: {
+      get() {
+        return this.getterDataRecords.filter(item => {
+          return !item[this.included]
+        })
+      },
+      set(value) {
+      }
+    },
+    getterListSequence: {
+      get() {
+        return this.getterDataRecords.filter(item => {
+          return item[this.included]
+        })
+      },
+      set(value) {
+      }
+    },
+    getIdentifiersList() {
+      return this.identifiersList
+        .filter(item => item.componentPath !== 'FieldSelect')
+    }
+  },
+  methods: {
+    displayedName(row) {
+      const identifiersList = this.getIdentifiersList.map(item => row[item.columnName]).join('_')
+      if (!this.isEmptyValue(identifiersList)) {
+        return identifiersList
+      }
+      return `< ${row[this.keyColumn]} >`
+    },
+    /**
+     * @link https://github.com/SortableJS/Vue.Draggable#events
+     */
+    handleChange(value) {
+      const action = Object.keys(value)[0] // get property
+      switch (action) {
+        case 'added':
+          this.addItem(value[action])
+          break
+        case 'moved':
+          this.movedItem(value[action])
+          break
+        case 'removed':
+          this.delItem(value[action])
+          break
+      }
+    },
+    /**
+     * @param newIndex: the index of the added element
+     * @param element: the added element
+     */
+    addItem({ element, newIndex }) {
+      const newSequence = (newIndex + 1) * 10
+      element[this.included] = !element[this.included]
+      element[this.order] = newSequence
+      const dataSequence = this.getterDataRecords.map(itemSequence => {
+        if (itemSequence.UUID === element.UUID) {
+          return element
+        }
+        if (newSequence <= itemSequence[this.order]) {
+          itemSequence[this.order] = itemSequence[this.order] + 10
+        }
+        return itemSequence
+      })
+
+      this.$store.dispatch('setTabSequenceRecord', this.getOrder(dataSequence))
+    },
+    /**
+     * @param newIndex: the current index of the moved element
+     * @param oldIndex: the old index of the moved element
+     * @param element: the moved element
+     */
+    movedItem({ newIndex, oldIndex, element }) {
+      let indexEnabledSequence = 0
+      const dataSequence = this.getterDataRecords.map(itemSequence => {
+        if (!itemSequence[this.included]) {
+          itemSequence[this.order] = 0
+          return itemSequence
+        }
+        if (newIndex > oldIndex) {
+          // moved to down
+          if (itemSequence.UUID === element.UUID) {
+            itemSequence[this.order] = (newIndex + 1) * 10
+            return itemSequence
+          }
+          if (indexEnabledSequence >= oldIndex && indexEnabledSequence < newIndex) {
+            itemSequence[this.order] = (indexEnabledSequence + 1) * 10
+          }
+        } else {
+          // moved to up
+          if (itemSequence.UUID === element.UUID) {
+            itemSequence[this.order] = (newIndex + 1) * 10
+            return itemSequence
+          }
+          if (indexEnabledSequence < oldIndex && indexEnabledSequence >= newIndex) {
+            itemSequence[this.order] += 10
+          }
+        }
+        indexEnabledSequence++
+        return itemSequence
+      })
+
+      this.$store.dispatch('setTabSequenceRecord', this.getOrder(dataSequence))
+    },
+    /**
+     * @param oldIndex: the index of the element before remove
+     * @param element: the removed element
+     */
+    delItem({ element, oldIndex }) {
+      const oldSequence = element[this.order] // (oldIndex + 1) * 10
+      const dataSequence = this.getterDataRecords.map(itemSequence => {
+        if (itemSequence.UUID === element.UUID) {
+          itemSequence[this.included] = !itemSequence[this.included]
+          itemSequence[this.order] = 0
+          return itemSequence
+        }
+        if (itemSequence[this.order] > oldSequence && itemSequence[this.order] > 0) {
+          itemSequence[this.order] = itemSequence[this.order] - 10
+        }
+        return itemSequence
+      })
+      this.$store.dispatch('setTabSequenceRecord', this.getOrder(dataSequence))
+    },
+    getOrder(arrayToSort, orderBy = this.order) {
+      return arrayToSort.sort((itemA, itemB) => {
+        return itemA[orderBy] - itemB[orderBy]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .board-column {
+    min-width: 250px;
+    min-height: 70px;
+    height: auto;
+    overflow: hidden;
+    background: #f0f0f0;
+    border-radius: 3px;
+
+    .board-column-header {
+      height: 50px;
+      line-height: 50px;
+      overflow: hidden;
+      padding: 0 20px;
+      text-align: center;
+      background: #333;
+      color: #fff;
+      border-radius: 3px 3px 0 0;
+    }
+
+    .board-column-content {
+      height: auto;
+      overflow: hidden;
+      border: 10px solid transparent;
+      min-height: 60px;
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: column;
+      align-items: center;
+
+      .board-item {
+        cursor: pointer;
+        width: 100%;
+        height: 30px;
+        margin: 5px 0;
+        background-color: #fff;
+        text-align: left;
+        line-height: 30px;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  .board {
+    width: 100%;
+    margin-left: 20px;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .kanban {
+    &.todo {
+      .board-column-header {
+        background: #f9944a;
+      }
+    }
+    &.working {
+      .board-column-header {
+        background: #4A9FF9;
+      }
+    }
+  }
+</style>
diff --git a/src/components/ADempiere/Tab/index.vue b/src/components/ADempiere/Tab/index.vue
index 1ec1e7fa..cf91b91a 100644
--- a/src/components/ADempiere/Tab/index.vue
+++ b/src/components/ADempiere/Tab/index.vue
@@ -1,24 +1,23 @@
 <template>
   <el-tabs v-model="currentTab" type="border-card" :before-leave="handleBeforeLeave" @tab-click="handleClick">
-    <template v-for="(item, key) in tabsList">
+    <template v-for="(tabAttributes, key) in getTabsList">
       <el-tab-pane
         :key="key"
-        :label="item.name"
+        :label="tabAttributes.name"
         :windowuuid="windowUuid"
-        :tabuuid="item.uuid"
-        :position-tab="key"
-        :name="String(item.index)"
-        :lazy="true"
+        :tabuuid="tabAttributes.uuid"
+        :name="String(key)"
+        lazy
         :disabled="Boolean(key > 0 && isCreateNew)"
         :style="isShowedDetail ? { height: '100%', overflow: 'hidden' } : { height: '75vh', overflow: 'auto' }"
       >
         <main-panel
           :parent-uuid="windowUuid"
-          :container-uuid="item.uuid"
-          :metadata="item"
-          :group-tab="item.tabGroup"
+          :container-uuid="tabAttributes.uuid"
+          :metadata="tabAttributes"
+          :group-tab="tabAttributes.tabGroup"
           :panel-type="panelType"
-          :is-re-search="Boolean(key == 0 || (key > 0 && firstTableName != item.tableName))"
+          :is-re-search="Boolean(key == 0 || (key > 0 && firstTableName != tabAttributes.tableName))"
         />
       </el-tab-pane>
     </template>
diff --git a/src/components/ADempiere/Tab/tabChildren.vue b/src/components/ADempiere/Tab/tabChildren.vue
index af673c79..eca5ecb9 100644
--- a/src/components/ADempiere/Tab/tabChildren.vue
+++ b/src/components/ADempiere/Tab/tabChildren.vue
@@ -1,21 +1,20 @@
 <template>
   <el-tabs v-model="currentTabChild" type="border-card" @tab-click="handleClick">
-    <template v-for="(item, key) in tabsList">
+    <template v-for="(tabAttributes, key) in getTabsList">
       <!-- TODO: Add support to tabs isSortTab (sequence) -->
       <el-tab-pane
         :key="key"
-        :label="item.name"
+        :label="tabAttributes.name"
         :windowuuid="windowUuid"
-        :tabuuid="item.uuid"
-        :position-tab="key"
-        :name="String(item.index)"
-        :lazy="true"
+        :tabuuid="tabAttributes.uuid"
+        :name="String(key)"
+        lazy
         :disabled="isCreateNew"
       >
         <el-col :span="24">
           <data-table
             :parent-uuid="windowUuid"
-            :container-uuid="item.uuid"
+            :container-uuid="tabAttributes.uuid"
             :panel-type="panelType"
           />
         </el-col>
@@ -38,10 +37,6 @@ export default {
     firstTabUuid: {
       type: String,
       default: undefined
-    },
-    firstIndex: {
-      type: String,
-      default: undefined
     }
   },
   data() {
@@ -65,8 +60,33 @@ export default {
       return this.getterDataParentTab.isLoadedContext
     }
   },
+  watch: {
+    // Current TabChildren
+    currentTabChild(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            tabChild: String(newValue)
+          },
+          params: {
+            ...this.$route.params
+          }
+        })
+      }
+    }
+  },
   mounted() {
     this.setCurrentTabChild()
+  },
+  methods: {
+    setCurrentTabChild() {
+      let activeTab = this.$route.query.tabChild
+      if (activeTab === undefined) {
+        activeTab = String(0)
+      }
+      this.currentTabChild = activeTab
+    }
   }
 }
 </script>
diff --git a/src/components/ADempiere/Tab/tabMixin.js b/src/components/ADempiere/Tab/tabMixin.js
index 9dae6750..415707be 100644
--- a/src/components/ADempiere/Tab/tabMixin.js
+++ b/src/components/ADempiere/Tab/tabMixin.js
@@ -7,7 +7,7 @@ export const tabMixin = {
       default: ''
     },
     tabsList: {
-      type: [Array, Object],
+      type: Array,
       default: () => []
     }
   },
@@ -25,6 +25,9 @@ export const tabMixin = {
     },
     getterDataRecords() {
       return this.$store.getters.getDataRecordsList(this.tabUuid)
+    },
+    getTabsList() {
+      return this.tabsList.filter(tab => !tab.isSortTab)
     }
   },
   watch: {
@@ -34,12 +37,6 @@ export const tabMixin = {
         this.getDataTable()
       }
     },
-    // Current TabChildren
-    currentTabChild(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.$router.push({ query: { ...this.$route.query, tabChild: String(newValue) }, params: { ...this.$route.params }})
-      }
-    },
     // Load parent tab context
     getterIsLoadContextParent(value) {
       if (value && !this.getDataSelection.isLoaded && this.getterIsLoadRecordParent) {
@@ -48,7 +45,8 @@ export const tabMixin = {
     }
   },
   created() {
-    this.tabUuid = this.tabsList[0].uuid
+    const tabs = this.tabsList.filter(item => !item.isSortTab)
+    this.tabUuid = tabs[0].uuid
   },
   methods: {
     parseContext,
@@ -66,11 +64,6 @@ export const tabMixin = {
       })
       this.$route.meta.tabUuid = this.tabUuid
     },
-    setCurrentTabChild() {
-      if (this.$route.query.tabChild === undefined && this.firstIndex) {
-        this.currentTabChild = this.firstIndex
-      }
-    },
     /**
      * @param {object} tabHTML DOM HTML the tab clicked
      */
@@ -81,7 +74,9 @@ export const tabMixin = {
       }
     },
     handleBeforeLeave(activeName) {
-      var metadataTab = this.tabsList.find(tab => tab.index === parseInt(activeName))
+      const metadataTab = this.tabsList
+        .filter(tab => !tab.isSortTab)
+        .find(tab => tab.index === parseInt(activeName))
       if (!this.isEmptyValue(metadataTab.whereClause) && metadataTab.whereClause.includes('@')) {
         metadataTab.whereClause = parseContext({
           parentUuid: metadataTab.parentUuid,
diff --git a/src/lang/ADempiere/en.js b/src/lang/ADempiere/en.js
index 1b90767b..baf0259b 100644
--- a/src/lang/ADempiere/en.js
+++ b/src/lang/ADempiere/en.js
@@ -38,6 +38,7 @@ export default {
     copyUnsuccessful: 'Error, unable to copy',
     mandatoryFieldMissing: 'Missing fill in the fields ',
     updateFields: 'The record is updated with the field ',
+    updateSuccessfully: 'Successfully made changes',
     invalidEmailFormat: 'Invalid email format',
     recordLocked: 'This record has been locked',
     recordUnlocked: 'This record has been unlocked'
@@ -274,5 +275,9 @@ export default {
     undo: 'Undo',
     lockRecord: 'Lock Record',
     unlockRecord: 'Unlock Record'
+  },
+  sequence: {
+    available: 'Available',
+    sequence: 'Sequence'
   }
 }
diff --git a/src/lang/ADempiere/es.js b/src/lang/ADempiere/es.js
index 40169fac..90f26943 100644
--- a/src/lang/ADempiere/es.js
+++ b/src/lang/ADempiere/es.js
@@ -38,6 +38,7 @@ export default {
     copyUnsuccessful: 'Error, no se puede copiar',
     mandatoryFieldMissing: 'Falta completar los campos ',
     updateFields: 'Se actualiza el registro con el campo ',
+    updateSuccessfully: 'Cambios realizados exitosamente',
     invalidEmailFormat: 'Formato de correo electronico invalido',
     recordLocked: 'Este registro ha sido bloqueado',
     recordUnlocked: 'Este registro ha sido desbloqueado'
@@ -249,5 +250,9 @@ export default {
     undo: 'Deshacer',
     lockRecord: 'Bloquear Registro',
     unlockRecord: 'Desbloquear Registro'
+  },
+  sequence: {
+    available: 'Disponibles',
+    sequence: 'Secuencia'
   }
 }
diff --git a/src/store/modules/ADempiere/data.js b/src/store/modules/ADempiere/data.js
index 60fdebd0..af4ac2c4 100644
--- a/src/store/modules/ADempiere/data.js
+++ b/src/store/modules/ADempiere/data.js
@@ -37,12 +37,17 @@ const data = {
     deleteInGetting(state, payload) {
       state.inGetting = state.inGetting.filter(item => item.containerUuid !== payload.containerUuid)
     },
+    addRecordSelection(state, payload) {
+      state.recordSelection.push(payload)
+    },
     setRecordSelection(state, payload) {
-      if (payload.index > -1 && payload.index !== undefined) {
-        state.recordSelection.splice(payload.index, 1, payload)
-      } else {
-        state.recordSelection.push(payload)
-      }
+      payload.dataStore.record = payload.newDataStore.record
+      payload.dataStore.selection = payload.newDataStore.selection
+      payload.dataStore.pageNumber = payload.newDataStore.pageNumber
+      payload.dataStore.recordCount = payload.newDataStore.recordCount
+      payload.dataStore.nextPageToken = payload.newDataStore.nextPageToken
+      payload.dataStore.isLoadedContext = payload.newDataStore.isLoadedContext
+      payload.dataStore.isLoaded = payload.newDataStore.isLoaded
     },
     setSelection(state, payload) {
       payload.data.selection = payload.newSelection
@@ -124,24 +129,30 @@ const data = {
      * @param {string}  parameters.pageNumber
      */
     setPageNumber({ commit, state, dispatch, rootGetters }, parameters) {
+      const {
+        parentUuid, containerUuid, panelType = 'window', pageNumber,
+        isAddRecord = false, isShowNotification = true
+      } = parameters
       const data = state.recordSelection.find(recordItem => {
-        return recordItem.containerUuid === parameters.containerUuid
+        return recordItem.containerUuid === containerUuid
       })
       commit('setPageNumber', {
         data: data,
-        pageNumber: parameters.pageNumber
+        pageNumber: pageNumber
       })
 
       // refresh list table with data from server
-      if (parameters.panelType === 'window') {
+      if (panelType === 'window') {
         dispatch('getDataListTab', {
-          parentUuid: parameters.parentUuid,
-          containerUuid: parameters.containerUuid
+          parentUuid: parentUuid,
+          containerUuid: containerUuid,
+          isAddRecord: isAddRecord,
+          isShowNotification: isShowNotification
         })
-      } else if (parameters.panelType === 'browser') {
-        if (!rootGetters.isNotReadyForSubmit(parameters.containerUuid)) {
+      } else if (panelType === 'browser') {
+        if (!rootGetters.isNotReadyForSubmit(containerUuid)) {
           dispatch('getBrowserSearch', {
-            containerUuid: parameters.containerUuid,
+            containerUuid: containerUuid,
             isClearSelection: true
           })
         }
@@ -330,19 +341,18 @@ const data = {
      */
     setIsloadContext({ commit, state }, parameters) {
       const { containerUuid } = parameters
-      const data = state.recordSelection.find(recordItem => {
+      const dataStore = state.recordSelection.find(recordItem => {
         return recordItem.containerUuid === containerUuid
       })
-      if (data) {
+      if (dataStore) {
         commit('setIsloadContext', {
-          data: data,
+          data: dataStore,
           isLoadedContext: true
         })
       }
     },
     /**
      * Set record, selection, page number, token, and record count, with container uuid
-     * TODO: Refactor and optimize the mutation of state
      * @param {string}  parameters.containerUuid
      * @param {array}   parameters.record
      * @param {array}   parameters.selection
@@ -351,12 +361,19 @@ const data = {
      * @param {string}  parameters.nextPageToken
      * @param {string}  parameters.panelType
      */
-    setRecordSelection({ commit, state }, parameters) {
-      const { parentUuid, containerUuid, record = [], selection = [], pageNumber = 1, recordCount = 0, nextPageToken, panelType = 'window' } = parameters
-      var index = state.recordSelection.findIndex(recordItem => {
+    setRecordSelection({ state, commit, rootGetters, dispatch }, parameters) {
+      const {
+        parentUuid, containerUuid, panelType = 'window', record = [],
+        query, whereClause, orderByClause,
+        selection = [], pageNumber = 1, recordCount = 0, nextPageToken,
+        originalNextPageToken, isAddRecord = false, isLoaded = true
+      } = parameters
+
+      const dataStore = state.recordSelection.find(recordItem => {
         return recordItem.containerUuid === containerUuid
       })
-      commit('setRecordSelection', {
+
+      const newDataStore = {
         parentUuid: parentUuid,
         containerUuid: containerUuid,
         record: record,
@@ -364,11 +381,26 @@ const data = {
         pageNumber: pageNumber,
         recordCount: recordCount,
         nextPageToken: nextPageToken,
+        originalNextPageToken: originalNextPageToken,
         panelType: panelType,
-        isLoaded: true,
+        isLoaded: isLoaded,
         isLoadedContext: false,
-        index: index
-      })
+        query: query,
+        whereClause: whereClause,
+        orderByClause: orderByClause
+      }
+
+      if (dataStore) {
+        if (isAddRecord) {
+          newDataStore.record = dataStore.record.concat(newDataStore.record)
+        }
+        commit('setRecordSelection', {
+          dataStore: dataStore,
+          newDataStore: newDataStore
+        })
+      } else {
+        commit('addRecordSelection', newDataStore)
+      }
     },
     /**
      * Set selection in data list associated in container
@@ -406,6 +438,7 @@ const data = {
         return itemRecord.containerUuid !== viewUuid
       })
       commit('deleteRecordContainer', record)
+      dispatch('setTabSequenceRecord', [])
 
       if (setNews.length) {
         setNews.forEach(uuid => {
@@ -453,7 +486,11 @@ const data = {
      * @param {array}  conditions, conditions to criteria
      */
     getObjectListFromCriteria({ commit, dispatch, getters, rootGetters }, parameters) {
-      const { parentUuid, containerUuid, tableName, query, whereClause, orderByClause, conditions = [], isShowNotification = true, isParentTab = true } = parameters
+      const {
+        parentUuid, containerUuid,
+        tableName, query, whereClause, orderByClause, conditions = [],
+        isShowNotification = true, isParentTab = true, isAddRecord = false
+      } = parameters
       if (isShowNotification) {
         showMessage({
           title: language.t('notifications.loading'),
@@ -463,12 +500,12 @@ const data = {
       }
       const dataStore = getters.getDataRecordAndSelection(containerUuid)
 
-      var nextPageToken
+      let nextPageToken
       if (!isEmptyValue(dataStore.nextPageToken)) {
         nextPageToken = dataStore.nextPageToken + '-' + dataStore.pageNumber
       }
 
-      var inEdited = []
+      let inEdited = []
       if (!isParentTab) {
         // TODO: Evaluate peformance to evaluate records to edit
         inEdited = dataStore.record.filter(itemRecord => {
@@ -499,11 +536,11 @@ const data = {
         .then(response => {
           const recordList = response.getRecordsList()
           const record = recordList.map(itemRecord => {
-            var values = convertValuesMapToObject(
+            const values = convertValuesMapToObject(
               itemRecord.getValuesMap()
             )
 
-            // datatables attribute
+            // datatables attributes
             values.isNew = false
             values.isEdit = false
             values.isSelected = false
@@ -521,14 +558,15 @@ const data = {
             }
           })
 
-          var token = response.getNextPageToken()
-          if (!isEmptyValue(token)) {
+          const originalNextPageToken = response.getNextPageToken()
+          let token = originalNextPageToken
+          if (isEmptyValue(token)) {
+            token = dataStore.nextPageToken
+          } else {
             token = token.slice(0, -2)
             if (token.substr(-1, 1) === '-') {
               token = token.slice(0, -1)
             }
-          } else {
-            token = dataStore.nextPageToken
           }
           if (isShowNotification) {
             let searchMessage = 'searchWithOutRecords'
@@ -548,7 +586,12 @@ const data = {
             selection: dataStore.selection,
             recordCount: response.getRecordcount(),
             nextPageToken: token,
-            pageNumber: dataStore.pageNumber
+            originalNextPageToken: originalNextPageToken,
+            isAddRecord: isAddRecord,
+            pageNumber: dataStore.pageNumber,
+            tableName: tableName,
+            query: query,
+            whereClause: whereClause
           })
           return record
         })
@@ -567,7 +610,7 @@ const data = {
               type: 'error'
             })
           }
-          console.warn('Error Get Object List ' + error.message + '. Code: ' + error.code)
+          console.warn(`Error Get Object List ${error.message}. Code: ${error.code}`)
         })
         .finally(() => {
           commit('deleteInGetting', {
@@ -850,7 +893,11 @@ const data = {
     getPrivateAccessFromServer({ commit, rootGetters }, parameters) {
       const { tableName, recordId } = parameters
       const userUuid = rootGetters['user/getUserUuid']
-      return getPrivateAccessFromServer({ tableName: tableName, recordId: recordId, userUuid: userUuid })
+      return getPrivateAccessFromServer({
+        tableName: tableName,
+        recordId: recordId,
+        userUuid: userUuid
+      })
         .then(privateAccess => {
           if (privateAccess.getRecordid()) {
             var recordPrivateAccess = {
@@ -876,7 +923,11 @@ const data = {
     lockRecord({ commit, rootGetters }, parameters) {
       const { tableName, recordId } = parameters
       const userUuid = rootGetters['user/getUserUuid']
-      return lockPrivateAccessFromServer({ tableName: tableName, recordId: recordId, userUuid: userUuid })
+      return lockPrivateAccessFromServer({
+        tableName: tableName,
+        recordId: recordId,
+        userUuid: userUuid
+      })
         .then(response => {
           if (response.getRecordid()) {
             const recordLocked = {
@@ -906,7 +957,11 @@ const data = {
     unlockRecord({ commit, rootGetters, state }, parameters) {
       const { tableName, recordId } = parameters
       const userUuid = rootGetters['user/getUserUuid']
-      return unlockPrivateAccessFromServer({ tableName: tableName, recordId: recordId, userUuid: userUuid })
+      return unlockPrivateAccessFromServer({
+        tableName: tableName,
+        recordId: recordId,
+        userUuid: userUuid
+      })
         .then(response => {
           if (response.getRecordid()) {
             const recordUnlocked = {
@@ -934,7 +989,9 @@ const data = {
         })
     },
     requestPrintFormats({ commit }, parameters) {
-      return requestPrintFormats({ processUuid: parameters.processUuid })
+      return requestPrintFormats({
+        processUuid: parameters.processUuid
+      })
         .then(response => {
           const printFormatList = response.getPrintformatsList().map(printFormat => {
             return {
@@ -973,6 +1030,7 @@ const data = {
         selection: [],
         pageNumber: 1,
         nextPageToken: undefined,
+        originalNextPageToken: undefined,
         isLoadedContext: false,
         isLoaded: false // Boolean(false || getters.getInGetting(containerUuid))
       }
@@ -983,9 +1041,12 @@ const data = {
     getDataRecordCount: (state, getters) => (containerUuid) => {
       return getters.getDataRecordAndSelection(containerUuid).recordCount
     },
-    getPageNextToken: (state, getters) => (containerUuid) => {
+    getNextPageToken: (state, getters) => (containerUuid) => {
       return getters.getDataRecordAndSelection(containerUuid).nextPageToken
     },
+    getOriginalNextPageToken: (state, getters) => (containerUuid) => {
+      return getters.getDataRecordAndSelection(containerUuid).originalNextPageToken
+    },
     getDataRecordSelection: (state, getters) => (containerUuid) => {
       return getters.getDataRecordAndSelection(containerUuid).selection
     },
diff --git a/src/store/modules/ADempiere/panel.js b/src/store/modules/ADempiere/panel.js
index c00cf683..37e8b081 100644
--- a/src/store/modules/ADempiere/panel.js
+++ b/src/store/modules/ADempiere/panel.js
@@ -58,10 +58,11 @@ const panel = {
     }
   },
   actions: {
-    addPanel({ commit, dispatch }, params) {
-      var keyColumn = ''
-      var selectionColumn = []
-      var count = 0
+    addPanel({ commit, dispatch, getters }, params) {
+      let keyColumn = ''
+      let selectionColumn = []
+      let identifierColumns = []
+      let count = 0
       params.fieldList.forEach(itemField => {
         if (itemField.isKey) {
           keyColumn = itemField.columnName
@@ -69,6 +70,13 @@ const panel = {
         if (itemField.isSelectionColumn) {
           selectionColumn.push(itemField.columnName)
         }
+        if (itemField.isIdentifier) {
+          identifierColumns.push({
+            columnName: itemField.columnName,
+            identifierSequence: itemField.identifierSequence,
+            componentPath: itemField.componentPath
+          })
+        }
 
         if (params.panelType === 'table' || params.isAdvancedQuery) {
           itemField.isShowedFromUser = false
@@ -89,7 +97,19 @@ const panel = {
       })
 
       params.keyColumn = keyColumn
+      if (params.isSortTab) {
+        const panelParent = getters.getPanel(params.tabAssociatedUuid)
+        selectionColumn = selectionColumn.concat(panelParent.selectionColumn)
+        identifierColumns = identifierColumns.concat(panelParent.identifierColumns)
+        params.fieldLinkColumnName = panelParent.fieldLinkColumnName
+        params.keyColumn = panelParent.keyColumn
+      }
       params.selectionColumn = selectionColumn
+      params.identifierColumns = identifierColumns
+        .sort((itemA, itemB) => {
+          return itemA.identifierSequence - itemB.identifierSequence
+        })
+
       params.recordUuid = null
       params.fieldList = assignedGroup(params.fieldList)
 
@@ -683,7 +703,7 @@ const panel = {
       commit('changeFieldValue', newField)
     },
     getPanelAndFields({ dispatch }, parameters) {
-      if (parameters.type === 'process' || parameters.type === 'report') {
+      if (parameters.panelType === 'process' || parameters.panelType === 'report') {
         return dispatch('getProcessFromServer', parameters)
           .then(response => {
             return response
@@ -691,11 +711,11 @@ const panel = {
           .catch(error => {
             return {
               ...error,
-              moreInfo: `Dictionary getPanelAndFields ${parameters.type} (State Panel)`,
+              moreInfo: `Dictionary getPanelAndFields ${parameters.panelType} (State Panel)`,
               parameters: parameters
             }
           })
-      } else if (parameters.type === 'browser') {
+      } else if (parameters.panelType === 'browser') {
         return dispatch('getBrowserFromServer', parameters)
           .then(response => {
             return response
@@ -707,12 +727,12 @@ const panel = {
               parameters: parameters
             }
           })
-      } else if (parameters.type === 'window' || parameters.type === 'table') {
+      } else if (parameters.panelType === 'window' || parameters.panelType === 'table') {
         return dispatch('getTabAndFieldFromServer', {
           parentUuid: parameters.parentUuid,
           containerUuid: parameters.containerUuid,
           isAdvancedQuery: parameters.isAdvancedQuery,
-          panelType: parameters.type
+          panelType: parameters.panelType
         }).then(response => {
           return response
         }).catch(error => {
diff --git a/src/store/modules/ADempiere/processControl.js b/src/store/modules/ADempiere/processControl.js
index bb054bf7..ff3b0303 100644
--- a/src/store/modules/ADempiere/processControl.js
+++ b/src/store/modules/ADempiere/processControl.js
@@ -418,15 +418,31 @@ const processControl = {
      *
      * @param {object} params
      */
-    setShowDialog({ commit }, params) {
-      if (params.type === 'process' || params.type === 'report' || params.type === 'window') {
-        if (params.action) {
-          commit('setMetadata', params.action)
+    setShowDialog({ state, commit, dispatch, rootGetters }, params) {
+      const panels = ['process', 'report', 'window']
+      if (params.action && (panels.includes(params.type) || panels.includes(params.action.panelType))) {
+        if (params.action.containerUuid === state.metadata.containerUuid) {
           commit('setShowDialog', true)
-        } else {
-          commit('setShowDialog', false)
+          return
         }
+        const panel = rootGetters.getPanel(params.action.containerUuid)
+        if (!panel) {
+          dispatch('getPanelAndFields', {
+            parentUuid: params.action.parentUuid,
+            containerUuid: params.action.containerUuid,
+            panelType: params.action.panelType
+          })
+            .then(response => {
+              commit('setMetadata', response)
+              commit('setShowDialog', true)
+            })
+        } else {
+          commit('setMetadata', panel)
+          commit('setShowDialog', true)
+        }
+        return
       }
+      commit('setShowDialog', false)
     },
     finishProcess({ commit }, parameters) {
       var processMessage = {
diff --git a/src/store/modules/ADempiere/window.js b/src/store/modules/ADempiere/window.js
index 2949234c..5559ff90 100644
--- a/src/store/modules/ADempiere/window.js
+++ b/src/store/modules/ADempiere/window.js
@@ -46,7 +46,30 @@ const window = {
           const childrenTabs = []
           const parentTabs = []
 
-          const tabs = responseWindow.tabsList.map((tabItem, index) => {
+          const tabsSequence = []
+          // TODO Add source tab on the server for tabs Translation and Sort
+          const tabs = responseWindow.tabsList.filter(itemTab => {
+            if (itemTab.isSortTab) {
+              // TODO: Add convert tab as process function
+              tabsSequence.push({
+                uuid: itemTab.uuid,
+                id: itemTab.id,
+                parentUuid: windowUuid,
+                containerUuid: itemTab.uuid,
+                parentTabUuid: itemTab.parentTabUuid,
+                panelType: 'window',
+                type: 'sequence',
+                isSortTab: itemTab.isSortTab,
+                name: itemTab.name,
+                description: itemTab.description,
+                tableName: itemTab.tableName,
+                sortOrderColumnName: itemTab.sortOrderColumnName, // order column
+                sortYesNoColumnName: itemTab.sortYesNoColumnName // included column
+              })
+            }
+            // TODO: Add support to isAdvancedTab, isTranslationTab and isHasTree
+            return !itemTab.isTranslationTab
+          }).map((tabItem, index, list) => {
             // let tab = tabItem
             const tab = {
               ...tabItem,
@@ -58,6 +81,7 @@ const window = {
               // relations
               isParentTab: Boolean(firstTab === tabItem.tableName),
               // app properties
+              isAssociatedTabSequence: false, // show modal with order tab
               isShowedRecordNavigation: !(tabItem.isSingleRow),
               isLoadFieldList: false,
               index: index
@@ -110,6 +134,32 @@ const window = {
               recordId: null
             })
 
+            if (tab.isSortTab) {
+              const tabParent = list.find(itemTab => itemTab.tableName === tab.tableName && !itemTab.isSortTab)
+              if (tabParent) {
+                tab.tabAssociatedUuid = tabParent.uuid // tab source uuid
+                tab.tabAssociatedName = tabParent.name // tab source name
+              }
+            } else {
+              // add tabs sequence associated as process in tab source
+              let orderTabs = tabsSequence.filter(itemTab => itemTab.tableName === tab.tableName)
+              if (orderTabs.length) {
+                orderTabs = orderTabs.map(itemTab => {
+                  return {
+                    ...itemTab,
+                    // appication attributes
+                    tabAssociatedUuid: tab.uuid, // tab source
+                    tabAssociatedName: tab.name, // tab source
+                    action: 'orderSequence',
+                    type: 'application'
+                  }
+                })
+                actions = actions.concat(orderTabs)
+                tab.isAssociatedTabSequence = true
+                tab.tabsOrder = orderTabs
+              }
+            }
+
             // get processess associated in tab
             if (tabItem.processesList && tabItem.processesList.length) {
               const processList = tabItem.processesList.map(processItem => {
@@ -138,17 +188,12 @@ const window = {
               references: []
             })
 
-            // TODO: Add support to isSortTab and isTranslationTab
-            if (!(tab.isSortTab || tab.isTranslationTab)) {
-              if (tab.isParentTab) {
-                parentTabs.push(tab)
-              } else {
-                childrenTabs.push(tab)
-              }
+            if (tab.isParentTab) {
+              parentTabs.push(tab)
+            } else {
+              childrenTabs.push(tab)
             }
             return tab
-          }).filter(itemTab => {
-            return !(itemTab.isSortTab || itemTab.isTranslationTab)
           })
 
           const tabProperties = {
@@ -272,35 +317,51 @@ const window = {
           console.warn(`Dictionary Tab (State Window) - Error ${error.code}: ${error.message}`)
         })
     },
-    changeShowedDetailWindow: ({ commit, state }, params) => {
+    changeShowedDetailWindow({ commit, state }, {
+      containerUuid,
+      isShowedDetail = true
+    }) {
       const window = state.window.find(itemWindow => {
-        return itemWindow.uuid === params.containerUuid
+        return itemWindow.uuid === containerUuid
       })
       commit('changeShowedDetailWindow', {
         window: window,
-        changeShowedDetail: params.isShowedDetail
+        changeShowedDetail: isShowedDetail
       })
     },
-    changeShowedRecordWindow: ({ commit, state }, params) => {
+    changeShowedRecordWindow({ commit, state }, {
+      parentUuid,
+      isShowedRecordNavigation = true
+    }) {
       const window = state.window.find(itemWindow => {
-        return itemWindow.uuid === params.parentUuid
+        return itemWindow.uuid === parentUuid
       })
       commit('changeShowedRecordWindow', {
         window: window,
-        isShowedRecordNavigation: params.isShowedRecordNavigation
+        isShowedRecordNavigation: isShowedRecordNavigation
       })
     },
     /**
-     * @param {string} parameters.parentUuid
-     * @param {string} parameters.containerUuid
+     * @param {string} parentUuid
+     * @param {string} containerUuid
      */
-    setCurrentTab: ({ commit, getters }, parameters) => {
+    setCurrentTab({ commit, getters }, {
+      parentUuid,
+      containerUuid
+    }) {
       commit('setCurrentTab', {
-        window: getters.getWindow(parameters.parentUuid),
-        tabUuid: parameters.containerUuid
+        window: getters.getWindow(parentUuid),
+        tabUuid: containerUuid
       })
     },
-    setTabIsLoadField: ({ commit, getters }, { parentUuid, containerUuid }) => {
+    /**
+     * Indicate if fields is load in tab (containerUuid)
+     * @param {string} parentUuid
+     * @param {string} containerUuid
+     */
+    setTabIsLoadField({ commit, getters }, {
+      parentUuid, containerUuid
+    }) {
       const tab = getters.getTab(parentUuid, containerUuid)
       commit('setTabIsLoadField', {
         tab: tab,
@@ -314,9 +375,6 @@ const window = {
         item => item.uuid === windowUuid
       )
     },
-    getIndexWindow: (state) => {
-      return state.windowIndex
-    },
     getIsShowedRecordNavigation: (state, getters) => (windowUuid) => {
       const window = getters.getWindow(windowUuid)
       if (window) {
diff --git a/src/store/modules/ADempiere/windowControl.js b/src/store/modules/ADempiere/windowControl.js
index 5359413f..8381320a 100644
--- a/src/store/modules/ADempiere/windowControl.js
+++ b/src/store/modules/ADempiere/windowControl.js
@@ -13,7 +13,10 @@ const windowControl = {
       fullPath: '',
       query: {}
     },
-    dataLog: {} // { containerUuid, recordId, tableName, eventType }
+    dataLog: {}, // { containerUuid, recordId, tableName, eventType }
+    tabSequenceRecord: [],
+    totalResponse: 0,
+    totalRequest: 0
   },
   mutations: {
     addInCreate(state, payload) {
@@ -42,6 +45,15 @@ const windowControl = {
     },
     setWindowOldRoute(state, payload) {
       state.windowOldRoute = payload
+    },
+    setTabSequenceRecord(state, payload) {
+      state.tabSequenceRecord = payload
+    },
+    setTotalResponse(state, payload) {
+      state.totalResponse = payload
+    },
+    setTotalRequest(state, payload) {
+      state.totalRequest = payload
     }
   },
   actions: {
@@ -526,20 +538,15 @@ const windowControl = {
      */
     getDataListTab({ dispatch, rootGetters }, parameters) {
       const {
-        parentUuid,
-        containerUuid,
-        recordUuid,
-        isRefreshPanel = false,
-        isLoadAllRecords = false,
-        isReference = false,
-        referenceWhereClause = '',
-        columnName,
-        value,
-        criteria
+        parentUuid, containerUuid, recordUuid,
+        referenceWhereClause = '', columnName, value, criteria,
+        isRefreshPanel = false, isLoadAllRecords = false, isReference = false,
+        isShowNotification = true
       } = parameters
+      let { isAddRecord = false } = parameters
       const tab = rootGetters.getTab(parentUuid, containerUuid)
 
-      var parsedQuery = tab.query
+      let parsedQuery = tab.query
       if (!isEmptyValue(parsedQuery) && parsedQuery.includes('@')) {
         parsedQuery = parseContext({
           parentUuid: parentUuid,
@@ -548,7 +555,7 @@ const windowControl = {
         }, true)
       }
 
-      var parsedWhereClause = tab.whereClause
+      let parsedWhereClause = tab.whereClause
       if (!isEmptyValue(parsedWhereClause) && parsedWhereClause.includes('@')) {
         parsedWhereClause = parseContext({
           parentUuid: parentUuid,
@@ -573,7 +580,7 @@ const windowControl = {
         }
       }
 
-      var conditions = []
+      const conditions = []
       if (tab.isParentTab && !isEmptyValue(tab.tableName) && !isEmptyValue(value)) {
         conditions.push({
           columnName: columnName,
@@ -589,7 +596,9 @@ const windowControl = {
         orderByClause: tab.orderByClause,
         // TODO: evaluate if overwrite values to conditions
         conditions: isLoadAllRecords ? [] : conditions,
-        isParentTab: tab.isParentTab
+        isParentTab: tab.isParentTab,
+        isAddRecord: isAddRecord,
+        isShowNotification: isShowNotification
       })
         .then(response => {
           if (isRefreshPanel && !isEmptyValue(recordUuid) && recordUuid !== 'create-new') {
@@ -615,6 +624,53 @@ const windowControl = {
         .catch(error => {
           return error
         })
+        .finally(() => {
+          const currentData = rootGetters.getDataRecordAndSelection(containerUuid)
+          const { originalNextPageToken, pageNumber, recordCount } = currentData
+          let nextPage = pageNumber
+          const isAdd = isAddRecord
+          if (originalNextPageToken && isAddRecord) {
+            const pageInToken = originalNextPageToken.substring(originalNextPageToken.length - 2)
+            if (pageInToken === '-1') {
+              isAddRecord = false
+            }
+            if (pageNumber === 1 && recordCount > 50) {
+              nextPage = nextPage + 1
+              isAddRecord = true
+            }
+          } else {
+            isAddRecord = false
+          }
+          if (recordCount <= 50) {
+            isAddRecord = false
+          }
+
+          if (isAddRecord) {
+            dispatch('setPageNumber', {
+              parentUuid: parentUuid,
+              containerUuid: containerUuid,
+              pageNumber: nextPage,
+              panelType: 'window',
+              isAddRecord: isAddRecord,
+              isShowNotification: false
+            })
+          }
+          if (isAdd && isAdd !== isAddRecord) {
+            if (tab.isSortTab) {
+              const record = rootGetters.getDataRecordsList(containerUuid)
+              const recordToTab = record
+                .map(itemRecord => {
+                  return {
+                    ...itemRecord
+                  }
+                })
+                .sort((itemA, itemB) => {
+                  return itemA[tab.sortOrderColumnName] - itemB[tab.sortOrderColumnName]
+                })
+              dispatch('setTabSequenceRecord', recordToTab)
+            }
+          }
+        })
     },
     /**
      * Get references asociate to record
@@ -670,6 +726,86 @@ const windowControl = {
     },
     setWindowOldRoute({ commit }, oldPath = { path: '', fullPath: '', query: {}}) {
       commit('setWindowOldRoute', oldPath)
+    },
+    setTabSequenceRecord({ commit }, record) {
+      commit('setTabSequenceRecord', record)
+    },
+    /**
+     * Update records in tab sort
+     * @param {string} containerUuid
+     * @param {string} parentUuid
+     */
+    updateSequence({ state, commit, dispatch, getters, rootGetters }, {
+      parentUuid,
+      containerUuid
+    }) {
+      const { tableName, sortOrderColumnName, sortYesNoColumnName, tabAssociatedUuid } = rootGetters.getTab(parentUuid, containerUuid)
+      const listSequenceToSet = getters.getTabSequenceRecord
+      const recordData = rootGetters.getDataRecordsList(containerUuid)
+
+      // scrolls through the logs and checks if there is a change to be sent to server
+      recordData.forEach(itemData => {
+        const dataSequence = listSequenceToSet.find(item => item.UUID === itemData.UUID)
+        if (itemData[sortOrderColumnName] === dataSequence[sortOrderColumnName]) {
+          return
+        }
+        const valuesToSend = [{
+          columnName: sortOrderColumnName,
+          value: dataSequence[sortOrderColumnName]
+        }]
+
+        if (itemData[sortYesNoColumnName] !== dataSequence[sortYesNoColumnName]) {
+          valuesToSend.push({
+            columnName: sortYesNoColumnName,
+            value: dataSequence[sortYesNoColumnName]
+          })
+        }
+
+        const countRequest = state.totalRequest + 1
+        commit('setTotalRequest', countRequest)
+
+        updateEntity({
+          tableName: tableName,
+          recordUuid: itemData.UUID,
+          attributesList: valuesToSend
+        })
+          .catch(error => {
+            showMessage({
+              message: error.message,
+              type: 'error'
+            })
+            console.warn(`Update Entity Table Error ${error.code}: ${error.message}`)
+          })
+          .finally(() => {
+            const countResponse = state.totalResponse + 1
+            commit('setTotalResponse', countResponse)
+            if (state.totalResponse === state.totalRequest) {
+              showMessage({
+                message: language.t('notifications.updateSuccessfully'),
+                type: 'success'
+              })
+              dispatch('setShowDialog', {
+                type: 'window',
+                action: undefined
+              })
+              commit('setTotalRequest', 0)
+              commit('setTotalResponse', 0)
+
+              dispatch('setRecordSelection', {
+                parentUuid: parentUuid,
+                containerUuid: containerUuid,
+                isLoaded: false
+              })
+              dispatch('setTabSequenceRecord', [])
+
+              // refresh record list in table source
+              dispatch('getDataListTab', {
+                parentUuid: parentUuid,
+                containerUuid: tabAssociatedUuid
+              })
+            }
+          })
+      })
     }
   },
   getters: {
@@ -688,6 +824,9 @@ const windowControl = {
         return state.windowRoute
       }
     },
+    getTabSequenceRecord: (state) => {
+      return state.tabSequenceRecord
+    },
     getDataLog: (state) => (containerUuid, recordUuid) => {
       const current = state.dataLog
       if (current.containerUuid === containerUuid &&
diff --git a/src/utils/ADempiere/dictionaryUtils.js b/src/utils/ADempiere/dictionaryUtils.js
index 6d897d36..aee01ce2 100644
--- a/src/utils/ADempiere/dictionaryUtils.js
+++ b/src/utils/ADempiere/dictionaryUtils.js
@@ -455,39 +455,39 @@ export function convertAction(action) {
 
   switch (action) {
     case 'B':
-      actionAttributes.name = 'workbech'
+      actionAttributes.name = 'Workbech'
       actionAttributes.icon = 'peoples'
       break
     case 'F':
-      actionAttributes.name = 'workflow'
+      actionAttributes.name = 'Workflow'
       actionAttributes.icon = 'example'
       break
     case 'P':
-      actionAttributes.name = 'process'
+      actionAttributes.name = 'Process'
       actionAttributes.icon = 'component'
       actionAttributes.component = () => import('@/views/ADempiere/Process')
       break
     case 'R':
-      actionAttributes.name = 'report'
+      actionAttributes.name = 'Report'
       actionAttributes.icon = 'skill'
       actionAttributes.component = () => import('@/views/ADempiere/Process')
       break
     case 'S':
-      actionAttributes.name = 'browser'
+      actionAttributes.name = 'Browser'
       actionAttributes.icon = 'search'
       actionAttributes.component = () => import('@/views/ADempiere/Browser')
       break
     case 'T':
-      actionAttributes.name = 'task'
+      actionAttributes.name = 'Task'
       actionAttributes.icon = 'size'
       break
     case 'W':
-      actionAttributes.name = 'window'
+      actionAttributes.name = 'Window'
       actionAttributes.icon = 'tab'
       actionAttributes.component = () => import('@/views/ADempiere/Window')
       break
     case 'X':
-      actionAttributes.name = 'form'
+      actionAttributes.name = 'Form'
       actionAttributes.icon = 'form'
       break
     default:
diff --git a/src/views/ADempiere/Browser/index.vue b/src/views/ADempiere/Browser/index.vue
index d9d135a3..ab52e157 100644
--- a/src/views/ADempiere/Browser/index.vue
+++ b/src/views/ADempiere/Browser/index.vue
@@ -153,7 +153,7 @@ export default {
       } else {
         this.$store.dispatch('getPanelAndFields', {
           containerUuid: this.browserUuid,
-          type: this.panelType,
+          panelType: this.panelType,
           routeToDelete: this.$route
         })
           .then(() => {
diff --git a/src/views/ADempiere/Process/index.vue b/src/views/ADempiere/Process/index.vue
index 17331d3d..a8f7271d 100644
--- a/src/views/ADempiere/Process/index.vue
+++ b/src/views/ADempiere/Process/index.vue
@@ -94,7 +94,7 @@ export default {
       } else {
         this.$store.dispatch('getPanelAndFields', {
           containerUuid: this.processUuid,
-          type: this.panelType,
+          panelType: this.panelType,
           routeToDelete: this.$route
         }).then(() => {
           this.processMetadata = this.getterProcess
diff --git a/src/views/ADempiere/Window/index.vue b/src/views/ADempiere/Window/index.vue
index 73025333..8c3d914f 100644
--- a/src/views/ADempiere/Window/index.vue
+++ b/src/views/ADempiere/Window/index.vue
@@ -66,7 +66,6 @@
                       :container-uuid="windowMetadata.currentTabUuid"
                       :panel-type="panelType"
                       :is-insert-record="getterIsInsertRecord"
-                      :modal-metadata="windowMetadata"
                     />
                   </el-header>
                   <!-- das -->
@@ -87,7 +86,7 @@
                             (isMobile && !isShowedRecordNavigation || !isMobile)"
                           v-show="!isShowedTabChildren"
                           icon="el-icon-caret-top"
-                          :class="classIsMObile"
+                          :class="classIsMobile"
                           circle
                           @click="handleChangeShowedTabChildren()"
                         />
@@ -129,7 +128,6 @@
                       :window-uuid="windowUuid"
                       :tabs-list="windowMetadata.tabsListChildren"
                       :first-tab-uuid="windowMetadata.firstTabUuid"
-                      :first-index="String(windowMetadata.tabsListChildren[0].index)"
                       :style="{ 'height': getHeightPanelBottom + 'vh' }"
                     />
                   </el-header>
@@ -214,7 +212,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     // convert ternary operator into computed property
-    classIsMObile() {
+    classIsMobile() {
       if (this.isMobile) {
         return 'open-table-detail-mobile'
       } else {