build version 400

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

@@ -1,75 +1,66 @@
 <template>
-  <div class="mail-test-modal">
+  <div class="mail-config-modal">
     <form action="" @submit.prevent="onTestMailSend">
-      <div class="card-body">
-        <div class="form-group row">
-          <label class="col-sm-4 col-form-label input-label">{{ $t('general.to') }} <span class="required"> *</span></label>
-          <div class="col-sm-7">
-            <base-input
-              ref="to"
-              :invalid="$v.formData.to.$error"
-              v-model="formData.to"
-              type="text"
-              @input="$v.formData.to.$touch()"
-            />
-            <div v-if="$v.formData.to.$error">
-              <span v-if="!$v.formData.to.required" class="form-group__message text-danger">{{ $tc('validation.required') }}</span>
-              <span v-if="!$v.formData.to.email" class="form-group__message text-danger"> {{ $t('validation.email_incorrect') }} </span>
-            </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-4 col-form-label input-label">{{ $t('general.subject') }} <span class="required"> *</span></label>
-          <div class="col-sm-7">
-            <div class="base-input">
-              <base-input
-                :invalid="$v.formData.subject.$error"
-                v-model="formData.subject"
-                type="text"
-                @input="$v.formData.subject.$touch()"
-              />
-            </div>
-            <div v-if="$v.formData.subject.$error">
-              <span v-if="!$v.formData.subject.required" class="text-danger">{{ $t('validation.required') }}</span>
-              <span v-if="!$v.formData.subject.maxLength" class="text-danger">{{ $t('validation.subject_maxlength') }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-4 col-form-label input-label">{{ $t('general.message') }}<span class="required"> *</span></label>
-          <div class="col-sm-7">
-            <base-text-area
-              v-model="formData.message"
-              :invalid="$v.formData.message.$error"
-              rows="4"
-              cols="50"
-              @input="$v.formData.message.$touch()"
-            />
-            <div v-if="$v.formData.message.$error">
-              <span v-if="!$v.formData.message.required" class="text-danger">{{ $t('validation.required') }}</span>
-              <span v-if="!$v.formData.message.maxLength" class="text-danger">{{ $t('validation.message_maxlength') }}</span>
-            </div>
-          </div>
-        </div>
+      <div class="p-4 md:p-8">
+        <sw-input-group
+          :label="$t('general.to')"
+          class="mt-3"
+          :error="emailError"
+          variant="horizontal"
+          required
+        >
+          <sw-input
+            ref="to"
+            :invalid="$v.formData.to.$error"
+            v-model="formData.to"
+            type="text"
+            @input="$v.formData.to.$touch()"
+          />
+        </sw-input-group>
+        <sw-input-group
+          :label="$t('general.subject')"
+          class="mt-3"
+          :error="subjectError"
+          variant="horizontal"
+          required
+        >
+          <sw-input
+            :invalid="$v.formData.subject.$error"
+            v-model="formData.subject"
+            type="text"
+            @input="$v.formData.subject.$touch()"
+          />
+        </sw-input-group>
+        <sw-input-group
+          :label="$t('general.message')"
+          class="mt-3"
+          :error="messageError"
+          variant="horizontal"
+          required
+        >
+          <sw-textarea
+            v-model="formData.message"
+            :invalid="$v.formData.message.$error"
+            rows="4"
+            cols="50"
+            @input="$v.formData.message.$touch()"
+          />
+        </sw-input-group>
       </div>
-      <div class="card-footer">
-        <base-button
-          :outline="true"
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
+        <sw-button
+          variant="primary-outline"
           class="mr-3"
-          color="theme"
-          type="button"
           @click="closeTaxModal"
         >
           {{ $t('general.cancel') }}
-        </base-button>
-        <base-button
-          :loading="isLoading"
-          color="theme"
-          icon="save"
-          type="submit"
-        >
-          {{ !isEdit ? $t('general.save') : $t('general.update') }}
-        </base-button>
+        </sw-button>
+        <sw-button variant="primary" type="submit" :loading="isLoading">
+          <paper-airplane-icon v-if="!isLoading" class="mr-2" />
+          {{ !isEdit ? $t('general.send') : $t('general.update') }}
+        </sw-button>
       </div>
     </form>
   </div>
@@ -77,61 +68,96 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
-const { required, minLength, email, maxLength } = require('vuelidate/lib/validators')
+import { PaperAirplaneIcon } from '@vue-hero-icons/outline'
+const {
+  required,
+  minLength,
+  email,
+  maxLength,
+} = require('vuelidate/lib/validators')
 export default {
-  mixins: [validationMixin],
-  data () {
+  components: {
+    PaperAirplaneIcon,
+  },
+  data() {
     return {
       isEdit: false,
       isLoading: false,
       formData: {
         to: null,
         subject: null,
-        message: null
-      }
+        message: null,
+      },
     }
   },
   computed: {
-    ...mapGetters('modal', [
-      'modalDataID',
-      'modalData',
-      'modalActive'
-    ])
+    ...mapGetters('modal', ['modalDataID', 'modalData', 'modalActive']),
+    emailError() {
+      if (!this.$v.formData.to.$error) {
+        return ''
+      }
+      if (!this.$v.formData.to.required) {
+        return this.$tc('validation.required')
+      }
+      if (!this.$v.formData.to.email) {
+        return this.$tc('validation.email_incorrect')
+      }
+    },
+    subjectError() {
+      if (!this.$v.formData.subject.$error) {
+        return ''
+      }
+      if (!this.$v.formData.subject.required) {
+        return this.$tc('validation.required')
+      }
+
+      if (!this.$v.formData.subject.maxLength) {
+        return this.$tc('validation.subject_maxlength')
+      }
+    },
+    messageError() {
+      if (!this.$v.formData.message.$error) {
+        return ''
+      }
+      if (!this.$v.formData.message.required) {
+        return this.$tc('validation.required')
+      }
+      if (!this.$v.formData.message.maxLength) {
+        return this.$tc('validation.message_maxlength')
+      }
+    },
   },
   validations: {
     formData: {
       to: {
         required,
-        email
+        email,
       },
       subject: {
         required,
-        maxLength: maxLength(100)
+        maxLength: maxLength(100),
       },
       message: {
         required,
-        maxLength: maxLength(255)
-      }
-    }
+        maxLength: maxLength(255),
+      },
+    },
   },
-  async mounted () {
+  async mounted() {
     this.$refs.to.focus = true
   },
   methods: {
-    ...mapActions('modal', [
-      'closeModal',
-      'resetModalData'
-    ]),
-    resetFormData () {
+    ...mapActions('modal', ['closeModal', 'resetModalData']),
+    ...mapActions('company', ['sendTestMail']),
+    resetFormData() {
       this.formData = {
         to: null,
         subject: null,
-        message: null
+        message: null,
       }
       this.$v.formData.$reset()
     },
-    async onTestMailSend () {
+    async onTestMailSend() {
       this.$v.formData.$touch()
 
       if (this.$v.$invalid) {
@@ -139,9 +165,9 @@ export default {
       }
 
       this.isLoading = true
-      let response = await axios.post('/api/settings/test/mail', this.formData)
-      if (response.data) {
+      let response = await this.sendTestMail(this.formData)
 
+      if (response.data) {
         if (response.data.success) {
           window.toastr['success'](this.$tc('general.send_mail_successfully'))
           this.closeTaxModal()
@@ -156,11 +182,11 @@ export default {
       }
       window.toastr['error'](response.data.error)
     },
-    closeTaxModal () {
+    closeTaxModal() {
       this.resetModalData()
       this.resetFormData()
       this.closeModal()
-    }
-  }
+    },
+  },
 }
 </script>