🚀 enhance: Indexed DB integration to sync products over counters and improve frontend products search

assets/less/style.less

@@ -901,6 +901,22 @@ div:focus, span:focus, button:focus, input:focus {
     }
 }
 
+.refresh-products-tooltip-wrapper {
+    .tooltip-inner {
+        padding: 5px 10px !important;
+        background-color: rgba(0, 0, 0, .6) !important;
+
+        .refresh-products-tooltip-text {
+            color: #fff;
+            font-size: 13px !important;
+        }
+    }
+
+    .tooltip-arrow {
+        border-color: rgba(0, 0, 0, .6) !important;
+    }
+}
+
 .wepos-multiselect {
     min-height: 35px !important;
     font-size: 13px !important;

assets/src/frontend/components/CustomerSearch.vue

@@ -24,7 +24,7 @@
                     </g>
                 </g>
             </svg>
-            <input type="text" ref="customerSearch" name="customer_search" id="customer-search" :placeholder="__( 'Search customer', 'wepos' )" v-model="serachInput" @focus.prevent="triggerFocus" @keyup="searchCustomer">
+            <input type="text" ref="customerSearch" name="customer_search" id="customer-search" :placeholder="__( 'Search customer', 'wepos' )" v-model="searchInput" @focus.prevent="triggerFocus" @keyup="searchCustomer">
             <span class="add-new-customer flaticon-add" @click.prevent="addNewCustomer()"></span>
             <div class="search-result" v-show="showCustomerResults">
                 <div v-if="customers.length">
@@ -181,7 +181,7 @@ export default {
                 phone: '',
             },
             showCustomerResults: false,
-            serachInput: '',
+            searchInput: '',
             showNewCustomerModal: false,
             stateList: [],
             selectedState: null,
@@ -226,7 +226,7 @@ export default {
         },
 
         'orderdata.customer_id'(newVal) {
-            this.serachInput = newVal ? this.orderdata.billing.first_name + ' ' + this.orderdata.billing.last_name : '';
+            this.searchInput = newVal ? this.orderdata.billing.first_name + ' ' + this.orderdata.billing.last_name : '';
         }
 
     },
@@ -238,7 +238,7 @@ export default {
         },
         searchClose() {
             this.showCustomerResults = false;
-            this.serachInput = '';
+            this.searchInput = '';
             this.showNewCustomerModal= false;
             this.$refs.customerSearch.blur();
         },
@@ -278,8 +278,8 @@ export default {
             this.showNewCustomerModal = false;
         },
         searchCustomer() {
-            if ( this.serachInput ) {
-                wepos.api.get( wepos.rest.root + wepos.rest.posversion + '/customers?search=' + this.serachInput )
+            if ( this.searchInput ) {
+                wepos.api.get( wepos.rest.root + wepos.rest.posversion + '/customers?search=' + this.searchInput )
                 .done(response => {
                     this.customers = response;
                 });
@@ -289,7 +289,7 @@ export default {
         },
         selectCustomer( customer ) {
             this.$emit( 'onCustomerSelected', customer );
-            this.serachInput = customer.first_name + ' ' + customer.last_name;
+            this.searchInput = customer.first_name + ' ' + customer.last_name;
             this.showCustomerResults = false;
         },
         createCustomer() {
@@ -318,7 +318,7 @@ export default {
 
                 wepos.api.post( wepos.rest.root + wepos.rest.posversion + '/customers', customerData )
                 .done(response => {
-                    this.serachInput = response.first_name + ' ' + response.last_name;
+                    this.searchInput = response.first_name + ' ' + response.last_name;
                     this.$emit( 'onCustomerSelected', response );
                     $contentWrap.unblock();
                     this.closeNewCustomerModal();
@@ -369,13 +369,13 @@ export default {
     },
     created() {
         this.eventBus.$on( 'emptycart', ( orderdata ) => {
-            this.serachInput = '';
+            this.searchInput = '';
         } );
 
         var orderdata = JSON.parse( localStorage.getItem( 'orderdata' ) );
 
         if ( orderdata.customer_id != 'undefined' && orderdata.customer_id != 0 ) {
-            this.serachInput = orderdata.billing.first_name + ' ' + orderdata.billing.last_name;
+            this.searchInput = orderdata.billing.first_name + ' ' + orderdata.billing.last_name;
         }
     }
 };

assets/src/frontend/components/Home.vue

@@ -34,7 +34,16 @@
                         </template>
                     </multiselect>
                 </div>
-
+                <div class="refresh-products">
+                    <v-popover popover-base-class="refresh-products-tooltip-wrapper tooltip popover" placement="auto" trigger="hover">
+                        <span class="refresh-icon list-view" :class="{ active: productLogsLoading }" @click.prevent="refreshProducts">
+                            <svg xmlns="http://www.w3.org/2000/svg" data-name="Isolation Mode" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2.99a9.03 9.03 0 0 1 6.36 2.65l-2.37 2.37h5.83a1.15 1.15 0 0 0 1.14-1.14V1.04l-2.49 2.49A11.98 11.98 0 0 0 0 12h2.99A9.02 9.02 0 0 1 12 2.99ZM21.01 12a9 9 0 0 1-15.37 6.36l2.37-2.37H2a.96.96 0 0 0-.95.95v6.02l2.49-2.49A11.98 11.98 0 0 0 24 12Z"/></svg>
+                        </span>
+                        <template slot="popover">
+                            <span class="refresh-products-tooltip-text">{{ __( 'Refresh Products', 'wepos' ) }}</span>
+                        </template>
+                    </v-popover>
+                </div>
                 <div class="toggle-view">
                     <div class="product-toggle">
                         <span class="toggle-icon list-view flaticon-menu-button-of-three-horizontal-lines" @click="productView = 'list'" :class="{ active: productView == 'list'}"></span>
@@ -592,6 +601,7 @@ export default {
             filteredProducts: [],
             totalPages: 1,
             page: 1,
+            productLogsLoading: false,
             showOverlay: false,
             selectedVariationProduct: {},
             attributeDisabled: true,
@@ -681,6 +691,9 @@ export default {
                 }
             }
             return [];
+        },
+        productsStorageUpdatedOn() {
+            return localStorage.getItem( 'productsStorageUpdatedOn' );
         }
     },
 
@@ -922,9 +935,54 @@ export default {
                 }).then( ( response, status, xhr ) => {
                     this.fetchProducts();
                 });
-            } else {
-                this.productLoading = false;
+            } else if ( this.isProductsStorageUpdateRequired() ) {
+                // Remove existing products from the IndexedDB storage.
+                wepos.productIndexedDb.deleteAllProducts();
+
+                // Insert products to the IndexedDB storage.
+                wepos.productIndexedDb.insertProducts( this.products );
+
+                // Store products IndexedDB updating time to Local Storage.
+                localStorage.setItem( 'productsStorageUpdatedOn', dayjs().unix() );
             }
+
+            this.productLoading = false;
+        },
+        isProductsStorageUpdateRequired() {
+            if ( ! this.productsStorageUpdatedOn || this.productsStorageUpdatedOn < dayjs().subtract( 7, 'days' ).unix() ) {
+                return true;
+            }
+
+            return false;
+        },
+        refreshProducts() {
+            this.fetchProductLogs( wepos.current_cashier.counter_id );
+        },
+        fetchProductLogs( counterId ) {
+            let fetchingToast = {
+                title: this.__( 'Products already updated!', 'wepos' ),
+                type: 'info'
+            }
+
+            this.productLogsLoading = true;
+
+            wepos.api.get( wepos.rest.root + wepos.rest.posversion + '/product/logs/' + counterId )
+            .done( ( response, status, xhr ) => {
+                if ( response.length > 0 ) {
+                    wepos.productLogs.updateProductsToIndexedDb( response );
+                    wepos.productLogs.updateProductLogsData( counterId );
+
+                    fetchingToast.title = this.__( 'Products refreshed successfully!', 'wepos' );
+                    fetchingToast.type  = 'success';
+                }
+            } ).fail( ( response, status, xhr ) => {
+                fetchingToast.title = this.__( 'Failed to refresh products!', 'wepos' );
+                fetchingToast.type  = 'error';
+            } ).then( ( response, status, xhr ) => {
+                this.productLogsLoading = false;
+
+                this.toast( fetchingToast );
+            } );
         },
         appendProducts( products ) {
             products.forEach( product => {
@@ -1137,6 +1195,15 @@ export default {
         },
     },
 
+    async beforeCreate() {
+        const dbName             = 'ProductsDB';
+        const isExistsProductsDB = ( await window.indexedDB.databases() ).map( db => db.name ).includes( dbName );
+
+        if ( ! isExistsProductsDB ) {
+            wepos.productIndexedDb.createProductsDB();
+        }
+    },
+
     async created() {
         this.fetchSettings();
         this.fetchTaxes();
@@ -1171,6 +1238,15 @@ export default {
 
 <style lang="less">
 
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 #wepos-main {
     padding: 20px;
     display: flex;
@@ -1364,7 +1440,7 @@ export default {
 
             .category {
                 width: 26%;
-                margin-right: 2%;
+                margin-right: 1%;
                 float:left;
                 position: relative;
 
@@ -1401,8 +1477,50 @@ export default {
                 }
 
             }
+            .refresh-products {
+                float: left;
+                margin-right: -5px;
+                width: 4.5%;
+
+                .refresh-icon {
+                    box-sizing: border-box;
+                    padding: 9px 10px 7px;
+                    background: #fff;
+                    display: inline-block;
+                    border: 1px solid #E9EDF0;
+                    box-shadow: 0 3px 15px 0 rgba(0,0,0,.02);
+                    cursor: pointer;
+
+                    &:hover {
+                        svg {
+                            fill: #3B80F4;
+                        }
+                    }
+
+                    &.active {
+                        svg {
+                            fill: #3B80F4;
+                            animation: rotation 1s infinite linear;
+                        }
+                    }
+
+                    &:before {
+                        margin-left: 0px;
+                        font-size: 13px;
+                    }
+
+                    &.list-view {
+                        margin-right: -4px;
+                        border-right: none;
+                    }
+
+                    svg {
+                        fill: #bdc0c9;
+                    }
+                }
+            }
             .toggle-view {
-                width: 14%;
+                width: 10%;
                 float: left;
                 text-align: right;