Refactor Customization Page

2025-10-31 05:31:10 -04:00 · 2019-12-12 13:46:09 +05:30
parent 81739827c0
commit cbf0af2120
16 changed files with 416 additions and 106 deletions
--- a/resources/assets/js/views/estimates/Create.vue
+++ b/resources/assets/js/views/estimates/Create.vue
@ -127,14 +127,15 @@
          <div class="row mt-4">
            <div class="col collapse-input">
              <label>{{ $t('estimates.estimate_number') }}<span class="text-danger"> * </span></label>
-              <base-input
-                :invalid="$v.newEstimate.estimate_number.$error"
-                :read-only="true"
-                v-model="newEstimate.estimate_number"
+              <base-prefix-input
+                v-model="estimateNumAttribute"
+                :invalid="$v.estimateNumAttribute.$error"
+                :prefix="estimatePrefix"
                icon="hashtag"
-                @input="$v.newEstimate.estimate_number.$touch()"
+                @input="$v.estimateNumAttribute.$touch()"
              />
-              <span v-show="$v.newEstimate.estimate_number.$error && !$v.newEstimate.estimate_number.required" class="text-danger mt-1"> {{ $tc('estimates.errors.required') }}  </span>
+              <span v-show="$v.estimateNumAttribute.$error && !$v.estimateNumAttribute.required" class="text-danger mt-1"> {{ $tc('estimates.errors.required') }}  </span>
+              <span v-show="!$v.estimateNumAttribute.numeric" class="text-danger mt-1"> {{ $tc('validation.numbers_only') }}  </span>
            </div>
            <div class="col collapse-input">
              <label>{{ $t('estimates.ref_number') }}</label>
@ -320,7 +321,7 @@ import { validationMixin } from 'vuelidate'
 import Guid from 'guid'
 import TaxStub from '../../stub/tax'
 import Tax from './EstimateTax'
-const { required, between, maxLength } = require('vuelidate/lib/validators')
+const { required, between, maxLength, numeric } = require('vuelidate/lib/validators')

 export default {
  components: {
@ -361,7 +362,9 @@ export default {
      discountPerItem: null,
      initLoading: false,
      isLoading: false,
-      maxDiscount: 0
+      maxDiscount: 0,
+      estimatePrefix: null,
+      estimateNumAttribute: null
    }
  },
  validations () {
@ -373,9 +376,6 @@ export default {
        expiry_date: {
          required
        },
-        estimate_number: {
-          required
-        },
        discount_val: {
          between: between(0, this.subtotal)
        },
@ -388,6 +388,10 @@ export default {
      },
      selectedCustomer: {
        required
+      },
+      estimateNumAttribute: {
+        required,
+        numeric
      }
    }
  },
@ -559,6 +563,8 @@ export default {
          this.taxPerItem = response.data.tax_per_item
          this.selectedCurrency = this.defaultCurrency
          this.estimateTemplates = response.data.estimateTemplates
+          this.estimatePrefix = response.data.estimate_prefix
+          this.estimateNumAttribute = response.data.nextEstimateNumber
        }
        this.initLoading = false
        return
@ -574,8 +580,9 @@ export default {
        let today = new Date()
        this.newEstimate.estimate_date = moment(today).toString()
        this.newEstimate.expiry_date = moment(today).add(7, 'days').toString()
-        this.newEstimate.estimate_number = response.data.nextEstimateNumber
        this.itemList = response.data.items
+        this.estimatePrefix = response.data.estimate_prefix
+        this.estimateNumAttribute = response.data.nextEstimateNumber
      }
      this.initLoading = false
    },
@ -604,6 +611,7 @@ export default {
      }

      this.isLoading = true
+      this.newEstimate.estimate_number = this.estimatePrefix + '-' + this.estimateNumAttribute

      let data = {
        ...this.newEstimate,
@ -637,7 +645,11 @@ export default {
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
-        console.log(err)
+        if (err.response.data.errors.estimate_number) {
+          window.toastr['error'](err.response.data.errors.estimate_number)
+          return true
+        }
+        window.toastr['error'](err.response.data.message)
      })
    },
    submitUpdate (data) {
@ -650,7 +662,11 @@ export default {
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
-        console.log(err)
+        if (err.response.data.errors.estimate_number) {
+          window.toastr['error'](err.response.data.errors.estimate_number)
+          return true
+        }
+        window.toastr['error'](err.response.data.message)
      })
    },
    checkItemsData (index, isValid) {
--- a/resources/assets/js/views/invoices/Create.vue
+++ b/resources/assets/js/views/invoices/Create.vue
@ -127,14 +127,15 @@
          <div class="row mt-4">
            <div class="col collapse-input">
              <label>{{ $t('invoices.invoice_number') }}<span class="text-danger"> * </span></label>
-              <base-input
-                :invalid="$v.newInvoice.invoice_number.$error"
-                :read-only="true"
-                v-model="newInvoice.invoice_number"
+              <base-prefix-input
+                v-model="invoiceNumAttribute"
+                :invalid="$v.invoiceNumAttribute.$error"
+                :prefix="invoicePrefix"
                icon="hashtag"
-                @input="$v.newInvoice.invoice_number.$touch()"
+                @input="$v.invoiceNumAttribute.$touch()"
              />
-              <span v-show="$v.newInvoice.invoice_number.$error && !$v.newInvoice.invoice_number.required" class="text-danger mt-1"> {{ $tc('validation.required') }}  </span>
+              <span v-show="$v.invoiceNumAttribute.$error && !$v.invoiceNumAttribute.required" class="text-danger mt-1"> {{ $tc('validation.required') }}  </span>
+              <span v-show="!$v.invoiceNumAttribute.numeric" class="text-danger mt-1"> {{ $tc('validation.numbers_only') }}  </span>
            </div>
            <div class="col collapse-input">
              <label>{{ $t('invoices.ref_number') }}</label>
@ -320,7 +321,7 @@ import { validationMixin } from 'vuelidate'
 import Guid from 'guid'
 import TaxStub from '../../stub/tax'
 import Tax from './InvoiceTax'
-const { required, between, maxLength } = require('vuelidate/lib/validators')
+const { required, between, maxLength, numeric } = require('vuelidate/lib/validators')

 export default {
  components: {
@ -361,7 +362,9 @@ export default {
      discountPerItem: null,
      initLoading: false,
      isLoading: false,
-      maxDiscount: 0
+      maxDiscount: 0,
+      invoicePrefix: null,
+      invoiceNumAttribute: null
    }
  },
  validations () {
@ -373,9 +376,6 @@ export default {
        due_date: {
          required
        },
-        invoice_number: {
-          required
-        },
        discount_val: {
          between: between(0, this.subtotal)
        },
@ -388,6 +388,10 @@ export default {
      },
      selectedCustomer: {
        required
+      },
+      invoiceNumAttribute: {
+        required,
+        numeric
      }
    }
  },
@ -559,6 +563,8 @@ export default {
          this.taxPerItem = response.data.tax_per_item
          this.selectedCurrency = this.defaultCurrency
          this.invoiceTemplates = response.data.invoiceTemplates
+          this.invoicePrefix = response.data.invoice_prefix
+          this.invoiceNumAttribute = response.data.nextInvoiceNumber
        }
        this.initLoading = false
        return
@ -574,8 +580,9 @@ export default {
        let today = new Date()
        this.newInvoice.invoice_date = moment(today).toString()
        this.newInvoice.due_date = moment(today).add(7, 'days').toString()
-        this.newInvoice.invoice_number = response.data.nextInvoiceNumber
        this.itemList = response.data.items
+        this.invoicePrefix = response.data.invoice_prefix
+        this.invoiceNumAttribute = response.data.nextInvoiceNumber
      }
      this.initLoading = false
    },
@ -604,6 +611,7 @@ export default {
      }

      this.isLoading = true
+      this.newInvoice.invoice_number = this.invoicePrefix + '-' + this.invoiceNumAttribute

      let data = {
        ...this.newInvoice,
@ -637,6 +645,10 @@ export default {
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
+        if (err.response.data.errors.invoice_number) {
+          window.toastr['error'](err.response.data.errors.invoice_number)
+          return true
+        }
        console.log(err)
      })
    },
@ -653,6 +665,10 @@ export default {
        }
      }).catch((err) => {
        this.isLoading = false
+        if (err.response.data.errors.invoice_number) {
+          window.toastr['error'](err.response.data.errors.invoice_number)
+          return true
+        }
        console.log(err)
      })
    },
--- a/resources/assets/js/views/payments/Create.vue
+++ b/resources/assets/js/views/payments/Create.vue
@ -40,16 +40,15 @@
            <div class="col-sm-6">
              <div class="form-group">
                <label class="form-label">{{ $t('payments.payment_number') }}</label><span class="text-danger"> *</span>
-                <base-input
-                  :invalid="$v.formData.payment_number.$error"
-                  v-model.trim="formData.payment_number"
-                  read-only
-                  type="text"
-                  name="email"
-                  @input="$v.formData.payment_number.$touch()"
+                <base-prefix-input
+                  :invalid="$v.paymentNumAttribute.$error"
+                  v-model.trim="paymentNumAttribute"
+                  :prefix="paymentPrefix"
+                  @input="$v.paymentNumAttribute.$touch()"
                />
-                <div v-if="$v.formData.payment_number.$error">
-                  <span v-if="!$v.formData.payment_number.required" class="text-danger">{{ $tc('validation.required') }}</span>
+                <div v-if="$v.paymentNumAttribute.$error">
+                  <span v-if="!$v.paymentNumAttribute.required" class="text-danger">{{ $tc('validation.required') }}</span>
+                  <span v-if="!$v.paymentNumAttribute.numeric" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
                </div>
              </div>
            </div>
@ -155,7 +154,7 @@ import { mapActions, mapGetters } from 'vuex'
 import MultiSelect from 'vue-multiselect'
 import { validationMixin } from 'vuelidate'
 import moment from 'moment'
-const { required, between, maxLength } = require('vuelidate/lib/validators')
+const { required, between, maxLength, numeric } = require('vuelidate/lib/validators')

 export default {
  components: { MultiSelect },
@ -184,7 +183,9 @@ export default {
      invoiceList: [],
      isLoading: false,
      maxPayableAmount: Number.MAX_SAFE_INTEGER,
-      isSettingInitialData: true
+      isSettingInitialData: true,
+      paymentNumAttribute: null,
+      paymentPrefix: ''
    }
  },
  validations () {
@ -193,9 +194,6 @@ export default {
        required
      },
      formData: {
-        payment_number: {
-          required
-        },
        payment_date: {
          required
        },
@ -206,6 +204,10 @@ export default {
        notes: {
          maxLength: maxLength(255)
        }
+      },
+      paymentNumAttribute: {
+        required,
+        numeric
      }
    }
  },
@ -297,6 +299,8 @@ export default {
        this.customer = response.data.payment.user
        this.formData.payment_date = moment(response.data.payment.payment_date, 'YYYY-MM-DD').toString()
        this.formData.amount = parseFloat(response.data.payment.amount)
+        this.paymentPrefix = response.data.payment_prefix
+        this.paymentNumAttribute = response.data.nextPaymentNumber
        if (response.data.payment.invoice !== null) {
          this.maxPayableAmount = parseInt(response.data.payment.amount) + parseInt(response.data.payment.invoice.due_amount)
          this.invoice = response.data.payment.invoice
@ -305,7 +309,8 @@ export default {
      } else {
        let response = await this.fetchCreatePayment()
        this.customerList = response.data.customers
-        this.formData.payment_number = response.data.nextPaymentNumber
+        this.paymentNumAttribute = response.data.nextPaymentNumber
+        this.paymentPrefix = response.data.payment_prefix
        this.formData.payment_date = moment(new Date()).toString()
      }
      return true
@ -332,6 +337,9 @@ export default {
      if (this.$v.$invalid) {
        return true
      }
+
+      this.formData.payment_number = this.paymentPrefix + '-' + this.paymentNumAttribute
+
      if (this.isEdit) {
        let data = {
          editData: {
@ -340,35 +348,53 @@ export default {
          },
          id: this.$route.params.id
        }
-        let response = await this.updatePayment(data)
-        if (response.data.success) {
-          window.toastr['success'](this.$t('payments.updated_message'))
-          this.$router.push('/admin/payments')
-          return true
+        try {
+          let response = await this.updatePayment(data)
+          if (response.data.success) {
+            window.toastr['success'](this.$t('payments.updated_message'))
+            this.$router.push('/admin/payments')
+            return true
+          }
+          if (response.data.error === 'invalid_amount') {
+            window.toastr['error'](this.$t('invalid_amount_message'))
+            return false
+          }
+          window.toastr['error'](response.data.error)
+        } catch (err) {
+          this.isLoading = false
+          if (err.response.data.errors.payment_number) {
+            window.toastr['error'](err.response.data.errors.payment_number)
+            return true
+          }
+          window.toastr['error'](err.response.data.message)
        }
-        if (response.data.error === 'invalid_amount') {
-          window.toastr['error'](this.$t('invalid_amount_message'))
-          return false
-        }
-        window.toastr['error'](response.data.error)
      } else {
        let data = {
          ...this.formData,
          payment_date: moment(this.formData.payment_date).format('DD/MM/YYYY')
        }
        this.isLoading = true
-        let response = await this.addPayment(data)
-        if (response.data.success) {
-          window.toastr['success'](this.$t('payments.created_message'))
-          this.$router.push('/admin/payments')
-          this.isLoading = true
-          return true
+        try {
+          let response = await this.addPayment(data)
+          if (response.data.success) {
+            window.toastr['success'](this.$t('payments.created_message'))
+            this.$router.push('/admin/payments')
+            this.isLoading = true
+            return true
+          }
+          if (response.data.error === 'invalid_amount') {
+            window.toastr['error'](this.$t('invalid_amount_message'))
+            return false
+          }
+          window.toastr['error'](response.data.error)
+        } catch (err) {
+          this.isLoading = false
+          if (err.response.data.errors.payment_number) {
+            window.toastr['error'](err.response.data.errors.payment_number)
+            return true
+          }
+          window.toastr['error'](err.response.data.message)
        }
-        if (response.data.error === 'invalid_amount') {
-          window.toastr['error'](this.$t('invalid_amount_message'))
-          return false
-        }
-        window.toastr['error'](response.data.error)
      }
    }
  }
--- a/resources/assets/js/views/settings/Customization.vue
+++ b/resources/assets/js/views/settings/Customization.vue
@ -14,7 +14,7 @@
      </ul>

      <!-- Invoices Tab -->
-      <transition name="fade">
+      <transition name="fade-customize">
        <div v-if="activeTab === 'INVOICES'" class="invoice-tab">
          <form action="" class="form-section" @submit.prevent="updateInvoiceSetting">
            <div class="row">
@ -69,7 +69,7 @@
      </transition>

      <!-- Estimates Tab -->
-      <transition name="fade">
+      <transition name="fade-customize">
        <div v-if="activeTab === 'ESTIMATES'" class="estimate-tab">
          <form action="" class="form-section" @submit.prevent="updateEstimateSetting">
            <div class="row">
@ -124,7 +124,7 @@
      </transition>

      <!-- Payments Tab -->
-      <transition name="fade">
+      <transition name="fade-customize">
        <div v-if="activeTab === 'PAYMENTS'" class="payment-tab">
          <form action="" class="form-section" @submit.prevent="updatePaymentSetting">
            <div class="row">
@ -208,6 +208,9 @@ export default {
    }
  },
  watch: {
+    activeTab () {
+      this.loadData()
+    }
  },
  validations: {
    invoices: {
@ -373,3 +376,16 @@ export default {
  }
 }
 </script>
+<style>
+  .fade-customize-enter-active {
+    transition: opacity 0.9s;
+  }
+
+  .fade-customize-leave-active  {
+    transition: opacity 0s;
+  }
+
+  .fade-customize-enter, .fade-customize-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
+</style>