[ADD] supplier form

src/assets/_variables.sass

@@ -1,3 +1,4 @@
 $app-main-color: #7c7bad
 $app-bg-color: #fff
-$app-border-color: #d3d3d3
+$app-border-color: #d3d3d3
+$app-title-color: #d3d3d3

src/components/product/ProductsStep.vue

@@ -2,7 +2,7 @@
     .purchase-step
         .products-selector
             searcher(:items='products' :keys="['name', 'displayName']")
-            card-grid(:items='visibleProducts' canAdd)
+            card-grid(:items='visibleProducts' canAdd @onSelect='selectProduct')
         cart
 </template>
 
@@ -22,6 +22,9 @@
         computed: mapGetters([
             'products',
             'visibleProducts'
+        ]),
+        methods: mapActions([
+            'selectProduct'
         ])
     }
 </script>

src/components/supplier/SupplierForm.vue

@@ -1,5 +1,20 @@
 <template lang="pug">
     modal(name='supplier-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'supplier-modal']")
+        h2 Nuevo proveedor
+        hr
+        form.supplier-form
+            .form-item
+                label.form-label Nombre
+                input.form-input
+            .form-item
+                label.form-label R.U.C/C.I.N
+                input.form-input
+            .form-item
+                label.form-label Teléfono
+                input.form-input
+            .form-actions
+                button.form-button(@click='submitSupplier(supplier)') Aceptar
+                button.form-button(@click='submitSupplier()') Cancelar
 </template>
 
 <script>
@@ -7,11 +22,10 @@
 
     export default {
         computed: mapGetters([
-            'addSupplier'
+            'showSupplierForm'
         ]),
         watch: {
-            addSupplier(value) {
-                console.log(value)
+            showSupplierForm(value) {
                 if (!value) {
                     this.$modal.hide('supplier-modal')
                     return
@@ -26,12 +40,12 @@
         },
         methods: {
             beforeClose(e) {
-                if(this.addSupplier) {
+                if(this.showSupplierForm) {
                     e.stop()
                 }
             },
             ...mapActions([
-                'pushSupplier'
+                'submitSupplier'
             ])
         },
         /**
@@ -50,4 +64,41 @@
 </script>
 
 <style lang="sass">
+    @import '../../assets/variables'
+    .supplier-modal
+        h2
+            font-size: 10pt
+            color: $app-title-color
+            margin-left: 15px
+        hr
+            margin: 0 15px
+        .supplier-form
+            width: 100%
+            height: 250px
+            padding: 15px
+            .form-item
+                width: 100%
+                height: 40px
+                margin-bottom: 15px
+                .form-label
+                    width: 30%
+                    height: 45px
+                    font-size: 14pt
+                .form-input
+                    width: 70%
+                    height: 45px
+                    font-size: 18pt
+                    border-radius: 0
+            .form-actions
+                float: right
+                margin-top: 15px
+                .form-button
+                    width: 160px
+                    height: 40px
+                    border: none
+                    box-shadow: none
+                    border-radius: 0
+                    margin-right: 5px
+                    background: $app-main-color
+                    color: $app-bg-color
 </style>

src/components/supplier/SupplierStep.vue

@@ -4,6 +4,7 @@
             .supplier-selector
                 searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuppliers')
                 card-grid(:items='visibleSuppliers' canAdd @onAdd='showSupplierForm' @onSelect='selectSupplier')
+                supplier-form
             transition(name='slide-fade')
                 supplier-details(v-if='!!supplierSelected')
 </template>
@@ -13,12 +14,14 @@
 
     import Searcher from '@/components/common/Searcher'
     import CardGrid from '@/components/common/CardGrid'
+    import SupplierForm from '@/components/supplier/SupplierForm'
     import SupplierDetails from '@/components/supplier/SupplierDetails'
 
     export default {
         components: {
             Searcher,
             CardGrid,
+            SupplierForm,
             SupplierDetails,
         },
         computed: mapGetters([
@@ -49,7 +52,7 @@
             .slide-fade-enter-active
                 transition: all 300ms ease
             .slide-fade-leave-active
-                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
+                transition: all 800ms cubic-bezier(1.0, 0.5, 0.8, 1.0)
             .slide-fade-enter, .slide-fade-leave-to
                 transform: translateX(10px)
                 opacity: 0

src/store/actions.js

@@ -5,6 +5,15 @@ const newUrl = '/eiru_purchases/new'
 const createUrl = '/eiru_purchases/create'
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    notify({ commit }, payload) {
+        openerp.web.notification.do_warn('Atención', payload)
+        return false
+    },
     /**
      * Get all resources to init purchase app
      * @param {*} param0 

src/store/modules/supplier.js

@@ -14,6 +14,10 @@ const state = {
     addSupplier: {
         default: false,
         value: false
+    },
+    showSupplierForm: {
+        default: false,
+        value: false
     }
 }
 
@@ -43,8 +47,8 @@ const getters = {
      * 
      * @param {*} state 
      */
-    addSupplier(state) {
-        return state.addSupplier.value
+    showSupplierForm(state) {
+        return state.showSupplierForm.value
     }
 }
 
@@ -76,9 +80,10 @@ const mutations = {
     /**
      * 
      * @param {*} state 
+     * @param {*} payload 
      */
-    setAddSupplier(state, payload) {
-        state.addSupplier.value = !!payload
+    setShowSupplierForm(state, payload) {
+        state.showSupplierForm.value = !!payload
     }
 }
 
@@ -89,8 +94,7 @@ const actions = {
      * @param {*} payload 
      */
     selectSupplier({ commit }, payload) {
-        console.log(payload)
-        // commit('setSupplierSelected', payload)
+        commit('setSupplierSelected', payload)
     },
     /**
      * 
@@ -103,25 +107,32 @@ const actions = {
     /**
      * 
      * @param {*} param0 
-     * @param {*} payload 
      */
-    addSupplier({ commit }) {
-        commit('setAddSupplier', true)
+    showSupplierForm({ commit }) {
+        commit('setShowSupplierForm', true)
     },
     /**
      * 
      * @param {*} param0 
-     * @param {*} payload 
      */
-    showSupplierForm({ commit }) {
-        console.log('show')
+    hideSupplierForm({ commit }) {
+        commit('setShowSupplierForm', false)
     },
     /**
      * 
      * @param {*} param0 
      */
-    pushSupplier({ commit, dispatch }) {
-        console.log('push')
+    submitSupplier({ commit, dispatch }, payload) {
+        if (payload) {
+            if (!payload.name || !payload.ruc || !payload.phone) {
+                dispatch('notify', 'Complete los campos para guardar')
+                return
+            }
+
+            // TODO: Send data to server
+        }
+
+        commit('setShowSupplierForm', false)
     }
 }