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.

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) {

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) {

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
-  }
-}

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
+        sizeField = this.field.size
-      }
-      if (this.isEmptyValue(sizeField)) {
-        // Sizes from panel and groups
-        sizeField = FIELDS_DISPLAY_SIZES.find(item => {
-          return item.type === this.field.componentPath
-        })
       }
       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',
+          componentPath: 'FieldText'
-          alias: ['Text']
         }
       }
       this.field = {
@@ -336,7 +329,7 @@ export default {
         isDisplayedFromLogic: true,
         isShowedFromUser: true,
         //
-        componentPath: componentReference.type
+        componentPath: componentReference.componentPath
       }
     }
   },

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

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
       })
     },
     /**

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')
                 })
               }

src/lang/ADempiere/en.js

@@ -316,8 +316,8 @@ export default {
     BETWEEN: 'Between ">-<"',
     NOT_NULL: 'Is not null',
     NULL: 'Is null',
-    IN: 'Include',
+    IN: 'Include "()"',
-    NOT_IN: 'Not include'
+    NOT_IN: 'Not include "!()"'
   },
   quickAccess: {
     newRecord: 'Quick Access to Create New Record',

src/lang/ADempiere/es.js

@@ -291,8 +291,8 @@ export default {
     BETWEEN: 'Entre ">-<"',
     NULL: 'No tiene valor',
     NOT_NULL: 'Tiene un valor',
-    IN: 'Incluye',
+    IN: 'Incluye "()"',
-    NOT_IN: 'No incluye'
+    NOT_IN: 'No incluye "!()"'
   },
   quickAccess: {
     newRecord: 'Acceso Rápido para Crear Registro Nuevo',

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)) {

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')
                 })

src/utils/ADempiere/dataUtils.js

@@ -1,109 +1,194 @@
 
-export const OPERATORS = [
+const OPERATOR_EQUAL = {
-  {
+  operator: 'EQUAL',
-    operator: 'EQUAL',
+  symbol: '='
-    symbol: '='
+}
-  },
+
-  {
+const OPERATOR_NOT_EQUAL = {
-    operator: 'NOT_EQUAL',
+  operator: 'NOT_EQUAL',
-    symbol: '<>'
+  symbol: '<>'
-  },
+}
-  {
+
-    operator: 'LIKE',
+const OPERATOR_LIKE = {
-    symbol: '%'
+  operator: 'LIKE',
-  },
+  symbol: '%'
-  {
+}
-    operator: 'NOT_LIKE',
+
-    symbol: '!%'
+const OPERATOR_NOT_LIKE = {
-  },
+  operator: 'NOT_LIKE',
-  {
+  symbol: '!%'
-    operator: 'GREATER',
+}
-    symbol: '>'
+
-  },
+const OPERATOR_GREATER = {
-  {
+  operator: 'GREATER',
-    operator: 'GREATER_EQUAL',
+  symbol: '>'
-    symbol: '>='
+}
-  },
+
-  {
+const OPERATOR_GREATER_EQUAL = {
-    operator: 'LESS',
+  operator: 'GREATER_EQUAL',
-    symbol: '<'
+  symbol: '>='
-  },
+}
-  {
+
-    operator: 'LESS_EQUAL',
+const OPERATOR_LESS = {
-    symbol: '<='
+  operator: 'LESS',
-  },
+  symbol: '<'
-  {
+}
-    operator: 'BETWEEN',
+
-    symbol: '>-<'
+const OPERATOR_LESS_EQUAL = {
-  },
+  operator: 'LESS_EQUAL',
-  {
+  symbol: '<='
-    operator: 'NOT_NULL',
+}
-    symbol: ''
+
-  },
+const OPERATOR_BETWEEN = {
-  {
+  operator: 'BETWEEN',
-    operator: 'NULL',
+  symbol: '>-<'
-    symbol: ''
+}
-  },
+
-  {
+const OPERATOR_NULL = {
-    operator: 'IN',
+  operator: 'NULL',
-    symbol: '()'
+  symbol: ''
-  },
+}
-  {
+
-    operator: 'NOT_IN',
+const OPERATOR_NOT_NULL = {
-    symbol: '!()'
+  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 = [
-  {
+  OPERATORS_FIELD_AMOUNT,
-    type: 'FieldBinary',
+  OPERATORS_FIELD_DATE,
-    isRange: false,
+  OPERATORS_FIELD_NUMBER,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
+  OPERATORS_FIELD_SELECT,
-  },
+  OPERATORS_FIELD_TEXT,
-  {
+  OPERATORS_FIELD_TEXT_LONG,
-    type: 'FieldButton',
+  OPERATORS_FIELD_TEXT_LONG,
-    isRange: false,
+  OPERATORS_FIELD_TIME,
-    conditionsList: ['EQUAL', 'NOT_EQUAL', 'IN', 'NOT_IN', 'NULL', 'NOT_NULL']
+  OPERATORS_FIELD_YES_NO
-  },
-  {
-    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']
-  }
 ]

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 REFERENCES, { DEFAULT_SIZE, FIELDS_HIDDEN } from '@/utils/ADempiere/references'
-import FIELDS_DISPLAY_SIZES, { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
+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,
+    componentPath: componentReference.componentPath,
-    isSupport: componentReference.support,
+    isSupported: componentReference.isSupported,
-    referenceType,
+    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'

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,
+    componentPath: componentReference.componentPath,
-    referenceType,
+    size,
     isFieldOnly: false,
     isRange: false,
     isSameLine: false,
@@ -331,7 +321,6 @@ export function getFieldTemplate(overwriteDefinition) {
     contextInfo: undefined,
     isShowedFromUser: false,
     isFixedTableColumn: false,
-    sizeFieldFromType,
     ...overwriteDefinition
   }
 

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',
+  isSupported: false,
-  support: false,
-  description: 'Account Element',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Number with 4 decimals',
   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',
+  isSupported: false,
-  support: false,
-  description: 'Resource Assignment',
   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',
+  isSupported: true,
-  description: 'Binary Data',
-  support: 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',
+  isSupported: true,
-  description: 'Command Button - starts a process',
-  support: 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',
+  isSupported: false,
-  support: false,
-  description: 'Chart',
   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',
+  isSupported: false,
-  support: false,
-  description: 'Color element',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Costs + Prices (minimum currency precision but if exists more)',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Date mm/dd/yyyy',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Date with time',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Local File',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Local File Path',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Local File Path or Name',
   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',
+  isSupported: true,
-  support: true,
-  description: '10 Digit Identifier',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Binary Image Data',
   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',
+  isSupported: true,
-  support: true,
-  description: '10 Digit numeric',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Reference List',
   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',
+  isSupported: false,
-  support: false,
-  description: 'Location/Address',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Warehouse Locator Data type',
   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',
+  isSupported: true,
-  support: true,
   valueType: 'STRING',
-  description: 'Reference List',
+  componentPath: 'FieldTextLong',
-  alias: ['Memo']
+  size: {
+    xs: 24,
+    sm: 24,
+    md: 24,
+    lg: 24,
+    xl: 24
+  }
 }
 
 // Float Number
 export const FLOAT = {
   id: 22,
-  type: 'FieldNumber',
+  isSupported: true,
-  support: true,
-  description: 'Float Number',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Printer Name',
   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',
+  isSupported: false,
-  support: false,
-  description: 'Product Attribute',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Quantity data type',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Search Field',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Character String',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Table List',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Direct Table Access',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Character String up to 2000 characters',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Text (Long) - Text > 2000 characters',
   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',
+  isSupported: true,
-  support: true,
-  description: 'Time',
   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',
+  isSupported: true,
-  support: true,
-  description: 'URL',
   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',
+  isSupported: true,
-  support: true,
-  description: 'CheckBox',
   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
+]

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)
         }