From 2babd51bf065fe182219cab03451d5b980686029 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 20 May 2021 16:03:57 +0300
Subject: [PATCH] 'Delete and success function development and styling edited'

---
 resources/assets/js/mixins/spa-global.js      |  93 +++++-----
 resources/assets/js/views/Wizard.vue          |   8 +
 .../assets/js/views/wizard/Currencies.vue     | 175 +++++++++---------
 resources/assets/js/views/wizard/Taxes.vue    | 129 ++++++-------
 4 files changed, 213 insertions(+), 192 deletions(-)

diff --git a/resources/assets/js/mixins/spa-global.js b/resources/assets/js/mixins/spa-global.js
index 986262692..0a9cbae15 100644
--- a/resources/assets/js/mixins/spa-global.js
+++ b/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 = {};
 
@@ -46,7 +90,7 @@ export default {
             if (!plus_data || plus_data == undefined) {
                 delete data.type;
             }
-            
+
             window.axios({
                     method: form_method,
                     url: form_url,
@@ -62,27 +106,8 @@ export default {
                         }
                     });
 
-                    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.newDatas = false;
-                    this.currentTab = undefined;
-                    this.model.name = '';
-                    this.model.rate = '';
-                    this.model.select = '';
-                    this.model.enabled = 1;
-                })
+                    this.onSuccessEvent(response);
+                }, this)
                 .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';
-                    let timeout = 1000;
-
-                    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;
-                })
+                    this.onSuccessEvent(response);
+                }, this)
                 .catch(error => {
                     this.success = false;
                 });
diff --git a/resources/assets/js/views/Wizard.vue b/resources/assets/js/views/Wizard.vue
index c6ada01db..84370d7fb 100644
--- a/resources/assets/js/views/Wizard.vue
+++ b/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>
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
index 4e8b616c0..c6ca90858 100644
--- a/resources/assets/js/views/wizard/Currencies.vue
+++ b/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,77 +172,80 @@
                     </div>
                   </td>
                 </tr>
+                <tr v-if="newDatas">
+                  <td class="p-0">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.currencies.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.currencies.name"
+                          prepend-icon="fas fa-font"
+                          v-model="model.name"
+                        />
+                        <base-input :label="translations.currencies.code">
+                          <el-select
+                            name="code"
+                            v-model="model.select"
+                            required="required"
+                            @change="onChangeCode(model.select)"
+                            filterable
+                          >
+                            <template slot="prefix">
+                              <span
+                                class="el-input__suffix-inner el-select-icon"
+                              >
+                                <i
+                                  :class="'select-icon-position el-input__icon fa fa-code'"
+                                ></i>
+                              </span>
+                            </template>
+                            <el-option
+                              v-for="option in currency_codes"
+                              :key="option"
+                              :label="option"
+                              :value="option"
+                            >
+                            </el-option> </el-select
+                        ></base-input>
+                        <base-input
+                          :label="translations.currencies.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.currencies.rate"
+                          prepend-icon="fas fa-percentage"
+                          v-model="model.rate"
+                          required="required"
+                        />
+                        <div>
+                          <div class="d-flex">
+                            <akaunting-radio-group
+                              name="enabled"
+                              :text="translations.currencies.enabled"
+                              :enable="translations.currencies.yes"
+                              :disable="translations.currencies.no"
+                              :value="model.enabled"
+                            >
+                            </akaunting-radio-group>
+                          </div>
+                        </div>
+                        <div class="mt-4">
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onSubmitForm()"
+                            >{{ translations.currencies.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
               </tbody>
             </table>
-
-            <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"
-                >
-                  <base-input
-                    :label="translations.currencies.name"
-                    name="name"
-                    data-name="name"
-                    :placeholder="translations.currencies.name"
-                    prepend-icon="fas fa-font"
-                    v-model="model.name"
-                  />
-                  <base-input :label="translations.currencies.code">
-                    <el-select
-                      name="code"
-                      v-model="model.select"
-                      required="required"
-                      @change="onChangeCode(model.select)"
-                      filterable
-                    >
-                      <template slot="prefix">
-                        <span class="el-input__suffix-inner el-select-icon">
-                          <i
-                            :class="'select-icon-position el-input__icon fa fa-code'"
-                          ></i>
-                        </span>
-                      </template>
-                      <el-option
-                        v-for="option in currency_codes"
-                        :key="option"
-                        :label="option"
-                        :value="option"
-                      >
-                      </el-option> </el-select
-                  ></base-input>
-                  <base-input
-                    :label="translations.currencies.rate"
-                    name="rate"
-                    data-name="rate"
-                    :placeholder="translations.currencies.rate"
-                    prepend-icon="fas fa-percentage"
-                    v-model="model.rate"
-                    required="required"
-                  />
-                  <div>
-                    <div class="d-flex">
-                      <akaunting-radio-group
-                        name="enabled"
-                        :text="translations.currencies.enabled"
-                        :enable="translations.currencies.yes"
-                        :disable="translations.currencies.no"
-                        :value="model.enabled"
-                      >
-                      </akaunting-radio-group>
-                    </div>
-                  </div>
-                  <div class="mt-4">
-                    <base-button
-                      type="success"
-                      native-type="button"
-                      @click="onSubmitForm()"
-                      >{{ translations.currencies.save }}</base-button
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
           </form>
         </div>
 
@@ -353,7 +357,7 @@ export default {
         decimal_mark: "",
         thousands_separator: "",
       };
-      
+
       for (let [key, val] of formData.entries()) {
         Object.assign(data, {
           [key]: val,
@@ -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';
-      let timeout = 1000;
-
-      if (event.important) {
-        timeout = 0;
-      }
-
-      this.$notify({
-        message: event.message,
-        timeout: timeout,
-        icon: "fas fa-bell",
-        type,
-      });
+      this.onSuccessDelete(event);
     },
   },
 };
diff --git a/resources/assets/js/views/wizard/Taxes.vue b/resources/assets/js/views/wizard/Taxes.vue
index 4cb7fec95..46bfbecdf 100644
--- a/resources/assets/js/views/wizard/Taxes.vue
+++ b/resources/assets/js/views/wizard/Taxes.vue
@@ -134,58 +134,63 @@
                     </div>
                   </td>
                 </tr>
+                <tr v-if="newDatas">
+                  <td class="p-0">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.taxes.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.taxes.name"
+                          prepend-icon="fas fa-font"
+                          v-model="model.name"
+                        />
+                        <base-input
+                          :label="translations.taxes.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.taxes.rate"
+                          prepend-icon="fas fa-percentage"
+                          v-model="model.rate"
+                          rules="required"
+                        />
+                        <div>
+                          <div class="d-flex">
+                            <akaunting-radio-group
+                              name="enabled"
+                              :text="translations.taxes.enabled"
+                              :enable="translations.taxes.yes"
+                              :disable="translations.taxes.no"
+                              :value="model.enabled"
+                            >
+                            </akaunting-radio-group>
+                          </div>
+                        </div>
+                        <div class="mt-4">
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onSubmitForm()"
+                            >{{ translations.taxes.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
               </tbody>
             </table>
-            <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"
-                >
-                  <base-input
-                    :label="translations.taxes.name"
-                    name="name"
-                    data-name="name"
-                    :placeholder="translations.taxes.name"
-                    prepend-icon="fas fa-font"
-                    v-model="model.name"
-                  />
-                  <base-input
-                    :label="translations.taxes.rate"
-                    name="rate"
-                    data-name="rate"
-                    :placeholder="translations.taxes.rate"
-                    prepend-icon="fas fa-percentage"
-                    v-model="model.rate"
-                    rules="required"
-                  />
-                  <div>
-                    <div class="d-flex">
-                      <akaunting-radio-group
-                        name="enabled"
-                        :text="translations.taxes.enabled"
-                        :enable="translations.taxes.yes"
-                        :disable="translations.taxes.no"
-                        :value="model.enabled"
-                      >
-                      </akaunting-radio-group>
-                    </div>
-                  </div>
-                  <div class="mt-4">
-                    <base-button
-                      type="success"
-                      native-type="button"
-                      @click="onSubmitForm()"
-                      >{{ translations.taxes.save }}</base-button
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
           </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,12 +271,18 @@ 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) {
+    deleteCurrency(event) {
       this.taxes.forEach(function (tax, index) {
         if (tax.id == event.tax_id) {
           this.taxes.splice(index, 1);
@@ -281,20 +292,14 @@ export default {
 
       this.component = "";
 
-      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.onSuccessDelete(event);
     },
   },
 };
 </script>
+
+<style scoped>
+.current-tab-btn {
+  padding: 0 80px;
+}
+</style>