improves: Optimize the times data is consulted in the vuex store (#426)

* improves: Optimize the times data is consulted in the vuex store

* Improves to get store tab.

src/components/ADempiere/ContextMenu/contextMenuMixin.js

@@ -27,6 +27,10 @@ export const contextMixin = {
       type: String,
       default: undefined
     },
+    tableName: {
+      type: String,
+      default: undefined
+    },
     isReport: {
       type: Boolean,
       default: false
@@ -281,6 +285,7 @@ export const contextMixin = {
           this.$store.dispatch('getReferencesListFromServer', {
             parentUuid: this.parentUuid,
             containerUuid: this.containerUuid,
+            tableName: this.tableName,
             recordUuid: this.recordUuid
           })
             .then(() => {

src/components/ADempiere/ContextMenu/index.vue

@@ -5,6 +5,7 @@
     :parent-uuid="parentUuid"
     :container-uuid="containerUuid"
     :panel-type="panelType"
+    :table-name="tableName"
     :is-report="isReport"
     :last-parameter="lastParameter"
     :report-format="reportFormat"
@@ -34,6 +35,10 @@ export default {
       type: String,
       default: undefined
     },
+    tableName: {
+      type: String,
+      default: undefined
+    },
     isReport: {
       type: Boolean,
       default: false

src/components/ADempiere/Field/index.vue

@@ -39,12 +39,12 @@
           :field="fieldAttributes"
         />
         <translated
-          v-if="field.isTranslated && !isAdvancedQuery"
+          v-if="field.isTranslatedField"
           :field-attributes="fieldAttributes"
           :record-uuid="field.recordUuid"
         />
         <calculator
-          v-if="!isAdvancedQuery && isNumeric && !field.isReadOnlyFromLogic"
+          v-if="field.isNumericField && !field.isReadOnlyFromLogic"
           :field-attributes="fieldAttributes"
           :field-value="field.value"
         />
@@ -170,10 +170,10 @@ export default {
         if (this.field.isAlwaysUpdateable) {
           return false
         }
-        if (this.getterContextProcessing) {
+        if (this.field.isProcessingContext) {
           return true
         }
-        if (this.getterContextProcessed) {
+        if (this.field.isProcessedContext) {
           return true
         }
 
@@ -216,12 +216,6 @@ export default {
       }
       return ''
     },
-    getterIsShowedRecordNavigation() {
-      if (this.field.panelType === 'window') {
-        return this.$store.getters.getIsShowedRecordNavigation(this.field.parentUuid)
-      }
-      return false
-    },
     sizeFieldResponsive() {
       if (!this.isDisplayed) {
         return DEFAULT_SIZE
@@ -254,7 +248,7 @@ export default {
           return sizeField
         }
         // two columns if is mobile or desktop and show record navigation
-        if (this.getWidth <= 768 || (this.getWidth >= 768 && this.getterIsShowedRecordNavigation)) {
+        if (this.getWidth <= 768 || (this.getWidth >= 768 && this.field.isShowedRecordNavigation)) {
           newSizes.xs = 12
           newSizes.sm = 12
           newSizes.md = 12
@@ -282,25 +276,11 @@ export default {
       }
       return sizeField
     },
-    getterContextProcessing() {
-      const processing = this.$store.getters.getContextProcessing(this.field.parentUuid)
-      if (processing === true || processing === 'Y') {
-        return true
-      }
-      return false
-    },
-    getterContextProcessed() {
-      const processed = this.$store.getters.getContextProcessed(this.field.parentUuid)
-      if (processed === true || processed === 'Y') {
-        return true
-      }
-      return false
-    },
     processOrderUuid() {
       return this.$store.getters.getOrders
     },
     isDocuemntStatus() {
-      if (this.field.panelType === 'window') {
+      if (this.field.panelType === 'window' && !this.isAdvancedQuery) {
         if (this.field.columnName === 'DocStatus' && !this.isEmptyValue(this.processOrderUuid)) {
           return true
         }
@@ -312,9 +292,6 @@ export default {
         return (this.field.contextInfo && this.field.contextInfo.isActive) || this.field.reference.windowsList.length
       }
       return false
-    },
-    isNumeric() {
-      return this.field.componentPath === 'FieldNumber'
     }
   },
   watch: {

src/components/ADempiere/Panel/index.vue

@@ -38,11 +38,14 @@
                     :key="subKey"
                     :metadata-field="{
                       ...fieldAttributes,
+                      isShowedRecordNavigation,
+                      isProcessingContext: getterContextProcessing,
+                      isProcessedContext: getterContextProcessed,
                       optionCRUD,
                       recordUuid: uuidRecord
                     }"
                     :record-data-fields="isAdvancedQuery ? undefined : dataRecords[fieldAttributes.columnName]"
-                    :in-group="!getterIsShowedRecordNavigation"
+                    :in-group="!isShowedRecordNavigation"
                     :is-advanced-query="isAdvancedQuery"
                   />
                 </template>
@@ -94,6 +97,9 @@
                           :key="subKey"
                           :metadata-field="{
                             ...fieldAttributes,
+                            isShowedRecordNavigation,
+                            isProcessingContext: getterContextProcessing,
+                            isProcessedContext: getterContextProcessed,
                             optionCRUD,
                             recordUuid: uuidRecord
                           }"
@@ -144,6 +150,9 @@
                           :key="subKey"
                           :metadata-field="{
                             ...fieldAttributes,
+                            isShowedRecordNavigation,
+                            isProcessingContext: getterContextProcessing,
+                            isProcessedContext: getterContextProcessed,
                             optionCRUD,
                             recordUuid: uuidRecord
                           }"
@@ -213,6 +222,10 @@ export default {
     isAdvancedQuery: {
       type: Boolean,
       default: false
+    },
+    isShowedRecordNavigation: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -244,9 +257,21 @@ export default {
     isPanelWindow() {
       return this.panelType === 'window'
     },
-    getterIsShowedRecordNavigation() {
+    getterContextProcessing() {
-      if (this.isPanelWindow) {
+      if (this.panelType === 'window' && !this.isAdvancedQuery) {
-        return this.$store.getters.getIsShowedRecordNavigation(this.parentUuid)
+        const processing = this.$store.getters.getContextProcessing(this.parentUuid)
+        if (processing === true || processing === 'Y') {
+          return true
+        }
+      }
+      return false
+    },
+    getterContextProcessed() {
+      if (this.panelType === 'window' && !this.isAdvancedQuery) {
+        const processed = this.$store.getters.getContextProcessed(this.parentUuid)
+        if (processed === true || processed === 'Y') {
+          return true
+        }
       }
       return false
     },
@@ -276,7 +301,7 @@ export default {
       return this.getterDataStore.isLoaded
     },
     classCards() {
-      if (this.isMobile || this.fieldGroups.length < 2 || this.getterIsShowedRecordNavigation) {
+      if (this.isMobile || this.fieldGroups.length < 2 || this.isShowedRecordNavigation) {
         return 'cards-not-group'
       }
       return 'cards-in-group'
@@ -320,6 +345,7 @@ export default {
           parentUuid: this.parentUuid,
           containerUuid: this.containerUuid,
           panelType: this.panelType,
+          panelMetadata: this.metadata,
           isAdvancedQuery: this.isAdvancedQuery
         }).then(() => {
           this.generatePanel(this.getterFieldList)

src/components/ADempiere/Tab/index.vue

@@ -17,6 +17,7 @@
           :metadata="tabAttributes"
           :group-tab="tabAttributes.tabGroup"
           :panel-type="panelType"
+          :is-showed-record-navigation="windowMetadata.isShowedRecordNavigation"
         />
       </el-tab-pane>
     </template>
@@ -34,15 +35,9 @@ export default {
   },
   mixins: [tabMixin],
   computed: {
-    getWindow() {
-      return this.$store.getters.getWindow(this.windowUuid)
-    },
-    // if tabs children is showed or closed
-    isShowedTabsChildren() {
-      return this.getWindow.isShowedTabsChildren
-    },
     tabParentStyle() {
-      if (this.isShowedTabsChildren) {
+      // if tabs children is showed or closed
+      if (this.windowMetadata.isShowedTabsChildren) {
         return {
           height: '100%',
           overflow: 'hidden'

src/components/ADempiere/Tab/tabMixin.js

@@ -6,6 +6,10 @@ export const tabMixin = {
       type: String,
       default: ''
     },
+    windowMetadata: {
+      type: Object,
+      default: () => {}
+    },
     tabsList: {
       type: Array,
       default: () => []
@@ -39,7 +43,8 @@ export const tabMixin = {
     setCurrentTab() {
       this.$store.dispatch('setCurrentTab', {
         parentUuid: this.windowUuid,
-        containerUuid: this.tabUuid
+        containerUuid: this.tabUuid,
+        window: this.windowMetadata
       })
       this.$route.meta.tabUuid = this.tabUuid
     },
@@ -53,7 +58,7 @@ export const tabMixin = {
       }
     },
     handleBeforeLeave(activeName) {
-      const metadataTab = this.tabsList.find(tab => tab.index === parseInt(activeName), 10)
+      const metadataTab = this.tabsList.find(tab => tab.index === parseInt(activeName, 10))
       if (!this.isEmptyValue(metadataTab.whereClause) && metadataTab.whereClause.includes('@')) {
         metadataTab.whereClause = parseContext({
           parentUuid: metadataTab.parentUuid,

src/store/modules/ADempiere/panel.js

@@ -898,6 +898,7 @@ const panel = {
       parentUuid,
       containerUuid,
       panelType,
+      panelMetadata,
       routeToDelete,
       isAdvancedQuery = false
     }) {
@@ -921,6 +922,7 @@ const panel = {
         parentUuid,
         containerUuid,
         panelType,
+        panelMetadata,
         isAdvancedQuery,
         routeToDelete
       })

src/store/modules/ADempiere/window.js

@@ -23,14 +23,23 @@ const window = {
     dictionaryResetCacheWindow(state) {
       state = initStateWindow
     },
-    changeWindow(state, payload) {
-      payload.window = payload.newWindow
-    },
     setCurrentTab(state, payload) {
-      payload.window.currentTabUuid = payload.tabUuid
+      payload.window.currentTab = payload.tab
+      payload.window.currentTabUuid = payload.tab.uuid
     },
-    setTabIsLoadField(state, payload) {
+    changeWindowAttribute(state, payload) {
-      payload.tab.isLoadFieldList = payload.isLoadFieldList
+      let value = payload.attributeValue
+      if (payload.attributeNameControl) {
+        value = payload.window[payload.attributeNameControl]
+      }
+      payload.window[payload.attributeName] = value
+    },
+    changeTabAttribute(state, payload) {
+      let value = payload.attributeValue
+      if (payload.attributeNameControl) {
+        value = payload.tab[payload.attributeNameControl]
+      }
+      payload.tab[payload.attributeName] = value
     }
   },
   actions: {
@@ -40,10 +49,10 @@ const window = {
     }) {
       return getWindowMetadata(windowUuid)
         .then(responseWindow => {
-          const firstTab = responseWindow.tabsList[0].tableName
+          const firstTabTableName = responseWindow.tabsList[0].tableName
           const firstTabUuid = responseWindow.tabsList[0].uuid
-          const childrenTabs = []
+          const tabsListParent = []
-          const parentTabs = []
+          const tabsListChildren = []
 
           const tabsSequence = []
           // TODO Add source tab on the server for tabs Translation and Sort
@@ -78,11 +87,11 @@ const window = {
               tabGroup: tabItem.fieldGroup,
               firstTabUuid,
               // relations
-              isParentTab: Boolean(firstTab === tabItem.tableName),
+              isParentTab: Boolean(firstTabTableName === tabItem.tableName),
               // app properties
               isAssociatedTabSequence: false, // show modal with order tab
               isShowedRecordNavigation: !(tabItem.isSingleRow),
-              isLoadFieldList: false,
+              isLoadFieldsList: false,
               index
             }
             delete tab.processesList
@@ -95,7 +104,7 @@ const window = {
               processName: language.t('window.newRecord'),
               type: 'dataAction',
               action: 'resetPanelToNew',
-              uuidParent: responseWindow,
+              uuidParent: windowUuid,
               disabled: !tab.isInsertRecord || tab.isReadOnly
             }, {
               // action to delete record selected
@@ -103,7 +112,7 @@ const window = {
               processName: language.t('window.deleteRecord'),
               type: 'dataAction',
               action: 'deleteEntity',
-              uuidParent: responseWindow,
+              uuidParent: windowUuid,
               disabled: tab.isReadOnly
             }, {
               // action to undo create, update, delete record
@@ -111,7 +120,7 @@ const window = {
               processName: language.t('data.undo'),
               type: 'dataAction',
               action: 'undoModifyData',
-              uuidParent: responseWindow,
+              uuidParent: windowUuid,
               disabled: false
             }, {
               name: language.t('data.lockRecord'),
@@ -164,7 +173,7 @@ const window = {
             if (tabItem.processesList && tabItem.processesList.length) {
               const processList = tabItem.processesList.map(processItem => {
                 // TODO: No list of parameters
-                // // add process associated in vuex store
+                // add process associated in vuex store
                 // dispatch('addProcessAssociated', {
                 //   processToGenerate: processItem,
                 //   containerUuidAssociated: tabItem.uuid
@@ -189,35 +198,32 @@ const window = {
             //  Add process menu
             dispatch('setContextMenu', {
               containerUuid: tab.uuid,
-              actions: actions
+              actions
             })
 
             if (tab.isParentTab) {
-              parentTabs.push(tab)
+              tabsListParent.push(tab)
               return tab
             }
             if (!tab.isSortTab) {
-              childrenTabs.push(tab)
+              tabsListChildren.push(tab)
             }
             return tab
           })
 
-          const tabProperties = {
-            tabsList: tabs,
-            currentTab: parentTabs[0],
-            tabsListParent: parentTabs,
-            tabsListChildren: childrenTabs,
-            // app attributes
-            currentTabUuid: parentTabs[0].uuid
-          }
-
           const newWindow = {
             ...responseWindow,
-            ...tabProperties,
+            tabsList: tabs,
+            currentTab: tabsListParent[0],
+            tabsListParent,
+            tabsListChildren,
+            // app attributes
+            currentTabUuid: tabsListParent[0].uuid,
+            firstTab: tabsListParent[0],
             firstTabUuid,
             windowIndex: state.windowIndex + 1,
             // App properties
-            isShowedTabsChildren: Boolean(childrenTabs.length),
+            isShowedTabsChildren: Boolean(tabsListChildren.length),
             isShowedRecordNavigation: undefined,
             isShowedAdvancedQuery: false
           }
@@ -238,9 +244,11 @@ const window = {
       parentUuid,
       containerUuid,
       panelType = 'window',
+      panelMetadata,
       isAdvancedQuery = false
     }) {
-      return getTabMetadata(containerUuid)
+      return new Promise(resolve => {
+        getTabMetadata(containerUuid)
           .then(tabResponse => {
             const additionalAttributes = {
               parentUuid,
@@ -255,7 +263,7 @@ const window = {
 
             let isWithUuidField = false // indicates it contains the uuid field
             let fieldLinkColumnName
-          //  Convert from gRPC
+            //  Convert and add to app attributes
             const fieldsList = tabResponse.fieldsList.map((fieldItem, index) => {
               fieldItem = generateField({
                 fieldToGenerate: fieldItem,
@@ -276,6 +284,7 @@ const window = {
               return fieldItem
             })
 
+            let isTabsChildren = false
             if (!isAdvancedQuery) {
               //  Get dependent fields
               fieldsList
@@ -291,6 +300,9 @@ const window = {
                     })
                   }
                 })
+
+              const window = getters.getWindow(parentUuid)
+              isTabsChildren = Boolean(window.tabsListChildren.length)
             }
 
             if (!isWithUuidField) {
@@ -304,25 +316,32 @@ const window = {
               fieldsList.push(fieldUuid)
             }
 
-          const window = getters.getWindow(parentUuid)
+            if (isEmptyValue(panelMetadata)) {
+              panelMetadata = getters.getTab(parentUuid, containerUuid)
+            }
             //  Panel for save on store
             const panel = {
-            ...getters.getTab(parentUuid, containerUuid),
+              ...panelMetadata,
               isAdvancedQuery,
-            fieldLinkColumnName: fieldLinkColumnName,
+              fieldLinkColumnName,
               fieldList: fieldsList,
               panelType,
               // app attributes
+              isLoadFieldsList: true,
               isShowedTotals: false,
-            isTabsChildren: Boolean(window.tabsListChildren.length)
+              isTabsChildren // to delete records assiciated
             }
 
             dispatch('addPanel', panel)
-          dispatch('setTabIsLoadField', {
+            resolve(panel)
+
+            dispatch('changeTabAttribute', {
               parentUuid,
-            containerUuid
+              containerUuid,
+              tab: panelMetadata,
+              attributeName: 'isLoadFieldsList',
+              attributeValue: true
             })
-          return panel
           })
           .catch(error => {
             showMessage({
@@ -331,48 +350,61 @@ const window = {
             })
             console.warn(`Dictionary Tab (State Window) - Error ${error.code}: ${error.message}.`)
           })
+      })
+    },
+    setCurrentTab({ commit, getters }, {
+      parentUuid,
+      containerUuid,
+      window,
+      tab
+    }) {
+      if (isEmptyValue(window)) {
+        window = getters.getWindow(parentUuid)
+      }
+      if (isEmptyValue(tab)) {
+        tab = window.tabsList.find(itemTab => itemTab.uuid === containerUuid)
+      }
+
+      commit('setCurrentTab', {
+        window,
+        tab
+      })
     },
     changeWindowAttribute({ commit, getters }, {
       parentUuid,
       window,
       attributeName,
+      attributeNameControl,
       attributeValue
     }) {
       if (isEmptyValue(window)) {
         window = getters.getWindow(parentUuid)
       }
-      const newWindow = window
+
-      newWindow[attributeName] = attributeValue
+      commit('changeWindowAttribute', {
-      commit('changeWindow', {
-        window,
-        newWindow
-      })
-    },
-    /**
-     * @param {string} parentUuid
-     * @param {string} containerUuid
-     */
-    setCurrentTab({ commit, getters }, {
         parentUuid,
-      containerUuid
+        window,
-    }) {
+        attributeName,
-      commit('setCurrentTab', {
+        attributeNameControl,
-        window: getters.getWindow(parentUuid),
+        attributeValue
-        tabUuid: containerUuid
       })
     },
-    /**
+    changeTabAttribute({ commit, getters }, {
-     * Indicate if fields is load in tab (containerUuid)
+      parentUuid,
-     * @param {string} parentUuid
+      containerUuid,
-     * @param {string} containerUuid
+      tab,
-     */
+      attributeName,
-    setTabIsLoadField({ commit, getters }, {
+      attributeNameControl,
-      parentUuid, containerUuid
+      attributeValue
     }) {
-      const tab = getters.getTab(parentUuid, containerUuid)
+      if (isEmptyValue(tab)) {
-      commit('setTabIsLoadField', {
+        tab = getters.getTab(parentUuid, containerUuid)
-        tab: tab,
+      }
-        isLoadFieldList: true
+      commit('changeTabAttribute', {
+        tab,
+        attributeName,
+        attributeValue,
+        attributeNameControl
       })
     }
   },
@@ -409,13 +441,6 @@ const window = {
         isInsertRecord: false
       }
     },
-    getTabIsLoadField: (state, getters) => (windowUuid, tabUuid) => {
-      const tab = getters.getTab(windowUuid, tabUuid)
-      if (tab) {
-        return tab.isLoadFieldList
-      }
-      return tab
-    },
     getTableNameFromTab: (state, getters) => (windowUuid, tabUuid) => {
       return getters.getTab(windowUuid, tabUuid).tableName
     }

src/store/modules/ADempiere/windowControl.js

@@ -497,14 +497,22 @@ const windowControl = {
     },
     /**
      * Delete selection records in table
-     * @param {string} containerUuid
      * @param {string} parentUuid
+     * @param {string} containerUuid
+     * @param {string} tableName
+     * @param {boolean} isParentTab
      */
     deleteSelectionDataList({ dispatch, rootGetters }, {
       parentUuid,
-      containerUuid
+      containerUuid,
+      tableName,
+      isParentTab
     }) {
-      const { tableName, isParentTab } = rootGetters.getTab(parentUuid, containerUuid)
+      if (isEmptyValue(tableName) || isEmptyValue(isParentTab)) {
+        const tab = rootGetters.getTab(parentUuid, containerUuid)
+        tableName = tab.tableName
+        isParentTab = tab.isParentTab
+      }
       const allData = rootGetters.getDataRecordAndSelection(containerUuid)
       let selectionLength = allData.selection.length
 
@@ -663,7 +671,7 @@ const windowControl = {
         })
       }
       return dispatch('getObjectListFromCriteria', {
-        parentUuid: tab.parentUuid,
+        parentUuid,
         containerUuid,
         tableName: tab.tableName,
         query: parsedQuery,
@@ -680,7 +688,7 @@ const windowControl = {
             if (newValues) {
               // update fields with values obtained from the server
               dispatch('notifyPanelChange', {
-                parentUuid: tab.parentUuid,
+                parentUuid,
                 containerUuid,
                 newValues,
                 isSendToServer: false
@@ -688,7 +696,7 @@ const windowControl = {
             } else {
               // this record is missing (Deleted or the query does not include it)
               dispatch('resetPanelToNew', {
-                parentUuid: tab.parentUuid,
+                parentUuid,
                 containerUuid
               })
             }
@@ -748,20 +756,23 @@ const windowControl = {
     },
     /**
      * Get references asociate to record
-     * @param {string} parentUuid
+     * @param {string} parentUuid as windowUuid
      * @param {string} containerUuid
+     * @param {string} tableName
      * @param {string} recordUuid
      */
     getReferencesListFromServer({ commit, rootGetters }, {
-      parentUuid,
+      parentUuid: windowUuid,
       containerUuid,
+      tableName,
       recordUuid
     }) {
-      // TODO: check if you get better performance search only the window and get the current tab
+      if (isEmptyValue(tableName)) {
-      const { tableName } = rootGetters.getTab(parentUuid, containerUuid)
+        tableName = rootGetters.getTab(windowUuid, containerUuid).tableName
+      }
       return new Promise((resolve, reject) => {
         getReferencesList({
-          windowUuid: parentUuid,
+          windowUuid,
           tableName,
           recordUuid
         })
@@ -775,7 +786,7 @@ const windowControl = {
             })
             const references = {
               ...referenceResponse,
-              windowUuid: parentUuid,
+              windowUuid,
               recordUuid,
               referencesList
             }

src/utils/ADempiere/dictionaryUtils.js

@@ -33,7 +33,11 @@ export function generateField({
   let parsedDefaultValue = fieldToGenerate.defaultValue
   let parsedDefaultValueTo = fieldToGenerate.defaultValueTo
   let operator = 'EQUAL'
+  let isNumericField = componentReference.type === 'FieldNumber'
+  let isTranslatedField = fieldToGenerate.isTranslated
   if (moreAttributes.isAdvancedQuery) {
+    isNumericField = false
+    isTranslatedField = false
     parsedDefaultValue = undefined
     parsedDefaultValueTo = undefined
 
@@ -182,7 +186,10 @@ export function generateField({
     // Advanced query
     operator, // current operator
     oldOperator: undefined, // old operator
-    defaultOperator: operator
+    defaultOperator: operator,
+    // popover's
+    isNumericField,
+    isTranslatedField
   }
 
   // Sizes from panel and groups

src/views/ADempiere/Window/index.vue

@@ -5,7 +5,7 @@
   >
     <el-container style="height: 86vh;">
       <Split>
-        <SplitArea :size="showContainerInfo ? isSizePanel : 100" :min-size="100">
+        <SplitArea :size="sizePanel" :min-size="100">
           <el-aside width="100%">
             <split-pane :min-percent="10" :default-percent="defaultPorcentSplitPane" split="vertical">
               <template>
@@ -77,8 +77,9 @@
                               :menu-parent-uuid="$route.meta.parentUuid"
                               :parent-uuid="windowUuid"
                               :container-uuid="windowMetadata.currentTabUuid"
+                              :table-name="windowMetadata.currentTab.tableName"
                               :panel-type="panelType"
-                              :is-insert-record="getterIsInsertRecord"
+                              :is-insert-record="windowMetadata.currentTab.isInsertRecord"
                             />
                           </el-main>
                         </el-container>
@@ -86,6 +87,7 @@
                       <el-main :style="styleMainTab">
                         <tab-parent
                           :window-uuid="windowUuid"
+                          :window-metadata="windowMetadata"
                           :tabs-list="windowMetadata.tabsListParent"
                           class="tab-window"
                         />
@@ -140,7 +142,7 @@
                         <div class="small-4 columns">
                           <div class="wrapper">
                             <div
-                              v-show="windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
+                              v-show="!isEmptyValue(windowMetadata.tabsListChildren)"
                               class="open-detail"
                             />
                             <el-button
@@ -151,7 +153,7 @@
                               :class="classIsMobile"
                               circle
                               type="primary"
-                              @click="handleChangeShowedTabChildren()"
+                              @click="handleChangeShowedTabChildren(true)"
                             />
                           </div>
                         </div>
@@ -176,7 +178,7 @@
                     </SplitArea>
                     <SplitArea v-show="isShowedTabsChildren" :size="50">
                       <el-header
-                        v-if="isShowedTabsChildren && windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
+                        v-if="isShowedTabsChildren && !isEmptyValue(windowMetadata.tabsListChildren)"
                         style="height: auto; padding-right: 35px !important; padding-bottom: 33px;"
                       >
                         <div class="w-33">
@@ -185,12 +187,13 @@
                               icon="el-icon-caret-bottom"
                               circle
                               class="el-button-window"
-                              @click="handleChangeShowedTabChildren()"
+                              @click="handleChangeShowedTabChildren(false)"
                             />
                           </div>
                         </div>
                         <tab-children
                           :window-uuid="windowUuid"
+                          :window-metadata="windowMetadata"
                           :tabs-list="windowMetadata.tabsListChildren"
                           :first-tab-uuid="windowMetadata.firstTabUuid"
                           :style="{ 'height': getHeightPanelBottom + 'vh' }"
@@ -374,11 +377,14 @@ export default {
       }
       return 50
     },
-    isSizePanel() {
+    sizePanel() {
-      if (this.isMobile && this.showContainerInfo) {
+      if (this.showContainerInfo) {
+        if (this.isMobile) {
           return 2
         }
         return 50
+      }
+      return 100
     },
     isCloseInfo() {
       if (this.isMobile) {
@@ -428,8 +434,7 @@ export default {
       }
     },
     styleStepsSimple() {
-      if (this.isShowedRecordNavigation) {
+      const baseStyle = {
-        return {
         paddingTop: '0px',
         paddingBottom: '0px',
         paddingLeft: '0px',
@@ -437,19 +442,16 @@ export default {
         borderRadius: '4px',
         background: '#F5F7FA',
         overflowX: 'auto',
-          overflowY: 'hidden',
+        overflowY: 'hidden'
+      }
+      if (this.isShowedRecordNavigation) {
+        return {
+          ...baseStyle,
           width: this.$store.getters.getPanelRight + 'px'
         }
       }
       return {
-        paddingTop: '0px',
+        ...baseStyle,
-        paddingBottom: '0px',
-        paddingLeft: '0px',
-        paddingRight: '0px',
-        borderRadius: '4px',
-        background: '#F5F7FA',
-        overflowX: 'auto',
-        overflowY: 'hidden',
         width: 'auto'
       }
     },
@@ -463,10 +465,16 @@ export default {
       return this.$store.getters.getWindow(this.windowUuid)
     },
     isShowedTabsChildren() {
-      return this.getterWindow.isShowedTabsChildren
+      if (this.windowMetadata && this.windowMetadata.isShowedTabsChildren) {
+        return this.windowMetadata.isShowedTabsChildren
+      }
+      return false
     },
     isShowedRecordNavigation() {
-      return this.$store.getters.getIsShowedRecordNavigation(this.windowUuid)
+      if (this.windowMetadata && this.windowMetadata.isShowedRecordNavigation) {
+        return this.windowMetadata.isShowedRecordNavigation
+      }
+      return false
     },
     getHeightPanelTop() {
       return this.$store.getters.getSplitHeightTop
@@ -477,13 +485,6 @@ export default {
     getterRecordList() {
       return this.$store.getters.getDataRecordsList(this.windowMetadata.currentTabUuid).length
     },
-    getterIsInsertRecord() {
-      const tab = this.$store.getters.getCurrentTab(this.windowUuid)
-      if (tab) {
-        return tab.isInsertRecord
-      }
-      return false
-    },
     gettersListRecordLogs() {
       const changeLog = this.$store.getters.getRecordLogs.recorLogs
       if (this.isEmptyValue(changeLog)) {
@@ -518,7 +519,10 @@ export default {
       return this.getterDataRecordsAndSelection.record
     },
     getTableName() {
-      return this.$store.getters.getTableNameFromTab(this.windowUuid, this.windowMetadata.firstTabUuid)
+      if (this.windowMetadata && this.windowMetadata.firstTab.tableName) {
+        return this.windowMetadata.firstTab.tableName
+      }
+      return undefined
     },
     // current record
     getRecord() {
@@ -566,32 +570,34 @@ export default {
   },
   methods: {
     handleResize() {
-      var PanelRight = document.getElementById('PanelRight')
+      const panelRight = document.getElementById('PanelRight')
-      var resizeWidth = PanelRight
+      if (!this.isEmptyValue(panelRight)) {
-      if (!this.isEmptyValue(resizeWidth)) {
+        const widthPanel = panelRight.clientWidth - 350
-        var widthPanel = PanelRight.clientWidth - 350
         this.$store.dispatch('setPanelRight', widthPanel)
       }
     },
     conteInfo() {
       this.showContainerInfo = !this.showContainerInfo
       if (this.showContainerInfo) {
+        const tableName = this.getTableName
+        const recordId = this.getRecord[tableName + '_ID']
         this.$store.dispatch('listWorkflowLogs', {
-          tableName: this.getTableName,
+          tableName,
           recordUuid: this.$route.query.action,
-          recordId: this.getRecord[this.getTableName + '_ID']
+          recordId
         })
         this.$store.dispatch(this.activeInfo, {
-          tableName: this.getTableName,
+          tableName,
-          recordId: this.getRecord[this.getTableName + '_ID']
+          recordId
         })
       }
       this.$store.dispatch('showContainerInfo', !this.getterShowContainerInfo)
     },
     handleClick(tab, event) {
+      const tableName = this.getTableName
       this.$store.dispatch(tab.name, {
-        tableName: this.getTableName,
+        tableName,
-        recordId: this.getRecord[this.getTableName + '_ID']
+        recordId: this.getRecord[tableName + '_ID']
       })
     },
     // callback new size
@@ -605,8 +611,9 @@ export default {
     },
     // get window from vuex store or server
     getWindow() {
-      if (this.getterWindow) {
+      const window = this.getterWindow
-        this.generateWindow()
+      if (window) {
+        this.generateWindow(window)
         return
       }
       this.$store.dispatch('getWindowFromServer', {
@@ -614,11 +621,11 @@ export default {
         routeToDelete: this.$route
       })
         .then(response => {
-          this.generateWindow()
+          this.generateWindow(response)
         })
     },
-    generateWindow() {
+    generateWindow(window) {
-      this.windowMetadata = this.getterWindow
+      this.windowMetadata = window
       let isShowRecords = this.isShowedRecordNavigation
       if (isShowRecords === undefined) {
         if ((['M', 'Q'].includes(this.windowMetadata.windowType) && this.getterRecordList >= 10 && this.$route.query.action !== 'create-new') ||
@@ -637,6 +644,7 @@ export default {
     handleChangeShowedRecordNavigation(valueToChange) {
       this.$store.dispatch('changeWindowAttribute', {
         parentUuid: this.windowUuid, // act as parentUuid
+        window: this.windowMetadata,
         attributeName: 'isShowedRecordNavigation',
         attributeValue: valueToChange
       })
@@ -645,11 +653,12 @@ export default {
       this.isPanel = !this.isPanel
       this.isShowedRecordPanel = !this.isShowedRecordPanel
     },
-    handleChangeShowedTabChildren() {
+    handleChangeShowedTabChildren(isShowedChilds) {
       this.$store.dispatch('changeWindowAttribute', {
         parentUuid: this.windowUuid, // act as parentUuid
+        window: this.windowMetadata,
         attributeName: 'isShowedTabsChildren',
-        attributeValue: !this.isShowedTabsChildren
+        attributeValue: isShowedChilds
       })
     }
   }