Feature/tets view (#445)

* feat: Add test view to components field.

* date component render.

* Change references.js location to util folder

* Add LookupFactory util loader to be improve:
- Number fields
- Table/Search/TableDir: Missing reference values
- All: field list is missing for it, maybe can be improve with 
IsCustomField attribute

* Change reference name

Co-authored-by: Edwin Betancourt <EdwinBetanc0urt@hotmail.com>

package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@adempiere/grpc-access-client": "^1.1.8",
-    "@adempiere/grpc-data-client": "^2.1.6",
+    "@adempiere/grpc-data-client": "^2.2.1",
     "@adempiere/grpc-dictionary-client": "^1.3.5",
     "@adempiere/grpc-enrollment-client": "^1.0.7",
     "autoprefixer": "^9.5.1",

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 '@/components/ADempiere/Field/references'
+import { FIELDS_DECIMALS, FIELDS_QUANTITY, FIELD_READ_ONLY_FORM } from '@/utils/ADempiere/references'
 import { fieldIsDisplayed } from '@/utils/ADempiere'
 import evaluator from '@/utils/ADempiere/evaluator'
 
@@ -625,13 +625,13 @@ export default {
           cell = cell.getTime()
         }
         // replace number timestamp value for date
-        return formatDate(cell, field.referenceType)
+        return formatDate(cell, field.displayType)
       } else if (field.componentPath === 'FieldNumber') {
         if (this.isEmptyValue(row[field.columnName])) {
           return undefined
         }
         return this.formatNumber({
-          referenceType: field.referenceType,
+          displayType: field.displayType,
           number: row[field.columnName]
         })
       } else if (field.componentPath === 'FieldSelect' && this.isEmptyValue(row['DisplayColumn_' + field.columnName]) && row[field.columnName] === 0) {
@@ -969,7 +969,7 @@ export default {
           return
         }
         const field = this.fieldsList.find(field => field.columnName === columnItem.property)
-        if (!FIELDS_QUANTITY.includes(field.referenceType)) {
+        if (!FIELDS_QUANTITY.includes(field.displayType)) {
           sums[index] = ''
           return
         }
@@ -985,7 +985,7 @@ export default {
             return prev
           }, 0)
           sums[index] = this.formatNumber({
-            referenceType: field.referenceType,
+            displayType: field.displayType,
             number: total
           })
         }
@@ -993,10 +993,10 @@ export default {
 
       return sums
     },
-    formatNumber({ referenceType, number }) {
+    formatNumber({ displayType, number }) {
       let fixed = 0
       // Amount, Costs+Prices, Number
-      if (FIELDS_DECIMALS.includes(referenceType)) {
+      if (FIELDS_DECIMALS.includes(displayType)) {
         fixed = 2
       }
       return new Intl.NumberFormat().format(number.toFixed(fixed))

src/components/ADempiere/DataTable/menu/menuTableMixin.js

@@ -1,7 +1,7 @@
 import { supportedTypes, exportFileFromJson, exportFileZip } from '@/utils/ADempiere/exportUtil'
 import { showNotification } from '@/utils/ADempiere/notification'
 import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils'
-import { FIELDS_QUANTITY } from '@/components/ADempiere/Field/references'
+import { FIELDS_QUANTITY } from '@/utils/ADempiere/references'
 
 export const menuTableMixin = {
   props: {
@@ -119,7 +119,7 @@ export const menuTableMixin = {
     },
     isFieldsQuantity() {
       const fieldsQuantity = this.getterFieldList.filter(fieldItem => {
-        return FIELDS_QUANTITY.includes(fieldItem.referenceType)
+        return FIELDS_QUANTITY.includes(fieldItem.displayType)
       }).length
       return !fieldsQuantity
     },

src/components/ADempiere/Field/FieldDate.vue

@@ -115,12 +115,14 @@ export default {
      * Parse the date format to be compatible with element-ui
      */
     formatView() {
-      let format = this.metadata.VFormat
+      let format = ''
+      if (!this.isEmptyValue(this.metadata.VFormat)) {
+        format = this.metadata.VFormat
           .replace(/[Y]/gi, 'y')
           .replace(/[m]/gi, 'M')
           .replace(/[D]/gi, 'd')
-
+      }
-      if (format === '') {
+      if (this.isEmptyValue(format)) {
         format = 'yyyy-MM-dd'
       }
       if (this.typePicker.replace('range', '') === 'datetime') {

src/components/ADempiere/Field/FieldNumber.vue

@@ -11,7 +11,7 @@
       :disabled="isDisabled"
       :precision="precision"
       controls-position="right"
-      :class="'display-type-' + cssClass"
+      :class="'display-type-amount'"
       @change="preHandleChange"
       @shortkey.native="changeValue"
       @blur="changeValue"
@@ -22,7 +22,7 @@
 
 <script>
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
-import { FIELDS_DECIMALS } from '@/components/ADempiere/Field/references'
+import { FIELDS_DECIMALS } from '@/utils/ADempiere/references'
 
 export default {
   name: 'FieldNumber',
@@ -56,14 +56,9 @@ export default {
       }
       return Number(this.metadata.valueMin)
     },
-    cssClass() {
-      return this.metadata.referenceType
-        .split(/(?=[A-Z])/)
-        .join('-').toLowerCase()
-    },
     precision() {
       // Amount, Costs+Prices, Number
-      if (FIELDS_DECIMALS.includes(this.metadata.referenceType)) {
+      if (FIELDS_DECIMALS.includes(this.metadata.displayType)) {
         return 2
       }
       return undefined

src/components/ADempiere/Field/FieldYesNo.vue

@@ -14,7 +14,7 @@
 
 <script>
 import { fieldIsDisplayed } from '@/utils/ADempiere'
-import { FIELD_READ_ONLY_FORM } from '@/components/ADempiere/Field/references'
+import { FIELD_READ_ONLY_FORM } from '@/utils/ADempiere/references'
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
 
 export default {

src/components/ADempiere/Field/index.vue

@@ -74,8 +74,8 @@ 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 } from '@/components/ADempiere/Field/fieldSize'
+import { DEFAULT_SIZE, FIELD_DISPLAY_SIZES } from '@/components/ADempiere/Field/fieldSize'
-import { fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
+import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
 import { showMessage } from '@/utils/ADempiere/notification'
 
 /**
@@ -221,7 +221,22 @@ export default {
         return DEFAULT_SIZE
       }
 
-      const sizeField = this.field.sizeFieldFromType.size
+      let sizeField = {}
+      if (this.field.sizeFieldFromType && this.field.sizeFieldFromType.size) {
+        // set field size property
+        sizeField = this.field.sizeFieldFromType.size
+      }
+      if (this.isEmptyValue(sizeField)) {
+        // Sizes from panel and groups
+        sizeField = FIELD_DISPLAY_SIZES.find(item => {
+          return item.type === this.field.componentPath
+        })
+      }
+      if (this.isEmptyValue(sizeField)) {
+        // set default size
+        sizeField = DEFAULT_SIZE
+      }
+
       const newSizes = {}
 
       // in table set max width, used by browser result and tab children of window
@@ -289,10 +304,10 @@ export default {
     },
     isContextInfo() {
       if (!this.isAdvancedQuery) {
-        return (this.field.contextInfo && this.field.contextInfo.isActive) || this.field.reference.windowsList.length
-      }
         return false
       }
+      return (this.field.contextInfo && this.field.contextInfo.isActive) || (this.field.reference && this.field.reference.windowsList.length)
+    }
   },
   watch: {
     metadataField(value) {
@@ -302,6 +317,24 @@ export default {
   created() {
     // assined field with prop
     this.field = this.metadataField
+    if (this.field.isCustomField && !this.field.componentPath) {
+      let componentReference = evalutateTypeField(this.field.displayType, true)
+      if (this.isEmptyValue(componentReference)) {
+        componentReference = {
+          type: 'FieldText',
+          alias: ['Text']
+        }
+      }
+      this.field = {
+        ...this.metadataField,
+        isActive: true,
+        isDisplayed: true,
+        isDisplayedFromLogic: true,
+        isShowedFromUser: true,
+        //
+        componentPath: componentReference.type
+      }
+    }
   },
   methods: {
     showMessage,

src/components/ADempiere/Field/references.js

@@ -1,363 +0,0 @@
-
-/**
- * All references
- * {number} id: Identifiert to field reference
- * {string|array} valueType: to convert and send server with gRPC
- * {boolean} isSupported: Indicate if field is suported
- */
-const REFERENCES = [
-  {
-    id: 25,
-    type: 'FieldText',
-    support: false,
-    description: 'Account Element',
-    valueType: 'INTEGER',
-    alias: ['Account']
-  },
-  {
-    id: 12,
-    type: 'FieldNumber',
-    support: true,
-    description: 'Number with 4 decimals',
-    valueType: 'DECIMAL',
-    alias: ['Amount']
-  },
-  {
-    id: 33,
-    type: 'FieldText',
-    support: false,
-    description: 'Resource Assignment',
-    valueType: 'INTEGER',
-    alias: ['Assignment']
-  },
-  {
-    id: 23,
-    type: 'FieldBinary',
-    support: true,
-    description: 'Binary Data',
-    valueType: 'INTEGER',
-    alias: ['Binary']
-  },
-  {
-    // this component is hidden
-    id: 28,
-    type: 'FieldButton',
-    support: true,
-    description: 'Command Button - starts a process',
-    valueType: 'STRING',
-    alias: ['Button']
-  },
-  {
-    id: 53370,
-    type: 'FieldText',
-    support: false,
-    description: 'Chart',
-    valueType: 'INTEGER',
-    alias: ['Chart']
-  },
-  {
-    id: 27,
-    type: 'FieldText',
-    support: false,
-    description: 'Color element',
-    valueType: 'INTEGER',
-    alias: ['Color']
-  },
-  {
-    id: 37,
-    type: 'FieldNumber',
-    support: true,
-    description: 'Costs + Prices (minimum currency precision but if exists more)',
-    valueType: 'DECIMAL',
-    alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
-  },
-  {
-    id: 15,
-    type: 'FieldDate',
-    support: true,
-    description: 'Date mm/dd/yyyy',
-    valueType: 'DATE',
-    alias: ['Date']
-  },
-  {
-    id: 16,
-    type: 'FieldDate',
-    support: true,
-    description: 'Date with time',
-    valueType: 'DATE',
-    alias: ['DateTime', 'Date Time', 'Date+Time']
-  },
-  {
-    id: 39,
-    type: 'FieldText',
-    support: true,
-    description: 'Local File',
-    valueType: 'STRING',
-    alias: ['FileName', 'File Name']
-  },
-  {
-    id: 38,
-    type: 'FieldText',
-    support: true,
-    description: 'Local File Path',
-    valueType: 'STRING',
-    alias: ['FilePath', 'File Path']
-  },
-  {
-    id: 53670,
-    type: 'FieldText',
-    support: true,
-    description: 'Local File Path or Name',
-    valueType: 'STRING',
-    alias: ['FilePathOrName', 'File Path Or Name']
-  },
-  {
-    id: 13,
-    type: 'FieldNumber',
-    support: true,
-    description: '10 Digit Identifier',
-    valueType: 'INTEGER',
-    alias: ['ID']
-  },
-  {
-    id: 32,
-    type: 'FieldImage',
-    support: true,
-    description: 'Binary Image Data',
-    valueType: 'INTEGER',
-    alias: ['Image']
-  },
-  {
-    id: 11,
-    type: 'FieldNumber',
-    support: true,
-    description: '10 Digit numeric',
-    valueType: 'INTEGER',
-    alias: ['Integer']
-  },
-  {
-    id: 17,
-    type: 'FieldSelect',
-    support: true,
-    description: 'Reference List',
-    valueType: 'STRING',
-    alias: ['List']
-  },
-  {
-    id: 21,
-    type: 'FieldText',
-    support: false,
-    description: 'Location/Address',
-    valueType: 'INTEGER',
-    alias: ['Location', 'Location (Address)', 'Location/Address']
-  },
-  {
-    id: 31,
-    type: 'FieldSelect',
-    support: true,
-    description: 'Warehouse Locator Data type',
-    valueType: 'INTEGER',
-    alias: ['Locator', 'Locator (WH)', 'Locator/WH']
-  },
-  {
-    id: 34,
-    type: 'FieldTextLong',
-    support: true,
-    valueType: 'STRING',
-    description: 'Reference List',
-    alias: ['Memo']
-  },
-  {
-    id: 22,
-    type: 'FieldNumber',
-    support: true,
-    description: 'Float Number',
-    valueType: 'DECIMAL',
-    alias: ['Number']
-  },
-  {
-    id: 42,
-    type: 'FieldText',
-    support: true,
-    description: 'Printer Name',
-    valueType: 'STRING',
-    alias: ['PrinterName', 'Printer Name']
-  },
-  {
-    id: 35,
-    type: 'FieldText',
-    support: false,
-    description: 'Product Attribute',
-    valueType: 'INTEGER',
-    alias: ['ProductAttribute', 'Product Attribute']
-  },
-  {
-    id: 29,
-    type: 'FieldNumber',
-    support: true,
-    description: 'Quantity data type',
-    valueType: 'DECIMAL',
-    alias: ['Quantity']
-  },
-  {
-    id: 30,
-    type: 'FieldSelect',
-    support: true,
-    description: 'Search Field',
-    valueType: 'INTEGER',
-    alias: ['Search']
-  },
-  {
-    id: 10,
-    type: 'FieldText',
-    support: true,
-    description: 'Character String',
-    valueType: 'STRING',
-    alias: ['String']
-  },
-  {
-    id: 18,
-    type: 'FieldSelect',
-    support: true,
-    description: 'Table List',
-    valueType: 'INTEGER',
-    alias: ['Table']
-  },
-  {
-    id: 19,
-    type: 'FieldSelect',
-    support: true,
-    description: 'Direct Table Access',
-    valueType: 'INTEGER',
-    alias: ['TableDirect', 'Table Direct']
-  },
-  {
-    id: 14,
-    type: 'FieldText',
-    support: true,
-    description: 'Character String up to 2000 characters',
-    valueType: 'STRING',
-    alias: ['Text']
-  },
-  {
-    id: 36,
-    type: 'FieldTextLong',
-    support: true,
-    description: 'Text (Long) - Text > 2000 characters',
-    valueType: 'STRING',
-    alias: ['TextLong', 'Text Long']
-  },
-  {
-    id: 24,
-    type: 'FieldTime',
-    support: true,
-    description: 'Time',
-    valueType: 'DATE',
-    alias: ['Time']
-  },
-  {
-    id: 40,
-    type: 'FieldText',
-    support: true,
-    description: 'URL',
-    valueType: 'STRING',
-    alias: ['URL', 'Url']
-  },
-  {
-    id: 20,
-    type: 'FieldYesNo',
-    support: true,
-    description: 'CheckBox',
-    valueType: 'BOOLEAN',
-    alias: ['YesNo', 'Yes No', '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 FIELD_NOT_SHOWED = [
-  {
-    id: 28,
-    type: 'Button',
-    description: 'Command Button - starts a process',
-    alias: ['Button']
-  }
-]
-
-/**
- * Fields with this column name, changed all fields is read only
- */
-export const FIELD_READ_ONLY_FORM = [
-  {
-    columnName: 'IsActive', // column name of field
-    defaultValue: true, // default value when loading
-    valueIsReadOnlyForm: false, // value that activates read-only form
-    isChangedAllForm: false // change the entire form to read only including this field
-  },
-  {
-    columnName: 'Processed',
-    defaultValue: false,
-    valueIsReadOnlyForm: true,
-    isChangedAllForm: true
-  },
-  {
-    columnName: 'Processing',
-    defaultValue: true,
-    valueIsReadOnlyForm: false,
-    isChangedAllForm: true
-  }
-]
-
-export const FIELDS_DECIMALS = ['Amount', 'Costs+Prices', 'Number', 'Quantity']
-
-export const FIELDS_QUANTITY = ['Amount', 'Costs+Prices', 'Integer', 'Number', 'Quantity']

src/router/modules/ADempiere/menu.js

@@ -51,6 +51,23 @@ const staticRoutes = [
         }
       }
     ]
+  },
+  {
+    path: '/test-view',
+    component: Layout,
+    hidden: true,
+    redirect: '/test-view/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/ADempiere/TestView'),
+        name: 'Test View',
+        meta: {
+          title: 'TestView',
+          isIndex: true
+        }
+      }
+    ]
   }
 ]
 

src/utils/ADempiere/dictionaryUtils.js

@@ -1,7 +1,7 @@
 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 '@/components/ADempiere/Field/references'
+import REFERENCES, { FIELD_NOT_SHOWED } from '@/utils/ADempiere/references'
 import { FIELD_DISPLAY_SIZES, DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
 import language from '@/lang'
 

src/utils/ADempiere/lookupFactory.js

@@ -0,0 +1,80 @@
+// A simple class for make easy lookup for dynamic forms from ADempiere Meta-Data
+// note that it can be used for create meta-data for lookups
+// Field component: this component is created dinamically from meta-data and can be used for
+// many form incluyed Window/Tab/Fields, Process and Smart Browsers
+// The aproach for this file is allows define field type manual and allows get metadata from server
+// Exists many attributes fro handle behavior of field, the follow is a example:
+// General:
+// - columnName:
+// - name:
+// - help
+// - inTable:
+// - isAdvancedQuery:
+// - isMandatory:
+// - isMandatoryFromLogic
+// - isReadOnly:
+// - isDisplayed:
+// - isShowedFromUser
+// - isActive:
+// - isSelectCreated:
+// - isAlwaysUpdateable:
+// - parentUuid:
+// - containerUuid:
+// - value:
+// Lookup:
+// - query:
+// - directQuery:
+// - tableName:
+// Date and Time:
+// - isRange
+// - valueTo
+// - valueMax
+// - valueMin
+// Number:
+// - isRange
+// - valueTo
+// - valueMax
+// - valueMin
+// Text:
+// - isEncrypted
+// - fieldLength
+// Select:
+// - isSelectCreated (created from ui for multi-selection)
+// - reference.query
+// - reference.directQuery
+// - reference.tableName
+// - displayColumn
+// - defaultValue
+
+import REFERENCES, { TEXT } from '@/utils/ADempiere/references'
+
+export function createField({
+  containerUuid,
+  displayType = TEXT.id,
+  columnName,
+  name,
+  isMandatory = false,
+  isReadOnly = false
+}) {
+  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
+  }
+  // Special cases
+  // Please if you need use a special case remember that already exists many implementations
+  // switch (displayType) {
+  //   case TEXT.id:
+  //     break
+  // }
+  return metadata
+}

src/utils/ADempiere/references.js

@@ -0,0 +1,464 @@
+// This file is used for set a static values for references of fields,
+// currently exists for ADempiere metadata distints display types and are represented for follow:
+
+// Account Element
+export const ACCOUNT_ELEMENT = {
+  id: 25,
+  type: 'FieldText',
+  support: false,
+  description: 'Account Element',
+  valueType: 'INTEGER',
+  alias: ['Account']
+}
+
+// Number
+export const NUMBER = {
+  id: 12,
+  type: 'FieldNumber',
+  support: true,
+  description: 'Number with 4 decimals',
+  valueType: 'DECIMAL',
+  alias: ['Amount']
+}
+
+// Resource Assignment
+export const RESOURCE_ASSIGNMENT = {
+  id: 33,
+  type: 'FieldText',
+  support: false,
+  description: 'Resource Assignment',
+  valueType: 'INTEGER',
+  alias: ['Assignment']
+}
+
+// Binary Data
+export const BINARY_DATA = {
+  id: 23,
+  type: 'FieldBinary',
+  description: 'Binary Data',
+  support: true,
+  valueType: 'INTEGER',
+  alias: ['Binary']
+}
+
+// Button
+export const BUTTON = {
+  // this component is hidden
+  id: 28,
+  type: 'FieldButton',
+  description: 'Command Button - starts a process',
+  support: true,
+  valueType: 'STRING',
+  alias: ['Button']
+}
+
+// Chart
+export const CHART = {
+  id: 53370,
+  type: 'FieldText',
+  support: false,
+  description: 'Chart',
+  valueType: 'STRING',
+  alias: ['Chart']
+}
+
+// Color
+export const COLOR = {
+  id: 27,
+  type: 'FieldText',
+  support: false,
+  description: 'Color element',
+  valueType: 'INTEGER',
+  alias: ['Color']
+}
+
+export const COSTS_PLUS_PRICES = {
+  id: 37,
+  type: 'FieldNumber',
+  support: true,
+  description: 'Costs + Prices (minimum currency precision but if exists more)',
+  valueType: 'DECIMAL',
+  alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
+}
+
+// Date
+export const DATE = {
+  id: 15,
+  type: 'FieldDate',
+  support: true,
+  description: 'Date mm/dd/yyyy',
+  valueType: 'DATE',
+  alias: ['Date']
+}
+
+// Date with time
+export const DATE_PLUS_TIME = {
+  id: 16,
+  type: 'FieldDate',
+  support: true,
+  description: 'Date with time',
+  valueType: 'DATE',
+  alias: ['DateTime', 'Date Time', 'Date+Time']
+}
+
+// Local File
+export const LOCAL_FILE = {
+  id: 39,
+  type: 'FieldText',
+  support: true,
+  description: 'Local File',
+  valueType: 'STRING',
+  alias: ['FileName', 'File Name']
+}
+
+// Local File Path
+export const LOCAL_FILE_PATH = {
+  id: 38,
+  type: 'FieldText',
+  support: true,
+  description: 'Local File Path',
+  valueType: 'STRING',
+  alias: ['FilePath', 'File Path']
+}
+
+// Local File Path or Name
+export const LOCAL_FILE_PATH_OR_NAME = {
+  id: 53670,
+  type: 'FieldText',
+  support: true,
+  description: 'Local File Path or Name',
+  valueType: 'STRING',
+  alias: ['FilePathOrName', 'File Path Or Name']
+}
+
+// ID
+export const ID = {
+  id: 13,
+  type: 'FieldNumber',
+  support: true,
+  description: '10 Digit Identifier',
+  valueType: 'INTEGER',
+  alias: ['ID']
+}
+
+// Binary Image Data
+export const BINARY = {
+  id: 32,
+  type: 'FieldImage',
+  support: true,
+  description: 'Binary Image Data',
+  valueType: 'INTEGER',
+  alias: ['Image']
+}
+
+// Integer
+export const INTEGER = {
+  id: 11,
+  type: 'FieldNumber',
+  support: true,
+  description: '10 Digit numeric',
+  valueType: 'INTEGER',
+  alias: ['Integer']
+}
+
+// Reference List
+export const LIST = {
+  id: 17,
+  type: 'FieldSelect',
+  support: true,
+  description: 'Reference List',
+  valueType: 'STRING',
+  alias: ['List']
+}
+
+// Location Address
+export const LOCATION_ADDRESS = {
+  id: 21,
+  type: 'FieldText',
+  support: false,
+  description: 'Location/Address',
+  valueType: 'INTEGER',
+  alias: ['Location', 'Location (Address)', 'Location/Address']
+}
+
+// Warehouse Locator Data type
+export const LOCATOR_WAREHOUSE = {
+  id: 31,
+  type: 'FieldSelect',
+  support: true,
+  description: 'Warehouse Locator Data type',
+  valueType: 'INTEGER',
+  alias: ['Locator', 'Locator (WH)', 'Locator/WH']
+}
+
+// Memo
+export const MEMO = {
+  id: 34,
+  type: 'FieldTextLong',
+  support: true,
+  valueType: 'STRING',
+  description: 'Reference List',
+  alias: ['Memo']
+}
+
+// Float Number
+export const FLOAT = {
+  id: 22,
+  type: 'FieldNumber',
+  support: true,
+  description: 'Float Number',
+  valueType: 'DECIMAL',
+  alias: ['Number']
+}
+
+// Printer Name
+export const PRINTER_NAME = {
+  id: 42,
+  type: 'FieldText',
+  support: true,
+  description: 'Printer Name',
+  valueType: 'STRING',
+  alias: ['PrinterName', 'Printer Name']
+}
+
+// Product Attribute
+export const PRODUCT_ATTRIBUTE = {
+  id: 35,
+  type: 'FieldText',
+  support: false,
+  description: 'Product Attribute',
+  valueType: 'INTEGER',
+  alias: ['ProductAttribute', 'Product Attribute']
+}
+
+// Quantity
+export const QUANTITY = {
+  id: 29,
+  type: 'FieldNumber',
+  support: true,
+  description: 'Quantity data type',
+  valueType: 'DECIMAL',
+  alias: ['Quantity']
+}
+
+// Search
+export const SEARCH = {
+  id: 30,
+  type: 'FieldSelect',
+  support: true,
+  description: 'Search Field',
+  valueType: 'INTEGER',
+  alias: ['Search']
+}
+
+// Char
+export const CHAR = {
+  id: 10,
+  type: 'FieldText',
+  support: true,
+  description: 'Character String',
+  valueType: 'STRING',
+  alias: ['String']
+}
+
+// Table List
+export const TABLE = {
+  id: 18,
+  type: 'FieldSelect',
+  support: true,
+  description: 'Table List',
+  valueType: 'INTEGER',
+  alias: ['Table']
+}
+
+// Table Dir
+export const TABLE_DIR = {
+  id: 19,
+  type: 'FieldSelect',
+  support: true,
+  description: 'Direct Table Access',
+  valueType: 'INTEGER',
+  alias: ['TableDirect', 'Table Direct']
+}
+
+// Text
+export const TEXT = {
+  id: 14,
+  type: 'FieldText',
+  support: true,
+  description: 'Character String up to 2000 characters',
+  valueType: 'STRING',
+  alias: ['Text']
+}
+
+// Text Long
+export const TEXT_LONG = {
+  id: 36,
+  type: 'FieldTextLong',
+  support: true,
+  description: 'Text (Long) - Text > 2000 characters',
+  valueType: 'STRING',
+  alias: ['TextLong', 'Text Long']
+}
+
+// Time
+export const TIME = {
+  id: 24,
+  type: 'FieldTime',
+  support: true,
+  description: 'Time',
+  valueType: 'DATE',
+  alias: ['Time']
+}
+
+// URL
+export const URL = {
+  id: 40,
+  type: 'FieldText',
+  support: true,
+  description: 'URL',
+  valueType: 'STRING',
+  alias: ['URL', 'Url']
+}
+
+// Yes No
+export const YES_NO = {
+  id: 20,
+  type: 'FieldYesNo',
+  support: true,
+  description: 'CheckBox',
+  valueType: 'BOOLEAN',
+  alias: ['YesNo', 'Yes No', 'Yes-No']
+}
+
+/**
+ * All references
+ * {number} id: Identifiert to field reference
+ * {string|array} valueType: to convert and send server with gRPC
+ * {boolean} isSupported: Indicate if field is suported
+ */
+const REFERENCES = [
+  ACCOUNT_ELEMENT,
+  NUMBER,
+  RESOURCE_ASSIGNMENT,
+  BINARY_DATA,
+  BUTTON,
+  CHART,
+  COLOR,
+  COSTS_PLUS_PRICES,
+  DATE,
+  DATE_PLUS_TIME,
+  LOCAL_FILE,
+  LOCAL_FILE_PATH,
+  LOCAL_FILE_PATH_OR_NAME,
+  ID,
+  BINARY,
+  INTEGER,
+  LIST,
+  LOCATION_ADDRESS,
+  LOCATOR_WAREHOUSE,
+  MEMO,
+  FLOAT,
+  PRINTER_NAME,
+  PRODUCT_ATTRIBUTE,
+  QUANTITY,
+  SEARCH,
+  CHAR,
+  TABLE,
+  TABLE_DIR,
+  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 FIELD_NOT_SHOWED = [
+  {
+    id: 28,
+    type: 'Button',
+    description: 'Command Button - starts a process',
+    alias: ['Button']
+  }
+]
+
+/**
+ * Fields with this column name, changed all fields is read only
+ */
+export const FIELD_READ_ONLY_FORM = [
+  {
+    columnName: 'IsActive', // column name of field
+    defaultValue: true, // default value when loading
+    valueIsReadOnlyForm: false, // value that activates read-only form
+    isChangedAllForm: false // change the entire form to read only including this field
+  },
+  {
+    columnName: 'Processed',
+    defaultValue: false,
+    valueIsReadOnlyForm: true,
+    isChangedAllForm: true
+  },
+  {
+    columnName: 'Processing',
+    defaultValue: true,
+    valueIsReadOnlyForm: false,
+    isChangedAllForm: true
+  }
+]
+
+export const FIELDS_DECIMALS = [NUMBER.id, QUANTITY.id, COSTS_PLUS_PRICES.id]
+
+export const FIELDS_QUANTITY = [NUMBER.id, QUANTITY.id, INTEGER.id, COSTS_PLUS_PRICES.id]

src/views/ADempiere/TestView/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-form>
+    <el-row
+      v-for="(metadata) in metadataList"
+      :key="metadata.columnName"
+    >
+      <field
+        :metadata-field="metadata"
+      />
+    </el-row>
+  </el-form>
+</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'
+
+export default {
+  name: 'TestView',
+  components: {
+    Field
+  },
+  data() {
+    return {
+      metadataList: []
+    }
+  },
+  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
+    // }))
+  }
+}
+</script>