From 7fd5c8f3348c84e6ebe3694f5996d910ca138bdf Mon Sep 17 00:00:00 2001
From: Edwin Betancourt <EdwinBetanc0urt@hotmail.com>
Date: Fri, 17 Apr 2020 11:04:47 -0400
Subject: [PATCH] fix: Test View error when change value into field. (#446)

* fix: Test View error when change value into field.

* remove console.log

* add support to references fields for manual forms

* fix logic's Test View.

* change definition lookup factory.

* Some changes

* Add support to factory from ADempiere

Co-authored-by: Yamel Senih <ysenih@erpya.com>
---
 src/components/ADempiere/DataTable/index.vue  |   6 +-
 src/components/ADempiere/Field/FieldYesNo.vue |   4 +-
 src/components/ADempiere/Field/fieldSize.js   | 244 +++++++------
 src/components/ADempiere/Field/index.vue      |  10 +-
 src/store/modules/ADempiere/browser.js        |  15 -
 src/store/modules/ADempiere/field.js          |  97 ++++++
 src/store/modules/ADempiere/panel.js          |  25 +-
 src/store/modules/ADempiere/window.js         |  18 +-
 src/utils/ADempiere/dictionaryUtils.js        | 102 +-----
 src/utils/ADempiere/lookupFactory.js          | 320 ++++++++++++++++--
 src/utils/ADempiere/references.js             |  92 ++---
 src/views/ADempiere/TestView/index.vue        | 239 ++++++++++---
 12 files changed, 784 insertions(+), 388 deletions(-)
 create mode 100644 src/store/modules/ADempiere/field.js

diff --git a/src/components/ADempiere/DataTable/index.vue b/src/components/ADempiere/DataTable/index.vue
index 06bc5d97..d90d9daf 100644
--- a/src/components/ADempiere/DataTable/index.vue
+++ b/src/components/ADempiere/DataTable/index.vue
@@ -251,7 +251,7 @@ import IconElement from '@/components/ADempiere/IconElement'
 import { formatDate } from '@/filters/ADempiere'
 import MainPanel from '@/components/ADempiere/Panel'
 import { sortFields } from '@/utils/ADempiere/dictionaryUtils'
-import { FIELDS_DECIMALS, FIELDS_QUANTITY, FIELD_READ_ONLY_FORM } from '@/utils/ADempiere/references'
+import { FIELDS_DECIMALS, FIELDS_QUANTITY, FIELDS_READ_ONLY_FORM } from '@/utils/ADempiere/references'
 import { fieldIsDisplayed } from '@/utils/ADempiere'
 import evaluator from '@/utils/ADempiere/evaluator'
 
@@ -667,7 +667,7 @@ export default {
         return true
       }
       if (fieldIsDisplayed(field)) {
-        // const fieldReadOnlyAllForm = FIELD_READ_ONLY_FORM.filter(item => {
+        // const fieldReadOnlyAllForm = FIELDS_READ_ONLY_FORM.filter(item => {
         //   return row.hasOwnProperty(item.columnName) && item.isChangedAllForm
         // })
         // // columnName: Processed, Processing
@@ -677,7 +677,7 @@ export default {
         // }
 
         // columnName: IsActive
-        const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => {
+        const fieldReadOnlyForm = FIELDS_READ_ONLY_FORM.find(item => {
           return row.hasOwnProperty(item.columnName) && !item.isChangedAllForm
         })
         if (fieldReadOnlyForm) {
diff --git a/src/components/ADempiere/Field/FieldYesNo.vue b/src/components/ADempiere/Field/FieldYesNo.vue
index 21667d8a..447f0a5a 100644
--- a/src/components/ADempiere/Field/FieldYesNo.vue
+++ b/src/components/ADempiere/Field/FieldYesNo.vue
@@ -14,7 +14,7 @@
 
 <script>
 import { fieldIsDisplayed } from '@/utils/ADempiere'
-import { FIELD_READ_ONLY_FORM } from '@/utils/ADempiere/references'
+import { FIELDS_READ_ONLY_FORM } from '@/utils/ADempiere/references'
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
 
 export default {
@@ -62,7 +62,7 @@ export default {
       }
     },
     isReadOnlyForm(value) {
-      const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => item.columnName === this.metadata.columnName)
+      const fieldReadOnlyForm = FIELDS_READ_ONLY_FORM.find(item => item.columnName === this.metadata.columnName)
       // columnName: IsActive, Processed, Processing
       if (fieldReadOnlyForm && fieldIsDisplayed(this.metadata)) {
         const fieldsExcludes = []
diff --git a/src/components/ADempiere/Field/fieldSize.js b/src/components/ADempiere/Field/fieldSize.js
index 78c613ca..e64231d0 100644
--- a/src/components/ADempiere/Field/fieldSize.js
+++ b/src/components/ADempiere/Field/fieldSize.js
@@ -1,119 +1,141 @@
 
-export const FIELD_DISPLAY_SIZES = [
-  {
-    type: 'FieldBinary',
-    size: {
-      xs: 6,
-      sm: 6,
-      md: 6,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldButton',
-    size: {
-      xs: 0,
-      sm: 0,
-      md: 0,
-      lg: 0,
-      xl: 0
-    }
-  },
-  {
-    type: 'FieldColor',
-    size: {
-      xs: 6,
-      sm: 6,
-      md: 6,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldDate',
-    size: {
-      xs: 24,
-      sm: 12,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldImage',
-    size: {
-      xs: 6,
-      sm: 6,
-      md: 6,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldNumber',
-    size: {
-      xs: 24,
-      sm: 12,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldSelect',
-    size: {
-      xs: 24,
-      sm: 12,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldText',
-    size: {
-      xs: 24,
-      sm: 12,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldTextLong',
-    size: {
-      xs: 24,
-      sm: 24,
-      md: 24,
-      lg: 24,
-      xl: 24
-    }
-  },
-  {
-    type: 'FieldTime',
-    size: {
-      xs: 24,
-      sm: 12,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }
-  },
-  {
-    type: 'FieldYesNo',
-    size: {
-      xs: 14,
-      sm: 8,
-      md: 8,
-      lg: 3,
-      xl: 6
-    }
+export const FIELD_BINARY = {
+  type: 'FieldBinary',
+  size: {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6
   }
+}
+
+export const FIELD_BUTTON = {
+  type: 'FieldButton',
+  size: {
+    xs: 0,
+    sm: 0,
+    md: 0,
+    lg: 0,
+    xl: 0
+  }
+}
+
+export const FIELD_COLOR = {
+  type: 'FieldColor',
+  size: {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_DATE = {
+  type: 'FieldDate',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_IMAGE = {
+  type: 'FieldImage',
+  size: {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_NUMBER = {
+  type: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_SELECT = {
+  type: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_TEXT = {
+  type: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_TEXT_LONG = {
+  type: 'FieldTextLong',
+  size: {
+    xs: 24,
+    sm: 24,
+    md: 24,
+    lg: 24,
+    xl: 24
+  }
+}
+
+export const FIELD_TIME = {
+  type: 'FieldTime',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
+}
+
+export const FIELD_YES_NO = {
+  type: 'FieldYesNo',
+  size: {
+    xs: 14,
+    sm: 8,
+    md: 8,
+    lg: 3,
+    xl: 6
+  }
+}
+
+const FIELDS_DISPLAY_SIZES = [
+  FIELD_BINARY,
+  FIELD_BUTTON,
+  FIELD_COLOR,
+  FIELD_DATE,
+  FIELD_IMAGE,
+  FIELD_NUMBER,
+  FIELD_SELECT,
+  FIELD_TEXT,
+  FIELD_TEXT_LONG,
+  FIELD_YES_NO
 ]
+export default FIELDS_DISPLAY_SIZES
 
 export const DEFAULT_SIZE = {
-  type: 'FieldYesNo',
+  type: 'FieldDefault',
   size: {
     xs: 6,
     sm: 8,
diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
index bb1ea798..bfcf1bd9 100644
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@@ -74,7 +74,7 @@ import documentStatus from '@/components/ADempiere/Field/popover/documentStatus'
 import operatorComparison from '@/components/ADempiere/Field/popover/operatorComparison'
 import translated from '@/components/ADempiere/Field/popover/translated'
 import calculator from '@/components/ADempiere/Field/popover/calculator'
-import { DEFAULT_SIZE, FIELD_DISPLAY_SIZES } from '@/components/ADempiere/Field/fieldSize'
+import FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
 import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
 import { showMessage } from '@/utils/ADempiere/notification'
 
@@ -218,7 +218,7 @@ export default {
     },
     sizeFieldResponsive() {
       if (!this.isDisplayed) {
-        return DEFAULT_SIZE
+        return DEFAULT_SIZE.size
       }
 
       let sizeField = {}
@@ -228,13 +228,13 @@ export default {
       }
       if (this.isEmptyValue(sizeField)) {
         // Sizes from panel and groups
-        sizeField = FIELD_DISPLAY_SIZES.find(item => {
+        sizeField = FIELDS_DISPLAY_SIZES.find(item => {
           return item.type === this.field.componentPath
         })
       }
       if (this.isEmptyValue(sizeField)) {
         // set default size
-        sizeField = DEFAULT_SIZE
+        sizeField = DEFAULT_SIZE.size
       }
 
       const newSizes = {}
@@ -318,7 +318,7 @@ export default {
     // assined field with prop
     this.field = this.metadataField
     if (this.field.isCustomField && !this.field.componentPath) {
-      let componentReference = evalutateTypeField(this.field.displayType, true)
+      let componentReference = evalutateTypeField(this.field.displayType)
       if (this.isEmptyValue(componentReference)) {
         componentReference = {
           type: 'FieldText',
diff --git a/src/store/modules/ADempiere/browser.js b/src/store/modules/ADempiere/browser.js
index df5b1e13..182b75ee 100644
--- a/src/store/modules/ADempiere/browser.js
+++ b/src/store/modules/ADempiere/browser.js
@@ -101,21 +101,6 @@ const browser = {
             })
             fieldsList = fieldsList.concat(fieldsRangeList)
 
-            // Get dependent fields
-            fieldsList
-              .forEach((field, index, list) => {
-                if (field.isActive && field.parentFieldsList.length) {
-                  field.parentFieldsList.forEach(parentColumnName => {
-                    const parentField = list.find(parentField => {
-                      return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
-                    })
-                    if (parentField) {
-                      parentField.dependentFieldsList.push(field.columnName)
-                    }
-                  })
-                }
-              })
-
             // Panel for save on store
             const newBrowser = {
               ...browserResponse,
diff --git a/src/store/modules/ADempiere/field.js b/src/store/modules/ADempiere/field.js
new file mode 100644
index 00000000..936e2bb9
--- /dev/null
+++ b/src/store/modules/ADempiere/field.js
@@ -0,0 +1,97 @@
+import { getField as getFieldFromDictionary } from '@/api/ADempiere/dictionary'
+
+const initStateLookup = {
+  referenceList: [],
+  fieldList: [],
+  validationRuleList: []
+}
+
+const field = {
+  state: initStateLookup,
+  mutations: {
+    addField(state, payload) {
+      state.fieldList.push(payload)
+    },
+    addReference(state, payload) {
+      state.referenceList.push(payload)
+    },
+    addValidationRule(state, payload) {
+      state.validationRuleList.push(payload)
+    },
+    resetStateLookup(state) {
+      state = initStateLookup
+    }
+  },
+  actions: {
+    // Get Reference from Server based on criteria
+    getFieldFromServer({ commit, rootGetters }, {
+      fieldUuid,
+      columnUuid,
+      elementUuid,
+      tableName,
+      columnName,
+      elementColumnName
+    }) {
+      return getFieldFromDictionary({
+        fieldUuid,
+        columnUuid,
+        elementUuid,
+        // TableName + ColumnName
+        tableName,
+        columnName,
+        elementColumnName
+      })
+        .then(fieldResponse => {
+          if (columnUuid) {
+            fieldResponse.columnUuid = columnUuid
+          } else if (elementUuid) {
+            fieldResponse.elementUuid = elementUuid
+          } else if (elementColumnName) {
+            fieldResponse.elementColumnName = elementColumnName
+          } else if (tableName && columnName) {
+            fieldResponse.tableName = tableName
+            fieldResponse.columnName = columnName
+          }
+          commit('addField', {
+            fieldResponse
+          })
+          return fieldResponse
+        })
+        .catch(error => {
+          console.warn(`Get Field, Select Base - Error ${error.code}: ${error.message}.`)
+        })
+    }
+  },
+  getters: {
+    getFieldFromUuid: (state) => (uuid) => {
+      return state.fieldList.find(fieldItem => {
+        return fieldItem.uuid === uuid
+      })
+    },
+    getFieldFromColumnUuid: (state) => (columnUuid) => {
+      return state.fieldList.find(fieldItem => {
+        return fieldItem.columnUuid === columnUuid
+      })
+    },
+    getFieldFromElementUuid: (state) => (elementUuid) => {
+      return state.fieldList.find(fieldItem => {
+        return fieldItem.elementUuid === elementUuid
+      })
+    },
+    getFieldFromElementColumnName: (state) => (elementColumnName) => {
+      return state.fieldList.find(fieldItem => {
+        return fieldItem.elementColumnName === elementColumnName
+      })
+    },
+    getFieldFromTableNameAndColumnName: (state) => ({
+      tableName,
+      columnName
+    }) => {
+      return state.fieldList.find(fieldItem => {
+        return fieldItem.tableName === tableName && fieldItem.columnName === columnName
+      })
+    }
+  }
+}
+
+export default field
diff --git a/src/store/modules/ADempiere/panel.js b/src/store/modules/ADempiere/panel.js
index 2e42d953..6ae7a57f 100644
--- a/src/store/modules/ADempiere/panel.js
+++ b/src/store/modules/ADempiere/panel.js
@@ -56,13 +56,14 @@ const panel = {
   },
   actions: {
     addPanel({ commit, dispatch, getters }, params) {
+      const { panelType } = params
       let keyColumn = ''
       let selectionColumn = []
       let identifierColumns = []
       let count = 0
 
       if (params.fieldList) {
-        params.fieldList.forEach(itemField => {
+        params.fieldList.forEach((itemField, index, listFields) => {
           if (itemField.isKey) {
             keyColumn = itemField.columnName
           }
@@ -77,15 +78,15 @@ const panel = {
             })
           }
 
-          if (params.panelType === 'table' || params.isAdvancedQuery) {
+          if (panelType === 'table' || params.isAdvancedQuery) {
             itemField.isShowedFromUser = false
             if (count < 2 && itemField.isSelectionColumn && itemField.sequence >= 10) {
               itemField.isShowedFromUser = true
               count++
             }
           } else {
-            if (['browser', 'process', 'report'].includes(params.panelType) ||
-              params.panelType === 'window' && params.isParentTab) {
+            if (['browser', 'process', 'report', 'custom'].includes(panelType) ||
+              panelType === 'window' && params.isParentTab) {
               dispatch('setContext', {
                 parentUuid: params.parentUuid,
                 containerUuid: params.uuid,
@@ -93,11 +94,24 @@ const panel = {
                 value: itemField.value
               })
             }
+
+            //  Get dependent fields
+            if (!isEmptyValue(itemField.parentFieldsList) && itemField.isActive) {
+              itemField.parentFieldsList.forEach(parentColumnName => {
+                const parentField = listFields.find(parentFieldItem => {
+                  return parentFieldItem.columnName === parentColumnName &&
+                    parentColumnName !== itemField.columnName
+                })
+                if (parentField) {
+                  parentField.dependentFieldsList.push(itemField.columnName)
+                }
+              })
+            }
           }
         })
 
         let orderBy = 'sequence'
-        if ((params.panelType === 'window' && !params.isParentTab) || params.panelType === 'browser') {
+        if ((panelType === 'window' && !params.isParentTab) || panelType === 'browser') {
           orderBy = 'seqNoGrid'
         }
         params.fieldList = assignedGroup({
@@ -125,6 +139,7 @@ const panel = {
       params.isShowedTableOptionalColumns = false
 
       commit('addPanel', params)
+      return params
     },
     /**
      * Used by components/fields/filterFields
diff --git a/src/store/modules/ADempiere/window.js b/src/store/modules/ADempiere/window.js
index 28f5a29e..9e35e3e8 100644
--- a/src/store/modules/ADempiere/window.js
+++ b/src/store/modules/ADempiere/window.js
@@ -6,7 +6,8 @@ import { showMessage } from '@/utils/ADempiere/notification'
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 import language from '@/lang'
 import router from '@/router'
-import { generateField, getFieldTemplate } from '@/utils/ADempiere/dictionaryUtils'
+import { generateField } from '@/utils/ADempiere/dictionaryUtils'
+import { getFieldTemplate } from '@/utils/ADempiere/lookupFactory'
 
 const initStateWindow = {
   window: [],
@@ -286,21 +287,6 @@ const window = {
 
             let isTabsChildren = false
             if (!isAdvancedQuery) {
-              //  Get dependent fields
-              fieldsList
-                .forEach((field, index, list) => {
-                  if (field.parentFieldsList.length && field.isActive) {
-                    field.parentFieldsList.forEach(parentColumnName => {
-                      const parentField = list.find(parentField => {
-                        return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
-                      })
-                      if (parentField) {
-                        parentField.dependentFieldsList.push(field.columnName)
-                      }
-                    })
-                  }
-                })
-
               const window = getters.getWindow(parentUuid)
               isTabsChildren = Boolean(window.tabsListChildren.length)
             }
diff --git a/src/utils/ADempiere/dictionaryUtils.js b/src/utils/ADempiere/dictionaryUtils.js
index c3fc6582..748293f5 100644
--- a/src/utils/ADempiere/dictionaryUtils.js
+++ b/src/utils/ADempiere/dictionaryUtils.js
@@ -1,8 +1,8 @@
 import evaluator from '@/utils/ADempiere/evaluator'
 import { isEmptyValue, parsedValueComponent } from '@/utils/ADempiere/valueUtils'
 import { getContext, getParentFields, getPreference, parseContext } from '@/utils/ADempiere/contextUtils'
-import REFERENCES, { FIELD_NOT_SHOWED } from '@/utils/ADempiere/references'
-import { FIELD_DISPLAY_SIZES, DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import REFERENCES, { FIELDS_HIDDEN } from '@/utils/ADempiere/references'
+import FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
 import language from '@/lang'
 
 /**
@@ -24,7 +24,7 @@ export function generateField({
     isShowedFromUser = moreAttributes.isShowedFromUser
   }
 
-  const componentReference = evalutateTypeField(fieldToGenerate.displayType, true)
+  const componentReference = evalutateTypeField(fieldToGenerate.displayType)
   const referenceType = componentReference.alias[0]
   let isDisplayedFromLogic = fieldToGenerate.isDisplayed
   let isMandatoryFromLogic = false
@@ -194,14 +194,14 @@ export function generateField({
   }
 
   // Sizes from panel and groups
-  field.sizeFieldFromType = FIELD_DISPLAY_SIZES.find(item => {
+  field.sizeFieldFromType = FIELDS_DISPLAY_SIZES.find(item => {
     return item.type === field.componentPath
   })
   if (field.sizeFieldFromType === undefined) {
     console.warn(`Field size no found: ${field.name} type: ${field.componentPath}.`)
     field.sizeFieldFromType = {
       type: field.componentPath,
-      size: DEFAULT_SIZE
+      size: DEFAULT_SIZE.size
     }
   }
 
@@ -220,7 +220,7 @@ export function generateField({
   }
 
   // hidden field type button
-  const notShowedField = FIELD_NOT_SHOWED.find(itemField => {
+  const notShowedField = FIELDS_HIDDEN.find(itemField => {
     return field.displayType === itemField.id
   })
   if (notShowedField) {
@@ -279,21 +279,6 @@ export function generateProcess({ processToGenerate, containerUuidAssociated = u
         return field
       })
     fieldDefinitionList = fieldDefinitionList.concat(fieldsRangeList)
-
-    //  Get dependent fields
-    fieldDefinitionList
-      .forEach((field, index, list) => {
-        if (field.isActive && field.parentFieldsList.length) {
-          field.parentFieldsList.forEach(parentColumnName => {
-            const parentField = list.find(itemParentField => {
-              return itemParentField.columnName === parentColumnName && parentColumnName !== field.columnName
-            })
-            if (parentField) {
-              parentField.dependentFieldsList.push(field.columnName)
-            }
-          })
-        }
-      })
   }
 
   //  Default Action
@@ -405,7 +390,7 @@ export function generateProcess({ processToGenerate, containerUuidAssociated = u
  * @param {boolean} isAllInfo
  * @return string type, assigned value to folder after evaluating the parameter
  */
-export function evalutateTypeField(displayTypeId, isAllInfo = false) {
+export function evalutateTypeField(displayTypeId, isAllInfo = true) {
   const component = REFERENCES.find(reference => displayTypeId === reference.id)
   if (isAllInfo) {
     return component
@@ -413,79 +398,6 @@ export function evalutateTypeField(displayTypeId, isAllInfo = false) {
   return component.type
 }
 
-// Default template for injected fields
-export function getFieldTemplate(attributesOverwrite) {
-  return {
-    id: 0,
-    uuid: '',
-    name: '',
-    description: '',
-    help: '',
-    columnName: '',
-    fieldGroup: {
-      name: '',
-      fieldGroupType: ''
-    },
-    displayType: 10,
-    componentPath: 'FieldButton',
-    referenceType: 'Button',
-    isFieldOnly: false,
-    isRange: false,
-    isSameLine: false,
-    sequence: 0,
-    seqNoGrid: 0,
-    isIdentifier: 0,
-    isKey: false,
-    isSelectionColumn: false,
-    isUpdateable: true,
-    formatPattern: undefined,
-    VFormat: undefined,
-    value: undefined,
-    valueTo: undefined,
-    defaultValue: undefined,
-    parsedDefaultValue: undefined,
-    defaultValueTo: undefined,
-    parsedDefaultValueTo: undefined,
-    valueMin: undefined,
-    valueMax: undefined,
-    //
-    isDisplayed: false,
-    isActive: true,
-    isMandatory: false,
-    isReadOnly: false,
-    isDisplayedFromLogic: false,
-    isReadOnlyFromLogic: false,
-    isMandatoryFromLogic: false,
-    // browser attributes
-    callout: undefined,
-    isQueryCriteria: false,
-    displayLogic: undefined,
-    mandatoryLogic: undefined,
-    readOnlyLogic: undefined,
-    parentFieldsList: undefined,
-    dependentFieldsList: [],
-    reference: {
-      tableName: '',
-      keyColumnName: '',
-      displayColumnName: '',
-      query: '',
-      parsedQuery: '',
-      directQuery: '',
-      parsedDirectQuery: '',
-      validationCode: '',
-      windowsList: []
-    },
-    contextInfo: undefined,
-    isShowedFromUser: false,
-    isFixedTableColumn: false,
-    sizeFieldFromType: {
-      type: 'Button',
-      size: DEFAULT_SIZE
-    },
-    ...attributesOverwrite
-  }
-}
-
 /**
  * [assignedGroup]
  * @param  {array} fieldList Field of List with
diff --git a/src/utils/ADempiere/lookupFactory.js b/src/utils/ADempiere/lookupFactory.js
index 2f24d305..5f0648c4 100644
--- a/src/utils/ADempiere/lookupFactory.js
+++ b/src/utils/ADempiere/lookupFactory.js
@@ -27,6 +27,7 @@
 // - tableName:
 // Date and Time:
 // - isRange
+// - vFormat
 // - valueTo
 // - valueMax
 // - valueMin
@@ -40,41 +41,308 @@
 // - fieldLength
 // Select:
 // - isSelectCreated (created from ui for multi-selection)
-// - reference.query
-// - reference.directQuery
-// - reference.tableName
+// - query
+// - directQuery
+// - tableName
 // - displayColumn
 // - defaultValue
 
-import REFERENCES, { TEXT } from '@/utils/ADempiere/references'
+import { TEXT, TABLE_DIRECT } from '@/utils/ADempiere/references'
+import { evalutateTypeField } from '@/utils/ADempiere/dictionaryUtils'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import evaluator, { getContext, getParentFields } from '@/utils/ADempiere/contextUtils'
+import FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import store from '@/store'
 
-export function createField({
+// Create a Field from UUID based on server meta-data
+export function createFieldDictionary({
   containerUuid,
-  displayType = TEXT.id,
-  columnName,
-  name,
-  isMandatory = false,
-  isReadOnly = false
+  fieldUuid,
+  columnUuid,
+  elementUuid,
+  elementColumnName,
+  tableName,
+  columnName
 }) {
-  const metadata = {
-    isCustomField: true,
-    containerUuid: containerUuid,
-    columnName: columnName,
-    name: name,
-    displayType: displayType,
-    isActive: true,
-    isMandatory: isMandatory,
-    isReadOnly: isReadOnly,
-    isDisplayed: true,
-    isDisplayedFromLogic: true,
-    isShowedFromUser: true,
-    componentPath: REFERENCES.find(reference => reference.id === displayType).type
+  let field
+  if (fieldUuid) {
+    field = store.getters.getFieldFromUuid(fieldUuid)
+  } else if (columnUuid) {
+    field = store.getters.getFieldFromColumnUuid(columnUuid)
+  } else if (elementUuid) {
+    field = store.getters.getFieldFromElementUuid(elementUuid)
+  } if (elementColumnName) {
+    field = store.getters.getFieldFromElementColumnName(elementColumnName)
+  } else if (tableName && columnName) {
+    field = store.getters.getFieldFromElementColumnName({
+      tableName,
+      columnName
+    })
   }
-  // Special cases
-  // Please if you need use a special case remember that already exists many implementations
+  if (!isEmptyValue(field)) {
+    return getFactoryFromField({ containerUuid, field })
+  }
+  return new Promise(resolve => {
+    store.dispatch('getFieldFromServer', {
+      fieldUuid,
+      columnUuid,
+      elementUuid,
+      elementColumnName,
+      tableName,
+      columnName
+    })
+      .then(response => {
+        resolve(getFactoryFromField({
+          containerUuid: containerUuid,
+          field: response
+        }))
+      }).catch(error => {
+        console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+      })
+  })
+}
+
+// Convert field getted from server to factory
+function getFactoryFromField({
+  containerUuid,
+  field
+}) {
+  return createField({
+    containerUuid: containerUuid,
+    columnName: field.columnName,
+    definition: {
+      displayType: field.displayType,
+      tableName: field.reference.tableName,
+      directQuery: field.directQuery,
+      query: field.reference.query,
+      keyColumnName: field.reference.keyColumnName,
+      validationCode: field.reference.validationCode,
+      windowsList: field.reference.windowsList,
+      id: field.id,
+      uuid: field.uuid,
+      name: field.name,
+      description: field.description,
+      help: field.help,
+      fieldGroup: field.fieldGroup,
+      isFieldOnly: field.isFieldOnly,
+      isRange: field.isRange,
+      isSameLine: field.isSameLine,
+      sequence: field.sequence,
+      seqNoGrid: field.seqNoGrid,
+      isIdentifier: field.isIdentifier,
+      isKey: field.isKey,
+      isSelectionColumn: field.isSelectionColumn,
+      isUpdateable: field.isUpdateable,
+      formatPattern: field.formatPattern,
+      vFormat: field.vFormat,
+      defaultValue: field.defaultValue,
+      defaultValueTo: field.defaultValueTo,
+      valueMin: field.valueMin,
+      valueMax: field.valueMax,
+      isActive: field.isActive,
+      isMandatory: field.isMandatory,
+      isReadOnly: field.isReadOnly,
+      isDisplayedFromLogic: field.isDisplayedFromLogic,
+      isReadOnlyFromLogic: field.isReadOnlyFromLogic,
+      isMandatoryFromLogic: field.isMandatoryFromLogic,
+      callout: field.callout,
+      isQueryCriteria: field.isQueryCriteria,
+      displayLogic: field.displayLogic,
+      mandatoryLogic: field.mandatoryLogic,
+      readOnlyLogic: field.readOnlyLogic,
+      parentFieldsList: field.parentFieldsList,
+      dependentFieldsList: field.dependentFieldsList,
+      contextInfo: field.contextInfo
+    }
+  })
+}
+
+// Create a field, it assumed that you define all behavior from source code
+export function createField({
+  parentUuid,
+  containerUuid,
+  columnName,
+  definition = {}
+}) {
+  if (!isEmptyValue(definition)) {
+    if (isEmptyValue(definition.displayType)) {
+      definition.displayType = TEXT.id
+    } else if (definition.displayType === TABLE_DIRECT.id &&
+      isEmptyValue(definition.tableName) &&
+      columnName.indexOf('_ID') > 0) {
+      definition.tableName = columnName.replace('_ID', '')
+    }
+    if (isEmptyValue(definition.isActive)) {
+      definition.isActive = true
+    }
+    if (isEmptyValue(definition.isDisplayed)) {
+      definition.isDisplayed = true
+    }
+    if (isEmptyValue(definition.isDisplayedFromLogic)) {
+      definition.isDisplayedFromLogic = true
+    }
+    if (isEmptyValue(definition.isReadOnly)) {
+      definition.isReadOnly = false
+    }
+
+    if (isEmptyValue(definition.isMandatory)) {
+      definition.isMandatory = false
+    }
+    if (isEmptyValue(definition.sequence)) {
+      definition.sequence = 0
+      if (definition.isDisplayed) {
+        definition.sequence = 10
+      }
+    }
+
+    let reference = {}
+    if (!isEmptyValue(definition.directQuery) || !isEmptyValue(definition.query)) {
+      reference = {
+        directQuery: definition.directQuery,
+        query: definition.query,
+        tableName: definition.tableName || undefined,
+        keyColumnName: definition.keyColumnName || undefined,
+        validationCode: definition.validationCode || undefined,
+        windowsList: definition.windowsList || []
+      }
+      delete definition.directQuery
+      delete definition.query
+      delete definition.tableName
+      delete definition.validationCode
+      delete definition.windowsList
+    }
+    definition.reference = reference
+  }
+  // if(isLookup()) {
+  //
+  // }
+  // // Special cases
+  // // Please if you need use a special case remember that already exists many implementations
   // switch (displayType) {
   //   case TEXT.id:
   //     break
   // }
-  return metadata
+  return getFieldTemplate({
+    ...definition,
+    isShowedFromUser: true,
+    isCustomField: true,
+    parentUuid,
+    containerUuid,
+    columnName
+  })
+}
+
+// Default template for injected fields
+export function getFieldTemplate(attributesOverwrite) {
+  let displayType = 10
+  if (!isEmptyValue(attributesOverwrite.displayType)) {
+    displayType = attributesOverwrite.displayType
+  }
+
+  const componentReference = evalutateTypeField(displayType)
+  const referenceType = componentReference.alias[0]
+
+  let sizeFieldFromType = FIELDS_DISPLAY_SIZES.find(item => {
+    return item.type === componentReference.type
+  })
+  if (isEmptyValue(sizeFieldFromType)) {
+    sizeFieldFromType = {
+      type: referenceType,
+      size: DEFAULT_SIZE.size
+    }
+  }
+
+  const fieldTemplateMetadata = {
+    id: 0,
+    uuid: '',
+    name: '',
+    description: '',
+    help: '',
+    columnName: '',
+    fieldGroup: {
+      name: '',
+      fieldGroupType: ''
+    },
+    displayType,
+    componentPath: componentReference.type,
+    referenceType,
+    isFieldOnly: false,
+    isRange: false,
+    isSameLine: false,
+    sequence: 0,
+    seqNoGrid: 0,
+    isIdentifier: 0,
+    isKey: false,
+    isSelectionColumn: false,
+    isUpdateable: true,
+    formatPattern: undefined,
+    VFormat: undefined,
+    value: undefined,
+    valueTo: undefined,
+    defaultValue: undefined,
+    parsedDefaultValue: undefined,
+    defaultValueTo: undefined,
+    parsedDefaultValueTo: undefined,
+    valueMin: undefined,
+    valueMax: undefined,
+    //
+    isDisplayed: false,
+    isActive: true,
+    isMandatory: false,
+    isReadOnly: false,
+    isDisplayedFromLogic: undefined,
+    isReadOnlyFromLogic: undefined,
+    isMandatoryFromLogic: undefined,
+    // browser attributes
+    callout: undefined,
+    isQueryCriteria: false,
+    displayLogic: undefined,
+    mandatoryLogic: undefined,
+    readOnlyLogic: undefined,
+    parentFieldsList: undefined,
+    dependentFieldsList: [],
+    reference: {
+      tableName: '',
+      keyColumnName: '',
+      query: '',
+      directQuery: '',
+      validationCode: '',
+      windowsList: []
+    },
+    contextInfo: undefined,
+    isShowedFromUser: false,
+    isFixedTableColumn: false,
+    sizeFieldFromType,
+    ...attributesOverwrite
+  }
+
+  // get parsed parent fields list
+  fieldTemplateMetadata.parentFieldsList = getParentFields(fieldTemplateMetadata)
+
+  // evaluate logics
+  const setEvaluateLogics = {
+    parentUuid: fieldTemplateMetadata.parentUuid,
+    containerUuid: fieldTemplateMetadata.containerUuid,
+    context: getContext
+  }
+  if (!isEmptyValue(fieldTemplateMetadata.displayLogic)) {
+    fieldTemplateMetadata.isDisplayedFromLogic = evaluator.evaluateLogic({
+      ...setEvaluateLogics,
+      logic: fieldTemplateMetadata.displayLogic
+    })
+  }
+  if (!isEmptyValue(fieldTemplateMetadata.mandatoryLogic)) {
+    fieldTemplateMetadata.isMandatoryFromLogic = evaluator.evaluateLogic({
+      ...setEvaluateLogics,
+      logic: fieldTemplateMetadata.mandatoryLogic
+    })
+  }
+  if (!isEmptyValue(fieldTemplateMetadata.readOnlyLogic)) {
+    fieldTemplateMetadata.isReadOnlyFromLogic = evaluator.evaluateLogic({
+      ...setEvaluateLogics,
+      logic: fieldTemplateMetadata.readOnlyLogic
+    })
+  }
+
+  return fieldTemplateMetadata
 }
diff --git a/src/utils/ADempiere/references.js b/src/utils/ADempiere/references.js
index 1ded4199..f4748e67 100644
--- a/src/utils/ADempiere/references.js
+++ b/src/utils/ADempiere/references.js
@@ -72,6 +72,7 @@ export const COLOR = {
   alias: ['Color']
 }
 
+// Cost or Prices
 export const COSTS_PLUS_PRICES = {
   id: 37,
   type: 'FieldNumber',
@@ -272,7 +273,7 @@ export const TABLE = {
 }
 
 // Table Dir
-export const TABLE_DIR = {
+export const TABLE_DIRECT = {
   id: 19,
   type: 'FieldSelect',
   support: true,
@@ -331,6 +332,19 @@ export const YES_NO = {
   alias: ['YesNo', 'Yes No', 'Yes-No']
 }
 
+// Some helper methods
+export function isLookup(displayType) {
+  return displayType === LIST.id ||
+  displayType === TABLE.id ||
+  displayType === TABLE_DIRECT.id ||
+  displayType === SEARCH.id ||
+  displayType === ACCOUNT_ELEMENT.id ||
+  displayType === LOCATION_ADDRESS.id ||
+  displayType === LOCATOR_WAREHOUSE.id ||
+  displayType === PRODUCT_ATTRIBUTE.id ||
+  displayType === RESOURCE_ASSIGNMENT.id
+}
+
 /**
  * All references
  * {number} id: Identifiert to field reference
@@ -365,80 +379,36 @@ const REFERENCES = [
   SEARCH,
   CHAR,
   TABLE,
-  TABLE_DIR,
+  TABLE_DIRECT,
   TEXT,
   TEXT_LONG,
   TIME,
   URL,
   YES_NO
 ]
-
 export default REFERENCES
 
-export const FIELD_RANGE = [
-  {
-    id: 12,
-    type: 'Amount',
-    description: 'Number with 4 decimals',
-    alias: ['Amount']
-  },
-  {
-    id: 37,
-    type: 'Costs+Prices',
-    description: 'Costs + Prices (minimum currency precision but if exists more)',
-    alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
-  },
-  {
-    id: 15,
-    type: 'Date',
-    description: 'Date mm/dd/yyyy',
-    alias: ['Date']
-  },
-  {
-    id: 16,
-    type: 'DateTime',
-    description: 'Date with time',
-    alias: ['DateTime', 'Date Time', 'Date+Time']
-  },
-  {
-    id: 11,
-    type: 'Integer',
-    description: '10 Digit numeric',
-    alias: ['Integer']
-  },
-  {
-    id: 22,
-    type: 'Number',
-    description: 'Float Number',
-    alias: ['Number']
-  },
-  {
-    id: 29,
-    type: 'Quantity',
-    description: 'Quantity data type',
-    alias: ['Quantity']
-  },
-  {
-    id: 24,
-    type: 'Time',
-    description: 'Time',
-    alias: ['Time']
-  }
+export const FIELDS_RANGE = [
+  NUMBER,
+  COSTS_PLUS_PRICES,
+  DATE,
+  DATE_PLUS_TIME,
+  INTEGER,
+  FLOAT,
+  QUANTITY,
+  TIME
 ]
-
-export const FIELD_NOT_SHOWED = [
-  {
-    id: 28,
-    type: 'Button',
-    description: 'Command Button - starts a process',
-    alias: ['Button']
-  }
+/**
+ * Fields not showed in panel's
+ */
+export const FIELDS_HIDDEN = [
+  BUTTON
 ]
 
 /**
  * Fields with this column name, changed all fields is read only
  */
-export const FIELD_READ_ONLY_FORM = [
+export const FIELDS_READ_ONLY_FORM = [
   {
     columnName: 'IsActive', // column name of field
     defaultValue: true, // default value when loading
diff --git a/src/views/ADempiere/TestView/index.vue b/src/views/ADempiere/TestView/index.vue
index c361448b..bce172a2 100644
--- a/src/views/ADempiere/TestView/index.vue
+++ b/src/views/ADempiere/TestView/index.vue
@@ -1,20 +1,35 @@
 <template>
-  <el-form>
-    <el-row
-      v-for="(metadata) in metadataList"
-      :key="metadata.columnName"
+  <div class="wrapper">
+    <el-form
+      v-if="isLoaded"
+      key="form-loaded"
+      label-position="top"
+      label-width="200px"
     >
-      <field
-        :metadata-field="metadata"
-      />
-    </el-row>
-  </el-form>
+      <el-row>
+        <field
+          v-for="(metadata) in metadataList"
+          :key="metadata.columnName"
+          :metadata-field="metadata"
+        />
+      </el-row>
+    </el-form>
+    <div
+      v-else
+      key="form-loading"
+      v-loading="!isLoaded"
+      :element-loading-text="$t('notifications.loading')"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      class="loading-panel"
+    />
+  </div>
 </template>
 
 <script>
 import Field from '@/components/ADempiere/Field'
-import { createField } from '@/utils/ADempiere/lookupFactory'
-import { URL, TEXT, NUMBER, INTEGER, TEXT_LONG } from '@/utils/ADempiere/references'
+import { createField, createFieldDictionary } from '@/utils/ADempiere/lookupFactory'
+import { URL, TEXT, NUMBER, INTEGER, TEXT_LONG, TABLE_DIRECT } from '@/utils/ADempiere/references'
 
 export default {
   name: 'TestView',
@@ -23,47 +38,173 @@ export default {
   },
   data() {
     return {
-      metadataList: []
+      metadataList: [],
+      panelMetadata: {},
+      isLoaded: false,
+      panelUuid: 'Test-View',
+      panelType: 'custom'
+    }
+  },
+  computed: {
+    getterPanel() {
+      return this.$store.getters.getPanel(this.panelUuid)
     }
   },
   created() {
-    // URL
-    this.metadataList.push(createField({
-      columnName: 'URL',
-      name: 'Web',
-      displayType: URL.id
-    }))
-    // Text
-    this.metadataList.push(createField({
-      columnName: 'Name',
-      name: 'Only Name',
-      displayType: TEXT.id
-    }))
-    // Amount
-    this.metadataList.push(createField({
-      columnName: 'Amount',
-      name: 'Amount for it',
-      displayType: NUMBER.id
-    }))
-    // Integer
-    this.metadataList.push(createField({
-      columnName: 'SeqNo',
-      name: 'Sequence for record',
-      displayType: INTEGER.id
-    }))
-    // Text Long
-    this.metadataList.push(createField({
-      columnName: 'Description',
-      name: 'Only Description',
-      displayType: TEXT_LONG.id
-    }))
-    // Table direct
-    // To be define
-    // this.metadataList.push(createField({
-    //   columnName: 'C_Country',
-    //   name: 'Country',
-    //   displayType: TABLE_DIR.id
-    // }))
+    this.getPanel()
+  },
+  methods: {
+    getPanel() {
+      const panel = this.getterPanel
+      if (panel) {
+        this.metadataList = panel.fieldList
+        this.isLoaded = true
+      } else {
+        this.setFieldsList()
+        this.$store.dispatch('addPanel', {
+          name: 'Test View',
+          uuid: this.panelUuid,
+          panelType: this.panelType,
+          fieldList: this.metadataList
+        })
+          .then(responsePanel => {
+            this.metadataList = responsePanel.fieldList
+          })
+          .finally(() => {
+            this.isLoaded = true
+          })
+      }
+    },
+    setFieldsList() {
+      const fieldsList = []
+
+      let sequence = 10
+      // URL
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'URL',
+        definition: {
+          name: 'Web',
+          displayType: URL.id,
+          panelType: this.panelType,
+          sequence
+        }
+      }))
+      // From Field UUID
+      createFieldDictionary({
+        containerUuid: this.panelUuid,
+        fieldUuid: '8ceabe8a-fb40-11e8-a479-7a0060f0aa01'
+      })
+        .then(metadata => {
+          fieldsList.push(metadata)
+        }).catch(error => {
+          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+        })
+      // From Column UUID
+      createFieldDictionary({
+        containerUuid: this.panelUuid,
+        columnUuid: '8b4bbb7e-fb40-11e8-a479-7a0060f0aa01'
+      })
+        .then(metadata => {
+          fieldsList.push(metadata)
+        }).catch(error => {
+          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+        })
+      // From Element Column Name
+      createFieldDictionary({
+        containerUuid: this.panelUuid,
+        elementColumnName: 'M_RMA_ID'
+      })
+        .then(metadata => {
+          fieldsList.push(metadata)
+        }).catch(error => {
+          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+        })
+      // From Table and Column Name
+      createFieldDictionary({
+        containerUuid: this.panelUuid,
+        tableName: 'C_BPartner',
+        columnName: 'PaymentRule'
+      })
+        .then(metadata => {
+          fieldsList.push(metadata)
+        }).catch(error => {
+          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+        })
+      // Table direct
+      // To be define
+      sequence = sequence + 10
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'C_Currency_ID',
+        definition: {
+          name: 'Currency',
+          displayType: TABLE_DIRECT.id,
+          panelType: this.panelType,
+          keyColumn: 'C_Currency.C_Currency_ID',
+          directQuery: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency WHERE C_Currency.C_Currency_ID=?',
+          query: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency ORDER BY 3',
+          sequence
+        }
+      }))
+
+      sequence = sequence + 10
+      // Text
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'Name',
+        definition: {
+          name: 'Only Name',
+          displayType: TEXT.id,
+          panelType: this.panelType,
+          displayLogic: '@URL@!""',
+          sequence
+        }
+      }))
+
+      sequence = sequence + 10
+      // Amount
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'Amount',
+        definition: {
+          name: 'Amount for it',
+          displayType: NUMBER.id,
+          panelType: this.panelType,
+          readOnlyLogic: '@C_Currency_ID@<>""',
+          sequence
+        }
+      }))
+
+      sequence = sequence + 10
+      // Integer
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'SeqNo',
+        definition: {
+          name: 'Sequence for record',
+          displayType: INTEGER.id,
+          panelType: this.panelType,
+          mandatoryLogic: '@URL@!""',
+          sequence
+        }
+      }))
+
+      sequence = sequence + 10
+      // Text Long
+      fieldsList.push(createField({
+        containerUuid: this.panelUuid,
+        columnName: 'Description',
+        definition: {
+          name: 'Only Description',
+          displayType: TEXT_LONG.id,
+          panelType: this.panelType,
+          sequence
+        }
+      }))
+
+      this.metadataList = fieldsList
+    }
   }
 }
 </script>