feat: Test Views from views redefinition (#934)

* Add default containers

* Add reference for dictionary

* feat: Window redefinition. (#906)

* feat: Browser redefinition. (#920)

* feat: Test Views from views redefinition

* load process.

* minor changes.

* disable window load.

* Update default.json

Co-authored-by: Yamel Senih <ysenih@erpya.com>

src/components/ADempiere/PanelDefinition/StandardPanel.vue

@@ -0,0 +1,111 @@
+<!--
+ 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>
+  <div class="wrapper" style="margin: 15px">
+    <el-form
+      label-position="top"
+      label-width="200px"
+    >
+      <div class="cards-not-group">
+        <div class="card">
+          <filter-fields
+            :container-uuid="containerUuid"
+            :panel-type="panelType"
+          />
+          <el-card
+            :shadow="shadowGroup"
+            :body-style="{ padding: '10px' }"
+          >
+            <el-row>
+              <template v-for="(fieldAttributes, subKey) in fieldsList">
+                <field-definition
+                  :ref="fieldAttributes.columnName"
+                  :key="subKey"
+                  :metadata-field="{
+                    ...fieldAttributes
+                  }"
+                />
+              </template>
+            </el-row>
+          </el-card>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+import FieldDefinition from '@/components/ADempiere/Field'
+import FilterFields from '@/components/ADempiere/FilterFields'
+
+export default defineComponent({
+  name: 'StandardPanel',
+
+  components: {
+    FieldDefinition,
+    FilterFields
+  },
+
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    panelMetadata: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  setup(props, { root }) {
+    const panelType = ref(props.panelMetadata.panelType)
+    let fieldsList = []
+
+    const generatePanel = () => {
+      // order and assign groups
+      if (props.panelMetadata) {
+        fieldsList = props.panelMetadata.fieldsList
+      }
+    }
+
+    const shadowGroup = computed(() => {
+      if (root.$store.state.app.device === 'mobile') {
+        return 'never'
+      }
+      return 'hover'
+    })
+
+    generatePanel()
+
+    return {
+      fieldsList,
+      panelType,
+      shadowGroup
+    }
+  }
+})
+</script>
+
+<style scoped>
+.el-card {
+  width: 100% !important;
+}
+</style>

src/components/ADempiere/PanelDefinition/UnsupportedPanel.vue

@@ -0,0 +1,42 @@
+<!--
+ 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>
+  <div>
+    Panel Is Unsupported
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'UnsupportedPanel',
+
+  props: {
+    containerUuid: {
+      required: true,
+      type: String
+    }
+  },
+
+  setup() {
+
+  }
+})
+</script>

src/components/ADempiere/PanelDefinition/index.vue

@@ -0,0 +1,86 @@
+<!--
+ 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="componentRender"
+    :container-uuid="containerUuid"
+    :panel-metadata="panelMetadata"
+  />
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'PanelDefinition',
+
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    panelType: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props, { root }) {
+    const panelMetadata = computed(() => {
+      return root.$store.getters.getPanel(props.containerUuid)
+    })
+
+    const componentRender = computed(() => {
+      if (['browser', 'process'].includes(props.panelType)) {
+        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
+    })
+
+    return {
+      componentRender,
+      panelMetadata
+    }
+  }
+})
+</script>

src/router/modules/ADempiere/menu.js

@@ -1,7 +1,23 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Leonel Matos lMatos@eroya.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/>.
+
 import { requestMenu } from '@/api/user.js'
-import { convertAction } from '@/utils/ADempiere/dictionaryUtils'
+import { convertAction } from '@/utils/ADempiere/dictionaryUtils.js'
 import staticRoutes from '@/router/modules/ADempiere/staticRoutes.js'
-/* Layout  */
+import testRoutes from '@/router/modules/ADempiere/testRoutes.js'
 import Layout from '@/layout'
 
 /**
@@ -55,8 +71,16 @@ export function loadMainMenu({
         }
         asyncRoutesMap.push(optionMenu)
       })
-      const permiseStactiRoutes = hidenStactiRoutes({ staticRoutes, permiseRole: role })
+
-      resolve(permiseStactiRoutes.concat(asyncRoutesMap))
+      const permiseStactiRoutes = hidenStactiRoutes({
+        staticRoutes,
+        permiseRole: role
+      })
+      const menuRoutes = permiseStactiRoutes
+        .concat(asyncRoutesMap)
+        .concat(testRoutes)
+
+      resolve(menuRoutes)
     }).catch(error => {
       console.warn(`Error getting menu: ${error.message}. Code: ${error.code}.`)
     })

src/router/modules/ADempiere/staticRoutes.js

@@ -1,3 +1,18 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Leonel Matos lMatos@eroya.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/>.
 
 /* Layout  */
 import Layout from '@/layout'
@@ -8,6 +23,7 @@ const staticRoutes = [
     redirect: '/404',
     hidden: true
   },
+
   {
     path: '/ProcessActivity',
     component: Layout,
@@ -32,6 +48,7 @@ const staticRoutes = [
       }
     ]
   },
+
   {
     path: '/report-viewer',
     component: Layout,
@@ -49,22 +66,7 @@ const staticRoutes = [
       }
     ]
   },
-  {
+
-    path: '/test',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/test',
-        component: () => import('@/views/ADempiere/Test'),
-        name: 'Test View',
-        meta: {
-          title: 'Test View',
-          isIndex: true
-        }
-      }
-    ]
-  },
   {
     path: '/PriceChecking',
     component: Layout,
@@ -82,6 +84,7 @@ const staticRoutes = [
       }
     ]
   },
+
   {
     path: '/BarcodeReader',
     component: Layout,
@@ -99,6 +102,7 @@ const staticRoutes = [
       }
     ]
   },
+
   {
     path: '/ProductInfo',
     component: Layout,

src/router/modules/ADempiere/testRoutes.js

@@ -0,0 +1,71 @@
+// 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/>.
+
+/* Layout  */
+import Layout from '@/layout'
+
+const testRoutes = [
+  {
+    path: '/test',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/test',
+        component: () => import('@/views/ADempiere/Test'),
+        name: 'Test View',
+        meta: {
+          title: 'Test View',
+          isIndex: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/test/process/standard',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/test/process/standard',
+        component: () => import('@/views/ADempiere/Test/Process'),
+        name: 'Process Test View',
+        meta: {
+          title: 'Process Test View',
+          isIndex: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/test/smart-browser/standard',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/test/smart-browser/standard',
+        component: () => import('@/views/ADempiere/Test/SmartBrowser'),
+        name: 'Smart Browser Test View',
+        meta: {
+          title: 'SmartBrowser Test View',
+          isIndex: true
+        }
+      }
+    ]
+  }
+]
+
+export default testRoutes

src/utils/ADempiere/dictionaryUtils.js

@@ -20,6 +20,7 @@ import { getContext, getParentFields, getPreference, parseContext } from '@/util
 import REFERENCES, { BUTTON, DEFAULT_SIZE, FIELDS_HIDDEN } from '@/utils/ADempiere/references'
 import { FIELD_OPERATORS_LIST } from '@/utils/ADempiere/dataUtils'
 import language from '@/lang'
+import { config } from '@/utils/ADempiere/config'
 
 /**
  * Generate field to app
@@ -685,16 +686,25 @@ export function convertAction(action) {
       actionAttributes.name = 'process'
       actionAttributes.icon = 'component'
       actionAttributes.component = () => import('@/views/ADempiere/Process')
+      if (config.betaFunctionality.process) {
+        actionAttributes.component = () => import('@/views/ADempiere/ProcessView')
+      }
       break
     case 'R':
       actionAttributes.name = 'report'
       actionAttributes.icon = 'skill'
       actionAttributes.component = () => import('@/views/ADempiere/Process')
+      if (config.betaFunctionality.process) {
+        actionAttributes.component = () => import('@/views/ADempiere/ProcessView')
+      }
       break
     case 'S':
       actionAttributes.name = 'browser'
       actionAttributes.icon = 'search'
       actionAttributes.component = () => import('@/views/ADempiere/Browser')
+      if (config.betaFunctionality.process) {
+        actionAttributes.component = () => import('@/views/ADempiere/BrowserView')
+      }
       break
     case 'T':
       actionAttributes.name = 'task'
@@ -704,6 +714,9 @@ export function convertAction(action) {
       actionAttributes.name = 'window'
       actionAttributes.icon = 'tab'
       actionAttributes.component = () => import('@/views/ADempiere/Window')
+      if (config.betaFunctionality.window) {
+        actionAttributes.component = () => import('@/views/ADempiere/WindowView')
+      }
       break
     case 'X':
       actionAttributes.name = 'form'

src/views/ADempiere/BrowserView/index.vue

@@ -0,0 +1,248 @@
+<!--
+ 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-container
+    v-if="isLoaded"
+    key="browser-loaded"
+    class="view-base"
+    style="height: 86vh;"
+  >
+    <modal-dialog
+      :parent-uuid="browserUuid"
+      :container-uuid="browserUuid"
+      :panel-type="panelType"
+    />
+
+    <el-header v-if="isShowContextMenu">
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="browserUuid"
+        :panel-type="panelType"
+      />
+
+      <div class="center" style="width: 100%">
+        <title-and-help
+          :name="browserMetadata.name"
+          :help="browserMetadata.help"
+        />
+      </div>
+    </el-header>
+
+    <el-main>
+      <el-collapse
+        v-model="openedCriteria"
+        class="container-collasep-open"
+      >
+        <el-collapse-item :title="$t('views.searchCriteria')" name="opened-criteria">
+          <panel-definition
+            :container-uuid="browserUuid"
+            :metadata="browserMetadata"
+            :panel-type="panelType"
+          />
+        </el-collapse-item>
+      </el-collapse>
+
+      <data-table
+        :container-uuid="browserUuid"
+        :panel-type="panelType"
+        :metadata="browserMetadata"
+      />
+    </el-main>
+  </el-container>
+
+  <div
+    v-else
+    key="browser-loading"
+    v-loading="!isLoaded"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="view-loading"
+  />
+</template>
+
+<script>
+import { computed, defineComponent, ref } from '@vue/composition-api'
+
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import ModalDialog from '@/components/ADempiere/Dialog'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
+import PanelDefinition from '@/components/ADempiere/PanelDefinition'
+import DataTable from '@/components/ADempiere/DataTable'
+
+export default defineComponent({
+  name: 'BrowserView',
+
+  components: {
+    ContextMenu,
+    DataTable,
+    ModalDialog,
+    PanelDefinition,
+    TitleAndHelp
+  },
+
+  props: {
+    // implement by test view
+    uuid: {
+      type: String,
+      default: ''
+    }
+  },
+
+  setup(props, { root }) {
+    const panelType = 'browser'
+    const isLoaded = ref(false)
+    const browserMetadata = ref({})
+
+    let browserUuid = root.$route.meta.uuid
+    // set uuid from test
+    if (!root.isEmptyValue(props.uuid)) {
+      browserUuid = props.uuid
+    }
+
+    const browserDefinition = computed(() => {
+      return root.$store.getters.getBrowser(browserUuid)
+    })
+
+    // by default enable context menu and title
+    root.$store.dispatch('settings/changeSetting', {
+      key: 'showContextMenu',
+      value: true
+    })
+
+    const isShowContextMenu = computed(() => {
+      return root.$store.state.settings.showContextMenu
+    })
+
+    const isLoadedRecords = computed(() => {
+      return root.$store.getters.getDataRecordAndSelection(browserUuid).isLoaded
+    })
+
+    const isReadyToSearch = computed(() => {
+      // TODO: Add timer to await
+      if (browserMetadata.value.awaitForValuesToQuery) {
+        return false
+      }
+      return !root.$store.getters.isNotReadyForSubmit(browserUuid)
+    })
+
+    const openedCriteria = computed({
+      get() {
+        // by default criteria if closed
+        const openCriteria = []
+        const browser = browserDefinition.value
+        if (!root.isEmptyValue(browser)) {
+          if (browser.isShowedCriteria) {
+            // open criteria
+            openCriteria.push('opened-criteria')
+          }
+        }
+        return openCriteria
+      },
+      set(value) {
+        let showCriteria = false
+        if (value.length) {
+          showCriteria = true
+        }
+
+        root.$store.dispatch('changeBrowserAttribute', {
+          containerUuid: browserUuid,
+          attributeName: 'isShowedCriteria',
+          attributeValue: showCriteria
+        })
+      }
+    })
+
+    const getBrowserDefinition = () => {
+      const browser = browserDefinition.value
+      if (browser) {
+        browserMetadata.value = browser
+        isLoaded.value = true
+        defaultSearch()
+        return
+      }
+      root.$store.dispatch('getPanelAndFields', {
+        containerUuid: browserUuid,
+        panelType,
+        routeToDelete: root.$route
+      })
+        .then(browserResponse => {
+          browserMetadata.value = browserResponse
+          defaultSearch()
+        })
+        .finally(() => {
+          isLoaded.value = true
+        })
+    }
+
+    const defaultSearch = () => {
+      if (isLoadedRecords.value) {
+        // not research
+        return
+      }
+
+      if (isReadyToSearch.value) {
+        // first search by default
+        root.$store.dispatch('getBrowserSearch', {
+          containerUuid: browserUuid
+        })
+        return
+      }
+
+      // set default values into data
+      root.$store.dispatch('setRecordSelection', {
+        containerUuid: browserUuid,
+        panelType
+      })
+    }
+
+    getBrowserDefinition()
+
+    return {
+      isLoaded,
+      browserUuid,
+      browserMetadata,
+      panelType,
+      // computed
+      openedCriteria,
+      isShowContextMenu
+    }
+  }
+})
+</script>
+
+<style>
+/* removes the title link effect on collapse */
+.el-collapse-item__header:hover {
+  background-color: #fcfcfc;
+}
+</style>
+<style scoped>
+.el-main {
+  padding-bottom: 0px;
+  padding-top: 0px;
+}
+
+.el-header {
+  height: 50px !important;
+}
+
+.center {
+  text-align: center;
+}
+</style>

src/views/ADempiere/ProcessView/index.vue

@@ -0,0 +1,165 @@
+<!--
+ 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-container
+    v-if="isLoadedMetadata"
+    key="process-loaded"
+    class="view-base"
+    style="height: 84vh;"
+  >
+    <el-header
+      v-if="showContextMenu"
+      style="height: 30px;"
+    >
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="processUuid"
+        :panel-type="panelType"
+        :is-report="processMetadata.isReport"
+      />
+    </el-header>
+
+    <el-main>
+      <el-card class="content-collapse">
+        <title-and-help
+          :name="processMetadata.name"
+          :help="processMetadata.help"
+        />
+
+        <el-scrollbar wrap-class="scroll-child">
+          <panel-definition
+            :container-uuid="processUuid"
+            :metadata="processMetadata"
+            :panel-type="panelType"
+          />
+        </el-scrollbar>
+      </el-card>
+    </el-main>
+  </el-container>
+
+  <div
+    v-else
+    key="process-loading"
+    v-loading="!isLoadedMetadata"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="view-loading"
+  />
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+import PanelDefinition from '@/components/ADempiere/PanelDefinition'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
+
+export default defineComponent({
+  name: 'ProcessView',
+
+  components: {
+    PanelDefinition,
+    ContextMenu,
+    TitleAndHelp
+  },
+
+  props: {
+    // implement by test view
+    uuid: {
+      type: String,
+      default: ''
+    }
+  },
+
+  setup(props, { root }) {
+    const isLoadedMetadata = ref(false)
+    const processMetadata = ref({})
+    const panelType = 'process'
+
+    let processUuid = root.$route.meta.uuid
+    // set uuid from test
+    if (!root.isEmptyValue(props.uuid)) {
+      processUuid = props.uuid
+    }
+
+    const showContextMenu = computed(() => {
+      return root.$store.state.settings.showContextMenu
+    })
+
+    const getterProcess = computed(() => {
+      return root.$store.getters.getPanel(processUuid)
+    })
+
+    root.$store.dispatch('settings/changeSetting', {
+      key: 'showContextMenu',
+      value: true
+    })
+
+    const getProcess = async() => {
+      const process = getterProcess.value
+      if (process) {
+        processMetadata.value = process
+        isLoadedMetadata.value = true
+        return
+      }
+
+      root.$store.dispatch('getPanelAndFields', {
+        containerUuid: processUuid,
+        panelType,
+        routeToDelete: root.$route
+      }).then(processResponse => {
+        processMetadata.value = processResponse
+      }).finally(() => {
+        isLoadedMetadata.value = true
+      })
+    }
+
+    getProcess()
+
+    return {
+      processUuid,
+      panelType,
+      isLoadedMetadata,
+      processMetadata,
+      // computeds
+      showContextMenu,
+      getterProcess,
+      // methods
+      getProcess
+    }
+  }
+})
+</script>
+
+<style>
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    height: 100%;
+  }
+</style>
+<style scoped >
+  .el-card {
+    width: 100% !important;
+    height: 100% !important;
+  }
+</style>

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

@@ -0,0 +1,44 @@
+<!--
+ 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="ProcessView"
+    :uuid="uuid"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import ProcessView from '@/views/ADempiere/ProcessView'
+
+export default defineComponent({
+  name: 'TestProcessView',
+
+  setup() {
+    // Generate Surrogate Key UUID for all tables
+    const uuid = 'a42d5602-fb40-11e8-a479-7a0060f0aa01'
+
+    return {
+      ProcessView,
+      uuid
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,44 @@
+<!--
+ 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="SmartBrowserView"
+    :uuid="uuid"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import SmartBrowserView from '@/views/ADempiere/BrowserView'
+
+export default defineComponent({
+  name: 'TestSmartBrowserView',
+
+  setup() {
+    // Request Browser
+    const uuid = '8aaf09f0-fb40-11e8-a479-7a0060f0aa01'
+
+    return {
+      SmartBrowserView,
+      uuid
+    }
+  }
+})
+</script>

src/views/ADempiere/WindowView/StandardWindow.vue

@@ -0,0 +1,55 @@
+<!--
+ 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>
+  <tab-parent
+    :window-uuid="windowUuid"
+    :window-metadata="windowMetadata"
+    :tabs-list="windowMetadata.tabsListParent"
+    class="tab-window"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import TabParent from '@/components/ADempiere/Tab'
+
+export default defineComponent({
+  name: 'StandardWindow',
+
+  components: {
+    TabParent
+  },
+
+  props: {
+    windowUuid: {
+      type: String,
+      required: true
+    },
+    windowMetadata: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup() {
+
+  }
+})
+</script>

src/views/ADempiere/WindowView/index.vue

@@ -0,0 +1,122 @@
+<!--
+ 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>
+  <div v-if="isLoaded" key="window-loaded">
+    <context-menu
+      :menu-parent-uuid="$route.meta.parentUuid"
+      :parent-uuid="windowUuid"
+      :container-uuid="windowMetadata.currentTabUuid"
+      :table-name="windowMetadata.currentTab.tableName"
+      :panel-type="panelType"
+      :is-insert-record="windowMetadata.currentTab.isInsertRecord"
+    />
+
+    <component
+      :is="renderWindowComponent"
+      :window-metadata="windowMetadata"
+      :window-uuid="windowUuid"
+    />
+  </div>
+  <div
+    v-else
+    key="window-loading"
+    v-loading="!isLoaded"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="view-loading"
+  />
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+import ContextMenu from '@/components/ADempiere/ContextMenu'
+
+export default defineComponent({
+  name: 'WindowView',
+
+  components: {
+    ContextMenu
+  },
+
+  setup(props, { root }) {
+    const panelType = 'window'
+    const windowUuid = root.$route.meta.uuid
+    const isLoaded = ref(false)
+    const windowMetadata = ref({})
+
+    const generateWindow = (window) => {
+      windowMetadata.value = window
+      isLoaded.value = true
+    }
+
+    const getterWindow = computed(() => {
+      return root.$store.getters.getWindow(windowUuid)
+    })
+
+    // get window from vuex store or request from server
+    const getWindow = () => {
+      const window = getterWindow.value
+      if (!root.isEmptyValue(window)) {
+        generateWindow(window)
+        return
+      }
+      root.$store.dispatch('getWindowFromServer', {
+        windowUuid,
+        routeToDelete: root.$route
+      })
+        .then(windowResponse => {
+          generateWindow(windowResponse)
+        })
+    }
+
+    const isDocumentTab = computed(() => {
+      const panel = root.$store.getters.getPanel(windowMetadata.value.currentTabUuid)
+      if (!root.isEmptyValue(panel)) {
+        return panel.isDocument
+      }
+
+      return windowMetadata.value.firstTab.isDocument
+    })
+
+    const renderWindowComponent = computed(() => {
+      let windowComponent = () => import('@/views/ADempiere/WindowView/StandardWindow')
+
+      // documents have workflow
+      if (isDocumentTab.value) {
+        windowComponent = () => import('@/views/ADempiere/WindowView/DocumentWindow')
+      }
+
+      return windowComponent
+    })
+
+    // load metadata and generate window
+    getWindow()
+
+    return {
+      panelType,
+      windowUuid,
+      windowMetadata,
+      getterWindow,
+      renderWindowComponent,
+      isLoaded
+    }
+  }
+})
+</script>