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>

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>

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

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

@@ -34,6 +34,7 @@
               >
                 <product-info
                   v-if="field.columnName === 'ProductValue'"
+                  id="ProductValue"
                   :key="field.columnName"
                   :metadata="field"
                 />
@@ -41,6 +42,7 @@
             </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" />
+              <span id="toolPoint">
-              <el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
+                <el-button type="primary" icon="el-icon-top" :disabled="isDisabled" @click="arrowTop" />
-              <el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
+                <el-button type="primary" icon="el-icon-bottom" :disabled="isDisabled" @click="arrowBottom" />
-              <el-button
+                <el-button v-show="isValidForDeleteLine(listOrderLine)" type="danger" icon="el-icon-delete" :disabled="isDisabled" @click="deleteOrderLine(currentOrderLine)" />
-                v-show="isValidForDeleteLine(listOrderLine)"
+                <el-button
-                type="success"
+                  v-show="isValidForDeleteLine(listOrderLine)"
-                icon="el-icon-bank-card"
+                  type="success"
-                @click="openCollectionPanel"
+                  icon="el-icon-bank-card"
-              >
+                  @click="openCollectionPanel"
-                {{ labelButtonCollections }}
+                >
-              </el-button>
+                  {{ 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'"

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'"

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'
+      }
     }
   }
 }

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'
+      }
     }
   }
 }

src/layout/components/Navbar.vue

@@ -14,53 +14,13 @@
       <search id="header-search" class="right-menu-item" style="padding-top: 10px;" />
       <badge style="padding-top: 6px;" />
     </div>
-    <!--
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
-        <error-log class="errLog-container right-menu-item hover-effect" />
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-      </template>
-
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>
-              {{ $t('navbar.profile') }}
-            </el-dropdown-item>
-          </router-link>
-          <router-link to="/">
-            <el-dropdown-item>
-              {{ $t('navbar.dashboard') }}
-            </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>
-              {{ $t('navbar.github') }}
-            </el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">{{ $t('navbar.logOut') }}</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      -->
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <el-tooltip v-if="showGuide" content="Guia" placement="top-start">
+          <el-button icon="el-icon-info" type="text" style="color: black;font-size: larger" @click.prevent.stop="guide" />
+        </el-tooltip>
         <search id="header-search" class="right-menu-item" />
-        <badge />
+        <badge id="badge-navar" />
         <error-log class="errLog-container right-menu-item hover-effect" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -106,6 +66,9 @@ import LangSelect from '@/components/LangSelect'
 import Search from '@/components/HeaderSearch'
 import Badge from '@/components/ADempiere/Badge'
 import { getImagePath } from '@/utils/ADempiere/resource.js'
+import Driver from 'driver.js' // import driver.js
+import 'driver.js/dist/driver.min.css' // import driver.js css
+import steps from '@/components/ADempiere/Form/VPOS/Guide/steps'
 
 export default {
   components: {
@@ -122,13 +85,27 @@ export default {
   data() {
     return {
       user: {},
-      isMenuMobile: false
+      isMenuMobile: false,
+      driver: null
     }
   },
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isShowedPOSKeyLaout() {
+      return this.$store.getters.getShowPOSKeyLayout
+    },
+    showCollection() {
+      return this.$store.getters.getShowCollectionPos
+    },
+    showGuide() {
+      const typeViews = this.$route.meta.type
+      if (!this.isEmptyValue(typeViews) && typeViews === 'form') {
+        return true
+      }
+      return false
+    },
     ...mapGetters([
       'sidebar',
       'avatar',
@@ -148,7 +125,16 @@ export default {
       return uri
     }
   },
+  mounted() {
+    this.driver = new Driver()
+  },
   methods: {
+    guide(value) {
+      const stepsPos = steps.filter(steps => this.isEmptyValue(steps.panel))
+      value = this.showCollection && this.isShowedPOSKeyLaout ? steps : stepsPos
+      this.driver.defineSteps(value)
+      this.driver.start()
+    },
     handleOpen(key, keyPath) {
       console.log(key, keyPath)
     },