feat: Change size component implementation (#464)

* feat: Change size component implementation * fix operators list. * set size values in references. * fix: Operator's comparison list. * Set id with constants references.
2025-08-10 20:39:48 +08:00 · 2020-04-29 10:32:15 -04:00 · 2020-04-29 10:32:15 -04:00 · 6e9c48ad51
commit 6e9c48ad51
parent 840692cfb1
16 changed files with 584 additions and 477 deletions
--- a/src/components/ADempiere/Field/FieldDate.vue
+++ b/src/components/ADempiere/Field/FieldDate.vue
@ -20,6 +20,7 @@

 <script>
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+import { DATE_PLUS_TIME } from '@/utils/ADempiere/references'

 export default {
  name: 'FieldDate',
@ -103,7 +104,8 @@ export default {
        picker += 's'
        return picker
      }
-      if (this.metadata.displayType === 16) {
+      // Date + Time reference (16)
+      if (this.metadata.displayType === DATE_PLUS_TIME.id) {
        picker += 'time'
      }
      if (this.metadata.isRange && !this.metadata.inTable) {
--- a/src/components/ADempiere/Field/FieldText.vue
+++ b/src/components/ADempiere/Field/FieldText.vue
@ -18,6 +18,7 @@

 <script>
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+import { TEXT } from '@/utils/ADempiere/references'

 export default {
  name: 'FieldText',
@ -49,7 +50,8 @@ export default {
    typeTextBox() {
      // String, Url, FileName...
      let typeInput = 'text'
-      if (this.metadata.referenceType === 'Text') {
+      // Display Type 'Text' (14)
+      if (this.metadata.displayType === TEXT.id) {
        typeInput = 'textarea'
      }
      if (this.metadata.isEncrypted) {
--- a/src/components/ADempiere/Field/fieldSize.js
+++ b/src/components/ADempiere/Field/fieldSize.js
@ -1,146 +0,0 @@
-
-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: 'FieldDefault',
-  size: {
-    xs: 6,
-    sm: 8,
-    md: 2,
-    lg: 6,
-    xl: 6
-  }
-}
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@ -19,7 +19,7 @@
    >
      <template slot="label">
        <operator-comparison
-          v-if="isAdvancedQuery"
+          v-if="field.isComparisonField"
          key="is-field-operator-comparison"
          :field-attributes="fieldAttributes"
          :field-value="field.value"
@ -75,7 +75,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 FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import { DEFAULT_SIZE } from '@/utils/ADempiere/references'
 import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
 import { showMessage } from '@/utils/ADempiere/notification'

@ -222,23 +222,17 @@ export default {
    },
    sizeFieldResponsive() {
      if (!this.isDisplayed) {
-        return DEFAULT_SIZE.size
+        return DEFAULT_SIZE
      }

      let sizeField = {}
-      if (this.field.sizeFieldFromType && this.field.sizeFieldFromType.size) {
+      if (this.field.size) {
        // set field size property
-        sizeField = this.field.sizeFieldFromType.size
-      }
-      if (this.isEmptyValue(sizeField)) {
-        // Sizes from panel and groups
-        sizeField = FIELDS_DISPLAY_SIZES.find(item => {
-          return item.type === this.field.componentPath
-        })
+        sizeField = this.field.size
      }
      if (this.isEmptyValue(sizeField)) {
        // set default size
-        sizeField = DEFAULT_SIZE.size
+        sizeField = DEFAULT_SIZE
      }

      const newSizes = {}
@ -325,8 +319,7 @@ export default {
      let componentReference = evalutateTypeField(this.field.displayType)
      if (this.isEmptyValue(componentReference)) {
        componentReference = {
-          type: 'FieldText',
-          alias: ['Text']
+          componentPath: 'FieldText'
        }
      }
      this.field = {
@ -336,7 +329,7 @@ export default {
        isDisplayedFromLogic: true,
        isShowedFromUser: true,
        //
-        componentPath: componentReference.type
+        componentPath: componentReference.componentPath
      }
    }
  },
--- a/src/components/ADempiere/Field/popover/calculator.vue
+++ b/src/components/ADempiere/Field/popover/calculator.vue
@ -79,6 +79,8 @@
 </template>

 <script>
+import { ID, INTEGER } from '@/utils/ADempiere/references'
+
 export default {
  name: 'FieldCalc',
  props: {
@ -298,7 +300,8 @@ export default {
      }
    },
    isDisabled(row, column) {
-      const isInteger = ['Integer', 'ID'].includes(this.fieldAttributes.referenceType)
+      // Integer or ID
+      const isInteger = [ID.id, INTEGER.id].includes(this.fieldAttributes.displayType)
      const value = row[column.property].value
      if (isInteger && value === ',') {
        return true
--- a/src/components/ADempiere/Field/popover/operatorComparison.vue
+++ b/src/components/ADempiere/Field/popover/operatorComparison.vue
@ -1,9 +1,9 @@
 <template>
-  <span>
+  <span v-if="fieldAttributes.isComparisonField">
    <el-popover
      ref="operatorComarison"
      placement="top"
-      width="200"
+      width="230"
      trigger="click"
    >
      <span class="custom-tittle-popover">
@ -14,7 +14,7 @@
        @change="changeOperator"
      >
        <el-option
-          v-for="(item, key) in operatorsList"
+          v-for="(item, key) in fieldAttributes.operatorsList"
          :key="key"
          :value="item"
          :label="$t('operators.' + item)"
@ -28,8 +28,6 @@
 </template>

 <script>
-import { FIELD_OPERATORS_LIST } from '@/utils/ADempiere/dataUtils'
-
 export default {
  name: 'FieldOperatorComparison',
  props: {
@ -43,14 +41,6 @@ export default {
      value: this.fieldAttributes.operator
    }
  },
-  computed: {
-    operatorsList() {
-      const { conditionsList } = FIELD_OPERATORS_LIST.find(item => {
-        return item.type === this.fieldAttributes.componentPath
-      })
-      return conditionsList
-    }
-  },
  watch: {
    'fieldAttributes.operator'(newValue) {
      this.value = newValue
@ -61,13 +51,13 @@ export default {
    }
  },
  methods: {
-    changeOperator(value) {
+    changeOperator(operatorValue) {
      this.$store.dispatch('changeFieldAttribure', {
        containerUuid: this.fieldAttributes.containerUuid,
        columnName: this.fieldAttributes.columnName,
        isAdvancedQuery: true,
        attributeName: 'operator',
-        attributeValue: value
+        attributeValue: operatorValue
      })
    },
    /**
--- a/src/components/ADempiere/Panel/index.vue
+++ b/src/components/ADempiere/Panel/index.vue
@ -389,21 +389,21 @@ export default {
            fieldItem.value = parsedValueComponent({
              fieldType: fieldItem.componentPath,
              value: route.query[fieldItem.columnName],
-              referenceType: fieldItem.referenceType,
+              displayType: fieldItem.displayType,
              isIdentifier: fieldItem.columnName.includes('_ID')
            })
            if (String(route.query.isAdvancedQuery) === String(fieldItem.isAdvancedQuery)) {
              fieldItem.value = parsedValueComponent({
                fieldType: fieldItem.componentPath,
                value: route.query[fieldItem.columnName],
-                referenceType: fieldItem.referenceType,
+                displayType: fieldItem.displayType,
                isIdentifier: fieldItem.columnName.includes('_ID')
              })
              if (fieldItem.isRange && this.$route.query[`${fieldItem.columnName}_To`]) {
                fieldItem.valueTo = parsedValueComponent({
                  fieldType: fieldItem.componentPath,
                  value: route.query[`${fieldItem.columnName}_To`],
-                  referenceType: fieldItem.referenceType,
+                  displayType: fieldItem.displayType,
                  isIdentifier: fieldItem.columnName.includes('_ID')
                })
              }
--- a/src/lang/ADempiere/en.js
+++ b/src/lang/ADempiere/en.js
@ -316,8 +316,8 @@ export default {
    BETWEEN: 'Between ">-<"',
    NOT_NULL: 'Is not null',
    NULL: 'Is null',
-    IN: 'Include',
-    NOT_IN: 'Not include'
+    IN: 'Include "()"',
+    NOT_IN: 'Not include "!()"'
  },
  quickAccess: {
    newRecord: 'Quick Access to Create New Record',
--- a/src/lang/ADempiere/es.js
+++ b/src/lang/ADempiere/es.js
@ -291,8 +291,8 @@ export default {
    BETWEEN: 'Entre ">-<"',
    NULL: 'No tiene valor',
    NOT_NULL: 'Tiene un valor',
-    IN: 'Incluye',
-    NOT_IN: 'No incluye'
+    IN: 'Incluye "()"',
+    NOT_IN: 'No incluye "!()"'
  },
  quickAccess: {
    newRecord: 'Acceso Rápido para Crear Registro Nuevo',
--- a/src/store/modules/ADempiere/data.js
+++ b/src/store/modules/ADempiere/data.js
@ -5,6 +5,7 @@ import { getPrivateAccessFromServer, lockPrivateAccessFromServer, unlockPrivateA
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 import { parseContext } from '@/utils/ADempiere/contextUtils'
 import { showMessage } from '@/utils/ADempiere/notification'
+import { TABLE, TABLE_DIRECT } from '@/utils/ADempiere/references'
 import language from '@/lang'

 const initStateBusinessData = {
@ -224,7 +225,8 @@ const data = {
                return
              }
              // always the values for these types of fields are integers
-              if (['TableDirect'].includes(itemField.referenceType)) {
+              // Table (18) or Table Direct (19)
+              if ([TABLE.id, TABLE_DIRECT.id].includes(itemField.diplayType)) {
                valueGetDisplayColumn = parseInt(valueGetDisplayColumn, 10)
              } else {
                if (!isNaN(valueGetDisplayColumn)) {
--- a/src/store/modules/ADempiere/panel.js
+++ b/src/store/modules/ADempiere/panel.js
@ -568,14 +568,14 @@ const panel = {
          if (!['IN', 'NOT_IN'].includes(field.operator)) {
            newValue = parsedValueComponent({
              fieldType: field.componentPath,
-              referenceType: field.referenceType,
+              displayType: field.displayType,
              value: newValue,
              isIdentifier: field.columnName.includes('_ID')
            })
            if (field.isRange) {
              valueTo = parsedValueComponent({
                fieldType: field.componentPath,
-                referenceType: field.referenceType,
+                displayType: field.displayType,
                value: valueTo,
                isIdentifier: field.columnName.includes('_ID')
              })
@ -1239,7 +1239,7 @@ const panel = {

          valueToReturn = parsedValueComponent({
            fieldType: fieldItem.componentPath,
-            referenceType: fieldItem.referenceType,
+            displayType: fieldItem.displayType,
            isMandatory: fieldItem.isMandatory,
            value: String(valueToReturn) === '[object Object]' && valueToReturn.isSQL ? valueToReturn : String(valueToReturn) === '[object Object]' ? valueToReturn.value : valueToReturn,
            isIdentifier: fieldItem.columnName.includes('_ID')
@ -1418,7 +1418,7 @@ const panel = {
                return parsedValueComponent({
                  fieldType: parameterItem.componentPath,
                  value: itemValue,
-                  referenceType: parameterItem.referenceType,
+                  displayType: parameterItem.displayType,
                  isMandatory,
                  isIdentifier: parameterItem.columnName.includes('_ID')
                })
--- a/src/utils/ADempiere/dataUtils.js
+++ b/src/utils/ADempiere/dataUtils.js
@ -1,109 +1,194 @@

-export const OPERATORS = [
-  {
-    operator: 'EQUAL',
-    symbol: '='
-  },
-  {
-    operator: 'NOT_EQUAL',
-    symbol: '<>'
-  },
-  {
-    operator: 'LIKE',
-    symbol: '%'
-  },
-  {
-    operator: 'NOT_LIKE',
-    symbol: '!%'
-  },
-  {
-    operator: 'GREATER',
-    symbol: '>'
-  },
-  {
-    operator: 'GREATER_EQUAL',
-    symbol: '>='
-  },
-  {
-    operator: 'LESS',
-    symbol: '<'
-  },
-  {
-    operator: 'LESS_EQUAL',
-    symbol: '<='
-  },
-  {
-    operator: 'BETWEEN',
-    symbol: '>-<'
-  },
-  {
-    operator: 'NOT_NULL',
-    symbol: ''
-  },
-  {
-    operator: 'NULL',
-    symbol: ''
-  },
-  {
-    operator: 'IN',
-    symbol: '()'
-  },
-  {
-    operator: 'NOT_IN',
-    symbol: '!()'
-  }
+const OPERATOR_EQUAL = {
+  operator: 'EQUAL',
+  symbol: '='
+}
+
+const OPERATOR_NOT_EQUAL = {
+  operator: 'NOT_EQUAL',
+  symbol: '<>'
+}
+
+const OPERATOR_LIKE = {
+  operator: 'LIKE',
+  symbol: '%'
+}
+
+const OPERATOR_NOT_LIKE = {
+  operator: 'NOT_LIKE',
+  symbol: '!%'
+}
+
+const OPERATOR_GREATER = {
+  operator: 'GREATER',
+  symbol: '>'
+}
+
+const OPERATOR_GREATER_EQUAL = {
+  operator: 'GREATER_EQUAL',
+  symbol: '>='
+}
+
+const OPERATOR_LESS = {
+  operator: 'LESS',
+  symbol: '<'
+}
+
+const OPERATOR_LESS_EQUAL = {
+  operator: 'LESS_EQUAL',
+  symbol: '<='
+}
+
+const OPERATOR_BETWEEN = {
+  operator: 'BETWEEN',
+  symbol: '>-<'
+}
+
+const OPERATOR_NULL = {
+  operator: 'NULL',
+  symbol: ''
+}
+
+const OPERATOR_NOT_NULL = {
+  operator: 'NOT_NULL',
+  symbol: ''
+}
+
+const OPERATOR_IN = {
+  operator: 'IN',
+  symbol: '()'
+}
+
+const OPERATOR_NOT_IN = {
+  operator: 'NOT_IN',
+  symbol: '!()'
+}
+
+const STANDARD_OPERATORS_LIST = [
+  OPERATOR_EQUAL.operator,
+  OPERATOR_NOT_EQUAL.operator,
+  OPERATOR_NULL.operator,
+  OPERATOR_NOT_NULL.operator
 ]

-// Components associated with search type
+const MULTIPLE_OPERATORS_LIST = [
+  OPERATOR_IN.operator,
+  OPERATOR_NOT_IN.operator
+]
+
+const TEXT_OPERATORS_LIST = [
+  OPERATOR_LIKE.operator,
+  OPERATOR_NOT_LIKE.operator
+]
+
+const RANGE_OPERATORS_LIST = [
+  OPERATOR_GREATER.operator,
+  OPERATOR_GREATER_EQUAL.operator,
+  OPERATOR_LESS.operator,
+  OPERATOR_LESS_EQUAL.operator
+]
+
+export const OPERATORS_LIST = [
+  OPERATOR_EQUAL,
+  OPERATOR_NOT_EQUAL,
+  OPERATOR_LIKE,
+  OPERATOR_NOT_LIKE,
+  OPERATOR_GREATER,
+  OPERATOR_LESS,
+  OPERATOR_LESS_EQUAL,
+  OPERATOR_BETWEEN,
+  OPERATOR_NOT_NULL,
+  OPERATOR_NULL,
+  OPERATOR_IN,
+  OPERATOR_NOT_IN
+]
+
+export const OPERATORS_FIELD_AMOUNT = {
+  componentPath: 'FieldAmount',
+  isRange: true,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...RANGE_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_DATE = {
+  componentPath: 'FieldDate',
+  isRange: true,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...RANGE_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_NUMBER = {
+  componentPath: 'FieldNumber',
+  isRange: true,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...RANGE_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_SELECT = {
+  componentPath: 'FieldSelect',
+  isRange: false,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_TEXT = {
+  componentPath: 'FieldText',
+  isRange: false,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...TEXT_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_TEXT_LONG = {
+  componentPath: 'FieldTextLong',
+  isRange: false,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...TEXT_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_TIME = {
+  componentPath: 'FieldTime',
+  isRange: true,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST,
+    ...RANGE_OPERATORS_LIST,
+    ...MULTIPLE_OPERATORS_LIST
+  ]
+}
+
+export const OPERATORS_FIELD_YES_NO = {
+  componentPath: 'FieldYesNo',
+  isRange: false,
+  operatorsList: [
+    ...STANDARD_OPERATORS_LIST
+  ]
+}
+
+// Components associated with search componentPath
 export const FIELD_OPERATORS_LIST = [
-  {
-    type: 'FieldBinary',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldButton',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldDate',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'GREATER', 'GREATER_EQUAL', 'LESS', 'LESS_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldImage',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldNumber',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'GREATER', 'GREATER_EQUAL', 'LESS', 'LESS_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldSelect',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldText',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'LIKE', 'NOT_LIKE', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldTextLong',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'LIKE', 'NOT_LIKE', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldTime',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'GREATER', 'GREATER_EQUAL', 'LESS', 'LESS_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
-  },
-  {
-    type: 'FieldYesNo',
-    isRange: false,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'NULL', 'NOT_NULL']
-  }
+  OPERATORS_FIELD_AMOUNT,
+  OPERATORS_FIELD_DATE,
+  OPERATORS_FIELD_NUMBER,
+  OPERATORS_FIELD_SELECT,
+  OPERATORS_FIELD_TEXT,
+  OPERATORS_FIELD_TEXT_LONG,
+  OPERATORS_FIELD_TEXT_LONG,
+  OPERATORS_FIELD_TIME,
+  OPERATORS_FIELD_YES_NO
 ]
--- 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, { FIELDS_HIDDEN } from '@/utils/ADempiere/references'
-import FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+import REFERENCES, { DEFAULT_SIZE, FIELDS_HIDDEN } from '@/utils/ADempiere/references'
+import { FIELD_OPERATORS_LIST } from '@/utils/ADempiere/dataUtils'
 import language from '@/lang'

 /**
@ -25,7 +25,6 @@ export function generateField({
  }

  const componentReference = evalutateTypeField(fieldToGenerate.displayType)
-  const referenceType = componentReference.alias[0]
  let isDisplayedFromLogic = fieldToGenerate.isDisplayed
  let isMandatoryFromLogic = false
  let isReadOnlyFromLogic = false
@ -33,15 +32,28 @@ export function generateField({
  let parsedDefaultValue = fieldToGenerate.defaultValue
  let parsedDefaultValueTo = fieldToGenerate.defaultValueTo
  let operator = 'EQUAL'
-  let isNumericField = componentReference.type === 'FieldNumber'
+  let isNumericField = componentReference.componentPath === 'FieldNumber'
  let isTranslatedField = fieldToGenerate.isTranslated
+  let isComparisonField = false // to list operators comparison
+  let operatorsList = []
  if (moreAttributes.isAdvancedQuery) {
    isNumericField = false
    isTranslatedField = false
    parsedDefaultValue = undefined
    parsedDefaultValueTo = undefined

-    if (['FieldText', 'FieldTextLong'].includes(componentReference.type)) {
+    // set field operators list
+    isComparisonField = !['FieldBinary', 'FieldButton', 'FieldImage'].includes(componentReference.componentPath)
+    if (isComparisonField) {
+      const operatorsField = FIELD_OPERATORS_LIST.find(item => {
+        return item.componentPath === componentReference.componentPath
+      })
+      if (operatorsField) {
+        operatorsList = operatorsField.operatorsList
+      }
+    }
+
+    if (['FieldText', 'FieldTextLong'].includes(componentReference.componentPath)) {
      operator = 'LIKE'
    }
  } else {
@ -76,9 +88,9 @@ export function generateField({
    }

    parsedDefaultValue = parsedValueComponent({
-      fieldType: componentReference.type,
+      fieldType: componentReference.componentPath,
      value: parsedDefaultValue,
-      referenceType,
+      displayType: fieldToGenerate.displayType,
      isMandatory: fieldToGenerate.isMandatory,
      isIdentifier: fieldToGenerate.columnName.includes('_ID')
    })
@ -119,9 +131,9 @@ export function generateField({
    }

    parsedDefaultValueTo = parsedValueComponent({
-      fieldType: componentReference.type,
+      fieldType: componentReference.componentPath,
      value: parsedDefaultValueTo,
-      referenceType,
+      displayType: fieldToGenerate.displayType,
      isMandatory: fieldToGenerate.isMandatory,
      isIdentifier: fieldToGenerate.columnName.includes('_ID')
    })
@ -159,9 +171,9 @@ export function generateField({
    ...moreAttributes,
    isSOTrxMenu,
    // displayed attributes
-    componentPath: componentReference.type,
-    isSupport: componentReference.support,
-    referenceType,
+    componentPath: componentReference.componentPath,
+    isSupported: componentReference.isSupported,
+    size: componentReference.size || DEFAULT_SIZE,
    displayColumn: undefined, // link to value from selects and table
    // value attributes
    value: String(parsedDefaultValue).trim() === '' ? undefined : parsedDefaultValue,
@ -188,23 +200,13 @@ export function generateField({
    operator, // current operator
    oldOperator: undefined, // old operator
    defaultOperator: operator,
+    operatorsList,
    // popover's
+    isComparisonField,
    isNumericField,
    isTranslatedField
  }

-  // Sizes from panel and groups
-  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
-    }
-  }
-
  // Overwrite some values
  if (field.isRange) {
    field.operator = 'GREATER_EQUAL'
--- a/src/utils/ADempiere/lookupFactory.js
+++ b/src/utils/ADempiere/lookupFactory.js
@ -47,11 +47,10 @@
 // - displayColumn
 // - defaultValue

-import { TEXT, TABLE_DIRECT } from '@/utils/ADempiere/references'
+import { CHAR, DEFAULT_SIZE, 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'

 // Create a Field from UUID based on server meta-data
@ -235,16 +234,19 @@ export function createFieldFromDefinition({

 // Default template for injected fields
 export function getFieldTemplate(overwriteDefinition) {
-  let displayType = 10
+  let displayType = CHAR.id // String reference (10)
  if (!isEmptyValue(overwriteDefinition.displayType)) {
    displayType = overwriteDefinition.displayType
  }

  const componentReference = evalutateTypeField(displayType)
-  const referenceType = componentReference.alias[0]

  // set size from displayed, max 24
-  let size = DEFAULT_SIZE.size
+  let size = DEFAULT_SIZE
+  if (!isEmptyValue(componentReference.size)) {
+    size = componentReference.size
+  }
+  // rewrite size default size field
  if (!isEmptyValue(overwriteDefinition.size)) {
    size = overwriteDefinition.size
    delete overwriteDefinition.size
@ -257,18 +259,6 @@ export function getFieldTemplate(overwriteDefinition) {
        xl: size
      }
    }
-  } else {
-    const sizeComponent = FIELDS_DISPLAY_SIZES.find(item => {
-      return item.type === componentReference.type
-    })
-    if (!isEmptyValue(sizeComponent)) {
-      size = sizeComponent.size
-    }
-  }
-
-  const sizeFieldFromType = {
-    type: referenceType,
-    size
  }

  const fieldTemplateMetadata = {
@ -283,8 +273,8 @@ export function getFieldTemplate(overwriteDefinition) {
      fieldGroupType: ''
    },
    displayType,
-    componentPath: componentReference.type,
-    referenceType,
+    componentPath: componentReference.componentPath,
+    size,
    isFieldOnly: false,
    isRange: false,
    isSameLine: false,
@ -331,7 +321,6 @@ export function getFieldTemplate(overwriteDefinition) {
    contextInfo: undefined,
    isShowedFromUser: false,
    isFixedTableColumn: false,
-    sizeFieldFromType,
    ...overwriteDefinition
  }

--- a/src/utils/ADempiere/references.js
+++ b/src/utils/ADempiere/references.js
@ -1,335 +1,507 @@
 // 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:
+export const DEFAULT_SIZE = {
+  xs: 6,
+  sm: 8,
+  md: 2,
+  lg: 6,
+  xl: 6
+}

 // Account Element
 export const ACCOUNT_ELEMENT = {
  id: 25,
-  type: 'FieldText',
-  support: false,
-  description: 'Account Element',
+  isSupported: false,
  valueType: 'INTEGER',
-  alias: ['Account']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Number
 export const NUMBER = {
  id: 12,
-  type: 'FieldNumber',
-  support: true,
-  description: 'Number with 4 decimals',
+  isSupported: true,
  valueType: 'DECIMAL',
-  alias: ['Amount']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Resource Assignment
 export const RESOURCE_ASSIGNMENT = {
  id: 33,
-  type: 'FieldText',
-  support: false,
-  description: 'Resource Assignment',
+  isSupported: false,
  valueType: 'INTEGER',
-  alias: ['Assignment']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Binary Data
 export const BINARY_DATA = {
  id: 23,
-  type: 'FieldBinary',
-  description: 'Binary Data',
-  support: true,
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Binary']
+  componentPath: 'FieldBinary',
+  size: {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6
+  }
 }

 // Button
 export const BUTTON = {
  // this component is hidden
  id: 28,
-  type: 'FieldButton',
-  description: 'Command Button - starts a process',
-  support: true,
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['Button']
+  componentPath: 'FieldButton',
+  size: {
+    xs: 0,
+    sm: 0,
+    md: 0,
+    lg: 0,
+    xl: 0
+  }
 }

 // Chart
 export const CHART = {
  id: 53370,
-  type: 'FieldText',
-  support: false,
-  description: 'Chart',
+  isSupported: false,
  valueType: 'STRING',
-  alias: ['Chart']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Color
 export const COLOR = {
  id: 27,
-  type: 'FieldText',
-  support: false,
-  description: 'Color element',
+  isSupported: false,
  valueType: 'INTEGER',
-  alias: ['Color']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Cost or Prices
 export const COSTS_PLUS_PRICES = {
  id: 37,
-  type: 'FieldNumber',
-  support: true,
-  description: 'Costs + Prices (minimum currency precision but if exists more)',
+  isSupported: true,
  valueType: 'DECIMAL',
-  alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
+  componentPath: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Date
 export const DATE = {
  id: 15,
-  type: 'FieldDate',
-  support: true,
-  description: 'Date mm/dd/yyyy',
+  isSupported: true,
  valueType: 'DATE',
-  alias: ['Date']
+  componentPath: 'FieldDate',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Date with time
 export const DATE_PLUS_TIME = {
  id: 16,
-  type: 'FieldDate',
-  support: true,
-  description: 'Date with time',
+  isSupported: true,
  valueType: 'DATE',
-  alias: ['DateTime', 'Date Time', 'Date+Time']
+  componentPath: 'FieldDate',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Local File
 export const LOCAL_FILE = {
  id: 39,
-  type: 'FieldText',
-  support: true,
-  description: 'Local File',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['FileName', 'File Name']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Local File Path
 export const LOCAL_FILE_PATH = {
  id: 38,
-  type: 'FieldText',
-  support: true,
-  description: 'Local File Path',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['FilePath', 'File Path']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Local File Path or Name
 export const LOCAL_FILE_PATH_OR_NAME = {
  id: 53670,
-  type: 'FieldText',
-  support: true,
-  description: 'Local File Path or Name',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['FilePathOrName', 'File Path Or Name']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // ID
 export const ID = {
  id: 13,
-  type: 'FieldNumber',
-  support: true,
-  description: '10 Digit Identifier',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['ID']
+  componentPath: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Binary Image Data
 export const BINARY = {
  id: 32,
-  type: 'FieldImage',
-  support: true,
-  description: 'Binary Image Data',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Image']
+  componentPath: 'FieldImage',
+  size: {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6
+  }
 }

 // Integer
 export const INTEGER = {
  id: 11,
-  type: 'FieldNumber',
-  support: true,
-  description: '10 Digit numeric',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Integer']
+  componentPath: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Reference List
 export const LIST = {
  id: 17,
-  type: 'FieldSelect',
-  support: true,
-  description: 'Reference List',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['List']
+  componentPath: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Location Address
 export const LOCATION_ADDRESS = {
  id: 21,
-  type: 'FieldText',
-  support: false,
-  description: 'Location/Address',
+  isSupported: false,
  valueType: 'INTEGER',
-  alias: ['Location', 'Location (Address)', 'Location/Address']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Warehouse Locator Data type
 export const LOCATOR_WAREHOUSE = {
  id: 31,
-  type: 'FieldSelect',
-  support: true,
-  description: 'Warehouse Locator Data type',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Locator', 'Locator (WH)', 'Locator/WH']
+  componentPath: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Memo
 export const MEMO = {
  id: 34,
-  type: 'FieldTextLong',
-  support: true,
+  isSupported: true,
  valueType: 'STRING',
-  description: 'Reference List',
-  alias: ['Memo']
+  componentPath: 'FieldTextLong',
+  size: {
+    xs: 24,
+    sm: 24,
+    md: 24,
+    lg: 24,
+    xl: 24
+  }
 }

 // Float Number
 export const FLOAT = {
  id: 22,
-  type: 'FieldNumber',
-  support: true,
-  description: 'Float Number',
+  isSupported: true,
  valueType: 'DECIMAL',
-  alias: ['Number']
+  componentPath: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Printer Name
 export const PRINTER_NAME = {
  id: 42,
-  type: 'FieldText',
-  support: true,
-  description: 'Printer Name',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['PrinterName', 'Printer Name']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Product Attribute
 export const PRODUCT_ATTRIBUTE = {
  id: 35,
-  type: 'FieldText',
-  support: false,
-  description: 'Product Attribute',
+  isSupported: false,
  valueType: 'INTEGER',
-  alias: ['ProductAttribute', 'Product Attribute']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Quantity
 export const QUANTITY = {
  id: 29,
-  type: 'FieldNumber',
-  support: true,
-  description: 'Quantity data type',
+  isSupported: true,
  valueType: 'DECIMAL',
-  alias: ['Quantity']
+  componentPath: 'FieldNumber',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Search
 export const SEARCH = {
  id: 30,
-  type: 'FieldSelect',
-  support: true,
-  description: 'Search Field',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Search']
+  componentPath: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

-// Char
+// Char (display type String)
 export const CHAR = {
  id: 10,
-  type: 'FieldText',
-  support: true,
-  description: 'Character String',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['String']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Table List
 export const TABLE = {
  id: 18,
-  type: 'FieldSelect',
-  support: true,
-  description: 'Table List',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['Table']
+  componentPath: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Table Dir
 export const TABLE_DIRECT = {
  id: 19,
-  type: 'FieldSelect',
-  support: true,
-  description: 'Direct Table Access',
+  isSupported: true,
  valueType: 'INTEGER',
-  alias: ['TableDirect', 'Table Direct']
+  componentPath: 'FieldSelect',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Text
 export const TEXT = {
  id: 14,
-  type: 'FieldText',
-  support: true,
-  description: 'Character String up to 2000 characters',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['Text']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Text Long
 export const TEXT_LONG = {
  id: 36,
-  type: 'FieldTextLong',
-  support: true,
-  description: 'Text (Long) - Text > 2000 characters',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['TextLong', 'Text Long']
+  componentPath: 'FieldTextLong',
+  size: {
+    xs: 24,
+    sm: 24,
+    md: 24,
+    lg: 24,
+    xl: 24
+  }
 }

 // Time
 export const TIME = {
  id: 24,
-  type: 'FieldTime',
-  support: true,
-  description: 'Time',
+  isSupported: true,
  valueType: 'DATE',
-  alias: ['Time']
+  componentPath: 'FieldTime',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // URL
 export const URL = {
  id: 40,
-  type: 'FieldText',
-  support: true,
-  description: 'URL',
+  isSupported: true,
  valueType: 'STRING',
-  alias: ['URL', 'Url']
+  componentPath: 'FieldText',
+  size: {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 6
+  }
 }

 // Yes No
 export const YES_NO = {
  id: 20,
-  type: 'FieldYesNo',
-  support: true,
-  description: 'CheckBox',
+  isSupported: true,
  valueType: 'BOOLEAN',
-  alias: ['YesNo', 'Yes No', 'Yes-No']
+  componentPath: 'FieldYesNo',
+  size: {
+    xs: 14,
+    sm: 8,
+    md: 8,
+    lg: 3,
+    xl: 6
+  }
 }

 // Some helper methods
@ -377,6 +549,7 @@ const REFERENCES = [
  PRODUCT_ATTRIBUTE,
  QUANTITY,
  SEARCH,
+  // String as CHAR
  CHAR,
  TABLE,
  TABLE_DIRECT,
@ -429,6 +602,15 @@ export const FIELDS_READ_ONLY_FORM = [
  }
 ]

-export const FIELDS_DECIMALS = [NUMBER.id, QUANTITY.id, COSTS_PLUS_PRICES.id]
+export const FIELDS_DECIMALS = [
+  COSTS_PLUS_PRICES.id,
+  NUMBER.id,
+  QUANTITY.id
+]

-export const FIELDS_QUANTITY = [NUMBER.id, QUANTITY.id, INTEGER.id, COSTS_PLUS_PRICES.id]
+export const FIELDS_QUANTITY = [
+  COSTS_PLUS_PRICES.id,
+  INTEGER.id,
+  NUMBER.id,
+  QUANTITY.id
+]
--- a/src/utils/ADempiere/valueUtils.js
+++ b/src/utils/ADempiere/valueUtils.js
@ -1,3 +1,5 @@
+import { TABLE, TABLE_DIRECT } from '@/utils/ADempiere/references'
+
 /**
 * Checks if value is empty. Deep-checks arrays and objects
 * Note: isEmpty([]) == true, isEmpty({}) == true,
@ -243,14 +245,14 @@ export const recursiveTreeSearch = ({
 * Parsed value to component type
 * @param {mixed} value, value to parsed
 * @param {string} fieldType, or componentPath
- * @param {string} referenceType, reference in ADempiere
+ * @param {number} displayType, reference in ADempiere
 * @param {boolean} isMandatory, field is mandatory
 * @param {boolean} isIdentifier, field is ID
 */
 export function parsedValueComponent({
  fieldType,
  value,
-  referenceType,
+  displayType,
  isMandatory = false,
  isIdentifier = false
 }) {
@ -325,7 +327,8 @@ export function parsedValueComponent({
      if (typeof value === 'boolean') {
        value = value ? 'Y' : 'N'
      }
-      if (referenceType === 'TableDirect' || (referenceType === 'Table' && isIdentifier)) {
+      // Table (18) or Table Direct (19)
+      if (displayType === TABLE.id || (displayType === TABLE_DIRECT.id && isIdentifier)) {
        if (value !== '' && value !== null && value !== undefined) {
          value = Number(value)
        }