Merge pull request #203 from tanishqueSharma/inventoryCount/#201

Implemented: empty state in search page(#201)

src/locales/en.json

@@ -11,6 +11,7 @@
   "Count": "Count",
   "Cycle Count": "Cycle Count",
   "eCom Store": "eCom Store",
+  "Enter a SKU, or use the barcode scanner to search a product": "Enter a SKU, or use the barcode scanner to search a product",
   "Enter product sku to search": "Enter product sku to search",
   "Enter the amount of stock that has changed.": "Enter the amount of stock that has changed.",
   "Enter the count of stock on the shelf.": "Enter the count of stock on the shelf.",
@@ -29,12 +30,12 @@
   "Logging in": "Logging in",
   "Logout": "Logout",
   "Make sure you've reviewed the products and their counts before uploading them for review": "Make sure you've reviewed the products and their counts before uploading them for review",
+  "No results found": "No results found",
   "No time zone found": "No time zone found",
   "Ok": "Ok",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Password": "Password",
-  "Product not found": "Product not found",
   "Quantity": "Quantity",
   "Quantity on hand": "Quantity on hand",
   "Remove": "Remove",

src/store/modules/product/actions.ts

@@ -34,7 +34,6 @@ const actions: ActionTree<ProductState, RootState> = {
         commit(types.PRODUCT_SEARCH_UPDATED, { products: products, totalProductsCount: totalProductsCount })
       } else if (payload.viewIndex == 0) {
         dispatch('clearSearchProducts')
-        showToast(translate("Product not found"));
       }
       // Remove added loader only when new query and not the infinite scroll
       if (payload.viewIndex === 0) emitter.emit("dismissLoader");

src/store/modules/product/index.ts

@@ -11,7 +11,7 @@ const productModule: Module<ProductState, RootState> = {
       current: {},
       uploadProducts: {},
       products: {
-        list: {},
+        list: [],
         total: 0
       }
     },

src/theme/variables.css

@@ -79,6 +79,23 @@ http://ionicframework.com/docs/theming/ */
   --spacer-xs: 0.5rem;
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center; 
+}
+
 @media (prefers-color-scheme: dark) {
   /*
    * Dark Colors

src/views/Search.vue

@@ -7,6 +7,13 @@
     </ion-header>
     <ion-content>
       <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" :placeholder="$t('Search')" @keyup.enter="queryString = $event.target.value; searchProducts()"/>
+
+      <!-- Empty state -->
+      <div class="empty-state" v-if="!products.length && !fetchingProducts">
+        <p v-if="showErrorMessage">{{ $t("No results found")}}</p>
+        <img src="../assets/images/empty-state.png" alt="No results found"/>
+        <p>{{ $t("Enter a SKU, or use the barcode scanner to search a product")}}</p>
+      </div>
 
       <ion-list v-if="products.length > 0">
         <ion-list-header>{{ $t("Results") }}</ion-list-header>
@@ -81,7 +88,9 @@ export default defineComponent({
   },
   data (){
     return {
-      queryString: ''
+      queryString: '',
+      showErrorMessage: false,
+      fetchingProducts: false
     }
   },
   computed: {
@@ -130,10 +139,13 @@ export default defineComponent({
       })
     },
     async searchProducts(vSize?: any, vIndex?: any) {
+      this.queryString ? this.showErrorMessage = true : this.showErrorMessage = false;
+      this.fetchingProducts = true;
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
       const viewIndex = vIndex ? vIndex : 0;
       const queryString = '*' + this.queryString + '*';
-      this.getProducts(viewSize, viewIndex, queryString);
+      await this.getProducts(viewSize, viewIndex, queryString);
+      this.fetchingProducts = false;
     },
     async getProducts(vSize?: any, vIndex?: any, queryString?: string) {
       const payload = {