datatable setLoading added

client/src/modules/customers/index.vue

@@ -16,6 +16,7 @@ export default {
       "customerList",
       "filteredCustomerList",
       "dialog",
+      "loading",
       "dialogHeaders",
       "editedItem",
       "editedIndex",
@@ -53,6 +54,7 @@ export default {
         v-model="selected"
         :headers="headers"
         :items="customerList"
+        :loading="loading"
         show-select
         class="evation-1"
       >
@@ -170,7 +172,7 @@ export default {
         </template>
 
         <template v-slot:[`item.image`]="{ item }">
-          <img width="75" :src="`${item.image}`" />
+          <img width="75" :src="`${item.image}`" v-if="item.image" />
         </template>
 
         <template v-slot:[`item.actions`]="{ item }">

client/src/modules/customers/store/actions.js

@@ -8,13 +8,14 @@ export default {
     } else if (data.filterColumn) {
       query = data.filterColumn + "_like=" + data.searchInput;
     }
-
+    commit("setLoading", true);
     axios
       .get(`http://localhost:3000/customers?${query}`)
       .then((response) => {
         commit("setCustomerList", response.data);
 
         dispatch("filterCustomer", { searchInput: "" });
+        commit("setLoading", false);
       })
       .catch((e) => {
         console.log(e);
@@ -28,13 +29,15 @@ export default {
   closeDialog({ commit }) {
     commit("setDialog", false);
   },
-  deleteCustomer({ dispatch }, idList) {
+  deleteCustomer({ dispatch, commit }, idList) {
     confirm("Are you sure you want to delete this item?") &&
       idList.forEach((id) => {
+        commit("setLoading", true);
         axios
           .delete(`http://localhost:3000/customers/${id}`)
           .then(() => {
             dispatch("fetchCustomerData");
+            commit("setLoading", false);
           })
           .catch((e) => {
             console.log(e);
@@ -49,7 +52,7 @@ export default {
     dispatch("deleteCustomer", itemList);
   },
 
-  saveCustomer({ getters, dispatch }) {
+  saveCustomer({ getters, dispatch, commit }) {
     const postConfig = {
       method: "post",
       url: `http://localhost:3000/customers/`,
@@ -61,9 +64,10 @@ export default {
       url: `http://localhost:3000/customers/${getters.editedItem.id}`,
       data: getters.editedItem,
     };
-
+    commit("setLoading", true);
     axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
       dispatch("fetchCustomerData");
+      commit("setLoading", false);
     });
     dispatch("closeDialog");
   },

client/src/modules/customers/store/getters.js

@@ -43,6 +43,9 @@ export default {
   dialog(state) {
     return state.dialog;
   },
+  loading(state) {
+    return state.loading;
+  },
   filteredCustomerList(state) {
     return state.filteredCustomerList;
   },

client/src/modules/customers/store/mutations.js

@@ -11,6 +11,10 @@ export default {
   setDialog(state, value) {
     state.dialog = value;
   },
+  setLoading(state, value) {
+    state.loading = value;
+    console.log(value);
+  },
   setfilteredCustomerList(state, data) {
     state.filteredCustomerList = data;
   },

client/src/modules/customers/store/state.js

@@ -4,4 +4,5 @@ export default () => ({
   editedIndex: -1,
   editedItem: {},
   dialog: false,
+  loading: false,
 });

client/src/modules/products/index.vue

@@ -19,6 +19,7 @@ export default {
       "singleExpand",
       "expanded",
       "dialog",
+      "loading",
       "editedItem",
       "editedIndex",
     ]),
@@ -55,6 +56,7 @@ export default {
         v-model="selected"
         :headers="headers"
         :items="productList"
+        :loading="loading"
         :single-expand="singleExpand"
         :expanded.sync="expanded"
         show-select

client/src/modules/products/store/actions.js

@@ -8,12 +8,13 @@ export default {
     } else if (data.filterColumn) {
       query = data.filterColumn + "_like=" + data.searchInput;
     }
-
+    commit("setLoading", true);
     axios
       .get(`http://localhost:3000/products?${query}`)
       .then((response) => {
         commit("setProductList", response.data);
         dispatch("filterProduct", { searchInput: "" });
+        commit("setLoading", false);
       })
       .catch((e) => {
         console.log(e);
@@ -28,13 +29,16 @@ export default {
     commit("setDialog", false);
   },
 
-  deleteProduct({ dispatch }, idList) {
+  deleteProduct({ dispatch, commit }, idList) {
     confirm("Are you sure you want to delete this item?") &&
       idList.forEach((id) => {
+        commit("setLoading", true);
+
         axios
           .delete(`http://localhost:3000/products/${id}`)
           .then(() => {
             dispatch("fetchProductData");
+            commit("setLoading", false);
           })
           .catch((e) => {
             console.log(e);
@@ -51,7 +55,7 @@ export default {
     dispatch("deleteProduct", itemList);
   },
 
-  saveProduct({ getters, dispatch }) {
+  saveProduct({ getters, dispatch, commit }) {
     const postConfig = {
       method: "post",
       url: `http://localhost:3000/products/`,
@@ -63,9 +67,11 @@ export default {
       url: `http://localhost:3000/products/${getters.editedItem.id}`,
       data: getters.editedItem,
     };
+    commit("setLoading", true);
 
     axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
       dispatch("fetchProductData");
+      commit("setLoading", false);
     });
     dispatch("closeDialog");
   },

client/src/modules/products/store/getters.js

@@ -53,6 +53,9 @@ export default {
   dialog(state) {
     return state.dialog;
   },
+  loading(state) {
+    return state.loading;
+  },
   filteredProductList(state) {
     return state.filteredProductList;
   },

client/src/modules/products/store/mutations.js

@@ -8,6 +8,10 @@ export default {
   setDialog(state, value) {
     state.dialog = value;
   },
+  setLoading(state, value) {
+    state.loading = value;
+    console.log(value);
+  },
   setEditedIndex(state, index) {
     state.editedIndex = index;
   },

client/src/modules/products/store/state.js

@@ -6,4 +6,5 @@ export default () => ({
   editedIndex: -1,
   editedItem: {},
   dialog: false,
+  loading: false,
 });