Fix Check Price (#914)

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/components/ADempiere/Form/PriceChecking/index.vue

@@ -38,6 +38,7 @@
         >
           <field
             v-for="(field) in fieldsList"
+            id="ProductValue"
             ref="ProductValue"
             :key="field.columnName"
             :metadata-field="field"
@@ -105,8 +106,7 @@ import formMixin from '@/components/ADempiere/Form/formMixin.js'
 import fieldsList from './fieldsList.js'
 import { getProductPrice } from '@/api/ADempiere/form/price-checking.js'
 import { formatPercent, formatPrice } from '@/utils/ADempiere/valueFormat.js'
-import { buildImageFromArrayBuffer } from '@/utils/ADempiere/resource.js'
-import { requestImage } from '@/api/ADempiere/common/resource.js'
+import { getImagePath } from '@/utils/ADempiere/resource.js'
 
 export default {
   name: 'PriceChecking',
@@ -122,7 +122,7 @@ export default {
       currentImageOfProduct: '',
       search: 'sad',
       resul: '',
-      load: '',
+      backgroundForm: '',
       unsubscribe: () => {}
     }
   },
@@ -133,63 +133,38 @@ export default {
     defaultImage() {
       return require('@/image/ADempiere/priceChecking/no-image.jpg')
     },
-    backgroundForm() {
-      if (this.isEmptyValue(this.organizationImagePath)) {
-        return this.defaultImage
-      }
-      if (this.isEmptyValue(this.currentImageOfProduct)) {
-        return this.organizationBackground
-      }
-      return this.currentImageOfProduct
-    },
     currentPoint() {
       return this.$store.getters.posAttributes.currentPointOfSales
     }
   },
   created() {
-    this.$store.dispatch('listPointOfSalesFromServer')
     this.unsubscribe = this.subscribeChanges()
   },
   mounted() {
-    this.getImage()
+    this.backgroundForm = this.defaultImage
+    this.getImageFromSource(this.organizationImagePath)
+    this.$store.dispatch('listPointOfSalesFromServer')
   },
   beforeDestroy() {
     this.unsubscribe()
   },
   methods: {
-    async getImage(imageName = '') {
-      let isSetOrg = false
-      if (this.isEmptyValue(imageName)) {
-        if (!this.isEmptyValue(this.organizationBackground)) {
-          return this.organizationBackground
-        }
-        isSetOrg = true
-        imageName = this.organizationImagePath
-      }
-      // the name of the image plus the height and width of the container is sent
-      const imageBuffer = await requestImage({
-        file: imageName,
-        width: 750,
-        height: 380
-      }).then(responseImage => {
-        const arrayBufferAsImage = buildImageFromArrayBuffer({
-          arrayBuffer: responseImage
-        })
-        if (isSetOrg) {
-          this.organizationBackground = arrayBufferAsImage
-          return arrayBufferAsImage
-        }
-
-        this.currentImageOfProduct = arrayBufferAsImage
-        return arrayBufferAsImage
-      })
-      return imageBuffer
-    },
     focusProductValue() {
       if (!this.isEmptyValue(this.$refs.ProductValue[0])) {
         this.$refs.ProductValue[0].$children[0].$children[0].$children[1].$children[0].focus()
       }
     },
+    getImageFromSource(fileName) {
+      if (this.isEmptyValue(fileName)) {
+        return this.defaultImage
+      }
+      const image = getImagePath({
+        file: fileName,
+        width: 250,
+        height: 280
+      })
+      this.backgroundForm = image.uri
+    },
     formatPercent,
     formatPrice,
     subscribeChanges() {
@@ -247,7 +222,7 @@ export default {
                 this.search = ''
                 this.currentImageOfProduct = ''
                 if (this.isEmptyValue(this.productPrice.image)) {
-                  this.getImage(this.productPrice.image)
+                  this.getImageFromSource(this.productPrice.image)
                 }
               })
           }
@@ -302,7 +277,7 @@ export default {
                 this.search = ''
                 this.currentImageOfProduct = ''
                 if (this.isEmptyValue(this.productPrice.image)) {
-                  this.getImage(this.productPrice.image)
+                  this.getImageFromSource(this.productPrice.image)
                 }
               })
           }, 500)
@@ -338,6 +313,7 @@ export default {
     width: 100%;
     height: 100%;
     float: inherit;
+    background: white;
     // color: white;
     // opacity: 0.5;
   }

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

@@ -112,7 +112,7 @@
                 <template slot-scope="scope">
                   <el-popover
                     v-if="!isEmptyValue(listOrderLine)"
-                    placement="right"
+                    placement="top-start"
                     trigger="click"
                     :title="$t('form.productInfo.productInformation')"
                   >
@@ -121,23 +121,29 @@
                       style="float: right; display: flex; line-height: 30px;"
                     >
                       <el-row :gutter="24">
-                        <el-col :span="4">
+                        <el-col :span="3">
                           <div>
-                            <el-avatar shape="square" :size="100" src="https://#" @error="true">
+                            <el-avatar v-if="isEmptyValue(scope.row.product.imageUrl)" shape="square" :size="100" src="https://#" @error="true">
                               <el-image>
                                 <div slot="error" class="image-slot">
                                   <i class="el-icon-picture-outline" />
                                 </div>
                               </el-image>
                             </el-avatar>
+                            <el-image
+                              v-else
+                              style="width: 100px; height: 100px"
+                              :src="scope.row.product.imageUrl"
+                              fit="contain"
+                            />
                           </div>
                         </el-col>
-                        <el-col :span="10">
+                        <el-col :span="16">
                           {{ $t('form.productInfo.code') }}: <b>{{ scope.row.product.value }}</b><br>
                           {{ $t('form.productInfo.name') }}: <b>{{ scope.row.product.name }}</b><br>
                           {{ $t('form.productInfo.description') }}: <b>{{ scope.row.product.description }}</b><br>
                         </el-col>
-                        <el-col :span="10">
+                        <el-col :span="5">
                           <div style="float: right">
                             {{ $t('form.productInfo.price') }}:
                             <b>{{ formatPrice(scope.row.product.priceStandard, pointOfSalesCurrency.iSOCode) }}</b>

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

@@ -52,37 +52,27 @@
             icon-class="shopping"
             class="el-input__icon"
           />
-          <!--
-          <i
-            class="el-icon-shopping-cart-full el-input__icon"
-          />
-          -->
         </template>
 
         <template slot-scope="props">
           <div class="header">
             <b> {{ props.item.product.value }} - {{ props.item.product.name }} </b>
           </div>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <span class="upc">
-                <!-- <b>UPC / EAN Barras:</b> <br> -->
+          <div>
+            <div style="float: left;width: 70%;">
+              <p style="overflow: hidden;text-overflow: ellipsis;text-align: inherit;">
                 {{ props.item.product.upc }} <br>
-                <span class="description">
-                  {{ props.item.product.description }}
-                </span>
-              </span>
-            </el-col>
-            <el-col :span="12">
-              <span class="price">
+                {{ props.item.product.description }}
+              </p>
+            </div>
+            <div style="width: 30%;float: right;">
+              <p style="overflow: hidden;text-overflow: ellipsis;text-align: end;">
                 {{ formatPrice(props.item.priceStandard, props.item.currency.iSOCode) }}
                 <br>
-                <span class="quantityAvailable">
-                  {{ formatQuantity(props.item.quantityAvailable) }}
-                </span>
-              </span>
-            </el-col>
-          </el-row>
+                {{ formatQuantity(props.item.quantityAvailable) }}
+              </p>
+            </div>
+          </div>
         </template>
       </el-autocomplete>
     </el-form-item>