[ADD] more components

package.json

@@ -30,7 +30,7 @@
 		"fuse.js": "^3.0.5",
 		"vue": "^2.4.1",
 		"vue-form-wizard": "^0.7.0",
-		"vue-js-modal": "^1.2.6",
+		"vue-js-modal": "^1.3.1",
 		"vue-simple-spinner": "^1.2.1",
 		"vuex": "^2.3.1"
 	}

src/App.vue

@@ -2,21 +2,27 @@
     .purchases
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver')
             tab-content(title='Cuál es su proveedor?')
-                h2 Proveedor
-            tab-content(title='Qué productos adquirirás?')
-                h2 Productos
+                supplier-step
+            tab-content(title='Qué productos comprarás?')
+                products-step
             tab-content(title='Cómo quieres pagar?')
                 h2 Pago
 </template>
 
 <script>
     import { FormWizard, TabContent } from 'vue-form-wizard'
+
+    import SupplierStep from '@/components/supplier/SupplierStep'
+    import ProductsStep from '@/components/product/ProductsStep'
+
     import { mapActions } from 'vuex'
 
     export default {
         components: {
             FormWizard,
-            TabContent
+            TabContent,
+            SupplierStep,
+            ProductsStep
         },
         methods: mapActions([
             'initPurchase'
@@ -55,6 +61,10 @@
                         width: calc(100% - 20px)
                         height: calc(100% - 20px)
                         margin: 10px
+                        .purchase-step
+                            width: 100%
+                            height: 100%
+                            background: #fff
             .wizard-card-footer
                 width: 100%
                 height: 50px

src/components/product/ProductAdd.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+    .product-add
+        i.fa.fa-plus(aria-hidden='true')
+</template>
+
+<script>
+    export default {
+    }
+</script>
+
+<style lang="sass">
+    .product-add
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+        &:hover
+            cursor: pointer
+        i
+            font-size: 36pt
+            margin: 0
+            border: none
+            position: absolute;
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+            color: #7c7bad
+</style>

src/components/product/ProductCard.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+    .product-card
+        h2.product-name {{ item.name }}
+        img.product-image(:src="item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : '/web/static/src/img/placeholder.png'")
+        .product-price
+            span {{ getPrice() }}
+</template>
+
+<script>
+    export default {
+        props: {
+            item: {
+                type: Object,
+                default: {}
+            }
+        },
+        methods: {
+            getPrice() {
+                return 0
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .product-card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+        &:hover
+            cursor: pointer
+        .product-name
+            width: 100%
+            height: 30px
+            font-size: 9pt
+            text-align: center
+            margin-top: 10px
+            position: absolute
+            top: 0
+        .product-image
+            width: 80px
+            height: 80px
+            margin: 0
+            border: none
+            position: absolute
+            top: 50%
+            left: 50%
+            margin_right: 50%
+            transform: translate(-50%, -50%)
+        .product-price
+            width: 100%
+            height: 30px
+            padding-top: 5px
+            text-align: center
+            font-size: 10pt
+            font-weight: bold
+            background: #7c7bad
+            color: #fff
+            position: absolute
+            bottom: 0
+</style>

src/components/product/ProductSearcher.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+    input.product-searcher(type='text' placeholder='Buscar un producto')
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+    
+    }
+</script>
+
+<style lang="sass">
+    .product-searcher
+        width: 100%
+        height: 35px
+        text-align: center
+        border-radius: 0 !important
+        font:
+            size: 11pt
+            style: normal
+            weight: bold
+</style>

src/components/product/ProductsGrid.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+    .products-grid-wrapper
+        .products-grid
+            product-add
+            product-card(v-for='product in products' :key='product.id' :item='product')
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    import ProductAdd from '@/components/product/ProductAdd'
+    import ProductCard from '@/components/product/ProductCard'
+
+    export default {
+        components: {
+            ProductAdd,
+            ProductCard
+        },
+        computed: mapGetters([
+            'products'
+        ])
+    }
+</script>
+
+<style lang="sass">
+    .products-grid-wrapper
+        width: 100%
+        height: calc(100% - 50px)
+        margin-top: 15px
+        overflow-y: auto
+        .products-grid
+            width: 100%
+</style>

src/components/product/ProductsStep.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+    .purchase-step
+        .products-selector
+            product-searcher
+            products-grid
+        .cart-viewer
+</template>
+
+<script>
+    import ProductSearcher from '@/components/product/ProductSearcher'
+    import ProductsGrid from '@/components/product/ProductsGrid'
+
+    export default {
+        components: {
+            ProductSearcher,
+            ProductsGrid
+        }
+    }
+</script>
+
+<style lang="sass">
+    .purchase-step
+        .products-selector
+            width: calc(100% - 300px)
+            height: 100%
+            padding-right: 5px
+            display: inline-block
+        .cart-viewer
+            width: 300px
+            height: 100%
+            border-left: 1px solid #d3d3d3
+            padding-left: 10px
+            display: inline-block
+            vertical-align: top
+</style>

src/components/supplier/SupplierAdd.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+    .supplier-add(@click='addSupplier')
+        i.fa.fa-plus(aria-hidden='true')
+</template>
+
+<script>
+    import { mapActions } from 'vuex'
+
+    export default {
+        methods: mapActions([
+            'addSupplier'
+        ])
+    }
+</script>
+
+<style lang="sass">
+    .supplier-add
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+        &:hover
+            cursor: pointer
+        i
+            font-size: 36pt
+            margin: 0
+            border: none
+            position: absolute;
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+            color: #7c7bad
+</style>

src/components/supplier/SupplierCard.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+    .supplier-card
+        h2.supplier-name {{ item.name }}
+        img.supplier-image(:src="!!item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : 'base/static/src/img/avatar.png'")
+</template>
+
+<script>
+    import { mapActions, mapGetters } from 'vuex'
+
+    export default {
+        props: {
+            item: {
+                type: Object,
+                default: {}
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .supplier-card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+        &.supplier-selected
+            transition-duration: 300ms
+            border-bottom: 3px solid #7c7bad
+        &:hover
+            cursor: pointer
+        .supplier-name
+            width: 100%
+            height: 30px
+            font-size: 9pt
+            text-align: center
+            margin-top: 10px
+            position: absolute
+            top: 0
+        .supplier-image
+            width: 80px
+            height: 80px;
+            margin: 0
+            border: none
+            position: absolute
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+</style>

src/components/supplier/SupplierDetails.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+  
+</template>
+
+<script>
+    export default {
+    
+    }
+</script>
+
+<style lang="sass">
+
+</style>

src/components/supplier/SupplierForm.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+    modal(name='supplier-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'supplier-modal']")
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'addSupplier'
+        ]),
+        watch: {
+            addSupplier(value) {
+                console.log(value)
+                if (!value) {
+                    this.$modal.hide('supplier-modal')
+                }
+
+                this.supplier.name = ''
+                this.supplier.ruc = ''
+                this.supplier.phone = ''
+
+                this.$modal.show('supplier-modal')
+            }
+        },
+        methods: {
+            beforeClose(e) {
+                if(this.addSupplier) {
+                    e.stop()
+                }
+            },
+            ...mapActions([
+                'pushSupplier'
+            ])
+        },
+        /**
+         * 
+         */
+        data() {
+            return {
+                supplier: {
+                    name: '',
+                    ruc: '',
+                    phone: ''
+                }
+            }
+        },
+    }
+</script>
+
+<style lang="sass">
+</style>

src/components/supplier/SupplierSearcher.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+    input.supplier-searcher(type='text' placeholder='Buscar un proveedor')
+</template>
+
+<script>
+    import { mapGetters, mapActions } from 'vuex'
+
+    export default {
+    
+    }
+</script>
+
+<style lang="sass">
+    .supplier-searcher
+        width: 100%
+        height: 35px
+        text-align: center
+        border-radius: 0 !important
+        font:
+            size: 11pt
+            style: normal
+            weight: bold
+</style>

src/components/supplier/SupplierStep.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+    .purchase-step
+        .supplier-selection-step
+            .supplier-selector
+                supplier-searcher
+                supplier-grid
+            transition(name='slide-fade')
+                .supplier-details
+                    supplier-details
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    import SupplierSearcher from '@/components/supplier/SupplierSearcher'
+    import SupplierGrid from '@/components/supplier/SuppliersGrid'
+    import SupplierDetails from '@/components/supplier/SupplierDetails'
+
+    export default {
+        components: {
+            SupplierSearcher,
+            SupplierGrid,
+            SupplierDetails
+        }
+    }
+</script>
+
+<style lang="sass">
+    .purchase-step 
+        .supplier-selection-step
+            width: 100%
+            height: 100%
+            display: flex
+            .supplier-selector, .supplier-details
+                height: 100%
+            .supplier-selector
+                width: 100%
+            .supplier-details
+                width: 360px
+                margin: 0 15px
+            .slide-fade-enter-active
+                transition: all .3s ease
+            .slide-fade-leave-active
+                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
+            .slide-fade-enter, .slide-fade-leave-to
+                transform: translateX(10px)
+                opacity: 0
+</style>

src/components/supplier/SuppliersGrid.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+    .supplier-grid-wrapper
+        .supplier-grid
+            supplier-add
+            supplier-card(v-for='supplier in suppliers' :key='supplier.id' :item='supplier')
+        supplier-form
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    import SupplierAdd from '@/components/supplier/SupplierAdd'
+    import SupplierCard from '@/components/supplier/SupplierCard'
+    import SupplierForm from '@/components/supplier/SupplierForm'
+
+    export default {
+        components: {
+            SupplierAdd,
+            SupplierCard,
+            SupplierForm
+        },
+        computed: mapGetters([
+            'suppliers'
+        ])
+    }
+</script>
+
+<style lang="sass">
+    .supplier-grid-wrapper
+        width: 100%
+        height: calc(100% - 100px)
+        margin-top: 15px
+        overflow-y: auto
+        .supplier-grid
+            width: 100%
+</style>

src/index.js

@@ -1,9 +1,13 @@
 import Vue from 'vue'
 import App from '@/App'
+import VueModal from 'vue-js-modal'
 import store from '@/store'
 
+Vue.use(VueModal)
+
 Vue.config.productionTip = false
 Vue.config.silent = true
+Vue.config.devTools = false
 
 openerp.eiru_purchases = (instance, local) => {
 

src/store/actions.js

@@ -22,12 +22,17 @@ const actions = {
      * @param {*} payload 
      */
     explodeData({ commit }, payload) {
-        commit('setDate', payload.date)
-        commit('setUser', payload.user)
-        commit('setCurrencies', payload.currencies)
-        commit('setProducts', payload.products)
-        commit('setPickingTypes', payload.pickingTypes)
-        commit('setPaymentTerms', payload.paymentTerms)
+        Object.keys(payload).forEach(key => {
+            commit('set'.concat(key[0].toUpperCase()).concat(key.slice(1)), payload[key])
+        })
+        // commit('setDate', payload.date)
+        // commit('setUser', payload.user)
+        // commit('setCurrencies', payload.currencies)
+        // commit('setJournals', payload.journals)
+        // commit('setSuppliers', payload.suppliers)
+        // commit('setProducts', payload.products)
+        // commit('setPickingTypes', payload.pickingTypes)
+        // commit('setPaymentTerms', payload.paymentTerms)
     },
     /**
      * Send data to create concrete purchase

src/store/index.js

@@ -8,6 +8,7 @@ import actions from '@/store/actions'
 
 import user from '@/store/modules/user'
 import currency from '@/store/modules/currency'
+import journal from '@/store/modules/journal'
 import supplier from '@/store/modules/supplier'
 import product from '@/store/modules/product'
 import picking from '@/store/modules/picking'
@@ -23,6 +24,7 @@ const store = new Vuex.Store({
     modules: {
         user,
         currency,
+        journal,
         supplier,
         product,
         picking,

src/store/modules/supplier.js

@@ -2,6 +2,18 @@ const state = {
     supplier: {
         default: [],
         values: this.default
+    },
+    filteredSuppliers: {
+        default: [],
+        values: this.default
+    },
+    selectedSupplier: {
+        default: null,
+        value: this.default
+    },
+    addSupplier: {
+        default: false,
+        value: this.default
     }
 }
 
@@ -12,6 +24,27 @@ const getters = {
      */
     suppliers(state) {
         return state.supplier.values
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    hasSelectedSupplier(state) {
+        return !!state.selectedSupplier.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    selectedSupplier(state) {
+        return state.selectedSupplier.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    addSupplier(state) {
+        return state.addSupplier.value
     }
 }
 
@@ -21,8 +54,31 @@ const mutations = {
      * @param {*} state 
      * @param {*} payload 
      */
-    setSupplier(state, payload) {
+    setSuppliers(state, payload) {
         state.supplier.values = [...payload]
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    selectSupplier(state, payload) {
+        state.selectedSupplier.value = payload
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    filterSuppliers(state, payload) {
+        state.filteredSuppliers.values = [...payload]
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    addSupplier(state) {
+        state.addSupplier.value = !state.addSupplier.value
     }
 }
 
@@ -31,8 +87,39 @@ const actions = {
      * 
      * @param {*} param0 
      */
-    setSupplier({ commit }, payload) {
-        commit('setSupplier', payload)
+    setSuppliers({ commit }, payload) {
+        commit('setSuppliers', payload)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    selectSupplier({ commit }, payload) {
+        commit('selectSupplier', payload)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    filterSuppliers({ commit }, payload) {
+        commit('filterSuppliers', payload)
+    },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    addSupplier({ commit }) {
+        commit('addSupplier')
+    },
+    /**
+     * 
+     * @param {*} param0 
+     */
+    pushSupplier({ commit, dispatch }) {
+        console.log('push')
     }
 }
 

yarn.lock

@@ -4189,7 +4189,7 @@ vue-hot-reload-api@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.1.tgz#1ba6712166182fd651753804b9d8d8d02d855579"
 
-vue-js-modal@^1.2.6:
+vue-js-modal@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/vue-js-modal/-/vue-js-modal-1.3.1.tgz#1202d0a39ef3237a606232fb0f6a8796c97aa137"