From 8c445f59d6c9472ee803c4480c8acc8de90dc0de Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Fri, 21 May 2021 08:38:39 -0400
Subject: [PATCH] Changing order table options  (#862)

* corrections of errors in post services

* fix order line

* change option in table

* minimal changes

* minimal changes

* remove commnet

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
---
 .../ADempiere/Form/VPOS/Order/index.vue       | 162 +++++++-----------
 .../ADempiere/Form/VPOS/Order/line/index.vue  |   3 +-
 .../Form/VPOS/Order/orderLineMixin.js         |  31 ++--
 3 files changed, 85 insertions(+), 111 deletions(-)

diff --git a/src/components/ADempiere/Form/VPOS/Order/index.vue b/src/components/ADempiere/Form/VPOS/Order/index.vue
index 4c58467a..974795fd 100644
--- a/src/components/ADempiere/Form/VPOS/Order/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Order/index.vue
@@ -87,7 +87,7 @@
                 :key="key"
                 :column-key="valueOrder.columnName"
                 :label="valueOrder.label"
-                :width="valueOrder.isNumeric ? 'auto' : '380'"
+                :width="!valueOrder.isNumeric ? valueOrder.size : valueOrder.size"
                 :align="valueOrder.isNumeric ? 'right' : 'left'"
               >
                 <template slot-scope="scope">
@@ -97,102 +97,68 @@
                 </template>
               </el-table-column>
               <el-table-column
-                label=""
-                width="120"
+                :label="$t('form.pos.tableProduct.options')"
+                width="180"
               >
                 <template slot-scope="scope">
-                  <el-dropdown trigger="click" @command="changeLine">
-                    <span class="el-dropdown-link">
-                      {{ $t('form.pos.tableProduct.options') }}
-                      <i class="el-icon-arrow-down el-icon--right" />
-                    </span>
-                    <el-dropdown-menu slot="dropdown" style="padding-bottom: 0px;">
-                      <el-dropdown-item
-                        :command="{
-                          ...scope.row,
-                          option: $t('form.productInfo.productInformation')
-                        }"
-                      >
-                        <el-popover
-                          v-if="!isEmptyValue(currentLineOrder)"
-                          placement="right"
-                          trigger="click"
-                          :title="$t('form.productInfo.productInformation')"
-                        >
-                          <el-form
-                            label-position="top"
-                            label-width="60px"
-                            style="float: right; display: flex; line-height: 30px;"
-                          >
-                            <el-row :gutter="24">
-                              <el-col :span="4">
-                                <div>
-                                  <el-avatar 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-popover
+                    v-if="!isEmptyValue(listOrderLine)"
+                    placement="right"
+                    trigger="click"
+                    :title="$t('form.productInfo.productInformation')"
+                  >
+                    <el-form
+                      label-position="top"
+                      style="float: right; display: flex; line-height: 30px;"
+                    >
+                      <el-row :gutter="24">
+                        <el-col :span="4">
+                          <div>
+                            <el-avatar shape="square" :size="100" src="https://#" @error="true">
+                              <el-image>
+                                <div slot="error" class="image-slot">
+                                  <i class="el-icon-picture-outline" />
                                 </div>
-                              </el-col>
-                              <el-col :span="10">
-                                {{ $t('form.productInfo.code') }}: <b>{{ currentLineOrder.product.value }}</b><br>
-                                {{ $t('form.productInfo.name') }}: <b>{{ currentLineOrder.product.name }}</b><br>
-                                {{ $t('form.productInfo.description') }}: <b>{{ currentLineOrder.product.description }}</b><br>
-                              </el-col>
-                              <el-col :span="10">
-                                <div style="float: right">
-                                  {{ $t('form.productInfo.price') }}:
-                                  <b>{{ formatPrice(currentLineOrder.product.priceStandard, pointOfSalesCurrency.iSOCode) }}</b>
-                                  <br>
-                                  {{ $t('form.productInfo.taxAmount') }}:
-                                  <b>{{ currentLineOrder.taxIndicator }}</b>
-                                  <br>
-                                  {{ $t('form.productInfo.quantityAvailable') }}:
-                                  <b>{{ formatQuantity(currentLineOrder.quantityOrdered) }}</b>
-                                </div>
-                              </el-col>
-                            </el-row>
-                          </el-form>
-                          <el-button slot="reference" type="text" style="display: flex;width: 110%;padding-bottom: 5%;padding-top: 5%;">
-                            <i class="el-icon-info" /> {{ $t('form.productInfo.productInformation') }}
-                          </el-button>
-                        </el-popover>
-                      </el-dropdown-item>
-                      <el-dropdown-item
-                        :command="{
-                          ...scope.row,
-                          option: $t('form.pos.tableProduct.editQuantities')
-                        }"
-                      >
-                        <el-popover
-                          placement="right"
-                          trigger="click"
-                          :title="$t('form.pos.tableProduct.editQuantities')"
-                          width="600"
-                          @hide="showFieldLine = false"
-                        >
-                          <field-line
-                            :data-line="scope.row"
-                            :show-field="showFieldLine"
-                            :current-line="currentOrderLine"
-                          />
-                          <el-button
-                            slot="reference"
-                            type="text"
-                            :disabled="isDisabled"
-                            @click="showFieldLine = !showFieldLine"
-                          >
-                            <i class="el-icon-edit" /> {{ $t('form.pos.tableProduct.editQuantities') }}
-                          </el-button>
-                        </el-popover>
-                      </el-dropdown-item>
-                      <el-button type="danger" icon="el-icon-delete" class="delete-buttom" :disabled="isDisabled" plain @click="deleteOrderLine(scope.row)">
-                        {{ $t('form.pos.tableProduct.remove') }}
-                      </el-button>
-                    </el-dropdown-menu>
-                  </el-dropdown>
+                              </el-image>
+                            </el-avatar>
+                          </div>
+                        </el-col>
+                        <el-col :span="10">
+                          {{ $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">
+                          <div style="float: right">
+                            {{ $t('form.productInfo.price') }}:
+                            <b>{{ formatPrice(scope.row.product.priceStandard, pointOfSalesCurrency.iSOCode) }}</b>
+                            <br>
+                            {{ $t('form.productInfo.taxAmount') }}:
+                            <b>{{ scope.row.taxIndicator }}</b>
+                            <br>
+                            {{ $t('form.productInfo.quantityAvailable') }}:
+                            <b>{{ formatQuantity(scope.row.quantityOrdered) }}</b>
+                          </div>
+                        </el-col>
+                      </el-row>
+                    </el-form>
+                    <el-button slot="reference" type="primary" icon="el-icon-info" size="mini" style="margin-right: 3%;" />
+                  </el-popover>
+                  <el-popover
+                    placement="right"
+                    trigger="click"
+                    :title="$t('form.pos.tableProduct.editQuantities')"
+                    width="600"
+                    @hide="showFieldLine = false"
+                  >
+                    <field-line
+                      :data-line="scope.row"
+                      :show-field="showFieldLine"
+                      :current-line="currentLineOrder"
+                    />
+                    <el-button slot="reference" type="success" icon="el-icon-edit" size="mini" style="margin-right: 3%;" @click="showEditLine(scope.row)" />
+                  </el-popover>
+                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteOrderLine(scope.row)" />
                 </template>
               </el-table-column>
             </el-table>
@@ -465,8 +431,8 @@ export default {
       return this.currentOrder.lineOrder
     },
     currentLineOrder() {
-      console.log(this.$store.state['pointOfSales/orderLine/index'].line)
-      return this.$store.state['pointOfSales/orderLine/index'].line
+      const line = this.$store.state['pointOfSales/orderLine/index'].line
+      return line
     }
   },
   mounted() {
@@ -557,6 +523,10 @@ export default {
         this.currentOrderLine = this.listOrderLine[this.currentTable]
       }
     },
+    showEditLine(line) {
+      this.$store.commit('setLine', line)
+      this.showFieldLine = !this.showFieldLine
+    },
     arrowBottom() {
       const top = this.listOrderLine.length - 1
       if (this.currentTable < top) {
diff --git a/src/components/ADempiere/Form/VPOS/Order/line/index.vue b/src/components/ADempiere/Form/VPOS/Order/line/index.vue
index cc92a673..c1d40333 100644
--- a/src/components/ADempiere/Form/VPOS/Order/line/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Order/line/index.vue
@@ -153,8 +153,7 @@ export default {
   },
   watch: {
     showField(value) {
-      if (value && this.isEmptyValue(this.metadataList) && (this.dataLine.uuid === this.currentLine.uuid)) {
-        this.setFieldsList()
+      if (value && this.isEmptyValue(this.metadataList) && (this.dataLine.uuid === this.$store.state['pointOfSales/orderLine/index'].line.uuid)) {
         this.metadataList = this.setFieldsList()
         this.isLoadedField = true
       }
diff --git a/src/components/ADempiere/Form/VPOS/Order/orderLineMixin.js b/src/components/ADempiere/Form/VPOS/Order/orderLineMixin.js
index c9596259..e53834ee 100644
--- a/src/components/ADempiere/Form/VPOS/Order/orderLineMixin.js
+++ b/src/components/ADempiere/Form/VPOS/Order/orderLineMixin.js
@@ -29,27 +29,32 @@ export default {
         lineDescription: {
           columnName: 'LineDescription',
           label: this.$t('form.pos.tableProduct.product'),
-          isNumeric: false
+          isNumeric: false,
+          size: '380'
         },
         currentPrice: {
           columnName: 'CurrentPrice',
           label: this.$t('form.productInfo.price'),
-          isNumeric: true
+          isNumeric: true,
+          size: 'auto'
         },
         quantityOrdered: {
           columnName: 'QtyOrdered',
           label: this.$t('form.pos.tableProduct.quantity'),
-          isNumeric: true
+          isNumeric: true,
+          size: '100px'
         },
         discount: {
           columnName: 'Discount',
           label: '% ' + this.$t('form.pos.order.discount'),
-          isNumeric: true
+          isNumeric: true,
+          size: '110px'
         },
         grandTotal: {
           columnName: 'GrandTotal',
           label: 'Total',
-          isNumeric: true
+          isNumeric: true,
+          size: 'auto'
         }
       },
       currentOrderLine: {
@@ -119,12 +124,7 @@ export default {
       }
     },
     updateOrderLine(line) {
-      let {
-        currentPrice: price,
-        discount: discountRate,
-        quantityOrdered: quantity
-      } = this.currentOrderLine
-
+      let quantity, price, discountRate
       switch (line.columnName) {
         case 'QtyEntered':
           quantity = line.value
@@ -155,7 +155,8 @@ export default {
             discount: response.discountRate
           })
           this.fillOrderLine(response)
-          this.reloadOrder(true)
+          this.$store.dispatch('reloadOrder', { orderUuid: this.$store.getters.posAttributes.currentPointOfSales.currentOrder.uuid })
+          this.$store.dispatch('currentLine', response)
         })
         .catch(error => {
           console.error(error.message)
@@ -167,11 +168,12 @@ export default {
         })
     },
     deleteOrderLine(lineSelection) {
+      console
       requestDeleteOrderLine({
         orderLineUuid: lineSelection.uuid
       })
         .then(() => {
-          this.reloadOrder(true)
+          this.$store.dispatch('reloadOrder', { orderUuid: this.$store.getters.posAttributes.currentPointOfSales.currentOrder.uuid })
         })
         .catch(error => {
           console.error(error.message)
@@ -203,6 +205,9 @@ export default {
         return this.formatPrice(row.grandTotal, currency)
       }
     },
+    productPrice(price, discount) {
+      return price / discount * 100
+    },
     handleCurrentLineChange(rowLine) {
       this.$store.dispatch('currentLine', rowLine)
       if (!this.isEmptyValue(rowLine)) {