[IMP] data explode with loading animation

controllers/main.py

@@ -176,7 +176,7 @@ class Purchases(http.Controller):
     '''
         Make JSON response to send
     '''
-    def make_response(self, data, status=200):
+    def make_response(self, data=None, status=200):
         return Response(json.dumps(data), status=status, content_type='application/json')
 
     '''
@@ -189,7 +189,7 @@ class Purchases(http.Controller):
     '''
     @http.route('/eiru_purchases/new', auth='user', methods=['GET'], cors='*')
     def new_purchase(self, **kw):
-        self.make_info_log('Sending json response')
+        self.make_info_log('Sending JSON response')
 
         return self.make_response({
             'date': self.get_server_date(),
@@ -259,9 +259,44 @@ class Purchases(http.Controller):
         }
 
     '''
-        Create purchase resource route
+        Purchase processing resource route
     ''' 
     @http.route('/eiru_purchases/create', type='json', auth='user', methods=['POST'], cors='*')
-    def create_purchase(self, **kw):
+    def process_purchase(self, **kw):
         self.make_info_log('Creating purchase')
-        print(kw)
+
+        # Step 1: Select currency
+        currency_id = self.get_currency_id(int(kw.get('journal')))
+
+        # Step 2: Save purchase
+
+        print(currency_id)
+
+        return {
+            'status': 'ok'
+        }
+
+
+    '''
+        Get currency id based on journal
+    '''
+    def get_currency_id(self, journal_id):
+        journal = request.env['account.journal'].browse(journal_id)
+        return journal.default_debit_account_id.currency_id.id or journal.default_debit_account_id.company_currency_id.id
+
+    '''
+        Save purchase and return it
+    '''
+    def create_purchase(self, partner_id, order_lines, currency_id=None, payment_term_id=None):
+        purchase_order = request.env['purchase.order'].create({
+            'partner_id': partner_id,
+            'order_line': [[0, False, {
+                'product_id': line.id,
+                'product_qty': line.qty,
+                'price_unit': line.price
+            }] for line in order_lines],
+            'date_order': datetime.now().strftime('%Y-%m-%d'),
+            'currency_id': currency_id
+        })
+
+        return purchase_order

src/App.vue

@@ -19,6 +19,8 @@
     import JournalStep from '@/components/journal/JournalStep'
     import PaymentStep from '@/components/payment/PaymentStep'
 
+    import Spinner from '@/components/common/Spinner'
+
     import { mapActions } from 'vuex'
 
     export default {
@@ -28,7 +30,8 @@
             SupplierStep,
             ProductsStep,
             JournalStep,
-            PaymentStep
+            PaymentStep,
+            Spinner
         },
         methods: mapActions([
             'initPurchase',

src/components/common/CardGrid.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
     .card-grid-wrapper
-        .card-grid
+        .card-grid-loading(v-if='loading')
+            spinner
+        .card-grid(v-else)
             add-card(v-if='canAdd' @onClick='onClickAdd')
             card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :description='getDescription(item)' @onClick='onClickCard(item)')
 </template>
@@ -8,6 +10,7 @@
 <script>
     import AddCard from '@/components/common/AddCard'
     import Card from '@/components/common/Card'
+    import Spinner from '@/components/common/Spinner'
 
     export default {
         props: {
@@ -22,11 +25,16 @@
             description: {
                 type: String,
                 default: ''
+            },
+            loading: {
+                type: Boolean,
+                default: false
             }
         },
         components: {
             AddCard,
-            Card
+            Card,
+            Spinner
         },
         methods: {
             getDescription(item) {
@@ -44,9 +52,6 @@
             return {
                 selectedId: -1
             }
-        },
-        mounted() {
-            console.log(this)
         }
     }
 </script>
@@ -57,6 +62,12 @@
         height: calc(100% - 100px)
         margin-top: 15px
         overflow-y: auto
+        .card-grid-loading
+            width: 100%
+            height: 100%
+            display: flex
+            align-items: center
+            justify-content: center
         .card-grid
             width: 100%
 </style>

src/components/common/Spinner.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+    .spinner
+        .spinner-rect.spinner-rect-1
+        .spinner-rect.spinner-rect-2
+        .spinner-rect.spinner-rect-3
+        .spinner-rect.spinner-rect-4
+        .spinner-rect.spinner-rect-5
+</template>
+
+<script>
+    export default {
+    
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .spinner 
+        $rect-count: 5
+        $animation-duration: 1000ms
+        $delay-range: 400ms
+
+        width: 50px
+        height: 40px
+        text-align: center
+        font-size: 10px
+        margin: 40px auto
+
+        .spinner-rect
+            width: 5px
+            height: 100%
+            background: $app-main-color
+            margin: 0 3px 0 0
+            display: inline-block
+            animation: spinner-bubbling $animation-duration infinite ease-in-out
+
+        @for $i from 1 through $rect-count
+            .spinner-rect-#{$i}
+                animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
+
+        @keyframes spinner-bubbling
+            0%, 40%, 100%
+                transform: scaleY(0.4)
+            20%
+                transform: scaleY(1.0)
+</style>

src/components/product/ProductsStep.vue

@@ -2,7 +2,7 @@
     .purchase-step
         .products-selector
             searcher(:items='products' :keys="['name', 'displayName']" @onSearch='filterProducts')
-            card-grid(:items='visibleProducts' canAdd description='standardPrice' @onAdd='showProductForm' @onSelect='selectProduct')
+            card-grid(:items='visibleProducts' :loading='loadingProducts' canAdd description='standardPrice' @onAdd='showProductForm' @onSelect='selectProduct')
             product-form
         cart
 </template>
@@ -24,7 +24,8 @@
         },
         computed: mapGetters([
             'products',
-            'visibleProducts'
+            'visibleProducts',
+            'loadingProducts'
         ]),
         methods: mapActions([
             'filterProducts',

src/components/supplier/SupplierStep.vue

@@ -3,7 +3,7 @@
         .supplier-selection-step
             .supplier-selector
                 searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuppliers')
-                card-grid(:items='visibleSuppliers' canAdd @onAdd='showSupplierForm' @onSelect='selectSupplier')
+                card-grid(:items='visibleSuppliers' :loading='loadingSuppliers' canAdd @onAdd='showSupplierForm' @onSelect='selectSupplier')
                 supplier-form
             transition(name='slide-fade')
                 supplier-details(v-if='!!supplierSelected')
@@ -27,6 +27,7 @@
         computed: mapGetters([
             'suppliers',
             'visibleSuppliers',
+            'loadingSuppliers',
             'supplierSelected'
         ]),
         methods: mapActions([

src/store/actions.js

@@ -32,9 +32,9 @@ const actions = {
      * @param {*} param0 
      * @param {*} payload 
      */
-    explodeData({ commit }, payload) {
+    explodeData({ dispatch }, payload) {
         Object.keys(payload).forEach(key => {
-            commit(`set${key[0].toLocaleUpperCase()}${key.slice(1)}`, payload[key])
+            dispatch(`init${key[0].toLocaleUpperCase()}${key.slice(1)}`, payload[key])
         })
     },
     /**
@@ -100,7 +100,14 @@ const actions = {
             jsonrpc: '2.0',
             method: 'call',
             params: {
-                supplier: getters.supplierSelected.id
+                supplier: getters.supplierSelected.id,
+                products: getters.cartItems.map(item => ({
+                    id: item.id,
+                    qty: item.qty,
+                    price: item.standardPrice
+                })),
+                total: getters.cartTotal,
+                journal: getters.selectedJournal.id
             }
         }
 

src/store/modules/currency.js

@@ -2,6 +2,10 @@ const state = {
     currencies: {
         default: [],
         values: this.default
+    },
+    loadingCurrencies: {
+        default: false,
+        value: true
     }
 }
 
@@ -12,6 +16,13 @@ const getters = {
      */
     currencies(state) {
         return state.currencies.values
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingCurrencies(state) {
+        return state.loadingCurrencies.value
     }
 }
 
@@ -23,10 +34,27 @@ const mutations = {
      */
     setCurrencies(state, payload) {
         state.currencies.values = [...payload]
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingCurrencies(state, payload) {
+        state.loadingCurrencies.value = !!payload
     }
 }
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    initCurrencies({ commit }, payload) {
+        commit('setCurrencies', payload)
+        commit('setLoadingCurrencies', false)
+    },
     /**
      * 
      * @param {*} param0 

src/store/modules/date.js

@@ -2,6 +2,10 @@ const state = {
     date: {
         default: null,
         value: this.default
+    },
+    loadingDate: {
+        default: false,
+        value: true
     }
 }
 
@@ -12,6 +16,13 @@ const getters = {
      */
     date(state) {
         return state.date.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingDate(state) {
+        return state.loadingDate.value
     }
 }
 
@@ -23,6 +34,14 @@ const mutations = {
      */
     setDate(state, payload) {
         state.date.value = payload
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingDate(state, payload) {
+        state.loadingDate.value = !!payload
     }
 }
 
@@ -32,8 +51,9 @@ const actions = {
      * @param {*} param0 
      * @param {*} payload 
      */
-    setDate({ commit }, payload) {
+    initDate({ commit }, payload) {
         commit('setDate', payload)
+        commit('setLoadingDate', false)
     }
 }
 

src/store/modules/journal.js

@@ -1,7 +1,11 @@
 const state = {
     journals: {
         default: [],
-        values: this.default
+        values: []
+    },
+    loadingJournals: {
+        default: false,
+        value: true
     },
     selectedJournal: {
         default: null,
@@ -23,6 +27,14 @@ const getters = {
      */
     selectedJournal(state) {
         return state.selectedJournal.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingJournals(state, payload) {
+        return state.loadingJournals.value
     }
 }
 
@@ -34,6 +46,13 @@ const mutations = {
      */
     setJournals(state, payload) {
         state.journals.values = [...payload]
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    autoSelectJournal(state) {
         state.selectedJournal.value = state.journals.values.find(item => item.type === 'cash')
     },
     /**
@@ -43,10 +62,28 @@ const mutations = {
      */
     setSelectedJournal(state, payload) {
         state.selectedJournal.value = payload
-    },  
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingJournals(state, payload) {
+        state.loadingJournals.value = !!payload
+    }
 }
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    initJournals({ commit }, payload) {
+        commit('setJournals', payload)
+        commit('autoSelectJournal')
+        commit('setLoadingJournals', false)
+    },
     /**
      * 
      * @param {*} param0 

src/store/modules/payment.js

@@ -1,7 +1,11 @@
 const state = {
     paymentTerms: {
         default: [],
-        values: this.default
+        values: []
+    },
+    loadingPaymentTerms: {
+        default: false,
+        value: true
     },
     amountPaid: {
         default: 0,
@@ -35,6 +39,13 @@ const getters = {
      */
     amountResidual(state) {
         return state.amountResidual.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingPaymentTerms(state) {
+        return state.loadingPaymentTerms.value
     }
 }
 
@@ -70,10 +81,27 @@ const mutations = {
      */
     setAmountResidual(state, payload) {
         state.amountResidual.value = payload
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingPaymentTerms(state, payload) {
+        state.paymentTerms.value = !!payload
     }
 }
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    initPaymentTerms({ commit }, payload) {
+        commit('setPaymentTerms', payload)
+        commit('setLoadingPaymentTerms', false)
+    },
     /**
      * 
      * @param {*} param0 

src/store/modules/picking.js

@@ -2,6 +2,10 @@ const state = {
     pickingTypes: {
         default: [],
         values: this.default
+    },
+    loadingPickingTypes: {
+        default: false,
+        value: true
     }
 }
 
@@ -12,6 +16,13 @@ const getters = {
      */
     pickingTypes(state) {
         return state.pickingTypes.values
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingPickingTypes(state) {
+        return state.loadingPickingTypes.value
     }
 }
 
@@ -23,6 +34,14 @@ const mutations = {
      */
     setPickingTypes(state, payload) {
         state.pickingTypes.values = [...payload]
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingPickingTypes(state, payload) {
+        state.loadingPickingTypes.value = !!payload
     }
 }
 
@@ -31,8 +50,8 @@ const actions = {
      * 
      * @param {*} param0 
      */
-    setPickingTypes({ commit }) {
-        commit('setPickingTypes')
+    initPickingTypes({ commit }, payload) {
+        commit('setPickingTypes', payload)
     }
 }
 

src/store/modules/product.js

@@ -1,12 +1,12 @@
-import axios from 'axios'
-
-const url = '/eiru_purchases/new'
-
 const state = {
     products: {
         default: [],
         values: []
     },
+    loadingProducts: {
+        default: false,
+        value: true
+    },
     filteredProducts: {
         default: [],
         values: []
@@ -49,6 +49,13 @@ const getters = {
      */
     showProductForm(state) {
         return state.showProductForm.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingProducts(state) {
+        return state.loadingProducts.value
     }
 }
 
@@ -92,10 +99,27 @@ const mutations = {
      */
     addProduct(state, payload) {
         state.products.values = [payload, ...state.products.values]
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingProducts(state, payload) {
+        state.loadingProducts.value = !!payload
     }
 }
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    initProducts({ commit }, payload) {
+        commit('setProducts', payload)
+        commit('setLoadingProducts', false)
+    },
     /**
      * 
      * @param {*} param0 

src/store/modules/supplier.js

@@ -3,6 +3,10 @@ const state = {
         default: [],
         values: []
     },
+    loadingSuppliers: {
+        default: false,
+        value: true
+    },
     filteredSuppliers: {
         default: [],
         values: []
@@ -25,6 +29,13 @@ const getters = {
     suppliers(state) {
         return state.suppliers.values
     },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingSuppliers(state) {
+        return state.loadingSuppliers.value
+    },
     /**
      * 
      * @param {*} state 
@@ -57,6 +68,14 @@ const mutations = {
     setSuppliers(state, payload) {
         state.suppliers.values = [...payload]
     },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */ 
+    setLoadingSuppliers(state, payload) {
+        state.loadingSuppliers.value = !!payload
+    },
     /**
      * 
      * @param {*} state 
@@ -92,6 +111,15 @@ const mutations = {
 }
 
 const actions = {
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    initSuppliers({ commit }, payload) {
+        commit('setSuppliers', payload)
+        commit('setLoadingSuppliers', false)
+    },
     /**
      * 
      * @param {*} param0 

src/store/modules/user.js

@@ -2,6 +2,10 @@ const state = {
     user: {
         default: null,
         value: null
+    },
+    loadingUser: {
+        default: false,
+        value: true
     }
 }
 
@@ -12,6 +16,13 @@ const getters = {
      */
     user(state) {
         return state.user.value
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    loadingUser(state) {
+        return state.loadingUser.value
     }
 }
 
@@ -23,6 +34,14 @@ const mutations = {
      */
     setUser(state, payload) {
         state.user.value = payload
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    setLoadingUser(state, payload) {
+        state.loadingUser.value = !!payload
     }
 }
 
@@ -32,8 +51,9 @@ const actions = {
      * @param {*} param0 
      * @param {*} payload 
      */
-    setUser({ commit }, payload) {
+    initUser({ commit }, payload) {
         commit('setUser', payload)
+        commit('setLoadingUser', false)
     }
 }