Improves/reduce create form (#457)

* improves: Reduce and more easy create news Forms. * fix: Overwrite template metadata component with metadata prop from mixin * Add search from server for product price inquiry * add isEvaluateValueChanges. * Add support to latest version from POS client * Add clean for all fields * add style with prop cssClassName * Add style for components * fix subscribe mutation's and add set value and set values. * Change error by info for form Co-authored-by: Edwin Betancourt <EdwinBetanc0urt@hotmail.com>
2025-08-10 20:39:48 +08:00 · 2020-04-23 20:26:18 -04:00 · 2020-04-23 20:26:18 -04:00 · 9d59700aa5
commit 9d59700aa5
parent a52d2ee0de
25 changed files with 529 additions and 397 deletions
--- a/package.json
+++ b/package.json
@ -46,9 +46,9 @@
  "dependencies": {
    "@adempiere/grpc-access-client": "^1.1.8",
    "@adempiere/grpc-data-client": "^2.2.3",
-    "@adempiere/grpc-pos-client": "^1.0.4",
    "@adempiere/grpc-dictionary-client": "^1.3.9",
    "@adempiere/grpc-enrollment-client": "^1.0.7",
+    "@adempiere/grpc-pos-client": "^1.0.7",
    "autoprefixer": "^9.5.1",
    "axios": "0.18.0",
    "clipboard": "2.0.4",
--- a/src/api/ADempiere/pos.js
+++ b/src/api/ADempiere/pos.js
@ -1,15 +1,17 @@
 import { getLanguage } from '@/lang/index'
-import { getToken } from '@/utils/auth'
+import { getToken, getCurrentOrganization, getCurrentWarehouse } from '@/utils/auth'
 import POS from '@adempiere/grpc-pos-client'
 import { BUSINESS_DATA_ADDRESS } from '@/api/ADempiere/constants'

 // Get Instance for connection
 function Instance() {
-  return new POS(
-    BUSINESS_DATA_ADDRESS,
-    getToken(),
-    getLanguage() || 'en_US'
-  )
+  return new POS({
+    host: BUSINESS_DATA_ADDRESS,
+    sessionUuid: getToken(),
+    organizationUuid: getCurrentOrganization(),
+    warehouseUuid: getCurrentWarehouse(),
+    language: getLanguage() || 'en_US'
+  })
 }

 export function getProductPrice({
--- a/src/components/ADempiere/Field/FieldBinary.vue
+++ b/src/components/ADempiere/Field/FieldBinary.vue
@ -6,7 +6,7 @@
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
-    class="image-uploader"
+    :class="'image-uploader ' + metadata.cssClassName"
    action="https://jsonplaceholder.typicode.com/posts/"
    :disabled="isDisabled"
    @change="preHandleChange"
--- a/src/components/ADempiere/Field/FieldColor.vue
+++ b/src/components/ADempiere/Field/FieldColor.vue
@ -4,6 +4,7 @@
    v-model="value"
    show-alpha
    :disabled="isDisabled"
+    :class="metadata.cssClassName"
    @change="preHandleChange"
  />
 </template>
--- a/src/components/ADempiere/Field/FieldDate.vue
+++ b/src/components/ADempiere/Field/FieldDate.vue
@ -10,10 +10,10 @@
    :start-placeholder="$t('components.dateStartPlaceholder')"
    :end-placeholder="$t('components.dateEndPlaceholder')"
    unlink-panels
-    class="date-base"
+    :class="'date-base ' + metadata.cssClassName"
    :readonly="Boolean(metadata.readonly)"
    :disabled="isDisabled"
-    :picker-options="typePicker === 'daterange' ? pickerOptionsDateRange : pickerOptionsDate"
+    :picker-options="pickerOptions"
    @change="preHandleChange"
  />
 </template>
@ -137,6 +137,12 @@ export default {
          .replace(/[aA]/gi, '')
      }
      return undefined
+    },
+    pickerOptions() {
+      if (this.typePicker === 'daterange') {
+        return this.pickerOptionsDateRange
+      }
+      return this.pickerOptionsDate
    }
  },
  watch: {
--- a/src/components/ADempiere/Field/FieldImage.vue
+++ b/src/components/ADempiere/Field/FieldImage.vue
@ -6,7 +6,7 @@
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :disabled="isDisabled"
-    class="avatar-uploader"
+    :class="'avatar-uploader ' + metadata.cssClassName"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
--- a/src/components/ADempiere/Field/FieldNumber.vue
+++ b/src/components/ADempiere/Field/FieldNumber.vue
@ -10,7 +10,7 @@
      :disabled="isDisabled"
      :precision="precision"
      controls-position="right"
-      :class="'display-type-amount'"
+      :class="'display-type-amount ' + metadata.cssClassName"
      @change="preHandleChange"
      @blur="changeValue"
      @keydown.native="calculateValue"
--- a/src/components/ADempiere/Field/FieldSelect.vue
+++ b/src/components/ADempiere/Field/FieldSelect.vue
@ -6,7 +6,7 @@
    :placeholder="metadata.help"
    :loading="isLoading"
    value-key="key"
-    :class="classStyle"
+    :class="classStyle + ' ' + metadata.cssClassName"
    clearable
    :multiple="isSelectMultiple"
    :allow-create="metadata.isSelectCreated"
--- a/src/components/ADempiere/Field/FieldSelectMultiple.vue
+++ b/src/components/ADempiere/Field/FieldSelectMultiple.vue
@ -5,7 +5,7 @@
    filterable
    allow-create
    :placeholder="metadata.help"
-    class="custom-field-select custom-field-select-multiple"
+    :class="'custom-field-select custom-field-select-multiple ' + metadata.cssClassName"
    @change="preHandleChange"
  >
    <el-option
--- a/src/components/ADempiere/Field/FieldText.vue
+++ b/src/components/ADempiere/Field/FieldText.vue
@ -4,6 +4,7 @@
    v-model="value"
    :pattern="pattern"
    :rows="rows"
+    :class="metadata.cssClassName"
    :type="typeTextBox"
    :placeholder="metadata.help"
    :readonly="Boolean(metadata.readonly)"
--- a/src/components/ADempiere/Field/FieldTextLong.vue
+++ b/src/components/ADempiere/Field/FieldTextLong.vue
@ -1,5 +1,5 @@
 <template>
-  <div :id="id" :class="classDisable" />
+  <div :id="id" :class="classDisable + ' ' + metadata.cssClassName" />
 </template>

 <script>
--- a/src/components/ADempiere/Field/FieldTime.vue
+++ b/src/components/ADempiere/Field/FieldTime.vue
@ -9,7 +9,7 @@
    :is-range="isPickerRange"
    range-separator="-"
    :placeholder="$t('components.timePlaceholder')"
-    class="time-base"
+    :class="'time-base ' + metadata.cssClassName"
    :readonly="Boolean(metadata.readonly)"
    :disabled="isDisabled"
    @change="preHandleChange"
--- a/src/components/ADempiere/Field/FieldYesNo.vue
+++ b/src/components/ADempiere/Field/FieldYesNo.vue
@ -4,7 +4,7 @@
    v-model="value"
    :inactive-text="$t('components.switchInactiveText')"
    :active-text="$t('components.switchActiveText')"
-    class="custom-field-yes-no"
+    :class="'custom-field-yes-no ' + metadata.cssClassName"
    :true-value="true"
    :false-value="false"
    :disabled="isDisabled"
@ -86,7 +86,7 @@ export default {
 </script>

 <style>
- .custom-field-yes-no {
-   min-height: 34px;
- }
+  .custom-field-yes-no {
+    min-height: 34px;
+  }
 </style>
--- a/src/components/ADempiere/Field/chatTextLong.vue
+++ b/src/components/ADempiere/Field/chatTextLong.vue
@ -8,13 +8,10 @@ import 'tui-editor/dist/tui-editor.css' // editor ui
 import 'tui-editor/dist/tui-editor-contents.css' // editor content
 import 'codemirror/lib/codemirror.css' // codemirror
 import Editor from 'tui-editor'
-
 import { getLanguage } from '@/lang'
-// import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'

 export default {
  name: 'ChatTextLong',
-  //   mixins: [fieldMixin],
  props: {
    id: {
      type: String,
@ -137,15 +134,14 @@ export default {
      })
    },
    preHandleChange(value) {
-      var comment = value
      if (this.clean) {
-        this.$store.dispatch('setchatText', comment)
-          .then((responseComment) => {
+        this.$store.dispatch('setchatText', value)
+          .then(responseComment => {
            this.$store.dispatch('setMarkDown', false)
            this.$store.dispatch('setchatText', '')
          })
      } else {
-        this.$store.dispatch('setchatText', comment)
+        this.$store.dispatch('setchatText', value)
      }
    },
    addReanOnlyChanges() {
@ -176,6 +172,7 @@ export default {
  }
 }
 </script>
+
 <style>
  .isdisable {
    background: #F5F7FA;
--- a/src/components/ADempiere/Form/PriceInquiry/fieldsList.js
+++ b/src/components/ADempiere/Form/PriceInquiry/fieldsList.js
@ -0,0 +1,73 @@
+import { TEXT } from '@/utils/ADempiere/references'
+
+export default [
+  // Product Code
+  {
+    elementColumnName: 'ProductValue',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 10,
+      cssClassName: 'price-inquiry'
+    }
+  },
+  // Product Name
+  {
+    elementColumnName: 'ProductName',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 20,
+      isReadOnly: true,
+      cssClassName: 'price-inquiry'
+    }
+  },
+  // Product Description
+  {
+    elementColumnName: 'ProductDescription',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 30,
+      displayType: TEXT.id,
+      isReadOnly: true,
+      cssClassName: 'price-inquiry'
+    }
+  },
+  // Price List
+  {
+    elementColumnName: 'PriceList',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 16,
+      sequence: 40,
+      isReadOnly: true,
+      cssClassName: 'price-inquiry',
+      help: '0.00'
+    }
+  },
+  // Tax Amount
+  {
+    elementColumnName: 'TaxAmt',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 8,
+      sequence: 50,
+      isReadOnly: true,
+      cssClassName: 'price-inquiry',
+      help: '0.00'
+    }
+  },
+  // Total
+  {
+    elementColumnName: 'GrandTotal',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 60,
+      isReadOnly: true,
+      cssClassName: 'price-inquiry',
+      help: '0.00'
+    }
+  }
+]
--- a/src/components/ADempiere/Form/PriceInquiry/index.vue
+++ b/src/components/ADempiere/Form/PriceInquiry/index.vue
@ -8,9 +8,10 @@
    >
      <el-row>
        <field
-          v-for="(metadata) in metadataList"
-          :key="metadata.columnName"
-          :metadata-field="metadata"
+          v-for="(field) in fieldsList"
+          :key="field.columnName"
+          :metadata-field="field"
+          :v-model="field.value"
        />
      </el-row>
    </el-form>
@ -28,122 +29,75 @@

 <script>
 import formMixin from '@/components/ADempiere/Form/formMixin'
-import { TEXT } from '@/utils/ADempiere/references'
+import fieldsList from './fieldsList.js'
+import { getProductPrice } from '@/api/ADempiere/pos'
+
 export default {
-  name: 'TestView',
+  name: 'PriceInquiry',
  mixins: [formMixin],
  data() {
    return {
-      metadataList: [],
-      panelMetadata: {},
-      isLoaded: false,
-      panelType: 'custom'
-    }
-  },
-  computed: {
-    getterPanel() {
-      return this.$store.getters.getPanel(this.metadata.containerUuid)
+      fieldsList
    }
  },
  created() {
-    this.getPanel()
+    this.unsubscribe = this.subscribeChanges()
+  },
+  beforeDestroy() {
+    this.unsubscribe()
  },
  methods: {
-    setFieldsList() {
-      const fieldsList = []
-      // Product Code
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'ProductValue',
-        overwriteDefinition: {
-          size: 24,
-          sequence: 10,
-          isMandatory: true
+    subscribeChanges() {
+      return this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'changeFieldValue' && mutation.payload.field.columnName === 'ProductValue') {
+          // cleans all values except column name 'ProductValue'
+          this.setValues({ withOutColumnNames: ['ProductValue'] })
+          getProductPrice({
+            searchValue: mutation.payload.newValue
+          })
+            .then(productPrice => {
+              const { product, taxRate } = productPrice
+
+              const values = {
+                ProductName: product.name,
+                ProductDescription: product.description,
+                PriceList: productPrice.priceList,
+                TaxAmt: this.getTaxAmount(productPrice.priceList, taxRate.rate),
+                GrandTotal: this.getGrandTotal(productPrice.priceList, taxRate.rate)
+              }
+
+              // set new values except column name 'ProductValue'
+              this.setValues({ values, withOutColumnNames: ['ProductValue'] })
+            })
+            .catch(error => {
+              this.$message({
+                type: 'info',
+                message: error.message
+              })
+            })
        }
      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Product Name
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'ProductName',
-        overwriteDefinition: {
-          size: 24,
-          sequence: 20,
-          isReadOnly: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Product Description
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'ProductDescription',
-        overwriteDefinition: {
-          size: 24,
-          sequence: 30,
-          displayType: TEXT.id,
-          isReadOnly: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Price List
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'PriceList',
-        overwriteDefinition: {
-          size: 16,
-          sequence: 40,
-          isReadOnly: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Tax Amount
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'TaxAmt',
-        overwriteDefinition: {
-          size: 8,
-          sequence: 50,
-          isReadOnly: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Total
-      this.createFieldFromDictionary({
-        containerUuid: this.metadata.containerUuid,
-        elementColumnName: 'GrandTotal',
-        overwriteDefinition: {
-          size: 24,
-          sequence: 60,
-          isReadOnly: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      this.metadataList = fieldsList
+    },
+    getTaxAmount(priceList, taxRate) {
+      if (this.isEmptyValue(priceList) || this.isEmptyValue(taxRate)) {
+        return 0
+      }
+      return (priceList * taxRate) / 100
+    },
+    getGrandTotal(priceList, taxRate) {
+      if (this.isEmptyValue(priceList)) {
+        return 0
+      }
+      return priceList + this.getTaxAmount(priceList, taxRate)
    }
  }
 }
 </script>
+<style lang="scss">
+  .price-inquiry {
+    input {
+      color: #606266 !important;
+      font-size: 200% !important;
+    }
+  }
+</style>
--- a/src/components/ADempiere/Form/formMixin.js
+++ b/src/components/ADempiere/Form/formMixin.js
@ -14,10 +14,10 @@ export default {
  },
  data() {
    return {
-      metadataList: [],
+      fieldsList: [],
      panelMetadata: {},
      isLoaded: false,
-      panelType: 'custom'
+      panelType: 'form'
    }
  },
  computed: {
@ -25,35 +25,137 @@ export default {
      return this.$store.getters.getPanel(this.metadata.containerUuid)
    }
  },
+  created() {
+    this.getPanel()
+  },
  methods: {
    createFieldFromDefinition,
    createFieldFromDictionary,
-    getPanel() {
+    async getPanel() {
      const panel = this.getterPanel
      if (panel) {
-        this.metadataList = panel.fieldList
+        this.fieldsList = panel.fieldList
        this.isLoaded = true
      } else {
-        this.setFieldsList()
+        await this.generateFieldsList()
        this.$store.dispatch('addPanel', {
          ...this.metadata,
          uuid: this.metadata.containerUuid,
          panelType: this.panelType,
-          fieldList: this.metadataList
+          fieldList: this.fieldsList
        })
          .then(responsePanel => {
-            this.metadataList = responsePanel.fieldList
+            this.fieldsList = responsePanel.fieldList

            this.$store.dispatch('changeFormAttribute', {
              containerUuid: this.metadata.containerUuid,
              attributeName: 'fieldList',
-              attributeValue: this.metadataList
+              attributeValue: this.fieldsList
            })
          })
          .finally(() => {
            this.isLoaded = true
          })
      }
+    },
+    generateFieldsList() {
+      let sequence = 0
+      const incrementSequence = (newValue) => {
+        if (newValue) {
+          sequence = newValue
+        }
+        sequence = sequence + 10
+        return sequence
+      }
+
+      return new Promise(resolve => {
+        const additionalAttributes = {
+          containerUuid: this.metadata.containerUuid,
+          isEvaluateValueChanges: false,
+          panelType: this.panelType
+        }
+
+        const fieldsListFromDictionary = []
+        const fieldsListFromMetadata = []
+
+        this.fieldsList.forEach(fieldElement => {
+          if (fieldElement.isFromDictionary) {
+            // set sequence
+            if (fieldElement.overwriteDefinition) {
+              if (this.isEmptyValue(fieldElement.overwriteDefinition.sequence)) {
+                fieldElement.overwriteDefinition.sequence = incrementSequence()
+              } else {
+                incrementSequence(fieldElement.overwriteDefinition.sequence)
+              }
+            } else {
+              fieldElement.overwriteDefinition = {}
+              fieldElement.overwriteDefinition.sequence = incrementSequence()
+            }
+
+            fieldsListFromDictionary.push(
+              this.createFieldFromDictionary({
+                ...fieldElement,
+                ...additionalAttributes
+              })
+            )
+          } else {
+            // set sequence
+            if (fieldElement.definition) {
+              if (this.isEmptyValue(fieldElement.definition.sequence)) {
+                fieldElement.definition.sequence = incrementSequence()
+              } else {
+                incrementSequence(fieldElement.definition.sequence)
+              }
+            } else {
+              fieldElement.definition = {}
+              fieldElement.definition.sequence = incrementSequence()
+            }
+
+            fieldsListFromMetadata.push(
+              this.createFieldFromDefinition({
+                ...fieldElement,
+                ...additionalAttributes
+              })
+            )
+          }
+        })
+        let fieldsList = fieldsListFromMetadata
+
+        if (this.isEmptyValue(fieldsListFromDictionary)) {
+          this.fieldsList = fieldsList
+          resolve(fieldsList)
+          this.isLoaded = true
+        } else {
+          Promise.all(fieldsListFromDictionary)
+            .then(responsefields => {
+              fieldsList = fieldsList.concat(responsefields)
+              resolve(fieldsList)
+              this.fieldsList = fieldsList
+              this.isLoaded = true
+            })
+        }
+      })
+    },
+    // Set value for one field from panel
+    // use example: setValue('ProductName', 'Patio Fun')
+    setValue(columnName, value) {
+      this.$store.dispatch('notifyFieldChange', {
+        containerUuid: this.metadata.containerUuid,
+        panelType: this.metadata.panelType,
+        columnName,
+        newValue: value
+      })
+    },
+    //  Set values for all list of columns
+    // Use example: setValues(values)
+    setValues({ values = {}, withOutColumnNames = [] }) {
+      this.$store.dispatch('notifyPanelChange', {
+        containerUuid: this.metadata.containerUuid,
+        panelType: this.metadata.panelType,
+        newValues: values,
+        withOutColumnNames,
+        isChangedAllValues: true
+      })
    }
  }
 }
--- a/src/store/modules/ADempiere/browser.js
+++ b/src/store/modules/ADempiere/browser.js
@ -35,7 +35,8 @@ const browser = {
            const panelType = 'browser'
            const additionalAttributes = {
              containerUuid,
-              panelType
+              panelType,
+              isEvaluateValueChanges: true
            }
            const {
              query,
--- a/src/store/modules/ADempiere/panel.js
+++ b/src/store/modules/ADempiere/panel.js
@ -85,7 +85,7 @@ const panel = {
              count++
            }
          } else {
-            if (['browser', 'process', 'report', 'custom'].includes(panelType) ||
+            if (['browser', 'process', 'report', 'form'].includes(panelType) ||
              panelType === 'window' && params.isParentTab) {
              dispatch('setContext', {
                parentUuid: params.parentUuid,
@ -393,6 +393,7 @@ const panel = {
     * @param {object} fieldList, field list of panel
     * @param {object} newValues, values to set in panel
     * @param {boolean} isSendToServer, indicate if changes send to server
+     * @param {boolean} isChangedAllValues, check if it changes all the values of the fields, if it does not exist, set an empty value
     */
    notifyPanelChange({ dispatch, getters, rootGetters }, {
      parentUuid,
@ -407,7 +408,8 @@ const panel = {
      isPrivateAccess = false,
      fieldList = [],
      isChangeFromCallout = false,
-      isChangeMultipleFields = true
+      isChangeMultipleFields = true,
+      isChangedAllValues = false
    }) {
      return new Promise(resolve => {
        if (!fieldList.length) {
@ -422,7 +424,12 @@ const panel = {

          // Evaluate with hasOwnProperty if exits this value
          if (!newValues.hasOwnProperty(actionField.columnName)) {
-            return
+            if (!isChangedAllValues || withOutColumnNames.includes(actionField.columnName)) {
+              // breaks if this value does not exist or ignore with out column names
+              return
+            }
+            // set empty value and continue
+            newValues[actionField.columnName] = undefined
          }

          if (isChangeFromCallout &&
@ -630,7 +637,7 @@ const panel = {
        }

        // the field has not changed, then the action is broken
-        if (newValue === field.value && isEmptyValue(displayColumn) && !isAdvancedQuery) {
+        if (newValue === field.value && isEmptyValue(displayColumn) && field.isEvaluateValueChanges) {
          resolve()
          return
        }
--- a/src/store/modules/ADempiere/window.js
+++ b/src/store/modules/ADempiere/window.js
@ -259,7 +259,8 @@ const window = {
              tableName: tabResponse.tableName,
              //
              isReadOnlyFromForm: false,
-              isAdvancedQuery
+              isAdvancedQuery,
+              isEvaluateValueChanges: !isAdvancedQuery
            }

            let isWithUuidField = false // indicates it contains the uuid field
--- a/src/utils/ADempiere/dictionaryUtils.js
+++ b/src/utils/ADempiere/dictionaryUtils.js
@ -244,6 +244,7 @@ export function generateProcess({ processToGenerate, containerUuidAssociated = u
    processId: processToGenerate.id,
    processName: processToGenerate.name,
    containerUuid: processToGenerate.uuid,
+    isEvaluateValueChanges: true,
    panelType
  }

--- a/src/utils/ADempiere/lookupFactory.js
+++ b/src/utils/ADempiere/lookupFactory.js
@ -108,7 +108,7 @@ export function createFieldFromDictionary({
 function getFactoryFromField({
  containerUuid,
  field,
-  overwriteDefinition
+  overwriteDefinition = {}
 }) {
  const fieldDefinition = {
    displayType: field.displayType,
@ -152,62 +152,14 @@ function getFactoryFromField({
    readOnlyLogic: field.readOnlyLogic,
    parentFieldsList: field.parentFieldsList,
    dependentFieldsList: field.dependentFieldsList,
-    contextInfo: field.contextInfo
-  }
-  // Overwrite definition
-  if (!isEmptyValue(overwriteDefinition)) {
-    if (!isEmptyValue(overwriteDefinition.isQueryCriteria)) {
-      fieldDefinition.isQueryCriteria = overwriteDefinition.isQueryCriteria
-    }
-    if (!isEmptyValue(overwriteDefinition.isMandatory)) {
-      fieldDefinition.isMandatory = overwriteDefinition.isMandatory
-    }
-    if (!isEmptyValue(overwriteDefinition.isReadOnly)) {
-      fieldDefinition.isReadOnly = overwriteDefinition.isReadOnly
-    }
-    if (!isEmptyValue(overwriteDefinition.isSelectionColumn)) {
-      fieldDefinition.isSelectionColumn = overwriteDefinition.isSelectionColumn
-    }
-    if (!isEmptyValue(overwriteDefinition.isUpdateable)) {
-      fieldDefinition.isUpdateable = overwriteDefinition.isUpdateable
-    }
-    if (!isEmptyValue(overwriteDefinition.isFieldOnly)) {
-      fieldDefinition.isFieldOnly = overwriteDefinition.isFieldOnly
-    }
-    if (!isEmptyValue(overwriteDefinition.isRange)) {
-      fieldDefinition.isRange = overwriteDefinition.isRange
-    }
-    if (!isEmptyValue(overwriteDefinition.displayLogic)) {
-      fieldDefinition.displayLogic = overwriteDefinition.displayLogic
-    }
-    if (!isEmptyValue(overwriteDefinition.mandatoryLogic)) {
-      fieldDefinition.mandatoryLogic = overwriteDefinition.mandatoryLogic
-    }
-    if (!isEmptyValue(overwriteDefinition.readOnlyLogic)) {
-      fieldDefinition.readOnlyLogic = overwriteDefinition.readOnlyLogic
-    }
-    if (!isEmptyValue(overwriteDefinition.formatPattern)) {
-      fieldDefinition.formatPattern = overwriteDefinition.formatPattern
-    }
-    if (!isEmptyValue(overwriteDefinition.vFormat)) {
-      fieldDefinition.vFormat = overwriteDefinition.vFormat
-    }
-    if (!isEmptyValue(overwriteDefinition.defaultValue)) {
-      fieldDefinition.defaultValue = overwriteDefinition.defaultValue
-    }
-    if (!isEmptyValue(overwriteDefinition.defaultValueTo)) {
-      fieldDefinition.defaultValueTo = overwriteDefinition.defaultValueTo
-    }
-    if (!isEmptyValue(overwriteDefinition.displayType)) {
-      fieldDefinition.displayType = overwriteDefinition.displayType
-    }
-    if (!isEmptyValue(overwriteDefinition.size)) {
-      fieldDefinition.size = overwriteDefinition.size
-    }
+    contextInfo: field.contextInfo,
+    // Overwrite definition
+    ...overwriteDefinition
  }
+
  //  Convert it
  return createFieldFromDefinition({
-    containerUuid: containerUuid,
+    containerUuid,
    columnName: field.columnName,
    definition: fieldDefinition
  })
@ -218,6 +170,7 @@ export function createFieldFromDefinition({
  parentUuid,
  containerUuid,
  columnName,
+  panelType = 'form',
  definition = {}
 }) {
  if (!isEmptyValue(definition)) {
@ -270,6 +223,7 @@ export function createFieldFromDefinition({
    definition.reference = reference
  }
  return getFieldTemplate({
+    panelType,
    ...definition,
    isShowedFromUser: true,
    isCustomField: true,
--- a/src/views/ADempiere/Form/index.vue
+++ b/src/views/ADempiere/Form/index.vue
@ -41,7 +41,6 @@
            <form-panel
              :metadata="{
                ...formMetadata,
-                containerUuid: formUuid,
                title: formTitle
              }"
            />
--- a/src/views/ADempiere/TestView/fieldsList.js
+++ b/src/views/ADempiere/TestView/fieldsList.js
@ -0,0 +1,83 @@
+import { URL, TEXT, NUMBER, INTEGER, TEXT_LONG, TABLE_DIRECT } from '@/utils/ADempiere/references'
+
+export default [
+  // URL
+  {
+    columnName: 'URL',
+    definition: {
+      name: 'Web',
+      displayType: URL.id
+    }
+  },
+  // From Field UUID
+  {
+    isFromDictionary: true,
+    fieldUuid: '8ceabe8a-fb40-11e8-a479-7a0060f0aa01'
+  },
+  // From Column UUID
+  {
+    isFromDictionary: true,
+    columnUuid: '8b4bbb7e-fb40-11e8-a479-7a0060f0aa01'
+  },
+  // From Element Column Name
+  {
+    isFromDictionary: true,
+    elementColumnName: 'M_RMA_ID'
+  },
+  // From Table and Column Name
+  {
+    tableName: 'C_BPartner',
+    columnName: 'PaymentRule',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      isMandatory: true
+    }
+  },
+  // Table direct
+  // To be define
+  {
+    columnName: 'C_Currency_ID',
+    definition: {
+      name: 'Currency',
+      displayType: TABLE_DIRECT.id,
+      keyColumn: 'C_Currency.C_Currency_ID',
+      directQuery: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency WHERE C_Currency.C_Currency_ID=?',
+      query: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency ORDER BY 3'
+    }
+  },
+  // Text
+  {
+    columnName: 'Name',
+    definition: {
+      name: 'Only Name',
+      displayType: TEXT.id,
+      displayLogic: '@URL@!""'
+    }
+  },
+  // Amount
+  {
+    columnName: 'Amount',
+    definition: {
+      name: 'Amount for it',
+      displayType: NUMBER.id,
+      readOnlyLogic: '@C_Currency_ID@<>""'
+    }
+  },
+  // Integer
+  {
+    columnName: 'SeqNo',
+    definition: {
+      name: 'Sequence for record',
+      displayType: INTEGER.id,
+      mandatoryLogic: '@URL@!""'
+    }
+  },
+  // Text Long
+  {
+    columnName: 'Description',
+    definition: {
+      name: 'Only Description',
+      displayType: TEXT_LONG.id
+    }
+  }
+]
--- a/src/views/ADempiere/TestView/index.vue
+++ b/src/views/ADempiere/TestView/index.vue
@ -1,213 +1,163 @@
 <template>
-  <div class="wrapper">
-    <el-form
-      v-if="isLoaded"
-      key="form-loaded"
-      label-position="top"
-      label-width="200px"
-    >
-      <el-row>
-        <field
-          v-for="(metadata) in metadataList"
-          :key="metadata.columnName"
-          :metadata-field="metadata"
-        />
+  <el-container
+    v-if="isLoaded"
+    key="form-loaded"
+    class="view-base"
+    style="height: 84vh;"
+  >
+    <el-header style="height: 39px;">
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="metadata.containerUuid"
+        :panel-type="panelType"
+      />
+    </el-header>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card
+            class="content-collapse"
+            :style="isEmptyValue(metadata.fieldList) ? 'height: 75vh !important;' : ''"
+          >
+            <h3 class="warn-content text-center">
+              <el-popover
+                v-if="!isEmptyValue(metadata.help)"
+                ref="helpTitle"
+                placement="top-start"
+                :title="formTitle"
+                width="400"
+                trigger="hover"
+              >
+                <div v-html="metadata.help" />
+              </el-popover>
+              <el-button
+                v-popover:helpTitle
+                type="text"
+                class="title text-center"
+              >
+                {{ formTitle }}
+              </el-button>
+            </h3>
+
+            <!-- emulated component form -->
+            <div class="wrapper">
+              <el-form
+                label-position="top"
+                label-width="200px"
+              >
+                <el-row>
+                  <field
+                    v-for="(fieldMetadata) in fieldsList"
+                    :key="fieldMetadata.columnName"
+                    :metadata-field="fieldMetadata"
+                  />
+                </el-row>
+              </el-form>
+            </div>
+            <!-- emulated component form -->
+
+          </el-card>
+        </el-col>
      </el-row>
-    </el-form>
-    <div
-      v-else
-      key="form-loading"
-      v-loading="!isLoaded"
-      :element-loading-text="$t('notifications.loading')"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(255, 255, 255, 0.8)"
-      class="loading-panel"
-    />
-  </div>
+    </el-main>
+  </el-container>
+  <div
+    v-else
+    key="form-loading"
+    v-loading="!isLoaded"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="view-loading"
+  />
 </template>

 <script>
-import Field from '@/components/ADempiere/Field'
-import { createFieldFromDefinition, createFieldFromDictionary } from '@/utils/ADempiere/lookupFactory'
-import { URL, TEXT, NUMBER, INTEGER, TEXT_LONG, TABLE_DIRECT } from '@/utils/ADempiere/references'
+import formMixin from '@/components/ADempiere/Form/formMixin'
+import fieldsList from './fieldsList.js'
+import ContextMenu from '@/components/ADempiere/ContextMenu'

 export default {
  name: 'TestView',
  components: {
-    Field
+    ContextMenu
+  },
+  mixins: [formMixin],
+  props: {
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          containerUuid: 'Test-View',
+          name: 'Test View'
+        }
+      }
+    }
  },
  data() {
    return {
-      metadataList: [],
-      panelMetadata: {},
-      isLoaded: false,
-      panelUuid: 'Test-View',
-      panelType: 'custom'
+      fieldsList
    }
  },
  computed: {
-    getterPanel() {
-      return this.$store.getters.getPanel(this.panelUuid)
-    }
-  },
-  created() {
-    this.getPanel()
-  },
-  methods: {
-    getPanel() {
-      const panel = this.getterPanel
-      if (panel) {
-        this.metadataList = panel.fieldList
-        this.isLoaded = true
-      } else {
-        this.setFieldsList()
-        this.$store.dispatch('addPanel', {
-          name: 'Test View',
-          uuid: this.panelUuid,
-          panelType: this.panelType,
-          fieldList: this.metadataList
-        })
-          .then(responsePanel => {
-            this.metadataList = responsePanel.fieldList
-          })
-          .finally(() => {
-            this.isLoaded = true
-          })
-      }
-    },
-    setFieldsList() {
-      const fieldsList = []
-
-      let sequence = 10
-      // URL
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'URL',
-        definition: {
-          name: 'Web',
-          displayType: URL.id,
-          panelType: this.panelType,
-          sequence
-        }
-      }))
-      // From Field UUID
-      createFieldFromDictionary({
-        containerUuid: this.panelUuid,
-        fieldUuid: '8ceabe8a-fb40-11e8-a479-7a0060f0aa01'
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // From Column UUID
-      createFieldFromDictionary({
-        containerUuid: this.panelUuid,
-        columnUuid: '8b4bbb7e-fb40-11e8-a479-7a0060f0aa01'
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // From Element Column Name
-      createFieldFromDictionary({
-        containerUuid: this.panelUuid,
-        elementColumnName: 'M_RMA_ID'
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // From Table and Column Name
-      createFieldFromDictionary({
-        containerUuid: this.panelUuid,
-        tableName: 'C_BPartner',
-        columnName: 'PaymentRule',
-        overwriteDefinition: {
-          isMandatory: true
-        }
-      })
-        .then(metadata => {
-          fieldsList.push(metadata)
-        }).catch(error => {
-          console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
-        })
-      // Table direct
-      // To be define
-      sequence = sequence + 10
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'C_Currency_ID',
-        definition: {
-          name: 'Currency',
-          displayType: TABLE_DIRECT.id,
-          panelType: this.panelType,
-          keyColumn: 'C_Currency.C_Currency_ID',
-          directQuery: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency WHERE C_Currency.C_Currency_ID=?',
-          query: 'SELECT C_Currency.C_Currency_ID,NULL,C_Currency.ISO_Code,C_Currency.IsActive FROM C_Currency ORDER BY 3',
-          sequence
-        }
-      }))
-
-      sequence = sequence + 10
-      // Text
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'Name',
-        definition: {
-          name: 'Only Name',
-          displayType: TEXT.id,
-          panelType: this.panelType,
-          displayLogic: '@URL@!""',
-          sequence
-        }
-      }))
-
-      sequence = sequence + 10
-      // Amount
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'Amount',
-        definition: {
-          name: 'Amount for it',
-          displayType: NUMBER.id,
-          panelType: this.panelType,
-          readOnlyLogic: '@C_Currency_ID@<>""',
-          sequence
-        }
-      }))
-
-      sequence = sequence + 10
-      // Integer
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'SeqNo',
-        definition: {
-          name: 'Sequence for record',
-          displayType: INTEGER.id,
-          panelType: this.panelType,
-          mandatoryLogic: '@URL@!""',
-          sequence
-        }
-      }))
-
-      sequence = sequence + 10
-      // Text Long
-      fieldsList.push(createFieldFromDefinition({
-        containerUuid: this.panelUuid,
-        columnName: 'Description',
-        definition: {
-          name: 'Only Description',
-          displayType: TEXT_LONG.id,
-          panelType: this.panelType,
-          sequence
-        }
-      }))
-
-      this.metadataList = fieldsList
+    formTitle() {
+      return this.metadata.name || this.$route.meta.title
    }
  }
 }
 </script>
+
+<style>
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+  }
+</style>
+<style scoped >
+  .view-base {
+    height: 100%;
+    min-height: calc(100vh - 84px);
+  }
+
+  .view-loading {
+    padding: 100px 100px;
+    height: 100%;
+  }
+
+  .title, .custom-title {
+    color: #000;
+    text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605 !important;
+    /* left: 50%; */
+  }
+
+  .w-33 {
+    width: 100%;
+    background-color: transparent;
+  }
+
+  .warn-content {
+    margin: 0px 0px !important;
+    padding-top: 0px !important;
+  }
+  .content-help {
+    width: 100%;
+    height: 200%;
+    padding-left: 39px !important;
+  }
+  .el-card {
+    width: 100% !important;
+    height: 200% !important;
+  }
+  .content-collapse {
+    padding-left: 20 px !important;
+    padding-top: 50 px !important;
+  }
+
+  .center{
+    text-align: center;
+  }
+</style>