Upload Image to Product Information (#1153)

* Upload Image to Product Information * add product image as gallery Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
adempiere · Sep 3, 2021 · 2eb0d16 · 2eb0d16
1 parent 287d7f8
commit 2eb0d16
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 31 deletions.
diff --git a/src/components/ADempiere/Form/VPOS/Order/ImageProduct/index.vue b/src/components/ADempiere/Form/VPOS/Order/ImageProduct/index.vue
@@ -14,32 +14,45 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div style="width: 140px">
-    <p>
-      <label style="margin-right: 16px;">Switch Loading</label>
-      <el-switch v-model="loading" />
-    </p>
-    <el-skeleton style="width: 140px" :loading="loading" animated>
+  <div>
+    <el-skeleton :loading="loading" animated>
       <template slot="template">
         <el-skeleton-item
           variant="image"
-          style="width: 140px; height: 140px;"
         />
       </template>
       <template>
         <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
-          <el-image
-            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-            class="image"
-            style="width: 140px; height: 140px;"
-          />
+          <el-carousel trigger="click" height="150px">
+            <el-carousel-item v-for="item in listImage.length" :key="item">
+              <el-image
+                :src="getImageFromSource(listImage[item - 1])"
+                class="image"
+                style="width: auto; height: 140px;"
+              >
+                <div slot="error" class="image-slot">
+                  <el-skeleton :loading="true" animated>
+                    <template slot="template">
+                      <el-skeleton-item
+                        variant="image"
+                        style="width: auto; height: 140px;"
+                      />
+                    </template>
+                  </el-skeleton>
+                </div>
+              </el-image>
+            </el-carousel-item>
+          </el-carousel>
         </el-card>
       </template>
     </el-skeleton>
   </div>
 </template>
 
 <script>
+import { requestAttachment } from '@/api/ADempiere/user-interface.js'
+import { getImagePath } from '@/utils/ADempiere/resource.js'
+
 export default {
   name: 'ImageProduct',
   props: {
@@ -67,22 +80,51 @@ export default {
   data() {
     return {
       loading: true,
+      listImage: [],
       currentDate: '2021-06-01'
     }
   },
+  computed: {
+    product() {
+      return this.$store.state['pointOfSales/orderLine/index'].line.product
+    }
+  },
   watch: {
     indicator(value) {
       this.$refs[this.stepReference].activeIndex = value
     },
     show(value) {
-      if (value && !this.isEmptyValue(this.metadataLine)) {
+      if (value && !this.isEmptyValue(this.metadataLine) && this.metadataLine.uuid === this.$store.state['pointOfSales/orderLine/index'].line.uuid) {
+        this.getListImageProduct(this.metadataLine)
+      }
+    },
+    product(value) {
+      if (this.show && !this.isEmptyValue(this.metadataLine) && this.metadataLine.uuid === this.$store.state['pointOfSales/orderLine/index'].line.uuid) {
         this.getListImageProduct(this.metadataLine)
       }
     }
   },
   methods: {
-    getListImageProduct(product) {
-      console.log(product)
+    getListImageProduct(line) {
+      requestAttachment({
+        tableName: 'M_Product',
+        recordId: line.product.id,
+        recordUuid: line.product.uuid
+      })
+        .then(response => {
+          if (!this.isEmptyValue(response.resource_references_list)) {
+            this.loading = false
+            this.listImage = response.resource_references_list
+          }
+        })
+    },
+    getImageFromSource(file) {
+      const image = getImagePath({
+        file: file.file_name,
+        width: 300,
+        height: 300
+      })
+      return image.uri
     }
   }
 }

diff --git a/src/components/ADempiere/Form/VPOS/Order/index.vue b/src/components/ADempiere/Form/VPOS/Order/index.vue
@@ -115,12 +115,12 @@
                 <template slot-scope="scope">
                   <el-popover
                     v-if="!isEmptyValue(listOrderLine)"
-                    v-model="showInfo"
                     popper-class="el-popper-info"
                     placement="right-start"
                     trigger="click"
                     width="300"
                     :title="$t('form.productInfo.productInformation')"
+                    :hide="closeInfo"
                   >
                     <el-form
                       label-position="top"
@@ -129,18 +129,9 @@
                       <el-row style="margin: 10px!important;">
                         <el-col :span="4">
                           <div>
-                            <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"
+                            <image-product
+                              :show="showInfo"
+                              :metadata-line="scope.row"
                             />
                           </div>
                         </el-col>
@@ -166,7 +157,7 @@
                         </el-col>
                       </el-row>
                     </el-form>
-                    <el-button slot="reference" type="primary" icon="el-icon-info" size="mini" style="margin-right: 3%;" />
+                    <el-button slot="reference" type="primary" icon="el-icon-info" size="mini" style="margin-right: 3%;" @click="showInfoLine(scope.row)" />
                   </el-popover>
                   <el-popover
                     placement="right"
@@ -416,6 +407,8 @@ import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
 import fieldsListOrder from './fieldsListOrder.js'
 import BusinessPartner from '@/components/ADempiere/Form/VPOS/BusinessPartner'
 import fieldLine from '@/components/ADempiere/Form/VPOS/Order/line/index'
+import ImageProduct from '@/components/ADempiere/Form/VPOS/Order/ImageProduct/index'
+// src/components/ADempiere/Form/VPOS/Order/ImageProduct/index.vue
 import ProductInfo from '@/components/ADempiere/Form/VPOS/ProductInfo'
 import FastOrdesList from '@/components/ADempiere/Form/VPOS/OrderList/fastOrder'
 // Format of values ( Date, Price, Quantity )
@@ -433,8 +426,8 @@ export default {
     BusinessPartner,
     ProductInfo,
     FastOrdesList,
-    fieldLine
-    // ImageProduct
+    fieldLine,
+    ImageProduct
   },
   mixins: [
     formMixin,
@@ -800,6 +793,13 @@ export default {
         this.currentOrderLine = this.listOrderLine[this.currentTable]
       }
     },
+    showInfoLine(line) {
+      this.$store.commit('setLine', line)
+      this.showInfo = true
+    },
+    closeInfo(line) {
+      this.showInfo = false
+    },
     showEditLine(line) {
       this.$store.commit('setLine', line)
       this.showFieldLine = !this.showFieldLine