build version 400

resources/assets/js/components/base/modal/PaymentModeModal.vue

@@ -1,79 +1,78 @@
 <template>
-  <div class="payment-modes-modal">
-    <form action="" @submit.prevent="submitPaymentMode">
-      <div class="card-body">
-        <div class="form-group row">
-          <label class="col-sm-4 col-form-label input-label">{{ $t('settings.customization.payments.mode_name') }} <span class="required"> *</span></label>
-          <div class="col-sm-7">
-            <base-input
-              ref="name"
-              :invalid="$v.formData.name.$error"
-              v-model="formData.name"
-              type="text"
-              @input="$v.formData.name.$touch()"
-            />
-            <div v-if="$v.formData.name.$error">
-              <span v-if="!$v.formData.name.required" class="form-group__message text-danger">{{ $tc('validation.required') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card-footer">
-        <base-button
-          :outline="true"
-          class="mr-3"
-          color="theme"
-          type="button"
-          @click="closePaymentModeModal"
-        >
-          {{ $t('general.cancel') }}
-        </base-button>
-        <base-button
-          :loading="isLoading"
-          color="theme"
-          icon="save"
-          type="submit"
-        >
-          {{ !isEdit ? $t('general.save') : $t('general.update') }}
-        </base-button>
-      </div>
-    </form>
-  </div>
+  <form action="" @submit.prevent="submitPaymentMode">
+    <div class="p-8 sm:p-6">
+      <sw-input-group
+        :label="$t('settings.customization.payments.mode_name')"
+        :error="nameError"
+        variant="horizontal"
+        required
+      >
+        <sw-input
+          ref="name"
+          :invalid="$v.formData.name.$error"
+          v-model="formData.name"
+          type="text"
+          @input="$v.formData.name.$touch()"
+        />
+      </sw-input-group>
+    </div>
+    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+      <sw-button
+        class="mr-3"
+        variant="primary-outline"
+        type="button"
+        @click="closePaymentModeModal"
+      >
+        {{ $t('general.cancel') }}
+      </sw-button>
+      <sw-button :loading="isLoading" variant="primary" type="submit">
+        <save-icon class="mr-2" v-if="!isLoading" />
+        {{ !isEdit ? $t('general.save') : $t('general.update') }}
+      </sw-button>
+    </div>
+  </form>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
 const { required, minLength } = require('vuelidate/lib/validators')
 
 export default {
-  mixins: [validationMixin],
-  data () {
+  data() {
     return {
       isEdit: false,
       isLoading: false,
       formData: {
         id: null,
-        name: null
-      }
+        name: null,
+      },
     }
   },
   computed: {
     ...mapGetters('modal', [
       'modalDataID',
       'modalData',
-      'modalActive'
-    ])
+      'modalActive',
+      'refreshData',
+    ]),
+    nameError() {
+      if (!this.$v.formData.name.$error) {
+        return ''
+      }
+      if (!this.$v.formData.name.required) {
+        return this.$tc('validation.required')
+      }
+    },
   },
   validations: {
     formData: {
       name: {
         required,
-        minLength: minLength(2)
-      }
-    }
+        minLength: minLength(2),
+      },
+    },
   },
-  async mounted () {
+  async mounted() {
     this.$refs.name.focus = true
     if (this.modalDataID) {
       this.isEdit = true
@@ -81,63 +80,68 @@ export default {
     }
   },
   methods: {
-    ...mapActions('modal', [
-      'closeModal',
-      'resetModalData'
-    ]),
-    ...mapActions('payment', [
-      'addPaymentMode',
-      'updatePaymentMode'
-    ]),
-    resetFormData () {
+    ...mapActions('modal', ['closeModal', 'resetModalData']),
+    ...mapActions('payment', ['addPaymentMode', 'updatePaymentMode']),
+    resetFormData() {
       this.formData = {
         id: null,
-        name: null
+        name: null,
       }
       this.$v.formData.$reset()
     },
-    async submitPaymentMode () {
+    async submitPaymentMode() {
       this.$v.formData.$touch()
       if (this.$v.$invalid) {
         return true
       }
       this.isLoading = true
       let response
+
       if (this.isEdit) {
         response = await this.updatePaymentMode(this.formData)
         if (response.data) {
-          window.toastr['success'](this.$t('settings.customization.payments.payment_mode_updated'))
+          window.toastr['success'](
+            this.$t('settings.customization.payments.payment_mode_updated')
+          )
+          this.refreshData ? this.refreshData() : ''
           this.closePaymentModeModal()
           return true
-        } window.toastr['error'](response.data.error)
+        }
+        window.toastr['error'](response.data.error)
       } else {
         try {
           response = await this.addPaymentMode(this.formData)
           if (response.data) {
             this.isLoading = false
-            window.toastr['success'](this.$t('settings.customization.payments.payment_mode_added'))
+            window.toastr['success'](
+              this.$t('settings.customization.payments.payment_mode_added')
+            )
+            this.refreshData ? this.refreshData() : ''
             this.closePaymentModeModal()
             return true
-          } window.toastr['error'](response.data.error)
+          }
+          window.toastr['error'](response.data.error)
         } catch (err) {
           if (err.response.data.errors.name) {
-            this.isLoading = true
-            window.toastr['error'](this.$t('validation.payment_mode_already_taken'))
+            this.isLoading = false
+            window.toastr['error'](
+              this.$t('validation.payment_mode_already_taken')
+            )
           }
         }
       }
     },
-    async setData () {
+    async setData() {
       this.formData = {
         id: this.modalData.id,
-        name: this.modalData.name
+        name: this.modalData.name,
       }
     },
-    closePaymentModeModal () {
+    closePaymentModeModal() {
       this.resetModalData()
       this.resetFormData()
       this.closeModal()
-    }
-  }
+    },
+  },
 }
 </script>