Bugfix/unnecessary field calls (#628)

* add complete order from collection

* call the edit line fields only when they are displayed

* unnecessary calling of customer fields

* minimal changes

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

src/components/ADempiere/Form/VPOS/BusinessPartner/businessPartnerCreate.vue

@@ -9,8 +9,8 @@
       class="create-bp"
     >
       <el-row :gutter="24">
-        <field-definition
+        <field
-          v-for="(field) in fieldsList"
+          v-for="(field) in metadataList"
           :key="field.columnName"
           :metadata-field="field"
         />
@@ -39,14 +39,21 @@
 
 <script>
 import { requestCreateBusinessPartner } from '@/api/ADempiere/system-core.js'
-import formMixin from '@/components/ADempiere/Form/formMixin.js'
 import fieldsList from './fieldsListCreate.js'
 import BParterMixin from './mixinBusinessPartner.js'
+import {
+  // createFieldFromDefinition,
+  createFieldFromDictionary
+} from '@/utils/ADempiere/lookupFactory'
+import Field from '@/components/ADempiere/Field'
 
 export default {
   name: 'BusinessPartnerCreate',
+  components: {
+    Field
+  },
   mixins: [
-    formMixin,
+    // formMixin,
     BParterMixin
   ],
   props: {
@@ -59,6 +66,11 @@ export default {
           fieldsList
         }
       }
+    },
+    showField: {
+      type: Boolean,
+      default: true
+
     }
   },
   data() {
@@ -67,6 +79,7 @@ export default {
       isLoadingRecord: false,
       fieldsList,
       isCustomForm: true,
+      metadataList: [],
       unsubscribe: () => {}
     }
   },
@@ -79,10 +92,19 @@ export default {
       return field
     }
   },
+  watch: {
+    showField(value) {
+      if (value && this.isEmptyValue(this.metadataList)) {
+        this.setFieldsList()
+      }
+    }
+  },
   beforeDestroy() {
     this.unsubscribe()
   },
+  // created()
   methods: {
+    createFieldFromDictionary,
     // TODO: Get locations values.
     createBusinessParter() {
       let values = this.$store.getters.getValuesView({
@@ -188,6 +210,23 @@ export default {
           value: undefined
         }]
       })
+    },
+    setFieldsList() {
+      const list = []
+      // Product Code
+      this.fieldsList.forEach(element => {
+        this.createFieldFromDictionary(element)
+          .then(response => {
+            const data = response
+            list.push({
+              ...data,
+              containerUuid: 'Business-Partner-Create'
+            })
+          }).catch(error => {
+            console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+          })
+      })
+      this.metadataList = list
     }
   }
 }

src/components/ADempiere/Form/VPOS/BusinessPartner/businessPartnersList.vue

@@ -17,8 +17,8 @@
           size="small"
         >
           <el-row>
-            <field-definition
+            <field
-              v-for="(field) in fieldsList"
+              v-for="(field) in metadataList"
               :key="field.columnName"
               :metadata-field="field"
             />
@@ -72,17 +72,22 @@
 
 <script>
 import CustomPagination from '@/components/ADempiere/Pagination'
-import formMixin from '@/components/ADempiere/Form/formMixin.js'
+import {
+  // createFieldFromDefinition,
+  createFieldFromDictionary
+} from '@/utils/ADempiere/lookupFactory'
 import fieldsList from './fieldsListSearch.js'
 import BParterMixin from './mixinBusinessPartner.js'
+import Field from '@/components/ADempiere/Field'
 
 export default {
   name: 'BusinessPartnersList',
   components: {
-    CustomPagination
+    CustomPagination,
+    Field
   },
   mixins: [
-    formMixin,
+    // formMixin,
     BParterMixin
   ],
   props: {
@@ -103,6 +108,10 @@ export default {
           isShowList: false
         }
       }
+    },
+    showField: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -110,6 +119,7 @@ export default {
       isLoadedRecords: false,
       activeAccordion: 'query-criteria',
       fieldsList,
+      metadataList: [],
       unsubscribe: () => {}
     }
   },
@@ -130,6 +140,11 @@ export default {
       if (isToLoad) {
         this.searchBPartnerList({})
       }
+    },
+    showField(value) {
+      if (value && this.isEmptyValue(this.metadataList)) {
+        this.setFieldsList()
+      }
     }
   },
   created() {
@@ -143,6 +158,7 @@ export default {
     this.unsubscribe()
   },
   methods: {
+    createFieldFromDictionary,
     keyAction(event) {
       switch (event.srcKey) {
         case 'refreshList': {
@@ -192,6 +208,23 @@ export default {
         .finally(() => {
           this.isLoadedRecords = true
         })
+    },
+    setFieldsList() {
+      const list = []
+      // Product Code
+      this.fieldsList.forEach(element => {
+        this.createFieldFromDictionary(element)
+          .then(response => {
+            const data = response
+            list.push({
+              ...data,
+              containerUuid: 'Business-Partner-List'
+            })
+          }).catch(error => {
+            console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+          })
+      })
+      this.metadataList = list
     }
   }
 }

src/components/ADempiere/Form/VPOS/BusinessPartner/index.vue

@@ -3,14 +3,47 @@
     <el-form-item>
       <template slot="label">
         {{ $t('form.pos.order.BusinessPartnerCreate.businessPartner') }}
-        <i
+        <el-popover
-          v-popover:businessPartnerCreate
+          placement="right"
-          class="el-icon-circle-plus"
+          width="400"
-        />
+          trigger="click"
-        <i
+          @hide="showFieldCreate = !showFieldCreate"
-          v-popover:businessPartnersList
+        >
-          class="el-icon-search"
+          <business-partner-create
-        />
+            :parent-metadata="parentMetadata"
+            :show-field="showFieldCreate"
+          />
+          <el-button
+            slot="reference"
+            type="text"
+            @click="showFieldCreate = !showFieldCreate"
+          >
+            <i
+              class="el-icon-circle-plus"
+            />
+          </el-button>
+        </el-popover>
+        <el-popover
+          placement="right"
+          width="800"
+          trigger="click"
+          @hide="showFieldList = !showFieldList"
+        >
+          <business-partners-list
+            :parent-metadata="parentMetadata"
+            :shows-popovers="showsPopovers"
+            :show-field="showFieldList"
+          />
+          <el-button
+            slot="reference"
+            type="text"
+            @click="showFieldList = !showFieldList"
+          >
+            <i
+              class="el-icon-search"
+            />
+          </el-button>
+        </el-popover>
       </template>
 
       <el-autocomplete
@@ -45,32 +78,7 @@
         </template>
       </el-autocomplete>
     </el-form-item>
-    <el-popover
-      ref="businessPartnerCreate"
-      v-model="showsPopovers.isShowCreate"
-      placement="right"
-      width="400"
-      trigger="click"
-    >
-      <business-partner-create
-        v-if="showsPopovers.isShowCreate"
-        :parent-metadata="parentMetadata"
-        :shows-popovers="showsPopovers"
-      />
-    </el-popover>
 
-    <el-popover
-      ref="businessPartnersList"
-      v-model="showsPopovers.isShowList"
-      placement="right"
-      width="800"
-      trigger="click"
-    >
-      <business-partners-list
-        :parent-metadata="parentMetadata"
-        :shows-popovers="showsPopovers"
-      />
-    </el-popover>
   </div>
 </template>
 
@@ -81,6 +89,7 @@
  */
 import { requestGetBusinessPartner } from '@/api/ADempiere/system-core.js'
 import BusinessPartnerCreate from './businessPartnerCreate'
+// import FieldListBusinessPartner from './fieldBusinessPartners/index'
 import BusinessPartnersList from './businessPartnersList'
 import BParterMixin from './mixinBusinessPartner.js'
 const { setBusinessPartner } = BParterMixin.methods
@@ -92,6 +101,7 @@ export default {
   components: {
     BusinessPartnerCreate,
     BusinessPartnersList
+    // FieldListBusinessPartner
   },
   props: {
     parentMetadata: {
@@ -111,7 +121,9 @@ export default {
   data() {
     return {
       controlDisplayed: this.displayedValue,
-      timeOut: null
+      timeOut: null,
+      showFieldCreate: false,
+      showFieldList: false
     }
   },
   computed: {

src/components/ADempiere/Form/VPOS/Options/index.vue

@@ -33,18 +33,33 @@
                 width="800"
                 trigger="click"
                 @show="seeOrderList"
+                @hide="showFieldListOrder = !showFieldListOrder"
               >
                 <orders-list
                   :parent-metadata="metadata"
+                  :show-field="showFieldListOrder"
                 />
                 <p
                   slot="reference"
                   :style="blockOption"
+                >
+                  <el-button
+                    type="text"
+                    @click="showFieldListOrder = !showFieldListOrder"
+                  >
+                    <svg-icon icon-class="list" />
+                    <br>
+                    {{ $t('form.pos.optionsPoinSales.salesOrder.ordersHistory') }}
+                  </el-button>
+                </p>
+                <!-- <p
+                  slot="reference"
+                  :style="blockOption"
                 >
                   <svg-icon icon-class="list" />
                   <br>
                   {{ $t('form.pos.optionsPoinSales.salesOrder.ordersHistory') }}
-                </p>
+                </p> -->
               </el-popover>
             </el-card>
           </el-col>
@@ -286,7 +301,8 @@ export default {
   data() {
     return {
       activeName: '',
-      processPos: ''
+      processPos: '',
+      showFieldListOrder: false
     }
   },
   computed: {

src/components/ADempiere/Form/VPOS/Order/fieldsListOrder.js

@@ -12,75 +12,75 @@ export default [
       handleActionPerformed: true,
       handleActionKeyPerformed: true
     }
-  },
-  {
-    elementColumnName: 'QtyEntered',
-    columnName: 'QtyEntered',
-    tabindex: '2',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 24,
-      sequence: 8,
-      handleActionPerformed: true,
-      handleContentSelection: true,
-      handleActionKeyPerformed: true
-    }
-  },
-  {
-    elementColumnName: 'PriceEntered',
-    columnName: 'PriceEntered',
-    tabindex: '3',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 24,
-      sequence: 9,
-      isReadOnly: true,
-      handleActionPerformed: true,
-      handleContentSelection: true,
-      handleActionKeyPerformed: true
-    }
-  },
-  {
-    elementColumnName: 'Discount',
-    columnName: 'Discount',
-    tabindex: '4',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 24,
-      sequence: 10,
-      isReadOnly: true,
-      handleActionPerformed: true,
-      handleContentSelection: true,
-      handleActionKeyPerformed: true
-    }
-  },
-  {
-    tableName: 'C_Order',
-    columnName: 'C_Currency_ID',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      size: 24,
-      handleActionKeyPerformed: true,
-      handleActionPerformed: true,
-      validationCode: 'C_Currency.C_Currency_ID = 100',
-      isActiveLogics: false,
-      isMandatory: true
-    }
-  },
-  // TenderType
-  {
-    tableName: 'C_Payment',
-    elementColumnName: 'TenderType',
-    columnName: 'TenderType',
-    isFromDictionary: true,
-    overwriteDefinition: {
-      defaultValue: 'X',
-      handleActionKeyPerformed: true,
-      handleContentSelection: true,
-      handleActionPerformed: true,
-      size: 24,
-      isActiveLogics: false,
-      isMandatory: true
-    }
   }
+  // {
+  //   elementColumnName: 'QtyEntered',
+  //   columnName: 'QtyEntered',
+  //   tabindex: '2',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 24,
+  //     sequence: 8,
+  //     handleActionPerformed: true,
+  //     handleContentSelection: true,
+  //     handleActionKeyPerformed: true
+  //   }
+  // },
+  // {
+  //   elementColumnName: 'PriceEntered',
+  //   columnName: 'PriceEntered',
+  //   tabindex: '3',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 24,
+  //     sequence: 9,
+  //     isReadOnly: true,
+  //     handleActionPerformed: true,
+  //     handleContentSelection: true,
+  //     handleActionKeyPerformed: true
+  //   }
+  // },
+  // {
+  //   elementColumnName: 'Discount',
+  //   columnName: 'Discount',
+  //   tabindex: '4',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 24,
+  //     sequence: 10,
+  //     isReadOnly: true,
+  //     handleActionPerformed: true,
+  //     handleContentSelection: true,
+  //     handleActionKeyPerformed: true
+  //   }
+  // },
+  // {
+  //   tableName: 'C_Order',
+  //   columnName: 'C_Currency_ID',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     size: 24,
+  //     handleActionKeyPerformed: true,
+  //     handleActionPerformed: true,
+  //     validationCode: 'C_Currency.C_Currency_ID = 100',
+  //     isActiveLogics: false,
+  //     isMandatory: true
+  //   }
+  // },
+  // // TenderType
+  // {
+  //   tableName: 'C_Payment',
+  //   elementColumnName: 'TenderType',
+  //   columnName: 'TenderType',
+  //   isFromDictionary: true,
+  //   overwriteDefinition: {
+  //     defaultValue: 'X',
+  //     handleActionKeyPerformed: true,
+  //     handleContentSelection: true,
+  //     handleActionPerformed: true,
+  //     size: 24,
+  //     isActiveLogics: false,
+  //     isMandatory: true
+  //   }
+  // }
 ]

src/components/ADempiere/Form/VPOS/Order/index.vue

@@ -137,49 +137,18 @@
                           placement="right"
                           trigger="click"
                           :title="$t('form.pos.tableProduct.editQuantities')"
+                          width="600"
+                          @hide="showFieldLine = !showFieldLine"
                         >
-                          <el-row>
+                          <field-line
-                            <el-col :span="8">
+                            :data-line="scope.row"
-                              <el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
+                            :show-field="showFieldLine"
-                                <template
+                          />
-                                  v-for="(field) in fieldsList"
+                          <el-button
-                                >
+                            slot="reference"
-                                  <field-definition
+                            type="text"
-                                    v-if="field.columnName === 'PriceEntered'"
+                            @click="showFieldLine = !showFieldLine"
-                                    :key="field.columnName"
+                          >
-                                    :metadata-field="field"
-                                  />
-                                </template>
-                              </el-form>
-                            </el-col>
-                            <el-col :span="8">
-                              <el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
-                                <template
-                                  v-for="(field) in fieldsList"
-                                >
-                                  <field-definition
-                                    v-if="field.columnName === 'QtyEntered'"
-                                    :key="field.columnName"
-                                    :metadata-field="field"
-                                  />
-                                </template>
-                              </el-form>
-                            </el-col>
-                            <el-col :span="8">
-                              <el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
-                                <template
-                                  v-for="(field) in fieldsList"
-                                >
-                                  <field-definition
-                                    v-if="field.columnName === 'Discount'"
-                                    :key="field.columnName"
-                                    :metadata-field="field"
-                                  />
-                                </template>
-                              </el-form>
-                            </el-col>
-                          </el-row>
-                          <el-button slot="reference" type="text">
                             <i class="el-icon-edit" /> {{ $t('form.pos.tableProduct.editQuantities') }}
                           </el-button>
                         </el-popover>
@@ -310,6 +279,7 @@ import orderLineMixin from './orderLineMixin.js'
 import fieldsListOrder from './fieldsListOrder.js'
 import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
 import BusinessPartner from '@/components/ADempiere/Form/VPOS/BusinessPartner'
+import fieldLine from '@/components/ADempiere/Form/VPOS/Order/line/index'
 import ProductInfo from '@/components/ADempiere/Form/VPOS/ProductInfo'
 import convertAmount from '@/components/ADempiere/Form/VPOS/Collection/convertAmount/index'
 
@@ -318,7 +288,8 @@ export default {
   components: {
     BusinessPartner,
     ProductInfo,
-    convertAmount
+    convertAmount,
+    fieldLine
   },
   mixins: [
     formMixin,
@@ -328,7 +299,8 @@ export default {
   data() {
     return {
       fieldsList: fieldsListOrder,
-      seeConversion: false
+      seeConversion: false,
+      showFieldLine: false
     }
   },
   computed: {
@@ -461,9 +433,9 @@ export default {
     if (!this.isEmptyValue(this.$route.query.action)) {
       this.$store.dispatch('reloadOrder', { orderUuid: this.$route.query.action })
     }
-    setTimeout(() => {
+    // setTimeout(() => {
-      this.currencyDisplaye()
+    //   this.currencyDisplaye()
-    }, 1500)
+    // }, 1500)
   },
   methods: {
     changePos(posElement) {
@@ -532,34 +504,34 @@ export default {
       if (!this.seeConversion) {
         this.seeConversion = true
       }
-    },
+    // },
-    tenderTypeDisplaye() {
+    // tenderTypeDisplaye() {
-      if (!this.isEmptyValue(this.fieldsList)) {
+    //   if (!this.isEmptyValue(this.fieldsList)) {
-        const tenderType = this.fieldsList[5].reference
+    //     const tenderType = this.fieldsList[5].reference
-        if (!this.isEmptyValue(tenderType)) {
+    //     if (!this.isEmptyValue(tenderType)) {
-          this.$store.dispatch('getLookupListFromServer', {
+    //       this.$store.dispatch('getLookupListFromServer', {
-            tableName: tenderType.tableName,
+    //         tableName: tenderType.tableName,
-            query: tenderType.query
+    //         query: tenderType.query
-          })
+    //       })
-            .then(response => {
+    //         .then(response => {
-              this.$store.dispatch('tenderTypeDisplaye', response)
+    //           this.$store.dispatch('tenderTypeDisplaye', response)
-            })
+    //         })
-        }
+    //     }
-      }
+    //   }
-    },
+    // },
-    currencyDisplaye() {
+    // currencyDisplaye() {
-      if (!this.isEmptyValue(this.fieldsList)) {
+    //   if (!this.isEmptyValue(this.fieldsList)) {
-        const currency = this.fieldsList[4].reference
+    //     const currency = this.fieldsList[4].reference
-        if (!this.isEmptyValue(currency)) {
+    //     if (!this.isEmptyValue(currency)) {
-          this.$store.dispatch('getLookupListFromServer', {
+    //       this.$store.dispatch('getLookupListFromServer', {
-            tableName: currency.tableName,
+    //         tableName: currency.tableName,
-            query: currency.query
+    //         query: currency.query
-          })
+    //       })
-            .then(response => {
+    //         .then(response => {
-              this.$store.dispatch('currencyDisplaye', response)
+    //           this.$store.dispatch('currencyDisplaye', response)
-            })
+    //         })
-        }
+    //     }
-      }
+    //   }
     }
   }
 }

src/components/ADempiere/Form/VPOS/Order/line/fieldsListLine.js

@@ -0,0 +1,40 @@
+export default [
+  {
+    elementColumnName: 'PriceEntered',
+    columnName: 'PriceEntered',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 8,
+      isReadOnly: true,
+      handleActionPerformed: true,
+      handleContentSelection: true,
+      handleActionKeyPerformed: true
+    }
+  },
+  {
+    elementColumnName: 'QtyEntered',
+    columnName: 'QtyEntered',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 9,
+      handleActionPerformed: true,
+      handleContentSelection: true,
+      handleActionKeyPerformed: true
+    }
+  },
+  {
+    elementColumnName: 'Discount',
+    columnName: 'Discount',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      size: 24,
+      sequence: 10,
+      isReadOnly: true,
+      handleActionPerformed: true,
+      handleContentSelection: true,
+      handleActionKeyPerformed: true
+    }
+  }
+]

src/components/ADempiere/Form/VPOS/Order/line/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="wrapper">
+    <el-row
+      v-if="!isEmptyValue(metadataList)"
+    >
+      <template
+        v-for="(field, index) in metadataList"
+      >
+        <el-col :key="index" :span="8">
+          <el-form label-position="top" label-width="10px" @submit.native.prevent="notSubmitForm">
+            <field
+              :key="field.columnName"
+              :metadata-field="field"
+            />
+          </el-form>
+        </el-col>
+      </template>
+    </el-row>
+    <div
+      v-else
+      key="form-loading"
+      v-loading="isEmptyValue(metadataList)"
+      :element-loading-text="$t('notifications.loading')"
+      :element-loading-spinner="'el-icon-loading'"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      class="view-loading"
+    />
+  </div>
+</template>
+
+<script>
+
+import {
+  // createFieldFromDefinition,
+  createFieldFromDictionary
+} from '@/utils/ADempiere/lookupFactory'
+import fieldsListLine from './fieldsListLine.js'
+import Field from '@/components/ADempiere/Field'
+
+export default {
+  name: 'FieldLine',
+  components: {
+    Field
+  },
+  props: {
+    dataLine: {
+      type: Object,
+      default: () => {}
+    },
+    showField: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      metadataList: [],
+      panelMetadata: {},
+      isLoaded: false,
+      panelType: 'custom',
+      fieldsListLine
+    }
+  },
+  watch: {
+    showField(value) {
+      if (value && this.isEmptyValue(this.metadataList)) {
+        this.setFieldsList()
+      }
+      if (value) {
+        this.fillOrderLineQuantities({
+          currentPrice: this.dataLine.price,
+          quantityOrdered: this.dataLine.quantity,
+          discount: this.dataLine.discountRate
+        })
+      }
+    }
+  },
+  methods: {
+    createFieldFromDictionary,
+    notSubmitForm(event) {
+      event.preventDefault()
+      return false
+    },
+    setFieldsList() {
+      const fieldsList = []
+      // Product Code
+      this.fieldsListLine.forEach(element => {
+        this.createFieldFromDictionary(element)
+          .then(metadata => {
+            const data = metadata
+            fieldsList.push({
+              ...data,
+              containerUuid: 'line'
+            })
+          }).catch(error => {
+            console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+          })
+      })
+      this.metadataList = fieldsList
+    },
+    fillOrderLineQuantities({
+      currentPrice,
+      quantityOrdered,
+      discount
+    }) {
+      const containerUuid = 'line'
+      // Editable fields
+      if (!this.isEmptyValue(quantityOrdered)) {
+        this.$store.commit('updateValueOfField', {
+          containerUuid: 'line',
+          columnName: 'QtyEntered',
+          value: quantityOrdered
+        })
+      }
+      if (!this.isEmptyValue(currentPrice)) {
+        this.$store.commit('updateValueOfField', {
+          containerUuid,
+          columnName: 'PriceEntered',
+          value: currentPrice
+        })
+      }
+      if (!this.isEmptyValue(discount)) {
+        this.$store.commit('updateValueOfField', {
+          containerUuid,
+          columnName: 'Discount',
+          value: discount
+        })
+      }
+    }
+  }
+}
+</script>

src/components/ADempiere/Form/VPOS/OrderList/index.vue

@@ -9,15 +9,15 @@
           Ver Histórico de Órdenes
         </template>
         <el-form
-          v-if="isLoaded"
+          v-if="!isEmptyValue(metadataList)"
           label-position="top"
           label-width="10px"
           @submit.native.prevent="notSubmitForm"
         >
           <template
-            v-for="(field) in fieldsList"
+            v-for="(field) in metadataList"
           >
-            <field-definition
+            <field
               :key="field.columnName"
               :metadata-field="field"
             />
@@ -26,7 +26,7 @@
         <div
           v-else
           key="form-loading"
-          v-loading="!isLoaded"
+          v-loading="isEmptyValue(metadataList)"
           :element-loading-text="$t('notifications.loading')"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(255, 255, 255, 0.8)"
@@ -109,22 +109,23 @@
 </template>
 
 <script>
-import formMixin from '@/components/ADempiere/Form/formMixin.js'
 import CustomPagination from '@/components/ADempiere/Pagination'
 import fieldsListOrders from './fieldsListOrders.js'
+import {
+  createFieldFromDictionary
+} from '@/utils/ADempiere/lookupFactory'
 import {
   formatDate,
   formatQuantity
 } from '@/utils/ADempiere/valueFormat.js'
+import Field from '@/components/ADempiere/Field'
 
 export default {
   name: 'OrdersList',
   components: {
-    CustomPagination
+    CustomPagination,
+    Field
   },
-  mixins: [
-    formMixin
-  ],
   props: {
     metadata: {
       type: Object,
@@ -134,12 +135,17 @@ export default {
           containerUuid: 'Orders-List'
         }
       }
+    },
+    showField: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       defaultMaxPagination: 50,
       fieldsList: fieldsListOrders,
+      metadataList: [],
       isCustomForm: true,
       activeAccordion: 'query-criteria',
       timeOut: null
@@ -177,8 +183,8 @@ export default {
       return null
     },
     isReadyFromGetData() {
-      const { isLoaded, isReload } = this.tableOrder
+      const { isReload } = this.tableOrder
-      return !isLoaded || isReload
+      return isReload
     },
     shortsKey() {
       return {
@@ -187,13 +193,13 @@ export default {
       }
     }
   },
-  // watch: {
+  watch: {
-  //   isReadyFromGetData(isToLoad) {
+    showField(value) {
-  //     if (isToLoad) {
+      if (value && this.isEmptyValue(this.metadataList)) {
-  //       this.loadOrdersList()
+        this.setFieldsList()
-  //     }
+      }
-  //   }
+    }
-  // },
+  },
   created() {
     this.unsubscribe = this.subscribeChanges()
     if (this.isReadyFromGetData) {
@@ -206,6 +212,7 @@ export default {
   methods: {
     formatDate,
     formatQuantity,
+    createFieldFromDictionary,
     keyAction(event) {
       switch (event.srcKey) {
         case 'refreshList':
@@ -319,6 +326,23 @@ export default {
         value: row.id
       }]
       this.$store.dispatch('addParametersProcessPos', parametersList)
+    },
+    setFieldsList() {
+      const list = []
+      // Product Code
+      this.fieldsList.forEach(element => {
+        this.createFieldFromDictionary(element)
+          .then(response => {
+            const data = response
+            list.push({
+              ...data,
+              containerUuid: 'Orders-List'
+            })
+          }).catch(error => {
+            console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
+          })
+      })
+      this.metadataList = list
     }
   }
 }

src/components/ADempiere/Form/VPOS/ProductInfo/productList.vue

@@ -140,6 +140,13 @@ export default {
     if (this.isReadyFromGetData) {
       this.loadProductsPricesList()
     }
+    if (this.isEmptyValue(this.listWithPrice)) {
+      this.$store.dispatch('listProductPriceFromServer', {
+        containerUuid: 'Products-Price-List',
+        pageNumber: 1,
+        searchValue: ''
+      })
+    }
   },
   beforeDestroy() {
     this.unsubscribe()