Add invoice/estimate/payment number length setting (#425)

* Add invoice/estimate/payment number length setting

resources/assets/js/views/settings/customization-tabs/EstimatesTab.vue

@@ -14,6 +14,19 @@
         />
       </sw-input-group>
 
+      <sw-input-group
+        :label="$t('settings.customization.estimates.estimate_number_length')"
+        :error="estimateNumberLengthError"
+        class="mt-6 mb-4"
+      >
+        <sw-input
+          v-model="estimates.estimate_number_length"
+          :invalid="$v.estimates.estimate_number_length.$error"
+          type="number"
+          style="max-width: 60px"
+        />
+      </sw-input-group>
+
       <sw-input-group
         :label="
           $t('settings.customization.estimates.default_estimate_email_body')
@@ -127,7 +140,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-const { required, maxLength, alpha } = require('vuelidate/lib/validators')
+const { required, maxLength, minValue, alpha, numeric } = require('vuelidate/lib/validators')
 
 export default {
   props: {
@@ -145,6 +158,7 @@ export default {
 
       estimates: {
         estimate_prefix: null,
+        estimate_number_length: null,
         estimate_mail_body: null,
         estimate_terms_and_conditions: null,
         company_address_format: null,
@@ -193,6 +207,23 @@ export default {
         return this.$t('validation.characters_only')
       }
     },
+    estimateNumberLengthError() {
+      if (!this.$v.estimates.estimate_number_length.$error) {
+        return ''
+      }
+
+      if (!this.$v.estimates.estimate_number_length.required) {
+        return this.$t('validation.required')
+      }
+
+      if (!this.$v.estimates.estimate_number_length.minValue) {
+        return this.$t('validation.number_length_minvalue')
+      }
+
+      if (!this.$v.estimates.estimate_number_length.numeric) {
+        return this.$t('validation.numbers_only')
+      }
+    },
   },
 
   validations: {
@@ -202,12 +233,18 @@ export default {
         maxLength: maxLength(5),
         alpha,
       },
+      estimate_number_length: {
+        required,
+        minValue: minValue(1),
+        numeric
+      },
     },
   },
 
   watch: {
     settings(val) {
       this.estimates.estimate_prefix = val ? val.estimate_prefix : ''
+      this.estimates.estimate_number_length = val ? val.estimate_number_length : ''
 
       this.estimates.estimate_mail_body = val ? val.estimate_mail_body : ''
       this.estimates.company_address_format = val
@@ -275,6 +312,7 @@ export default {
       let data = {
         settings: {
           estimate_prefix: this.estimates.estimate_prefix,
+          estimate_number_length: this.estimates.estimate_number_length,
           estimate_mail_body: this.estimates.estimate_mail_body,
           estimate_company_address_format: this.estimates
             .company_address_format,

resources/assets/js/views/settings/customization-tabs/InvoicesTab.vue

@@ -14,6 +14,19 @@
         />
       </sw-input-group>
 
+      <sw-input-group
+        :label="$t('settings.customization.invoices.invoice_number_length')"
+        :error="invoicenumberLengthError"
+        class="mt-6 mb-4"
+      >
+        <sw-input
+          v-model="invoices.invoice_number_length"
+          :invalid="$v.invoices.invoice_number_length.$error"
+          type="number"
+          style="max-width: 60px"
+        />
+      </sw-input-group>
+
       <sw-input-group
         :label="
           $t('settings.customization.invoices.default_invoice_email_body')
@@ -132,7 +145,7 @@
 </template>
 
 <script>
-const { required, maxLength, alpha } = require('vuelidate/lib/validators')
+const { required, maxLength, minValue, alpha, numeric } = require('vuelidate/lib/validators')
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
@@ -151,6 +164,7 @@ export default {
 
       invoices: {
         invoice_prefix: null,
+        invoice_number_length: null,
         invoice_mail_body: null,
         company_address_format: null,
         shipping_address_format: null,
@@ -193,11 +207,29 @@ export default {
         return this.$t('validation.characters_only')
       }
     },
+    invoicenumberLengthError() {
+      if (!this.$v.invoices.invoice_number_length.$error) {
+        return ''
+      }
+
+      if (!this.$v.invoices.invoice_number_length.required) {
+        return this.$t('validation.required')
+      }
+
+      if (!this.$v.invoices.invoice_number_length.minValue) {
+        return this.$t('validation.number_length_minvalue')
+      }
+
+      if (!this.$v.invoices.invoice_number_length.numeric) {
+        return this.$t('validation.numbers_only')
+      }
+    },
   },
 
   watch: {
     settings(val) {
       this.invoices.invoice_prefix = val ? val.invoice_prefix : ''
+      this.invoices.invoice_number_length = val ? val.invoice_number_length : ''
 
       this.invoices.invoice_mail_body = val ? val.invoice_mail_body : null
       this.invoices.company_address_format = val
@@ -235,6 +267,11 @@ export default {
         maxLength: maxLength(5),
         alpha,
       },
+      invoice_number_length: {
+        required,
+        minValue: minValue(1),
+        numeric
+      },
     },
   },
 
@@ -274,6 +311,7 @@ export default {
       let data = {
         settings: {
           invoice_prefix: this.invoices.invoice_prefix,
+          invoice_number_length: this.invoices.invoice_number_length,
           invoice_mail_body: this.invoices.invoice_mail_body,
           invoice_company_address_format: this.invoices.company_address_format,
           invoice_billing_address_format: this.invoices.billing_address_format,

resources/assets/js/views/settings/customization-tabs/PaymentsTab.vue

@@ -15,6 +15,19 @@
         />
       </sw-input-group>
 
+      <sw-input-group
+        :label="$t('settings.customization.payments.payment_number_length')"
+        :error="paymentnumberLengthError"
+        class="mt-6 mb-4"
+      >
+        <sw-input
+          v-model="payments.payment_number_length"
+          :invalid="$v.payments.payment_number_length.$error"
+          type="number"
+          style="max-width: 60px"
+        />
+      </sw-input-group>
+
       <sw-input-group
         :label="
           $t('settings.customization.payments.default_payment_email_body')
@@ -121,7 +134,7 @@
 </template>
 <script>
 import { mapActions, mapGetters } from 'vuex'
-const { required, maxLength, alpha } = require('vuelidate/lib/validators')
+const { required, maxLength, minValue, alpha, numeric } = require('vuelidate/lib/validators')
 
 export default {
   props: {
@@ -139,6 +152,7 @@ export default {
 
       payments: {
         payment_prefix: null,
+        payment_number_length: null,
         payment_mail_body: null,
         from_customer_address_format: null,
         company_address_format: null,
@@ -179,6 +193,23 @@ export default {
         return this.$t('validation.characters_only')
       }
     },
+    paymentnumberLengthError() {
+      if (!this.$v.payments.payment_number_length.$error) {
+        return ''
+      }
+
+      if (!this.$v.payments.payment_number_length.required) {
+        return this.$t('validation.required')
+      }
+
+      if (!this.$v.payments.payment_number_length.minValue) {
+        return this.$t('validation.number_length_minvalue')
+      }
+
+      if (!this.$v.payments.payment_number_length.numeric) {
+        return this.$t('validation.numbers_only')
+      }
+    },
   },
 
   validations: {
@@ -188,12 +219,18 @@ export default {
         maxLength: maxLength(5),
         alpha,
       },
+      payment_number_length: {
+        required,
+        minValue: minValue(1),
+        numeric
+      },
     },
   },
 
   watch: {
     settings(val) {
       this.payments.payment_prefix = val ? val.payment_prefix : ''
+      this.payments.payment_number_length = val ? val.payment_number_length : ''
 
       this.payments.payment_mail_body = val ? val.payment_mail_body : ''
 
@@ -258,6 +295,7 @@ export default {
       let data = {
         settings: {
           payment_prefix: this.payments.payment_prefix,
+          payment_number_length: this.payments.payment_number_length,
           payment_mail_body: this.payments.payment_mail_body,
           payment_company_address_format: this.payments.company_address_format,
           payment_from_customer_address_format: this.payments