diff --git a/src/assets/images/empty-state.png b/src/assets/images/empty-state.png new file mode 100644 index 00000000..3f302508 Binary files /dev/null and b/src/assets/images/empty-state.png differ diff --git a/src/locales/en.json b/src/locales/en.json index 805a9265..989aa040 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts index 4c8e6d07..926755de 100644 --- a/src/store/modules/product/actions.ts +++ b/src/store/modules/product/actions.ts @@ -34,7 +34,6 @@ const actions: ActionTree = { 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"); diff --git a/src/store/modules/product/index.ts b/src/store/modules/product/index.ts index 0b5da445..2667f3ef 100644 --- a/src/store/modules/product/index.ts +++ b/src/store/modules/product/index.ts @@ -11,7 +11,7 @@ const productModule: Module = { current: {}, uploadProducts: {}, products: { - list: {}, + list: [], total: 0 } }, diff --git a/src/theme/variables.css b/src/theme/variables.css index 678da5fa..263a5fb4 100644 --- a/src/theme/variables.css +++ b/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 diff --git a/src/views/Search.vue b/src/views/Search.vue index 60c3a4e2..bfa9cd5e 100644 --- a/src/views/Search.vue +++ b/src/views/Search.vue @@ -7,6 +7,13 @@ + + +
+

{{ $t("No results found")}}

+ No results found +

{{ $t("Enter a SKU, or use the barcode scanner to search a product")}}

+
{{ $t("Results") }} @@ -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 = {