Fix Invoice/Estimate template issues and Add Payment Receipt, Custom Payment Modes and Item units

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

@@ -21,6 +21,9 @@ import EstimateTemplate from './EstimateTemplate'
 import InvoiceTemplate from './InvoiceTemplate'
 import CustomerModal from './CustomerModal'
 import CategoryModal from './CategoryModal'
+import PaymentMode from './PaymentModeModal'
+import ItemUnit from './ItemUnitModal'
+import MailTestModal from './MailTestModal'
 
 export default {
   components: {
@@ -29,7 +32,10 @@ export default {
     EstimateTemplate,
     InvoiceTemplate,
     CustomerModal,
-    CategoryModal
+    CategoryModal,
+    PaymentMode,
+    ItemUnit,
+    MailTestModal
   },
   data () {
     return {

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

@@ -341,6 +341,7 @@ export default {
   mixins: [validationMixin],
   data () {
     return {
+      isEdit: false,
       isLoading: false,
       countryList: [],
       billingCountry: null,
@@ -399,9 +400,22 @@ export default {
     ...mapGetters('currency', [
       'defaultCurrency',
       'currencies'
+    ]),
+    ...mapGetters('modal', [
+      'modalDataID',
+      'modalData',
+      'modalActive'
     ])
   },
   watch: {
+    'modalDataID' (val) {
+      if (val) {
+        this.isEdit = true
+        this.setData()
+      } else {
+        this.isEdit = false
+      }
+    },
     billingCountry () {
       if (this.billingCountry) {
         this.billing.country_id = this.billingCountry.id
@@ -419,6 +433,9 @@ export default {
     this.$refs.name.focus = true
     this.currency = this.defaultCurrency
     this.fetchCountry()
+    if (this.modalDataID) {
+      this.setData()
+    }
   },
   methods: {
     ...mapActions('invoice', {
@@ -493,6 +510,24 @@ export default {
       this.formData.addresses = [{...this.shipping, type: 'shipping'}]
       return true
     },
+    async setData () {
+      this.formData.id = this.modalData.id
+      this.formData.name = this.modalData.name
+      this.formData.email = this.modalData.email
+      this.formData.contact_name = this.modalData.contact_name
+      this.formData.phone = this.modalData.phone
+      this.formData.website = this.modalData.website
+      this.currency = this.modalData.currency
+
+      if (this.modalData.billing_address) {
+        this.billing = this.modalData.billing_address
+        this.billingCountry = this.modalData.billing_address.country
+      }
+      if (this.modalData.shipping_address) {
+        this.shipping = this.modalData.shipping_address
+        this.shippingCountry = this.modalData.shipping_address.country
+      }
+    },
     async submitCustomerData () {
       this.$v.formData.$touch()
 
@@ -510,14 +545,23 @@ export default {
         this.formData.currency_id = this.defaultCurrency.id
       }
       try {
-        let response = await this.addCustomer(this.formData)
+        let response = null
+        if (this.modalDataID) {
+          response = await this.updateCustomer(this.formData)
+        } else {
+          response = await this.addCustomer(this.formData)
+        }
         if (response.data) {
-          window.toastr['success'](this.$tc('customers.created_message'))
+          if (this.modalDataID) {
+            window.toastr['success'](this.$tc('customers.updated_message'))
+          } else {
+            window.toastr['success'](this.$tc('customers.created_message'))
+          }
           this.isLoading = false
-          if (this.$route.name === 'invoices.create') {
+          if (this.$route.name === 'invoices.create' || this.$route.name === 'invoices.edit') {
             this.setInvoiceCustomer(response.data.customer.id)
           }
-          if (this.$route.name === 'estimates.create') {
+          if (this.$route.name === 'estimates.create' || this.$route.name === 'estimates.edit') {
             this.setEstimateCustomer(response.data.customer.id)
           }
           this.resetData()

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

@@ -45,14 +45,34 @@
           <div class="col-sm-7">
             <base-select
               v-model="formData.unit"
-              :options="units"
+              :options="itemUnits"
               :searchable="true"
               :show-labels="false"
               label="name"
+            >
+              <div slot="afterList">
+                <button type="button" class="list-add-button" @click="addItemUnit">
+                  <font-awesome-icon class="icon" icon="cart-plus" />
+                  <label>{{ $t('settings.customization.items.add_item_unit') }}</label>
+                </button>
+              </div>
+            </base-select>
+          </div>
+        </div>
+        <div v-if="isTexPerItem" class="form-group row">
+          <label class="col-sm-4 col-form-label input-label">{{ $t('items.taxes') }}</label>
+          <div class="col-sm-7">
+            <base-select
+              v-model="formData.taxes"
+              :options="getTaxTypes"
+              :searchable="true"
+              :show-labels="false"
+              :allow-empty="true"
+              :multiple="true"
+              label="tax_name"
             />
           </div>
         </div>
-
         <div class="form-group row">
           <label class="col-sm-4 col-form-label input-label">{{ $t('items.description') }}</label>
           <div class="col-sm-7">
@@ -124,11 +144,13 @@ export default {
         { name: 'mg', value: 'mg' },
         { name: 'pc', value: 'pc' }
       ],
+      taxes: [],
       formData: {
         name: null,
         price: null,
         description: null,
-        unit: null
+        unit: null,
+        taxes: []
       }
     }
   },
@@ -161,12 +183,28 @@ export default {
         this.formData.price = newValue * 100
       }
     },
+    // itemUnits () {
+    //   return this.units
+    // },
     ...mapGetters('modal', [
-      'modalDataID'
+      'modalDataID',
+      'modalData'
     ]),
     ...mapGetters('item', [
-      'getItemById'
-    ])
+      'getItemById',
+      'itemUnits'
+    ]),
+    ...mapGetters('taxType', [
+      'taxTypes'
+    ]),
+    isTexPerItem () {
+      return this.modalData.taxPerItem === 'YES'
+    },
+    getTaxTypes () {
+      return this.taxTypes.map(tax => {
+        return {...tax, tax_name: tax.name + ' (' + tax.percent + '%)'}
+      })
+    }
   },
   watch: {
     modalDataID () {
@@ -179,12 +217,17 @@ export default {
       this.isEdit = true
       this.fetchEditData()
     }
+
+    if (this.isEdit) {
+      this.loadEditData()
+    }
   },
   mounted () {
     this.$refs.name.focus = true
   },
   methods: {
     ...mapActions('modal', [
+      'openModal',
       'closeModal',
       'resetModalData'
     ]),
@@ -203,7 +246,6 @@ export default {
         unit: null,
         id: null
       }
-
       this.$v.$reset()
     },
     fetchEditData () {
@@ -230,9 +272,20 @@ export default {
       if (this.isEdit) {
         response = await this.updateItem(this.formData)
       } else {
-        response = await this.addItem(this.formData)
+        let data = {
+          ...this.formData,
+          taxes: this.formData.taxes.map(tax => {
+            return {
+              tax_type_id: tax.id,
+              amount: ((this.formData.price * tax.percent) / 100),
+              percent: tax.percent,
+              name: tax.name,
+              collective_tax: 0
+            }
+          })
+        }
+        response = await this.addItem(data)
       }
-
       if (response.data) {
         window.toastr['success'](this.$tc('items.created_message'))
         this.setItem(response.data.item)
@@ -245,6 +298,12 @@ export default {
       }
       window.toastr['error'](response.data.error)
     },
+    async addItemUnit () {
+      this.openModal({
+        'title': 'Add Item Unit',
+        'componentName': 'ItemUnit'
+      })
+    },
     closeItemModal () {
       this.resetFormData()
       this.closeModal()

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

@@ -0,0 +1,148 @@
+<template>
+  <div class="item-unit-modal">
+    <form action="" @submit.prevent="submitItemUnit">
+      <div class="card-body">
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label input-label">{{ $t('settings.customization.items.unit_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>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { validationMixin } from 'vuelidate'
+const { required, minLength } = require('vuelidate/lib/validators')
+export default {
+  mixins: [validationMixin],
+  data () {
+    return {
+      isEdit: false,
+      isLoading: false,
+      formData: {
+        id: null,
+        name: null
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('modal', [
+      'modalDataID',
+      'modalData',
+      'modalActive'
+    ])
+  },
+  validations: {
+    formData: {
+      name: {
+        required,
+        minLength: minLength(2)
+      }
+    }
+  },
+  async mounted () {
+    this.$refs.name.focus = true
+    if (this.modalDataID) {
+      this.isEdit = true
+      this.setData()
+    }
+  },
+  methods: {
+    ...mapActions('modal', [
+      'closeModal',
+      'resetModalData'
+    ]),
+    ...mapActions('item', [
+      'addItemUnit',
+      'updateItemUnit',
+      'fatchItemUnit'
+    ]),
+    resetFormData () {
+      this.formData = {
+        id: null,
+        name: null
+      }
+      this.$v.formData.$reset()
+    },
+    async submitItemUnit () {
+      this.$v.formData.$touch()
+      if (this.$v.$invalid) {
+        return true
+      }
+      this.isLoading = true
+
+      let response
+
+      if (this.isEdit) {
+        response = await this.updateItemUnit(this.formData)
+
+        if (response.data) {
+          window.toastr['success'](this.$t('settings.customization.items.item_unit_updated'))
+          this.closePaymentModeModal()
+          return true
+        }
+
+        window.toastr['error'](response.data.error)
+      } else {
+        try {
+          response = await this.addItemUnit(this.formData)
+          if (response.data) {
+            this.isLoading = false
+            window.toastr['success'](this.$t('settings.customization.items.item_unit_added'))
+            this.closePaymentModeModal()
+            return true
+          } window.toastr['error'](response.data.error)
+        } catch (err) {
+          if (err.response.data.errors.name) {
+            this.isLoading = true
+            window.toastr['error'](this.$t('validation.item_unit_already_taken'))
+          }
+        }
+      }
+    },
+    async setData () {
+      this.formData = {
+        id: this.modalData.id,
+        name: this.modalData.name
+      }
+    },
+    closePaymentModeModal () {
+      this.resetModalData()
+      this.resetFormData()
+      this.closeModal()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="mail-test-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>
+      <div class="card-footer">
+        <base-button
+          :outline="true"
+          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>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { validationMixin } from 'vuelidate'
+const { required, minLength, email, maxLength } = require('vuelidate/lib/validators')
+export default {
+  mixins: [validationMixin],
+  data () {
+    return {
+      isEdit: false,
+      isLoading: false,
+      formData: {
+        to: null,
+        subject: null,
+        message: null
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('modal', [
+      'modalDataID',
+      'modalData',
+      'modalActive'
+    ])
+  },
+  validations: {
+    formData: {
+      to: {
+        required,
+        email
+      },
+      subject: {
+        required,
+        maxLength: maxLength(100)
+      },
+      message: {
+        required,
+        maxLength: maxLength(255)
+      }
+    }
+  },
+  async mounted () {
+    this.$refs.to.focus = true
+  },
+  methods: {
+    ...mapActions('modal', [
+      'closeModal',
+      'resetModalData'
+    ]),
+    resetFormData () {
+      this.formData = {
+        to: null,
+        subject: null,
+        message: null
+      }
+      this.$v.formData.$reset()
+    },
+    async onTestMailSend () {
+      this.$v.formData.$touch()
+
+      if (this.$v.$invalid) {
+        return true
+      }
+
+      this.isLoading = true
+      let response = await axios.post('/api/settings/test/mail', this.formData)
+      if (response.data) {
+
+        if (response.data.success) {
+          window.toastr['success'](this.$tc('general.send_mail_successfully'))
+          this.closeTaxModal()
+          this.isLoading = false
+          return true
+        }
+
+        window.toastr['error'](this.$tc('validation.something_went_wrong'))
+        this.closeTaxModal()
+        this.isLoading = false
+        return true
+      }
+      window.toastr['error'](response.data.error)
+    },
+    closeTaxModal () {
+      this.resetModalData()
+      this.resetFormData()
+      this.closeModal()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,143 @@
+<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>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { validationMixin } from 'vuelidate'
+const { required, minLength } = require('vuelidate/lib/validators')
+
+export default {
+  mixins: [validationMixin],
+  data () {
+    return {
+      isEdit: false,
+      isLoading: false,
+      formData: {
+        id: null,
+        name: null
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('modal', [
+      'modalDataID',
+      'modalData',
+      'modalActive'
+    ])
+  },
+  validations: {
+    formData: {
+      name: {
+        required,
+        minLength: minLength(2)
+      }
+    }
+  },
+  async mounted () {
+    this.$refs.name.focus = true
+    if (this.modalDataID) {
+      this.isEdit = true
+      this.setData()
+    }
+  },
+  methods: {
+    ...mapActions('modal', [
+      'closeModal',
+      'resetModalData'
+    ]),
+    ...mapActions('payment', [
+      'addPaymentMode',
+      'updatePaymentMode'
+    ]),
+    resetFormData () {
+      this.formData = {
+        id: null,
+        name: null
+      }
+      this.$v.formData.$reset()
+    },
+    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'))
+          this.closePaymentModeModal()
+          return true
+        } 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'))
+            this.closePaymentModeModal()
+            return true
+          } 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'))
+          }
+        }
+      }
+    },
+    async setData () {
+      this.formData = {
+        id: this.modalData.id,
+        name: this.modalData.name
+      }
+    },
+    closePaymentModeModal () {
+      this.resetModalData()
+      this.resetFormData()
+      this.closeModal()
+    }
+  }
+}
+</script>