feat: Window redefinition. (#944)

* feat: Window redefinition.

* add test view

* unused panelType and set test metadata

* change tabManager compnent.

src/components/ADempiere/PanelDefinition/index.vue

@@ -20,7 +20,7 @@
   <component
     :is="componentRender"
     :container-uuid="containerUuid"
-    :panel-metadata="panelMetadata"
+    :panel-metadata="metadata"
   />
 </template>
 
@@ -31,55 +31,58 @@ export default defineComponent({
   name: 'PanelDefinition',
 
   props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
     containerUuid: {
       type: String,
       required: true
     },
-    panelType: {
+    panelMetadata: {
-      type: String,
+      type: Object,
-      required: true
+      required: false
     }
   },
 
   setup(props, { root }) {
-    const panelMetadata = computed(() => {
+    const storedMetadata = computed(() => {
       return root.$store.getters.getPanel(props.containerUuid)
     })
 
     const componentRender = computed(() => {
-      if (['browser', 'process'].includes(props.panelType)) {
+      return () => import('@/components/ADempiere/PanelDefinition/StandardPanel')
-        return () => import('@/components/ADempiere/PanelDefinition/StandardPanel')
-      }
-
-      const panel = () => import('@/components/ADempiere/PanelDefinition/UnsupportedPanel')
-      /*
-      switch (this.panelMetadata.panelType) {
-        case 'PanelMaster':
-          panel = () => import('@/components/ADempiere/PanelDefinition/FieldBinary')
-          break
-        case 'PanelDocument':
-          panel = () => import('@/components/ADempiere/PanelDefinition/FieldButton')
-          break
-        case 'PanelSequence':
-          panel = () => import('@/components/ADempiere/PanelDefinition/FieldColor')
-          break
-        // search
-        case 'PanelAdvanced':
-          panel = () => import('@/components/ADempiere/PanelDefinition/PanelAdvanced')
-          break
-        // Tree As Menu
-        case 'PanelTree':
-          panel = () => import('@/components/ADempiere/PanelDefinition/PanelTree')
-          break
-      }
-      */
-
-      return panel
     })
 
+    /**
+     * Get the tab object with all its attributes as well as
+     * the fields it contains
+     */
+    const getPanel = () => {
+      let panel = storedMetadata.value
+      if (root.isEmptyValue(panel)) {
+        // not in store, set with prop
+        panel = props.panelMetadata
+      }
+      if (!root.isEmptyValue(panel) && panel.fieldsList) {
+        // not regenerate fields
+        return
+      }
+
+      // generate fields and set into store
+      root.$store.dispatch('getFieldsFromTab', {
+        parentUuid: props.parentUuid,
+        containerUuid: props.containerUuid,
+        panelMetadata: panel
+      })
+    }
+
+    getPanel()
+
     return {
+      // computeds
       componentRender,
-      panelMetadata
+      metadata: storedMetadata
     }
   }
 })

src/components/ADempiere/TabManager/index.vue

@@ -0,0 +1,161 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-tabs
+    v-model="currentTab"
+    type="border-card"
+    @tab-click="handleClick"
+  >
+    <template v-for="(tabAttributes, key) in tabsList">
+      <el-tab-pane
+        :key="key"
+        :label="tabAttributes.name"
+        :windowuuid="windowUuid"
+        :tabuuid="tabAttributes.uuid"
+        :name="String(key)"
+        lazy
+        :disabled="isDisabledTab(key)"
+        :style="tabParentStyle"
+      >
+        <lock-record
+          slot="label"
+          :tab-position="key"
+          :tab-uuid="tabAttributes.uuid"
+          :table-name="tabAttributes.tableName"
+          :tab-name="tabAttributes.name"
+        />
+
+        <panel-definition
+          :parent-uuid="windowUuid"
+          :container-uuid="tabAttributes.uuid"
+          :panel-metadata="tabAttributes"
+          :group-tab="tabAttributes.tabGroup"
+          panel-type="window"
+        />
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script>
+import { defineComponent, computed, ref, watch } from '@vue/composition-api'
+
+import PanelDefinition from '@/components/ADempiere/PanelDefinition'
+import LockRecord from '@/components/ADempiere/ContainerOptions/LockRecord'
+
+export default defineComponent({
+  name: 'TabManager',
+
+  components: {
+    PanelDefinition,
+    LockRecord
+  },
+
+  props: {
+    windowUuid: {
+      type: String,
+      default: ''
+    },
+    windowMetadata: {
+      type: Object,
+      default: () => {}
+    },
+    tabsList: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  setup(props, { root }) {
+    const currentTab = ref(root.$route.query.tabParent)
+    const tabUuid = ref(props.tabsList[0].uuid)
+
+    const tabParentStyle = computed(() => {
+      return {
+        height: '75vh',
+        overflow: 'auto'
+      }
+    })
+
+    const isCreateNew = computed(() => {
+      return Boolean(root.$route.query.action === 'create-new')
+    })
+
+    const isDisabledTab = (key) => {
+      return key > 0 && isCreateNew.value
+    }
+
+    const setCurrentTab = () => {
+      root.$store.dispatch('setCurrentTab', {
+        parentUuid: props.windowUuid,
+        containerUuid: tabUuid.value,
+        window: props.windowMetadata
+      })
+    }
+
+    /**
+     * @param {object} tabHTML DOM HTML the tab clicked
+     */
+    const handleClick = (tabHTML) => {
+      if (tabUuid.value !== tabHTML.$attrs.tabuuid) {
+        tabUuid.value = tabHTML.$attrs.tabuuid
+        setCurrentTab()
+        setTabNumber(tabHTML.$attrs.key)
+      }
+    }
+
+    // watch router query tab parent value
+    watch(() => root.$route.query.tabParent, (newValue) => {
+      if (root.isEmptyValue(newValue) || newValue === 'create-new') {
+        setTabNumber('0')
+        return
+      }
+      setTabNumber(newValue)
+    })
+
+    const setTabNumber = (tabNumber) => {
+      currentTab.value = tabNumber
+
+      root.$router.push({
+        query: {
+          ...root.$route.query,
+          tabParent: currentTab.value
+        },
+        params: {
+          ...root.$route.params
+        }
+      }, () => {})
+
+      // TODO: Delete this to production
+      console.log('Click tab number ', tabNumber)
+    }
+
+    return {
+      currentTab,
+      tabUuid,
+      // computed
+      tabParentStyle,
+      // meyhods
+      handleClick,
+      isDisabledTab
+    }
+  }
+
+})
+</script>

src/router/modules/ADempiere/testRoutes.js

@@ -34,6 +34,24 @@ const testRoutes = [
       }
     ]
   },
+
+  {
+    path: '/test/window/standard',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/test/window/standard',
+        component: () => import('@/views/ADempiere/Test/Window'),
+        name: 'Window Test View',
+        meta: {
+          title: 'Window Test View',
+          isIndex: true
+        }
+      }
+    ]
+  },
+
   {
     path: '/test/process/standard',
     component: Layout,
@@ -50,6 +68,7 @@ const testRoutes = [
       }
     ]
   },
+
   {
     path: '/test/smart-browser/standard',
     component: Layout,

src/store/modules/ADempiere/windowDefinition.js

@@ -317,7 +317,9 @@ const window = {
         let isTabsChildren = false
         if (!isAdvancedQuery) {
           const window = getters.getWindow(parentUuid)
-          isTabsChildren = Boolean(window.tabsListChildren.length)
+          if (window) {
+            isTabsChildren = Boolean(window.tabsListChildren.length)
+          }
         }
 
         if (!isWithUuidField) {

src/views/ADempiere/Test/Window/index.vue

@@ -0,0 +1,48 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <component
+    :is="WindowView"
+    :uuid="uuid"
+    :metadata="metadata"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import WindowView from '@/views/ADempiere/WindowView'
+import standardMetadata from './standardWindow.json'
+
+export default defineComponent({
+  name: 'TestWindowView',
+
+  setup() {
+    // Product Group
+    const uuid = 'a521b2f6-fb40-11e8-a479-7a0060f0aa01'
+    const metadata = standardMetadata.result
+
+    return {
+      WindowView,
+      metadata,
+      uuid
+    }
+  }
+})
+</script>

src/views/ADempiere/Test/Window/standardWindow.json

@@ -0,0 +1,547 @@
+{
+	"code": 200,
+	"result": {
+		"id": 53178,
+		"uuid": "a521b2f6-fb40-11e8-a479-7a0060f0aa01",
+		"name": "Product Group",
+		"description": "Maintain Product Group",
+		"help": "The Product Group allows you to define different groups of products.",
+		"is_active": true,
+		"is_sales_transaction": true,
+		"window_type": "M",
+		"tabs": [
+			{
+				"id": 53513,
+				"uuid": "a4a2b9ba-fb40-11e8-a479-7a0060f0aa01",
+				"name": "Product Group",
+				"description": "Define Product Group",
+				"help": "The Product Group defines unique groupings of products.",
+				"table_name": "M_Product_Group",
+				"sequence": 10,
+				"tab_level": 0,
+				"is_active": true,
+				"is_single_row": true,
+				"is_advanced_tab": false,
+				"is_has_tree": false,
+				"is_info_tab": false,
+				"is_sort_tab": false,
+				"is_translation_tab": false,
+				"is_read_only": false,
+				"is_insert_record": true,
+				"is_view": false,
+				"is_deleteable": true,
+				"is_document": false,
+				"is_change_log": false,
+				"access_level": 3,
+				"link_column_name": "",
+				"sort_order_column_name": "",
+				"sort_yes_no_column_name": "",
+				"parent_column_name": "",
+				"display_logic": "",
+				"commit_warning": "",
+				"query": "SELECT M_Product_Group.*, (SELECT NVL(AD_Client.Name,'') FROM AD_Client WHERE M_Product_Group.AD_Client_ID=AD_Client.AD_Client_ID) AS \"DisplayColumn_AD_Client_ID\", (SELECT NVL(AD_Org.Name,'') FROM AD_Org WHERE M_Product_Group.AD_Org_ID=AD_Org.AD_Org_ID) AS \"DisplayColumn_AD_Org_ID\", M_Product_Group_Parent_ID_M_Product_Group.Name AS \"DisplayColumn_M_Product_Group_Parent_ID\" FROM M_Product_Group AS M_Product_Group LEFT JOIN M_Product_Group AS M_Product_Group_Parent_ID_M_Product_Group ON(M_Product_Group_Parent_ID_M_Product_Group.M_Product_Group_ID = M_Product_Group.M_Product_Group_Parent_ID)",
+				"where_clause": "",
+				"order_by_clause": "",
+				"parent_tab_uuid": "",
+				"processes": [],
+				"fields": [
+					{
+						"id": 64329,
+						"uuid": "8d8925e8-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Grupo de Producto",
+						"description": "Group of a Product",
+						"help": "Identifies the Group which this product belongs to.",
+						"sequence": 0,
+						"column_name": "M_Product_Group_ID",
+						"element_name": "M_Product_Group_ID",
+						"is_displayed": false,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": false,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": true,
+						"is_parent": false,
+						"is_updateable": false,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 13,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 10
+					},
+					{
+						"id": 64330,
+						"uuid": "8d89269c-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Compañía",
+						"description": "Compañía para esta instalación",
+						"help": "Compañía o entidad legal. No se pueden compartir datos entre diferentes compañías.",
+						"sequence": 10,
+						"column_name": "AD_Client_ID",
+						"element_name": "AD_Client_ID",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": false,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": false,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 19,
+						"default_value": "@#AD_Client_ID@",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"reference": {
+							"table_name": "AD_Client",
+							"key_column_name": "AD_Client.AD_Client_ID",
+							"display_column_name": "",
+							"query": "SELECT AD_Client.AD_Client_ID,NULL,NVL(AD_Client.Name,'-1'),AD_Client.IsActive, AD_Client.UUID FROM AD_Client WHERE AD_Client.AD_Client_ID <> 0 ORDER BY 3",
+							"direct_query": "SELECT AD_Client.AD_Client_ID,NULL,NVL(AD_Client.Name,'-1'),AD_Client.IsActive, AD_Client.UUID FROM AD_Client WHERE AD_Client.AD_Client_ID=?",
+							"validation_code": "AD_Client.AD_Client_ID <> 0",
+							"zoom_windows": [
+								{
+									"id": 109,
+									"uuid": "a521762e-fb40-11e8-a479-7a0060f0aa01",
+									"name": "Compañía",
+									"description": "Mantener Compañías",
+									"is_sales_transaction": true,
+									"is_active": false
+								}
+							]
+						},
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 10
+					},
+					{
+						"id": 64331,
+						"uuid": "8d892750-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Organización",
+						"description": "Entidad organizacional dentro de la compañía",
+						"help": "Una organización es una unidad de la compañía o entidad legal - Ej. Tiendas y departamentos. Es posible compartir datos entre organizaciones.",
+						"sequence": 20,
+						"column_name": "AD_Org_ID",
+						"element_name": "AD_Org_ID",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": false,
+						"is_encrypted": false,
+						"is_same_line": true,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": false,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 19,
+						"default_value": "@#AD_Org_ID@",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"reference": {
+							"table_name": "AD_Org",
+							"key_column_name": "AD_Org.AD_Org_ID",
+							"display_column_name": "",
+							"query": "SELECT AD_Org.AD_Org_ID,NULL,NVL(AD_Org.Name,'-1'),AD_Org.IsActive, AD_Org.UUID FROM AD_Org WHERE (AD_Org.IsSummary='N' OR AD_Org.AD_Org_ID=0) ORDER BY 3",
+							"direct_query": "SELECT AD_Org.AD_Org_ID,NULL,NVL(AD_Org.Name,'-1'),AD_Org.IsActive, AD_Org.UUID FROM AD_Org WHERE AD_Org.AD_Org_ID=?",
+							"validation_code": "(AD_Org.IsSummary='N' OR AD_Org.AD_Org_ID=0)",
+							"zoom_windows": [
+								{
+									"id": 110,
+									"uuid": "a5210fa4-fb40-11e8-a479-7a0060f0aa01",
+									"name": "Organización",
+									"description": "Mantener Organizaciones",
+									"is_sales_transaction": true,
+									"is_active": false
+								}
+							]
+						},
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 10
+					},
+					{
+						"id": 64332,
+						"uuid": "8d892804-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Código",
+						"description": "El código para el registro en el formato requerido; debe ser único.",
+						"help": "Un código le permite a usted un método rápido de encontrar un registro en particular.",
+						"sequence": 30,
+						"column_name": "Value",
+						"element_name": "Value",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": false,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": true,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 10,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 255
+					},
+					{
+						"id": 64333,
+						"uuid": "8d2ef618-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Nombre",
+						"description": "Identificador alfanumérico de la entidad.",
+						"help": "El nombre de una entidad (registro) se usa como una opción de búsqueda predeterminada adicional al código. El nombre es de hasta 60 caracteres de longitud.",
+						"sequence": 40,
+						"column_name": "Name",
+						"element_name": "Name",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": true,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": true,
+						"is_allow_logging": true,
+						"is_selection_column": true,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 1,
+						"display_logic": "",
+						"display_type": 10,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 60
+					},
+					{
+						"id": 64334,
+						"uuid": "8d2ef6b8-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Descripción",
+						"description": "Descripción corta opcional del registro",
+						"help": "Una descripción esta limitada a 255 caracteres",
+						"sequence": 50,
+						"column_name": "Description",
+						"element_name": "Description",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": true,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": false,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": true,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 10,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 255
+					},
+					{
+						"id": 64335,
+						"uuid": "8d8928b8-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Activo",
+						"description": "El registro está activo en el sistema",
+						"help": "Hay dos métodos para que los registros no estén disponibles en el sistema: Uno es eliminar el registro; el otro es desactivarlo. Un registro desactivado no está disponible para selección; pero está disponible para Informes",
+						"sequence": 70,
+						"column_name": "IsActive",
+						"element_name": "IsActive",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": false,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 20,
+						"default_value": "Y",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 1
+					},
+					{
+						"id": 64336,
+						"uuid": "8d2f02a2-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Predeterminado",
+						"description": "Valor Predeterminado",
+						"help": "El cuadro de verificación indica si este registro será usado como un valor predeterminado",
+						"sequence": 80,
+						"column_name": "IsDefault",
+						"element_name": "IsDefault",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": true,
+						"is_encrypted": false,
+						"is_same_line": true,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": true,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 20,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 1
+					},
+					{
+						"id": 64337,
+						"uuid": "8d2f039c-fb40-11e8-a479-7a0060f0aa01",
+						"name": "Grupo de Producto Padre",
+						"description": "",
+						"help": "",
+						"sequence": 90,
+						"column_name": "M_Product_Group_Parent_ID",
+						"element_name": "M_Product_Group_Parent_ID",
+						"is_displayed": true,
+						"is_displayed_grid": true,
+						"is_read_only": false,
+						"is_allow_copy": true,
+						"is_encrypted": false,
+						"is_same_line": false,
+						"is_heading": false,
+						"is_field_only": false,
+						"is_quick_entry": false,
+						"is_mandatory": false,
+						"is_key": false,
+						"is_parent": false,
+						"is_updateable": true,
+						"is_identifier": false,
+						"is_allow_logging": true,
+						"is_selection_column": false,
+						"is_range": false,
+						"is_always_updateable": false,
+						"is_translated": false,
+						"identifier_sequence": 0,
+						"display_logic": "",
+						"display_type": 18,
+						"default_value": "",
+						"read_only_logic": "",
+						"mandatory_logic": "",
+						"callout": "",
+						"column_sql": "",
+						"v_format": "",
+						"value_min": "",
+						"value_max": "",
+						"format_pattern": "",
+						"reference": {
+							"table_name": "M_Product_Group",
+							"key_column_name": "M_Product_Group.M_Product_Group_ID",
+							"display_column_name": "Name",
+							"query": "SELECT M_Product_Group.M_Product_Group_ID,NULL,NVL(M_Product_Group.Name,'-1'),M_Product_Group.IsActive, M_Product_Group.UUID FROM M_Product_Group ORDER BY 3",
+							"direct_query": "SELECT M_Product_Group.M_Product_Group_ID,NULL,NVL(M_Product_Group.Name,'-1'),M_Product_Group.IsActive, M_Product_Group.UUID FROM M_Product_Group WHERE M_Product_Group.M_Product_Group_ID=?",
+							"validation_code": "",
+							"zoom_windows": [
+								{
+									"id": 53178,
+									"uuid": "a521b2f6-fb40-11e8-a479-7a0060f0aa01",
+									"name": "Product Group",
+									"description": "Maintain Product Group",
+									"is_sales_transaction": true,
+									"is_active": false
+								}
+							]
+						},
+						"is_query_criteria": false,
+						"is_order_by": false,
+						"seq_no_grid": 0,
+						"sort_no": 0,
+						"is_info_only": false,
+						"is_active": true,
+						"default_value_to": "",
+						"field_length": 10
+					}
+				]
+			}
+		]
+	}
+}

src/views/ADempiere/WindowView/StandardWindow.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <tab-parent
+  <tab-manager
     :window-uuid="windowUuid"
     :window-metadata="windowMetadata"
     :tabs-list="windowMetadata.tabsListParent"
@@ -28,13 +28,13 @@
 <script>
 import { defineComponent } from '@vue/composition-api'
 
-import TabParent from '@/components/ADempiere/Tab'
+import TabManager from '@/components/ADempiere/TabManager'
 
 export default defineComponent({
   name: 'StandardWindow',
 
   components: {
-    TabParent
+    TabManager
   },
 
   props: {

src/views/ADempiere/WindowView/index.vue

@@ -17,22 +17,21 @@
 -->
 
 <template>
-  <div v-if="isLoaded" key="window-loaded">
+  <div v-if="isLoaded" key="window-loaded" class="view-base">
-    <context-menu
+    <el-container style="min-height: calc(100vh - 84px)">
-      :menu-parent-uuid="$route.meta.parentUuid"
+      <el-aside width="100%">
-      :parent-uuid="windowUuid"
-      :container-uuid="windowMetadata.currentTabUuid"
-      :table-name="windowMetadata.currentTab.tableName"
-      :panel-type="panelType"
-      :is-insert-record="windowMetadata.currentTab.isInsertRecord"
-    />
 
-    <component
+        <!-- // TODO: Add header window component for auxiliary menu and worflow status -->
-      :is="renderWindowComponent"
+
-      :window-metadata="windowMetadata"
+        <component
-      :window-uuid="windowUuid"
+          :is="renderWindowComponent"
-    />
+          :window-metadata="windowMetadata"
+          :window-uuid="windowUuid"
+        />
+      </el-aside>
+    </el-container>
   </div>
+
   <div
     v-else
     key="window-loading"
@@ -45,22 +44,34 @@
 
 <script>
 import { defineComponent, computed, ref } from '@vue/composition-api'
-
+import { generateWindow as generateWindowRespose } from './windowUtils'
-import ContextMenu from '@/components/ADempiere/ContextMenu'
 
 export default defineComponent({
   name: 'WindowView',
 
-  components: {
+  props: {
-    ContextMenu
+    // implement by test view
+    uuid: {
+      type: String,
+      default: ''
+    },
+    metadata: {
+      type: Object,
+      default: () => {}
+    }
   },
 
   setup(props, { root }) {
     const panelType = 'window'
-    const windowUuid = root.$route.meta.uuid
     const isLoaded = ref(false)
     const windowMetadata = ref({})
 
+    let windowUuid = root.$route.meta.uuid
+    // set uuid from test
+    if (!root.isEmptyValue(props.uuid)) {
+      windowUuid = props.uuid
+    }
+
     const generateWindow = (window) => {
       windowMetadata.value = window
       isLoaded.value = true
@@ -72,11 +83,21 @@ export default defineComponent({
 
     // get window from vuex store or request from server
     const getWindow = () => {
+      // metadata props use for test
+      if (!root.isEmptyValue(props.metadata)) {
+        return new Promise(resolve => {
+          const windowResponse = generateWindowRespose(props.metadata)
+          generateWindow(windowResponse)
+          resolve(windowResponse)
+        })
+      }
+
       const window = getterWindow.value
       if (!root.isEmptyValue(window)) {
         generateWindow(window)
         return
       }
+
       root.$store.dispatch('getWindowFromServer', {
         windowUuid,
         routeToDelete: root.$route
@@ -113,6 +134,7 @@ export default defineComponent({
       panelType,
       windowUuid,
       windowMetadata,
+      // computed
       getterWindow,
       renderWindowComponent,
       isLoaded

src/views/ADempiere/WindowView/windowUtils.js

@@ -0,0 +1,81 @@
+
+import { convertWindow } from '@/utils/ADempiere/apiConverts/dictionary.js'
+
+export function generateWindow(windowResponse) {
+  const responseWindow = convertWindow(windowResponse)
+
+  const {
+    tabsList, tabsListParent,
+    firstTab, firstTabUuid
+  } = generateTabs({
+    tabs: responseWindow.tabs,
+    windowUuid: responseWindow.uuid
+  })
+
+  const newWindow = {
+    ...responseWindow,
+    tabsList,
+    currentTab: tabsListParent[0],
+    tabsListParent,
+    // app attributes
+    currentTabUuid: tabsListParent[0].uuid,
+    firstTab,
+    firstTabUuid,
+    // App properties
+    isShowedTabsChildren: false,
+    isShowedRecordNavigation: undefined,
+    isShowedAdvancedQuery: false
+  }
+
+  return newWindow
+}
+
+export function generateTabs({
+  tabs,
+  windowUuid
+}) {
+  const firstTabTableName = tabs[0].tableName
+  const firstTabUuid = tabs[0].uuid
+  const tabsListParent = []
+
+  // indexes related to visualization
+  let tabParentIndex = 0
+
+  const tabsList = tabs.filter((itemTab) => {
+    return !(
+      itemTab.isTranslationTab || itemTab.isSortTab ||
+      itemTab.isAdvancedTab || itemTab.isHasTree
+    )
+  }).map((tabItem, index) => {
+    // let tab = tabItem
+    const tab = {
+      ...tabItem,
+      containerUuid: tabItem.uuid,
+      parentUuid: windowUuid,
+      windowUuid,
+      tabGroup: tabItem.fieldGroup,
+      firstTabUuid,
+      // relations
+      isParentTab: Boolean(firstTabTableName === tabItem.tableName),
+      // app properties
+      isShowedRecordNavigation: !(tabItem.isSingleRow),
+      isLoadFieldsList: false,
+      index // this index is not related to the index in which the tabs are displayed
+    }
+
+    if (tab.isParentTab) {
+      tab.tabParentIndex = tabParentIndex
+      tabParentIndex++
+      tabsListParent.push(tab)
+      return tab
+    }
+    return tab
+  })
+
+  return {
+    firstTabUuid,
+    firstTab: tabsList[0],
+    tabsListParent,
+    tabsList
+  }
+}