[FIX] filter products and customers

src/components/steps/Customer.vue

@@ -2,8 +2,8 @@
     .pos-step
         .customer-selection-step
             .customer-selector
-                searcher(:items='customers' :keys="['name', 'displayName']")
-                card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
+                searcher(:items='customers' :keys="['name', 'displayName']" @onSearch='filterCustomers')
+                card-grid(:items='visibleCustomers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
                 customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer' @onCancel='hideCustomerForm')
             transition(name='slide-fade')
                 customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details' type='small')
@@ -16,7 +16,7 @@
     import CustomerModal from '@@/modals/CustomerModal'
     import CustomerForm from '@@/forms/CustomerForm'
 
-    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, HIDE_CUSTOMER_FORM, SELECT_CUSTOMER } from '@/constants/actionTypes'
+    import { FILTER_CUSTOMERS, SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, HIDE_CUSTOMER_FORM, SELECT_CUSTOMER } from '@/constants/actionTypes'
 
     export default {
         components: {
@@ -27,11 +27,13 @@
         },
         computed: mapGetters([
             'customers',
+            'visibleCustomers',
             'loadingCustomers',
             'showingCustomerForm',
             'selectedCustomer'
         ]),
         methods: mapActions([
+            FILTER_CUSTOMERS,
             SHOW_CUSTOMER_FORM,
             SUBMIT_CUSTOMER,
             HIDE_CUSTOMER_FORM,

src/components/steps/Product.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
     .pos-step
         .products-selector
-            searcher(:items='products' :keys="['name', 'displayName']")
-            card-grid(:items='products' :loading='loadingProducts' @onAdd='showProductForm' @onSelect='selectProduct')
+            searcher(:items='products' :keys="['name', 'displayName']" @onSearch='filterProducts')
+            card-grid(:items='visibleProducts' :loading='loadingProducts' @onAdd='showProductForm' @onSelect='selectProduct')
             product-modal(:show='showingProductForm' @onAccept='submitProduct' @onCancel='hideProductForm')
         cart(:items='cartItems' @onTotalComputed='changeCartTotal' @onIncrementQty='addToCart' @onDecrementQty='decreaseFromCart' @onDeleteItem='removeFromCart')
 </template>
@@ -12,7 +12,7 @@
     import { Searcher, CardGrid, Cart } from '@@/common'
     import ProductModal from '@@/modals/ProductModal'
 
-    import { SELECT_PRODUCT, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART } from '@/constants/actionTypes'
+    import { FILTER_PRODUCTS, SELECT_PRODUCT, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART } from '@/constants/actionTypes'
 
     export default {
         components: {
@@ -23,11 +23,13 @@
         },
         computed: mapGetters([
             'products',
+            'visibleProducts',
             'loadingProducts',
             'showingProductForm',
             'cartItems'
         ]),
         methods: mapActions([
+            FILTER_PRODUCTS,
             SELECT_PRODUCT,
             SHOW_PRODUCT_FORM,
             HIDE_PRODUCT_FORM,

src/constants/actionTypes.js

@@ -22,6 +22,8 @@ const INIT_USER = 'initUser'
 
 const INIT_PRODUCTS = 'initProducts'
 
+const FILTER_PRODUCTS = 'filterProducts'
+
 const SHOW_PRODUCT_FORM = 'showProductForm'
 
 const HIDE_PRODUCT_FORM = 'hideProductForm'
@@ -52,6 +54,8 @@ const INIT_DATE = 'initDate'
 
 const INIT_CUSTOMERS = 'initCustomers'
 
+const FILTER_CUSTOMERS = 'filterCustomers'
+
 const SHOW_CUSTOMER_FORM = 'showCustomerForm'
 
 const HIDE_CUSTOMER_FORM = 'hideCustomerForm'
@@ -96,11 +100,11 @@ export {
     COMPLETE_SALE, ERROR_SALE, // App
     NOTIFY, INIT_SALE, EXPLODE_DATA, CHECK_CART, CHECK_CUSTOMER, CHECK_PAYMENT_METHOD, CHECK_AMOUNT_RECEIVED, CREATE_SALE, RESET_SALE, // Sale
     INIT_USER, RESET_USER, // Users
-    INIT_PRODUCTS, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CREATE_PRODUCT, RECEIVE_PRODUCT, SELECT_PRODUCT, RESET_PRODUCT, // Product
+    INIT_PRODUCTS, FILTER_PRODUCTS, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CREATE_PRODUCT, RECEIVE_PRODUCT, SELECT_PRODUCT, RESET_PRODUCT, // Product
     INIT_PAYMENT_TERMS, CHANGE_PAYMENT_TYPE, CHANGE_INITIAL_PAYMENT, COMPUTE_PAYMENT_LINES, SELECT_PAYMENT_TERM, RESET_PAYMENT, // Payment terms
     INIT_JOURNALS, SELECT_JOURNAL, RESET_JOURNAL, // Journals
     INIT_DATE, RESET_DATE, // Date
-    INIT_CUSTOMERS, SHOW_CUSTOMER_FORM, HIDE_CUSTOMER_FORM, SUBMIT_CUSTOMER, CREATE_CUSTOMER, RECEIVE_CUSTOMER, SELECT_CUSTOMER, RESET_CUSTOMER, // Customer
+    INIT_CUSTOMERS, FILTER_CUSTOMERS, SHOW_CUSTOMER_FORM, HIDE_CUSTOMER_FORM, SUBMIT_CUSTOMER, CREATE_CUSTOMER, RECEIVE_CUSTOMER, SELECT_CUSTOMER, RESET_CUSTOMER, // Customer
     INIT_CURRENCIES, RESET_CURRENCY, // Currencies
     CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART, RESET_CART // Cart
 }

src/constants/mutationTypes.js

@@ -10,6 +10,8 @@ const SET_LOADING_USER = 'setLoadingUser'
 
 const SET_PRODUCTS = 'setProducts'
 
+const SET_FILTERED_PRODUCTS = 'setFilteredProducts'
+
 const SET_LOADING_PRODUCTS = 'setLoadingProducts'
 
 const ADD_PRODUCT = 'addProduct'
@@ -48,6 +50,8 @@ const SET_LOADING_DATE = 'setLoadingDate'
 
 const SET_CUSTOMERS = 'setCustomers'
 
+const SET_FILTERED_CUSTOMERS = 'setFilteredCustomers'
+
 const SET_LOADING_CUSTOMERS = 'setLoadingCustomers'
 
 const SET_SHOW_CUSTOMER_FORM = 'setShowCustomerForm'
@@ -71,11 +75,11 @@ const SET_CART_TOTAL = 'setCartTotal'
 export {
     SET_PROCESSING, SET_COMPLETED, SET_ERROR, // App
     SET_USER, SET_LOADING_USER, // User
-    SET_PRODUCTS, SET_LOADING_PRODUCTS, ADD_PRODUCT, SET_SHOW_PRODUCT_FORM, SELECT_PRODUCT, SET_PRODUCT_WITH_VARIANT, // Product
+    SET_PRODUCTS, SET_FILTERED_PRODUCTS, SET_LOADING_PRODUCTS, ADD_PRODUCT, SET_SHOW_PRODUCT_FORM, SELECT_PRODUCT, SET_PRODUCT_WITH_VARIANT, // Product
     SET_PAYMENT_TERMS, SET_LOADING_PAYMENT_TERMS, AUTOSELECT_PAYMENT_TERM, SET_SELECTED_PAYMENT_TERM, SET_PAYMENT_TYPE, SET_INITIAL_PAYMENT, SET_PAYMENT_LINES, // Payment
     SET_JOURNALS, SET_LOADING_JOURNALS, AUTOSELECT_JOURNAL, SET_SELECTED_JOURNAL, // Journal
     SET_DATE, SET_LOADING_DATE, // Date
-    SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER, ADD_CUSTOMER, // Customer
+    SET_CUSTOMERS, SET_FILTERED_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER, ADD_CUSTOMER, // Customer
     SET_CURRENCIES, SET_LOADING_CURRENCIES, // Currency
     PUSH_TO_CART, PULL_FROM_CART, SET_CART_TOTAL, SET_CART // Cart
 }

src/store/modules/customer.js

@@ -1,13 +1,15 @@
 import { 
-    ADD_CUSTOMER, 
-    SET_CUSTOMERS, 
+    SET_CUSTOMERS,
+    SET_FILTERED_CUSTOMERS,
     SET_LOADING_CUSTOMERS, 
     SET_SELECTED_CUSTOMER, 
-    SET_SHOW_CUSTOMER_FORM
+    SET_SHOW_CUSTOMER_FORM,
+    ADD_CUSTOMER
 } from '@/constants/mutationTypes'
 
 import { 
-    INIT_CUSTOMERS, 
+    INIT_CUSTOMERS,
+    FILTER_CUSTOMERS,
     SHOW_CUSTOMER_FORM, 
     HIDE_CUSTOMER_FORM, 
     SUBMIT_CUSTOMER, 
@@ -19,6 +21,7 @@ import {
 
 const initialState = {
     customers: [],
+    filteredCustomers: [],
     loadingCustomers: false,
     showingCustomerForm: false,
     selectedCustomer: null
@@ -26,6 +29,7 @@ const initialState = {
 
 const state = {
     customers: initialState.customers,
+    filteredCustomers: initialState.filteredCustomers,
     loadingCustomers: !initialState.loadingCustomers,
     showingCustomerForm: initialState.showingCustomerForm,
     selectedCustomer: initialState.selectedCustomer
@@ -39,6 +43,13 @@ const getters = {
     customers(state) {
         return state.customers
     },
+    /**
+     * 
+     * @param {*} state 
+     */
+    visibleCustomers(state) {
+        return state.filteredCustomers.length === 0 ? state.customers : state.filteredCustomers
+    },
     /**
      * 
      * @param {*} state 
@@ -78,6 +89,14 @@ const mutations = {
     [SET_CUSTOMERS] (state, payload) {
         state.customers = payload
     },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    [SET_FILTERED_CUSTOMERS] (state, payload) {
+        state.filteredCustomers = [...payload]
+    },
     /**
      * 
      * @param {*} state 
@@ -122,6 +141,14 @@ const actions = {
         commit(SET_CUSTOMERS, payload)
         commit(SET_LOADING_CUSTOMERS)
     },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    [FILTER_CUSTOMERS] ({ commit }, payload) {
+        commit(SET_FILTERED_CUSTOMERS, payload)
+    },
     /**
      * 
      * @param {*} param0 
@@ -169,6 +196,7 @@ const actions = {
     [RESET_CUSTOMER] ({ commit }) {
         commit(SET_LOADING_CUSTOMERS, true)
         commit(SET_CUSTOMERS, [])
+        commit(SET_FILTERED_CUSTOMERS, [])
         commit(SET_SELECTED_CUSTOMER, null)
     }
 }

src/store/modules/product.js

@@ -1,5 +1,6 @@
 import { 
-    SET_PRODUCTS, 
+    SET_PRODUCTS,
+    SET_FILTERED_PRODUCTS,
     SET_LOADING_PRODUCTS, 
     SET_SHOW_PRODUCT_FORM, 
     SET_PRODUCT_WITH_VARIANT, 
@@ -7,7 +8,8 @@ import {
 } from '@/constants/mutationTypes'
 
 import { 
-    INIT_PRODUCTS, 
+    INIT_PRODUCTS,
+    FILTER_PRODUCTS,
     SHOW_PRODUCT_FORM, 
     HIDE_PRODUCT_FORM, 
     SUBMIT_PRODUCT, 
@@ -20,6 +22,7 @@ import {
 
 const initialState = {
     products: [],
+    filteredProducts: [],
     loadingProducts: false,
     showingProductForm: false,
     showVariants: false,
@@ -28,6 +31,7 @@ const initialState = {
 
 const state = {
     products: initialState.products,
+    filteredProducts: initialState.filteredProducts,
     loadingProducts: !initialState.loadingProducts,
     showingProductForm: initialState.showingProductForm,
     showVariants: initialState.showVariants,
@@ -42,6 +46,13 @@ const getters = {
     products(state) {
         return state.products
     },
+    /**
+     * 
+     * @param {*} state 
+     */
+    visibleProducts(state) {
+        return state.filteredProducts.length === 0 ? state.products : state.filteredProducts
+    },
     /**
      * 
      * @param {*} state 
@@ -81,6 +92,14 @@ const mutations = {
     [SET_PRODUCTS] (state, payload) {
         state.products = payload
     },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    [SET_FILTERED_PRODUCTS] (state, payload) {
+        state.filteredProducts = [...payload]
+    },
     /**
      * 
      * @param {*} state 
@@ -125,6 +144,14 @@ const actions = {
         commit(SET_PRODUCTS, payload)
         commit(SET_LOADING_PRODUCTS)
     },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    [FILTER_PRODUCTS] ({ commit }, payload) {
+        commit(SET_FILTERED_PRODUCTS, payload)
+    },
     /**
      * 
      * @param {*} param0 
@@ -179,6 +206,7 @@ const actions = {
     [RESET_PRODUCT] ({ commit }) {
         commit(SET_LOADING_PRODUCTS, true)
         commit(SET_PRODUCTS, [])
+        commit(SET_FILTERED_PRODUCTS, [])
     }
 }