'Delete and success function development and styling edited'

resources/assets/js/mixins/spa-global.js

@@ -32,7 +32,51 @@ export default {
                 this.model.select = item.code ? item.code : '';
             }
         },
+        dataHandleEvent() {
+            this.newDatas = false;
+            this.currentTab = undefined;
+            this.model.name = '';
+            this.model.rate = '';
+            this.model.select = '';
+            this.model.enabled = 1;
+        },
+        onSuccessEvent(response) {
+            let type = response.data.success ? 'success' : 'error';
+            let timeout = 1000;
+
+            if (response.data.important) {
+                timeout = 0;
+            }
+
+            this.$notify({
+                message: response.data.message,
+                timeout: timeout,
+                icon: "fas fa-bell",
+                type,
+            });
+
+            this.dataHandleEvent();
+            
+        },
+        onSuccessDelete(event) {
+            let type = event.success ? 'success' : 'error';
+            let timeout = 1000;
+
+            if (event.important) {
+                timeout = 0;
+            }
+
+            this.$notify({
+                message: event.message,
+                timeout: timeout,
+                icon: "fas fa-bell",
+                type,
+            });
+
+            this.dataHandleEvent();
+        },
         onEditEvent(form_method, form_url, plus_data, form_list, form_id) {
+            let self = this;
             const formData = new FormData(this.$refs["form"]);
             const data = {};
 
@@ -62,27 +106,8 @@ export default {
                         }
                     });
 
-                    let type = response.data.success ? 'success' : 'error';
+                    this.onSuccessEvent(response);
-                    let timeout = 1000;
+                }, this)
-
-                    if (response.data.important) {
-                        timeout = 0;
-                    }
-
-                    this.$notify({
-                        message: response.data.message,
-                        timeout: timeout,
-                        icon: "fas fa-bell",
-                        type,
-                    });
-
-                    this.newDatas = false;
-                    this.currentTab = undefined;
-                    this.model.name = '';
-                    this.model.rate = '';
-                    this.model.select = '';
-                    this.model.enabled = 1;
-                })
                 .catch(error => {
                     this.success = false;
                 });
@@ -116,28 +141,8 @@ export default {
                         "enabled": response.data.data.enabled != undefined ? response.data.data.enabled : 'true'
                     });
 
-                    let type = response.data.success ? 'success' : 'error';
+                    this.onSuccessEvent(response);
-                    let timeout = 1000;
+                }, this)
-
-                    if (response.data.important) {
-                        timeout = 0;
-                    }
-
-                    this.$notify({
-                        message: response.data.message,
-                        timeout: timeout,
-                        icon: "fas fa-bell",
-                        type,
-                    });
-
-
-                    this.newDatas = false;
-                    this.currentTab = undefined;
-                    this.model.name = '';
-                    this.model.rate = '';
-                    this.model.select = '';
-                    this.model.enabled = 1;
-                })
                 .catch(error => {
                     this.success = false;
                 });

resources/assets/js/views/Wizard.vue

@@ -82,5 +82,13 @@ export default {
   .current-tab-btn {
     padding: 0 15px;
   }
+
+  .form-container {
+    flex-direction: column;
+  }
+
+  .form-container .form-group {
+    width: 100%;
+  }
 }
 </style>

resources/assets/js/views/wizard/Currencies.vue

@@ -21,7 +21,8 @@
             native-type="button"
             class="btn-sm"
             @click="addItem()"
-            >{{ translations.currencies.add_new }}</base-button>
+            >{{ translations.currencies.add_new }}</base-button
+          >
         </div>
 
         <div class="row flex-column">
@@ -171,11 +172,9 @@
                     </div>
                   </td>
                 </tr>
-              </tbody>
+                <tr v-if="newDatas">
-            </table>
+                  <td class="p-0">
-
+                    <div class="row pt-3 pb-3">
-            <div class="mt-2" v-if="newDatas">
-              <div class="row p-3">
                       <div
                         class="form-container col-12 d-flex justify-content-between align-items-start"
                       >
@@ -196,7 +195,9 @@
                             filterable
                           >
                             <template slot="prefix">
-                        <span class="el-input__suffix-inner el-select-icon">
+                              <span
+                                class="el-input__suffix-inner el-select-icon"
+                              >
                                 <i
                                   :class="'select-icon-position el-input__icon fa fa-code'"
                                 ></i>
@@ -241,7 +242,10 @@
                         </div>
                       </div>
                     </div>
-            </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </form>
         </div>
 
@@ -380,11 +384,22 @@ export default {
     },
 
     onEditSave(item) {
-      this.onEditEvent("PATCH", url + "/wizard/currencies/" + item.id, '', this.currencies, item.id);
+      this.onEditEvent(
+        "PATCH",
+        url + "/wizard/currencies/" + item.id,
+        "",
+        this.currencies,
+        item.id
+      );
     },
 
     onSubmitForm() {
-      this.onSubmitEvent("POST", url + "/wizard/currencies", '', this.currencies);
+      this.onSubmitEvent(
+        "POST",
+        url + "/wizard/currencies",
+        "",
+        this.currencies
+      );
     },
 
     deleteCurrency(event) {
@@ -397,19 +412,7 @@ export default {
 
       this.component = "";
 
-      let type = event.success ? 'success' : 'error';
+      this.onSuccessDelete(event);
-      let timeout = 1000;
-
-      if (event.important) {
-        timeout = 0;
-      }
-
-      this.$notify({
-        message: event.message,
-        timeout: timeout,
-        icon: "fas fa-bell",
-        type,
-      });
     },
   },
 };

resources/assets/js/views/wizard/Taxes.vue

@@ -134,10 +134,9 @@
                     </div>
                   </td>
                 </tr>
-              </tbody>
+                <tr v-if="newDatas">
-            </table>
+                  <td class="p-0">
-            <div class="mt-2" v-if="newDatas">
+                    <div class="row pt-3 pb-3">
-              <div class="row p-3">
                       <div
                         class="form-container col-12 d-flex justify-content-between align-items-start"
                       >
@@ -180,12 +179,18 @@
                         </div>
                       </div>
                     </div>
-            </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </form>
         </div>
         <notifications></notifications>
         <form id="form-dynamic-component" method="POST" action="#"></form>
-        <component v-bind:is="component" @deleted="deleteCurrency($event)"></component>
+        <component
+          v-bind:is="component"
+          @deleted="deleteCurrency($event)"
+        ></component>
       </div>
       <div class="card-footer">
         <div class="row">
@@ -266,10 +271,16 @@ export default {
       this.$router.push("/wizard/currencies");
     },
     onEditSave(item) {
-      this.onEditEvent("PATCH", url + "/wizard/taxes/" + item.id, 'type', this.taxes, item.id);
+      this.onEditEvent(
+        "PATCH",
+        url + "/wizard/taxes/" + item.id,
+        "type",
+        this.taxes,
+        item.id
+      );
     },
     onSubmitForm() {
-      this.onSubmitEvent("POST", url + "/wizard/taxes", 'type', this.taxes);
+      this.onSubmitEvent("POST", url + "/wizard/taxes", "type", this.taxes);
     },
     deleteCurrency(event) {
       this.taxes.forEach(function (tax, index) {
@@ -281,20 +292,14 @@ export default {
 
       this.component = "";
 
-      let type = event.success ? 'success' : 'error';
+      this.onSuccessDelete(event);
-      let timeout = 1000;
-
-      if (event.important) {
-        timeout = 0;
-      }
-
-      this.$notify({
-        message: event.message,
-        timeout: timeout,
-        icon: "fas fa-bell",
-        type,
-      });
     },
   },
 };
 </script>
+
+<style scoped>
+.current-tab-btn {
+  padding: 0 80px;
+}
+</style>