From 615aeacd9927b77d60327f75719921e1a762635d Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Fri, 28 May 2021 12:21:03 -0400
Subject: [PATCH] changer le style du couvre-chef du catalogue (#884)

* load the title of the payment method on the payment cards

* style of catalog cards

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
---
 .../ADempiere/Form/VPOS/Collection/index.vue  |  1 +
 .../Form/VPOS/Collection/typeCollection.vue   | 46 +++++++++++++------
 .../ADempiere/Form/VPOS/KeyLayout/index.vue   | 21 +++++++--
 3 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/components/ADempiere/Form/VPOS/Collection/index.vue b/src/components/ADempiere/Form/VPOS/Collection/index.vue
index 80d09b1e..a94377b1 100644
--- a/src/components/ADempiere/Form/VPOS/Collection/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Collection/index.vue
@@ -108,6 +108,7 @@
             :currency="pointOfSalesCurrency"
             :list-types-payment="fieldsList[2]"
             :is-loaded="isLoadedPayments"
+            :list-payment-type="fieldsPaymentType"
           />
           <div
             v-else
diff --git a/src/components/ADempiere/Form/VPOS/Collection/typeCollection.vue b/src/components/ADempiere/Form/VPOS/Collection/typeCollection.vue
index a5baa5f8..cd5b6670 100644
--- a/src/components/ADempiere/Form/VPOS/Collection/typeCollection.vue
+++ b/src/components/ADempiere/Form/VPOS/Collection/typeCollection.vue
@@ -111,6 +111,10 @@ export default {
       type: Array,
       default: undefined
     },
+    openPanel: {
+      type: Boolean,
+      default: false
+    },
     currency: {
       type: Object,
       default: undefined
@@ -119,6 +123,10 @@ export default {
       type: Object,
       default: undefined
     },
+    listPaymentType: {
+      type: Object,
+      default: undefined
+    },
     isLoaded: {
       type: Boolean,
       default: false
@@ -142,10 +150,23 @@ export default {
       return this.$store.getters.getConvertionPayment
     }
   },
+  watch: {
+    listPaymentType(value) {
+      if (!this.isEmptyValue(value.reference)) {
+        this.tenderTypeDisplaye({
+          tableName: value.reference.tableName,
+          query: value.reference.query
+        })
+      }
+    }
+  },
   created() {
     this.convertingPaymentMethods()
     if (this.isEmptyValue(this.labelTypesPayment)) {
-      this.tenderTypeDisplaye(this.listTypesPayment)
+      this.tenderTypeDisplaye({
+        tableName: this.listPaymentType.reference.tableName,
+        query: this.listPaymentType.reference.query
+      })
     }
   },
   methods: {
@@ -228,19 +249,18 @@ export default {
         paymentUuid
       })
     },
-    tenderTypeDisplaye(value) {
-      if (!this.isEmptyValue(value.reference)) {
-        const tenderType = value.reference
-        if (!this.isEmptyValue(tenderType)) {
-          this.$store.dispatch('getLookupListFromServer', {
-            tableName: tenderType.tableName,
-            query: tenderType.query,
-            filters: []
+    tenderTypeDisplaye({
+      tableName,
+      query
+    }) {
+      if (!this.isEmptyValue(tableName)) {
+        this.$store.dispatch('getLookupListFromServer', {
+          tableName,
+          query
+        })
+          .then(response => {
+            this.labelTypesPayment = response
           })
-            .then(response => {
-              this.labelTypesPayment = response
-            })
-        }
       }
     }
   }
diff --git a/src/components/ADempiere/Form/VPOS/KeyLayout/index.vue b/src/components/ADempiere/Form/VPOS/KeyLayout/index.vue
index fcefaf18..83d45bdf 100644
--- a/src/components/ADempiere/Form/VPOS/KeyLayout/index.vue
+++ b/src/components/ADempiere/Form/VPOS/KeyLayout/index.vue
@@ -46,8 +46,9 @@
           <template v-for="(keyValue, key) in getKeyList">
             <el-col :key="key" :span="size">
               <el-card
-                :body-style="{ padding: '0px' }"
-                shadow="always"
+                shadow="never"
+                class="custom-card"
+                :body-style="{ padding: '10px' }"
               >
                 <span>
                   <p style="padding-left: 10px; font-size: 12px; color: #0e2ea4">
@@ -105,8 +106,7 @@ export default {
         identifier: 'undefined',
         value: '',
         isLoaded: true
-      }],
-      hola: ''
+      }]
     }
   },
   computed: {
@@ -228,7 +228,7 @@ export default {
       }
       const image = getImagePath({
         file: fileName,
-        width: 300,
+        width: 200,
         height: 300
       })
       return image.uri
@@ -301,3 +301,14 @@ export default {
     padding-right: 5px !important;
   }
 </style>
+
+<style lang="scss">
+  .custom-card {
+    margin: 10px;
+    cursor: pointer;
+  }
+  .custom-card:hover {
+    background-color: #eaf5fe;
+    border: 1px solid #36a3f7;
+  }
+</style>