Refactor Customization Page

2025-10-27 19:51:09 -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/components/base/BasePrefixInput.vue
+++ b/resources/assets/js/components/base/BasePrefixInput.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="base-prefix-input" @click="focusInput">
+    <font-awesome-icon v-if="icon" :icon="icon" class="icon" />
+    <p class="prefix-label"><span class="mr-1">{{ prefix }}</span>-</p>
+    <input
+      ref="basePrefixInput"
+      v-model="inputValue"
+      :type="type"
+      class="prefix-input-field"
+      @input="handleInput"
+      @change="handleChange"
+      @keyup="handleKeyupEnter"
+      @keydown="handleKeyDownEnter"
+      @blur="handleFocusOut"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    prefix: {
+      type: String,
+      default: null,
+      required: true
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: [String, Number, File],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+  data () {
+    return {
+      inputValue: this.value
+    }
+  },
+  watch: {
+    'value' () {
+      this.inputValue = this.value
+    }
+  },
+  methods: {
+    focusInput () {
+      this.$refs.basePrefixInput.focus()
+    },
+    handleInput (e) {
+      this.$emit('input', this.inputValue)
+    },
+    handleChange (e) {
+      this.$emit('change', this.inputValue)
+    },
+    handleKeyupEnter (e) {
+      this.$emit('keyup', this.inputValue)
+    },
+    handleKeyDownEnter (e) {
+      this.$emit('keydown', e, this.inputValue)
+    },
+    handleFocusOut (e) {
+      this.$emit('blur', this.inputValue)
+    }
+  }
+}
+</script>
--- a/resources/assets/js/components/base/index.js
+++ b/resources/assets/js/components/base/index.js
@ -8,6 +8,7 @@ import BaseTextArea from './BaseTextArea.vue'
 import BaseSelect from './base-select/BaseSelect.vue'
 import BaseLoader from './BaseLoader.vue'
 import BaseCustomerSelect from './BaseCustomerSelect.vue'
+import BasePrefixInput from './BasePrefixInput.vue'

 import BasePopup from './popup/BasePopup.vue'
 import CustomerSelectPopup from './popup/CustomerSelectPopup.vue'
@ -23,6 +24,7 @@ Vue.component('base-input', BaseInput)
 Vue.component('base-switch', BaseSwitch)
 Vue.component('base-text-area', BaseTextArea)
 Vue.component('base-loader', BaseLoader)
+Vue.component('base-prefix-input', BasePrefixInput)

 Vue.component('table-component', TableComponent)
 Vue.component('table-column', TableColumn)
--- a/resources/assets/js/components/base/modal/TaxTypeModal.vue
+++ b/resources/assets/js/components/base/modal/TaxTypeModal.vue
@ -124,7 +124,7 @@ export default {
      },
      percent: {
        required,
-        between: between(0.10, 100)
+        between: between(-1, 100)
      },
      description: {
        maxLength: maxLength(255)
--- 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>
--- a/resources/assets/sass/components/base/base-prefix-input.scss
+++ b/resources/assets/sass/components/base/base-prefix-input.scss
@ -0,0 +1,54 @@
+.base-prefix-input {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 40px;
+    padding: 2px 2px;
+    flex-direction: row;
+    background: #FFFFFF;
+    border: 1px solid $ls-color-gray--light;
+    border-radius: 5px;
+
+    .icon {
+        width: 13px;
+        height: 18px;
+        color: $ls-color-gray;
+        font-style: normal;
+        font-weight: 900;
+        font-size: 14px;
+        line-height: 16px;
+        margin-top: 17px;
+        margin-left: 20px;
+        z-index: 1;
+        transform: translate(-50%,-50%);
+    }
+
+    p {
+        padding: 0 0 0 0;
+        margin: 0 0 0 0;
+    }
+
+    .prefix-label {
+        display: flex;
+        height: 18px;
+        color: #55547A;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        padding: 9px 2px 9px 10px;
+    }
+
+    .prefix-input-field {
+        width: 100%;
+        padding: 8px 13px;
+        padding-left: 1px;
+        text-align: left;
+        background: #FFFFFF;
+        border: none;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 21px;
+    }
+}
+
--- a/resources/assets/sass/crater.scss
+++ b/resources/assets/sass/crater.scss
@ -48,6 +48,7 @@
@import 'components/base/base-text-area';
@import "components/base/base-switch";
@import 'components/base/base-loader/index';
+@import 'components/base/base-prefix-input';


 // Components