Updated component FrontPage.vue

Author: ahmadhussnain

public/js/app.js

@@ -2330,14 +2330,22 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   name: 'FrontPage',
   // Public properties
   data: function data() {
     return {
       categories: [],
-      products: {},
-      loading: true
+      products: [],
+      loading: true,
+      error: false
     };
   },
   // Private method runs before the component is mount on the screen
@@ -2357,7 +2365,7 @@ __webpack_require__.r(__webpack_exports__);
       axios.get('/api/categories').then(function (response) {
         _this.categories = response.data.data;
       })["catch"](function (err) {
-        console.log('API Promise rejected error :', err);
+        console.log('API Promise rejected error categories :', err);
       });
     },
     loadProducts: function loadProducts() {
@@ -2369,7 +2377,9 @@ __webpack_require__.r(__webpack_exports__);
         _this2.products = response.data;
         _this2.loading = false;
       })["catch"](function (err) {
-        console.log('API Promise rejected error :', err);
+        _this2.error = true;
+        _this2.loading = false;
+        console.log('API Promise rejected error products:', err);
       });
     }
   }
@@ -21236,6 +21246,10 @@ var render = function() {
         ? _c("div", { staticClass: "loading-wrapper" }, [_vm._m(0)])
         : _vm._e(),
       _vm._v(" "),
+      _vm.error
+        ? _c("div", { staticClass: "loading-wrapper" }, [_vm._m(1)])
+        : _vm._e(),
+      _vm._v(" "),
       _c("div", { staticClass: "row" }, [
         _c("div", { staticClass: "col-lg-3" }, [
           _c("h1", { staticClass: "my-4" }, [_vm._v("Shop Catalog")]),
@@ -21341,6 +21355,14 @@ var staticRenderFns = [
       },
       [_c("span", { staticClass: "sr-only" }, [_vm._v("Loading...")])]
     )
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "text-center text-secondary" }, [
+      _c("h1", [_vm._v("Sorry, No records found!")])
+    ])
   }
 ]
 render._withStripped = true

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=9b3ca8fc4628b8185ebe",
+    "/js/app.js": "/js/app.js?id=fea10c95716ae2f53fd0",
     "/css/app.css": "/css/app.css?id=aefe1876af1802310a0f"
 }

resources/js/components/FrontPage.vue

@@ -11,6 +11,13 @@
             </div>
         </div>
 
+        <!-- If there is an Error please show -->
+        <div class="loading-wrapper" v-if="error">
+            <div class="text-center text-secondary">
+                <h1>Sorry, No records found!</h1>
+            </div>
+        </div>
+
         <div class="row">
 
             <div class="col-lg-3">
@@ -72,8 +79,9 @@ export default {
     data: function(){
       return {
           categories: [],
-          products: {},
-          loading: true
+          products: [],
+          loading: true,
+          error: false
       }
     },
     // Private method runs before the component is mount on the screen
@@ -91,7 +99,7 @@ export default {
             axios.get('/api/categories').then(response => {
                 this.categories = response.data.data;
             }).catch(err => {
-                    console.log('API Promise rejected error :', err);
+                    console.log('API Promise rejected error categories :', err);
                 }
             );
         },
@@ -101,7 +109,9 @@ export default {
                 this.products = response.data;
                 this.loading = false;
             }).catch(err => {
-                console.log('API Promise rejected error :', err);
+                this.error = true;
+                this.loading = false;
+                console.log('API Promise rejected error products:', err);
             });
         }
     }