Browse Source

[ADD] store selector component

robert 6 years ago
parent
commit
e3ef436396

+ 70 - 0
src/components/common/StoreSelector.vue

@@ -0,0 +1,70 @@
+<template lang="pug">
+    .store-selector
+        .store-title
+            h5 Almacén
+        .store-items-wrapper
+            ul
+                li
+                    a
+                        h5.active Todos
+                li(v-for='i in items')
+                    a 
+                        h5 {{ i.name }}
+</template>
+
+<script>
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: []
+            }
+        },
+        method: {
+            onSelect(storeId) {
+                console.log(storeId)
+            }
+        }
+    }
+</script>
+
+<style lang="sass">
+    .store-selector
+        width: 100px
+        height: 100%
+        .store-title
+            width: 100%
+            height: 25px
+            background: #7b78ac
+            margin-top: 15px
+            h5
+                text-align: center
+                color: #fff
+                margin: 0
+                line-height: 25px
+        .store-items-wrapper
+            padding-top: 15px
+            overflow-y: auto
+            &::-webkit-scrollbar
+                width: 2px
+                background: #f5f5f5
+            &::-webkit-scrollbar-thumb
+                background: #7c7bad
+            &::-webkit-scrollbar-track
+                -webkit-box-shadow: inset 0 0 6px #d3d3d3
+                background: #f5f5f5
+            ul
+                list-style: none
+                padding: 0
+                li
+                    width: 100%
+                    height: 35px
+                    a
+                        h5
+                            margin: 0
+                            line-height: 25px
+                            font-size: 8pt
+                            &.active
+                                border-bottom: 2px solid #7b78ac
+
+</style>

+ 3 - 1
src/components/common/index.js

@@ -10,6 +10,7 @@ import SettingsButton from './SettingsButton'
 import SwitchButtonInput from './SwitchButtonInput'
 import InputSelect from './InputSelect'
 import ConnectionStatus from './ConnectionStatus'
+import StoreSelector from './StoreSelector'
 
 export {
     CardGrid,
@@ -23,5 +24,6 @@ export {
     SettingsButton,
     SwitchButtonInput,
     InputSelect,
-    ConnectionStatus
+    ConnectionStatus,
+    StoreSelector
 }

+ 19 - 10
src/components/steps/Product.vue

@@ -7,14 +7,18 @@
                 :keys="['name', 'ean13', 'defaultCode']"
                 @onSearch='filterProducts'
             )
-            card-grid(
-                @onAdd='showProductForm'
-                :items='visibleProducts'
-                :footerKeys="['price:c']"
-                :currencyOptions='baseCurrency'
-                :loading='loadingProducts'
-                @onSelect='selectProduct'
-            )
+            .products-grid
+                store-selector(
+                    :items='stores'
+                )
+                card-grid(
+                    @onAdd='showProductForm'
+                    :items='visibleProducts'
+                    :footerKeys="['price:c']"
+                    :currencyOptions='baseCurrency'
+                    :loading='loadingProducts'
+                    @onSelect='selectProduct'
+                )
             product-modal(
                 :show='showingProductForm'
                 @onAccept='submitProduct'
@@ -42,7 +46,7 @@
 
 <script>
     import { mapGetters, mapActions } from 'vuex'
-    import { Searcher, CardGrid, Cart } from '../common'
+    import { Searcher, CardGrid, Cart, StoreSelector } from '../common'
     import ProductModal from '../modals/ProductModal'
     import VariantModal from '../modals/VariantModal'
     import DiscountModal from '../modals/DiscountModal'
@@ -52,6 +56,7 @@
             Searcher,
             CardGrid,
             Cart,
+            StoreSelector,
             ProductModal,
             VariantModal,
             DiscountModal
@@ -60,6 +65,7 @@
             ...mapGetters([
                 'products',
                 'visibleProducts',
+                'stores',
                 'loadingProducts',
                 'showingProductForm',
                 'cartItems',
@@ -90,5 +96,8 @@
             width: calc(100% - 300px)
             height: 100%
             padding-right: 5px
-            display: inline-block
+            .products-grid
+                width: 100%
+                height: 100%
+                display: flex
 </style>

+ 4 - 2
src/store/index.js

@@ -20,7 +20,8 @@ import bankPaymentTypeModule from '@/store/modules/bankPaymentType'
 import chequeTypeModule from './modules/chequeType'
 import storeModule from './modules/store'
 import saleOrderModule from './modules/saleOrder'
-import stockPickingModule from './modules/stockPicking';
+import stockPickingModule from './modules/stockPicking'
+import warehouseModule from './modules/warehouse'
 
 Vue.use(Vuex)
 
@@ -43,7 +44,8 @@ const store = new Vuex.Store({
         chequeTypeModule,
         storeModule,
         saleOrderModule,
-        stockPickingModule
+        stockPickingModule,
+        warehouseModule
     },
     plugins: [
         createPersistedState({

+ 1 - 1
src/store/modules/journal.js

@@ -9,7 +9,7 @@ const getters = {
         return state.journals
     },
     bankJournals(state, getters) {
-        return state.journals.filter(j => j.type === 'bank' && j.currencyId === getters.selectedCurrency.id)
+        return state.journals.filter(j => j.type === 'bank' && !!getters.selectedCurrency && j.currencyId === getters.selectedCurrency.id)
     },
     loadingJournals(state) {
         return state.loadingJournals

+ 54 - 0
src/store/modules/warehouse.js

@@ -0,0 +1,54 @@
+const state = {
+    loadingWarehouses: false,
+    warehouses: [],
+    selectedWarehouse: null
+}
+
+const getters = {
+    loadingWarehouses(state) {
+        return state.loadingWarehouses
+    },
+    warehouses(state) {
+        return state.warehouses
+    },
+    selectedWarehouse(state) {
+        return state.selectedWarehouse
+    }
+}
+
+const mutations = {
+    setLoadingWarehouses(state, loading) {
+        state.loadingWarehouses = !!loading
+    },
+    setWarehouses(state, warehouses) {
+        state.warehouses = warehouses
+    },
+    setSelectedWarehouse(state, warehouseId) {
+        if (!warehouseId) {
+            state.selectedWarehouse = null
+        }
+
+        state.selectedWarehouse = state.warehouses.find(w => w.id == warehouseId)
+    }
+}
+
+const actions = {
+    initWarehouses({ commit }, warehouses) {
+        commit('setWarehouses', warehouses)
+        commit('setLoadingWarehouses')
+    },
+    selectWarehouse({ commit }, warehouseId) {
+        commit('setSelectedWarehouse', warehouseId)
+    },
+    resetWarehouse({ commit }) {
+        commit('setLoadingWarehouses')
+        commit('setWarehouses', [])
+    }
+}
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}