[ADD] step control cart

package.json

@@ -18,6 +18,7 @@
 		"node-sass": "^4.5.3",
 		"pug": "^2.0.0-rc.2",
 		"sass-loader": "^6.0.6",
+		"style-loader": "^0.18.2",
 		"url-loader": "^0.5.9",
 		"vue-loader": "^12.2.2",
 		"vue-template-compiler": "^2.4.1",
@@ -26,6 +27,7 @@
 	},
 	"dependencies": {
 		"vue": "^2.4.1",
+		"vue-form-wizard": "^0.6.1",
 		"vuex": "^2.3.1"
 	}
 }

src/App.vue

@@ -1,24 +1,33 @@
 <template lang="pug">
-    .pos
-        .products-container
-            products-searcher
-            products-grid
-        .cart-container
-            cart-total
-            cart-items
-            cart-options
+    form-wizard(title="" subtitle="" nextButtonText="Continuar" backButtonText="Volver" finishButtonText="Finalizar" color="#7c7bad")
+        tab-content(title="Agregue productos al carrito")
+            .pos
+                .products-container
+                    products-searcher
+                    products-grid
+                .cart-container
+                    cart-total
+                    cart-items
+        tab-content(title="Seleccione un cliente")
+            .customers
+        tab-content(title="Vea un resumen de su operación")
+            .results
 </template>
 
 <script>
+    import { FormWizard, TabContent } from 'vue-form-wizard'
     import ProductsSearcher from '@/components/ProductsSearcher'
     import ProductsGrid from '@/components/ProductsGrid'
     import CartTotal from '@/components/CartTotal'
     import CartItems from '@/components/CartItems'
     import CartItem from '@/components/CartItem'
     import CartOptions from '@/components/CartOptions'
+    import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
     export default {
         components: {
+            'form-wizard': FormWizard,
+            'tab-content': TabContent,
             'products-searcher': ProductsSearcher,
             'products-grid': ProductsGrid,
             'cart-total': CartTotal,
@@ -30,25 +39,50 @@
 </script>
 
 <style lang="sass">
-    .pos
+    .vue-form-wizard
         width: 100%
         height: 100%
-        padding: 10px
+        padding-bottom: 0
         display: flex
-        background: #fff
-
-        .products-container
-            width: calc(100% - 300px)
-            height: 100%
-            padding-right: 5px
-            display: flex
-            flex-direction: column
-
-        .cart-container
-            width: 300px
-            height: 100%
-            border-left: 1px solid #d3d3d3
-            padding-left: 10px
-            display: flex
-            flex-direction: column
+        flex-direction: column
+        .wizard-header
+            display: none
+        .wizard-navigation
+            width: 100%
+            flex-grow: 1
+            .wizard-progress-with-circle
+                top: 35px
+            .wizard-icon-circle
+                width: 60px
+                height: 60px
+            .wizard-tab-content
+                padding: 0
+                .pos
+                    width: 100%
+                    height: 100%
+                    padding: 10px
+                    display: block
+                    background: #fff
+                    .products-container
+                        width: calc(100% - 300px)
+                        height: 100%
+                        padding-right: 5px
+                        display: inline-block
+                    .cart-container
+                        width: 300px
+                        height: 100%
+                        border-left: 1px solid #d3d3d3
+                        padding-left: 10px
+                        display: inline-block
+                        vertical-align: top
+        .wizard-card-footer
+            padding-bottom: 15px
+            .wizard-btn
+                width: 160px
+                height: 40px
+                border-radius: 0
+                box-shadow: none
+                border: none
+                &:hover, &:focus
+                    background: #7c7bad
 </style>

src/components/CartItem.vue

@@ -1,5 +1,5 @@
-<template lang="pug">
-        .cart-item
+git <template lang="pug">
+        li.cart-item
             h3.item-name {{ item.name }}
             input.item-quantity(type="text" :value="item.qty")
             span.item-x x
@@ -29,7 +29,14 @@
     .cart-item
         width: 100%
         height: 84px
+        list-style: none outside none
         border-bottom: 1px solid #d3d3d3
+        box-sizing: border-box
+
+        &:hover
+            background: #f5f5f5
+            transition-duration: 1s
+            cursor: pointer
 
         .item-name
             width: 100%

src/components/CartItems.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-    transition-group(name="list" tag="div" class="cart-items")
+    transition-group(name="list" tag="ul" class="cart-items")
         cart-item(v-for="item in items" v-bind:key="item" :item="item")
 </template>
 
@@ -23,14 +23,19 @@
     }
 </script>
 
-
 <style lang="sass">
-    .cart-items
+    .cart-items-wrapper
         width: 100%
         height: 100%
         overflow-y: auto
         overflow-x: hidden
 
+    .cart-items
+        width: 100%
+        height: calc(100% - 30px)
+        padding: 0
+        margin: 15px 0
+
     .list-enter-active, .list-leave-active
         transition: all 0.3s
 

src/index.js

@@ -13,7 +13,7 @@ openerp.eiru_pos = (instance, local) => {
                 store,
                 el: this.el,
                 template: '<App />',
-                components: { 
+                components: {
                     App
                 }
             });
@@ -26,4 +26,4 @@ openerp.eiru_pos = (instance, local) => {
     })
 
     instance.web.client_actions.add('eiru_pos.action_launch', 'instance.eiru_pos.PosWidget')
-}
+}

webpack.config.js

@@ -29,6 +29,10 @@ module.exports = {
                 loader: 'babel-loader',
                 include: Path.resolve('src')
             },
+            {
+                test: /\.css$/,
+                loader: ['style-loader', 'css-loader']
+            },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                 loader: 'url-loader',

yarn.lock

@@ -41,7 +41,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.5:
+ajv@^5.0.0, ajv@^5.1.5:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
   dependencies:
@@ -3491,6 +3491,12 @@ sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -3684,6 +3690,13 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+style-loader@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -3899,6 +3912,10 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-form-wizard@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/vue-form-wizard/-/vue-form-wizard-0.6.1.tgz#3b5ee2da7501e0795e97660617816845295d53da"
+
 vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"