Point of Sale Guide (#905)

* Point of Sale Guide * Point of Sale Guide * complete point-of-sale quick guide * minimal change Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
adempiere · Jun 4, 2021 · 831efe7 · 831efe7
1 parent 71a61f1
commit 831efe7
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 60 deletions.
diff --git a/src/components/ADempiere/Form/VPOS/Collection/index.vue b/src/components/ADempiere/Form/VPOS/Collection/index.vue
@@ -89,7 +89,7 @@
                 style="float: right; display: flex; line-height: 10px;"
                 :disabled="isDisabled"
               >
-                <el-row>
+                <el-row id="fieldListCollection">
                   <el-col v-for="(field, index) in fieldsList" :key="index" :span="8">
                     <!-- Add selected currency symbol -->
                     <field-definition
@@ -104,7 +104,7 @@
               </el-form>
             </div>
           </el-card>
-          <samp style="float: right;padding-right: 10px;">
+          <samp id="buttonCollection" style="float: right;padding-right: 10px;">
             <el-button type="danger" icon="el-icon-close" @click="exit" />
             <el-button type="info" icon="el-icon-minus" :disabled="isDisabled" @click="undoPatment" />
             <el-button type="primary" :disabled="validPay || addPay || isDisabled" icon="el-icon-plus" @click="addCollectToList(paymentBox)" />
@@ -115,6 +115,7 @@
         <el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
           <type-collection
             v-if="!updateOrderPaymentPos"
+            id="cardCollection"
             :is-add-type-pay="listPayments"
             :currency="pointOfSalesCurrency"
             :list-types-payment="fieldsList[2]"
@@ -132,7 +133,7 @@
           />
         </el-main>
         <!-- Collection container bottom panel -->
-        <el-footer height="auto" style="padding-left: 0px; padding-right: 0px;">
+        <el-footer id="infoInvoce" height="auto" style="padding-left: 0px; padding-right: 0px;">
           <el-row :gutter="24" style="background-color: rgb(245, 247, 250);">
             <el-col :span="24">
               <span>

diff --git a/src/components/ADempiere/Form/VPOS/Guide/steps.js b/src/components/ADempiere/Form/VPOS/Guide/steps.js
@@ -0,0 +1,86 @@
+import language from '@/lang'
+const steps = [
+  {
+    element: '#ProductValue',
+    popover: {
+      title: language.t('form.productInfo.codeProduct'),
+      description: language.t('form.guideSteps.productValue.description'),
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#BusinessPartner',
+    popover: {
+      title: language.t('form.pos.order.BusinessPartnerCreate.businessPartner'),
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#linesOrder',
+    popover: {
+      title: language.t('form.guideSteps.linesTable.title'),
+      position: 'top'
+    }
+  },
+  {
+    element: '#buttonPanelLeftPos',
+    popover: {
+      title: language.t('form.guideSteps.buttonPanelLeftPos.title'),
+      position: 'right'
+    }
+  },
+  {
+    element: '#toolPoint',
+    popover: {
+      title: language.t('form.guideSteps.toolsPoint.title'),
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#point',
+    popover: {
+      title: language.t('form.pos.title'),
+      position: 'right'
+    }
+  },
+  {
+    element: '#buttonPanelRightPos',
+    popover: {
+      title: language.t('form.guideSteps.buttonPanelRightPos.title'),
+      position: 'left'
+    }
+  },
+  {
+    element: '#fieldListCollection',
+    popover: {
+      title: language.t('form.guideSteps.fieldListCollection.title'),
+      position: 'left'
+    },
+    panel: 'Collection'
+  },
+  {
+    element: '#buttonCollection',
+    popover: {
+      title: language.t('form.guideSteps.buttonCollection.title'),
+      position: 'left'
+    },
+    panel: 'Collection'
+  },
+  {
+    element: '#cardCollection',
+    popover: {
+      title: language.t('form.guideSteps.cardCollection.title'),
+      position: 'left'
+    },
+    panel: 'Collection'
+  },
+  {
+    element: '#infoInvoce',
+    popover: {
+      title: language.t('form.guideSteps.infoInvoce.title'),
+      position: 'top'
+    },
+    panel: 'Collection'
+  }
+]
+export default steps
diff --git a/src/components/ADempiere/Form/VPOS/Order/index.vue b/src/components/ADempiere/Form/VPOS/Order/index.vue
@@ -34,13 +34,15 @@
               >
                 <product-info
                   v-if="field.columnName === 'ProductValue'"
+                  id="ProductValue"
                   :key="field.columnName"
                   :metadata="field"
                 />
               </template>
             </el-col>
             <el-col :span="isEmptyValue(currentOrder) ? 9 : 7" :style="styleTab">
               <business-partner
+                id="BusinessPartner"
                 :parent-metadata="{
                   name: panelMetadata.name,
                   containerUuid: panelMetadata.containerUuid,
@@ -78,6 +80,7 @@
         <el-container style="background: white; padding: 0px; height: 100% !important;">
           <el-main style="padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px;">
             <el-table
+              id="linesOrder"
               ref="linesTable"
               v-shortkey="shortsKey"
               :data="listOrderLine"
@@ -172,19 +175,21 @@
 
           <el-footer :class="classOrderFooter">
             <div class="keypad">
-              <el-button type="primary" icon="el-icon-top" :disabled="isDisabled" @click="arrowTop" />
-              <el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
-              <el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
-              <el-button
-                v-show="isValidForDeleteLine(listOrderLine)"
-                type="success"
-                icon="el-icon-bank-card"
-                @click="openCollectionPanel"
-              >
-                {{ labelButtonCollections }}
-              </el-button>
+              <span id="toolPoint">
+                <el-button type="primary" icon="el-icon-top" :disabled="isDisabled" @click="arrowTop" />
+                <el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
+                <el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
+                <el-button
+                  v-show="isValidForDeleteLine(listOrderLine)"
+                  type="success"
+                  icon="el-icon-bank-card"
+                  @click="openCollectionPanel"
+                >
+                  {{ labelButtonCollections }}
+                </el-button>
+              </span>
               <br>
-              <p>
+              <p id="point">
                 <el-dropdown
                   v-if="!isEmptyValue(currentPointOfSales)"
                   trigger="click"
@@ -295,6 +300,7 @@
     </div>
     <div v-if="!isMobile" :style="classButtomRight">
       <el-button
+        id="buttonPanelRightPos"
         :circle="true"
         type="primary"
         :icon="isShowedPOSKeyLayout ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"

diff --git a/src/components/ADempiere/Form/VPOS/templateDevice/desktop.vue b/src/components/ADempiere/Form/VPOS/templateDevice/desktop.vue
@@ -29,6 +29,7 @@
             </el-aside>
             <div style="width: 36px;padding-top: 30vh; z-index: 100;">
               <el-button
+                id="buttonPanelLeftPos"
                 :circle="true"
                 type="primary"
                 :icon="isShowedPOSOptions ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"

diff --git a/src/lang/ADempiere/en.js b/src/lang/ADempiere/en.js
@@ -509,6 +509,48 @@ export default {
       grandTotalConverted: 'Grand Total Converted',
       quantityAvailable: 'Quantity Avalible',
       upc: 'UPC / EAN'
+    },
+    guideSteps: {
+      productValue: {
+        description: 'Search for the product by Product Code, Name or UPC'
+      },
+      businessPartner: {
+        description: 'Show Business Partner Information'
+      },
+      linesTable: {
+        title: 'Order Lines',
+        description: 'Order Product Listing'
+      },
+      buttonPanelLeftPos: {
+        title: 'Show Left Panel',
+        description: 'Display the Point of Sale Options panel'
+      },
+      point: {
+        description: 'Displays the current point of sale'
+      },
+      buttonPanelRightPos: {
+        title: 'Show Right Panel',
+        description: 'Displays the catalog panel'
+      },
+      fieldListCollection: {
+        title: 'Collection Fields',
+        description: 'Field Group which has. Amount, Currency, Payment Type, Bank, Reference No. and Date'
+      },
+      buttonCollection: {
+        title: 'Collection Tools',
+        description: 'Composed of a set of buttons that allows you to add, delete and process'
+      },
+      cardCollection: {
+        title: 'Payment Panel',
+        description: 'In this panel you can see a list with the cards of the added payments'
+      },
+      infoInvoce: {
+        title: 'Invoice Detail',
+        description: 'Invoice information with total amount, pending, change'
+      },
+      toolsPoint: {
+        title: 'Point of Sale Tools'
+      }
     }
   }
 }
diff --git a/src/lang/ADempiere/es.js b/src/lang/ADempiere/es.js
@@ -484,6 +484,48 @@ export default {
       grandTotalConverted: 'Gran Total Convertido',
       quantityAvailable: 'Cantidad Disponible',
       upc: 'Código de Barras'
+    },
+    guideSteps: {
+      productValue: {
+        description: 'Busca el producto segun su Codigo, Nombre o UPC'
+      },
+      businessPartner: {
+        description: 'Mostrar Informacion del Socio de Negocios'
+      },
+      linesTable: {
+        title: 'Lineas de la Orden',
+        description: 'Listado de los Producto de la orden'
+      },
+      buttonPanelLeftPos: {
+        title: 'Mostrar Panel Izquierdo',
+        description: 'Despliega el panel de Opciones del Punto de Venta'
+      },
+      point: {
+        description: 'Muestra el punto de venta actual'
+      },
+      buttonPanelRightPos: {
+        title: 'Mostrar Panel Derecho',
+        description: 'Despliega el panel de catalogo'
+      },
+      fieldListCollection: {
+        title: 'Campos de la Cobranza',
+        description: 'Grupo de Campo el cual posee. Monto, Moneda, Tipo de pago, Banco, Nro Referencia y Fecha'
+      },
+      buttonCollection: {
+        title: 'Herramientas de la Cobranza',
+        description: 'Compuesta por un conjunto de botonera que posee agregar, eliminar y porcesar'
+      },
+      cardCollection: {
+        title: 'Panel de Pago',
+        description: 'En este panel aparece un listado con las tarjeta de los pagos agregados'
+      },
+      infoInvoce: {
+        title: 'Detalle de la Factura',
+        description: 'Informacion de la Factura con el monto total, pendiente, cambio'
+      },
+      toolsPoint: {
+        title: 'Herramientas del Punto de Venta'
+      }
     }
   }
 }