mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-30 21:21:09 -04:00
build version 400
This commit is contained in:
Mohit Panjwani
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="address-tab">
|
||||
<form action="" class="px-4 py-2" @submit.prevent="updateAddressSetting">
|
||||
<div class="grid grid-cols-12 mt-6">
|
||||
<div class="col-span-12 mb-6">
|
||||
<label class="text-sm font-medium leading-5 text-dark non-italic">
|
||||
{{
|
||||
$t('settings.customization.addresses.customer_billing_address')
|
||||
}}
|
||||
</label>
|
||||
<base-custom-input
|
||||
v-model="addresses.billing_address_format"
|
||||
:types="billingAddressType"
|
||||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-12 mb-6">
|
||||
<label class="text-sm font-medium leading-5 text-dark non-italic">
|
||||
{{
|
||||
$t('settings.customization.addresses.customer_shipping_address')
|
||||
}}
|
||||
</label>
|
||||
<base-custom-input
|
||||
v-model="addresses.shipping_address_format"
|
||||
:types="shippingAddressType"
|
||||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-12 mb-6">
|
||||
<label class="text-sm font-medium leading-5 text-dark non-italic">
|
||||
{{ $t('settings.customization.addresses.company_address') }}
|
||||
</label>
|
||||
<base-custom-input
|
||||
v-model="addresses.company_address_format"
|
||||
:types="companyAddressType"
|
||||
class="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-12">
|
||||
<sw-button
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
>
|
||||
<save-icon v-if="!isLoading" class="mr-2" />
|
||||
{{ $t('settings.customization.save') }}
|
||||
</sw-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
addresses: {
|
||||
billing_address_format: '',
|
||||
shipping_address_format: '',
|
||||
company_address_format: '',
|
||||
},
|
||||
billingAddressType: [
|
||||
{
|
||||
label: 'Customer',
|
||||
fields: [
|
||||
{ label: 'Display Name', value: 'CONTACT_DISPLAY_NAME' },
|
||||
{ label: 'Contact Name', value: 'PRIMARY_CONTACT_NAME' },
|
||||
{ label: 'Email', value: 'CONTACT_EMAIL' },
|
||||
{ label: 'Phone', value: 'CONTACT_PHONE' },
|
||||
{ label: 'Website', value: 'CONTACT_WEBSITE' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Billing Address',
|
||||
fields: [
|
||||
{ label: 'Adddress name', value: 'BILLING_ADDRESS_NAME' },
|
||||
{ label: 'Country', value: 'BILLING_COUNTRY' },
|
||||
{ label: 'State', value: 'BILLING_STATE' },
|
||||
{ label: 'City', value: 'BILLING_CITY' },
|
||||
{ label: 'Address Street 1', value: 'BILLING_ADDRESS_STREET_1' },
|
||||
{ label: 'Address Street 2', value: 'BILLING_ADDRESS_STREET_2' },
|
||||
{ label: 'Phone', value: 'BILLING_PHONE' },
|
||||
{ label: 'Zip Code', value: 'BILLING_ZIP_CODE' },
|
||||
],
|
||||
},
|
||||
],
|
||||
shippingAddressType: [
|
||||
{
|
||||
label: 'Customer',
|
||||
fields: [
|
||||
{ label: 'Display Name', value: 'CONTACT_DISPLAY_NAME' },
|
||||
{ label: 'Contact Name', value: 'PRIMARY_CONTACT_NAME' },
|
||||
{ label: 'Email', value: 'CONTACT_EMAIL' },
|
||||
{ label: 'Phone', value: 'CONTACT_PHONE' },
|
||||
{ label: 'Website', value: 'CONTACT_WEBSITE' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Shipping Address',
|
||||
fields: [
|
||||
{ label: 'Adddress name', value: 'SHIPPING_ADDRESS_NAME' },
|
||||
{ label: 'Country', value: 'SHIPPING_COUNTRY' },
|
||||
{ label: 'State', value: 'SHIPPING_STATE' },
|
||||
{ label: 'City', value: 'SHIPPING_CITY' },
|
||||
{ label: 'Address Street 1', value: 'SHIPPING_ADDRESS_STREET_1' },
|
||||
{ label: 'Address Street 2', value: 'SHIPPING_ADDRESS_STREET_2' },
|
||||
{ label: 'Phone', value: 'SHIPPING_PHONE' },
|
||||
{ label: 'Zip Code', value: 'SHIPPING_ZIP_CODE' },
|
||||
],
|
||||
},
|
||||
],
|
||||
companyAddressType: [
|
||||
{
|
||||
label: 'Company Address',
|
||||
fields: [
|
||||
{ label: 'Company Name', value: 'COMPANY_NAME' },
|
||||
{ label: 'Address street 1', value: 'COMPANY_ADDRESS_STREET_1' },
|
||||
{ label: 'Address Street 2', value: 'COMPANY_ADDRESS_STREET_2' },
|
||||
{ label: 'Country', value: 'COMPANY_COUNTRY' },
|
||||
{ label: 'State', value: 'COMPANY_STATE' },
|
||||
{ label: 'City', value: 'COMPANY_CITY' },
|
||||
{ label: 'Zip Code', value: 'COMPANY_ZIP_CODE' },
|
||||
{ label: 'Phone', value: 'COMPANY_PHONE' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async updateAddressSetting() {
|
||||
let data = { type: 'ADDRESSES', ...this.addresses, large: true }
|
||||
|
||||
// if (this.updateSetting(data)) {
|
||||
window.toastr['success'](
|
||||
this.$t('settings.customization.addresses.address_setting_updated')
|
||||
)
|
||||
// }
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div>
|
||||
<form action="" class="mt-6" @submit.prevent="updateEstimateSetting">
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.estimates.estimate_prefix')"
|
||||
:error="estimatePrefixError"
|
||||
>
|
||||
<sw-input
|
||||
v-model="estimates.estimate_prefix"
|
||||
:invalid="$v.estimates.estimate_prefix.$error"
|
||||
style="max-width: 30%"
|
||||
@input="$v.estimates.estimate_prefix.$touch()"
|
||||
@keyup="changeToUppercase('ESTIMATES')"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="
|
||||
$t('settings.customization.estimates.default_estimate_email_body')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="estimates.estimate_mail_body"
|
||||
:fields="mailFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.estimates.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="estimates.company_address_format"
|
||||
:fields="companyFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.estimates.shipping_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="estimates.shipping_address_format"
|
||||
:fields="shippingFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.estimates.billing_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="estimates.billing_address_format"
|
||||
:fields="billingFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-button
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<save-icon v-if="!isLoading" class="mr-2" />
|
||||
{{ $t('settings.customization.save') }}
|
||||
</sw-button>
|
||||
</form>
|
||||
|
||||
<sw-divider class="mt-6 mb-8" />
|
||||
|
||||
<div class="flex">
|
||||
<div class="relative w-12">
|
||||
<sw-switch
|
||||
v-model="estimateAutogenerate"
|
||||
class="absolute"
|
||||
style="top: -20px"
|
||||
@change="setEstimateSetting"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black">
|
||||
{{
|
||||
$t('settings.customization.estimates.autogenerate_estimate_number')
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="p-0 m-0 text-xs leading-tight text-gray-500"
|
||||
style="max-width: 480px"
|
||||
>
|
||||
{{
|
||||
$t('settings.customization.estimates.estimate_setting_description')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
const { required, maxLength, alpha } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
estimateAutogenerate: false,
|
||||
|
||||
estimates: {
|
||||
estimate_prefix: null,
|
||||
estimate_mail_body: null,
|
||||
estimate_terms_and_conditions: null,
|
||||
company_address_format: null,
|
||||
shipping_address_format: null,
|
||||
billing_address_format: null,
|
||||
},
|
||||
billingFields: [
|
||||
'billing',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'estimateCustom',
|
||||
],
|
||||
shippingFields: [
|
||||
'shipping',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'estimateCustom',
|
||||
],
|
||||
mailFields: [
|
||||
'customer',
|
||||
'estimate',
|
||||
'company',
|
||||
'customerCustom',
|
||||
'estimateCustom',
|
||||
],
|
||||
companyFields: ['company', 'estimateCustom'],
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
estimatePrefixError() {
|
||||
if (!this.$v.estimates.estimate_prefix.$error) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (!this.$v.estimates.estimate_prefix.required) {
|
||||
return this.$t('validation.required')
|
||||
}
|
||||
|
||||
if (!this.$v.estimates.estimate_prefix.maxLength) {
|
||||
return this.$t('validation.prefix_maxlength')
|
||||
}
|
||||
|
||||
if (!this.$v.estimates.estimate_prefix.alpha) {
|
||||
return this.$t('validation.characters_only')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
validations: {
|
||||
estimates: {
|
||||
estimate_prefix: {
|
||||
required,
|
||||
maxLength: maxLength(5),
|
||||
alpha,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
settings(val) {
|
||||
this.estimates.estimate_prefix = val ? val.estimate_prefix : ''
|
||||
|
||||
this.estimates.estimate_mail_body = val ? val.estimate_mail_body : ''
|
||||
this.estimates.company_address_format = val
|
||||
? val.estimate_company_address_format
|
||||
: ''
|
||||
this.estimates.shipping_address_format = val
|
||||
? val.estimate_shipping_address_format
|
||||
: ''
|
||||
this.estimates.billing_address_format = val
|
||||
? val.estimate_billing_address_format
|
||||
: ''
|
||||
|
||||
this.estimates.estimate_terms_and_conditions = val
|
||||
? val.estimate_terms_and_conditions
|
||||
: ''
|
||||
|
||||
this.estimate_auto_generate = val ? val.estimate_auto_generate : ''
|
||||
|
||||
if (this.estimate_auto_generate === 'YES') {
|
||||
this.estimateAutogenerate = true
|
||||
} else {
|
||||
this.estimateAutogenerate = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions('company', ['updateCompanySettings']),
|
||||
|
||||
async setEstimateSetting() {
|
||||
let data = {
|
||||
settings: {
|
||||
estimate_auto_generate: this.estimateAutogenerate ? 'YES' : 'NO',
|
||||
},
|
||||
}
|
||||
let response = await this.updateCompanySettings(data)
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$t('general.setting_updated'))
|
||||
}
|
||||
},
|
||||
|
||||
changeToUppercase(currentTab) {
|
||||
if (currentTab === 'ESTIMATES') {
|
||||
this.estimates.estimate_prefix = this.estimates.estimate_prefix.toUpperCase()
|
||||
return true
|
||||
}
|
||||
},
|
||||
|
||||
async updateEstimateSetting() {
|
||||
this.$v.estimates.$touch()
|
||||
|
||||
if (this.$v.estimates.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
estimate_prefix: this.estimates.estimate_prefix,
|
||||
estimate_mail_body: this.estimates.estimate_mail_body,
|
||||
estimate_company_address_format: this.estimates
|
||||
.company_address_format,
|
||||
estimate_shipping_address_format: this.estimates
|
||||
.shipping_address_format,
|
||||
estimate_billing_address_format: this.estimates
|
||||
.billing_address_format,
|
||||
},
|
||||
}
|
||||
|
||||
if (this.updateSetting(data)) {
|
||||
window.toastr['success'](
|
||||
this.$t('settings.customization.estimates.estimate_setting_updated')
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
async updateSetting(data) {
|
||||
this.isLoading = true
|
||||
let res = await this.updateCompanySettings(data)
|
||||
|
||||
if (res.data.success) {
|
||||
this.isLoading = false
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
<form action="" class="mt-6" @submit.prevent="updateInvoiceSetting">
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.invoices.invoice_prefix')"
|
||||
:error="invoicePrefixError"
|
||||
>
|
||||
<sw-input
|
||||
v-model="invoices.invoice_prefix"
|
||||
:invalid="$v.invoices.invoice_prefix.$error"
|
||||
style="max-width: 30%"
|
||||
@input="$v.invoices.invoice_prefix.$touch()"
|
||||
@keyup="changeToUppercase('INVOICES')"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="
|
||||
$t('settings.customization.invoices.default_invoice_email_body')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="invoices.invoice_mail_body"
|
||||
:fields="InvoiceMailFields"
|
||||
class="mt-2"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.invoices.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="invoices.company_address_format"
|
||||
:fields="companyFields"
|
||||
class="mt-2"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.invoices.shipping_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="invoices.shipping_address_format"
|
||||
:fields="shippingFields"
|
||||
class="mt-2"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.invoices.billing_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="invoices.billing_address_format"
|
||||
:fields="billingFields"
|
||||
class="mt-2"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-button
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<save-icon v-if="!isLoading" class="mr-2" />
|
||||
{{ $t('settings.customization.save') }}
|
||||
</sw-button>
|
||||
</form>
|
||||
|
||||
<sw-divider class="mt-6 mb-8" />
|
||||
|
||||
<div class="flex">
|
||||
<div class="relative w-12">
|
||||
<sw-switch
|
||||
v-model="invoiceAutogenerate"
|
||||
class="absolute"
|
||||
style="top: -20px"
|
||||
@change="setInvoiceSetting"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black">
|
||||
{{
|
||||
$t('settings.customization.invoices.autogenerate_invoice_number')
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="p-0 m-0 text-xs leading-tight text-gray-500"
|
||||
style="max-width: 480px"
|
||||
>
|
||||
{{
|
||||
$t('settings.customization.invoices.invoice_setting_description')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const { required, maxLength, alpha } = require('vuelidate/lib/validators')
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
invoiceAutogenerate: false,
|
||||
|
||||
invoices: {
|
||||
invoice_prefix: null,
|
||||
invoice_mail_body: null,
|
||||
company_address_format: null,
|
||||
shipping_address_format: null,
|
||||
billing_address_format: null,
|
||||
},
|
||||
isLoading: false,
|
||||
InvoiceMailFields: [
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'invoice',
|
||||
'invoiceCustom',
|
||||
'company',
|
||||
],
|
||||
billingFields: ['billing', 'customer', 'customerCustom', 'invoiceCustom'],
|
||||
shippingFields: [
|
||||
'shipping',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'invoiceCustom',
|
||||
],
|
||||
companyFields: ['company', 'invoiceCustom'],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
invoicePrefixError() {
|
||||
if (!this.$v.invoices.invoice_prefix.$error) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (!this.$v.invoices.invoice_prefix.required) {
|
||||
return this.$t('validation.required')
|
||||
}
|
||||
|
||||
if (!this.$v.invoices.invoice_prefix.maxLength) {
|
||||
return this.$t('validation.prefix_maxlength')
|
||||
}
|
||||
|
||||
if (!this.$v.invoices.invoice_prefix.alpha) {
|
||||
return this.$t('validation.characters_only')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
settings(val) {
|
||||
this.invoices.invoice_prefix = val ? val.invoice_prefix : ''
|
||||
|
||||
this.invoices.invoice_mail_body = val ? val.invoice_mail_body : null
|
||||
this.invoices.company_address_format = val
|
||||
? val.invoice_company_address_format
|
||||
: null
|
||||
this.invoices.shipping_address_format = val
|
||||
? val.invoice_shipping_address_format
|
||||
: null
|
||||
this.invoices.billing_address_format = val
|
||||
? val.invoice_billing_address_format
|
||||
: null
|
||||
|
||||
this.invoice_auto_generate = val ? val.invoice_auto_generate : ''
|
||||
|
||||
if (this.invoice_auto_generate === 'YES') {
|
||||
this.invoiceAutogenerate = true
|
||||
} else {
|
||||
this.invoiceAutogenerate = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
validations: {
|
||||
invoices: {
|
||||
invoice_prefix: {
|
||||
required,
|
||||
maxLength: maxLength(5),
|
||||
alpha,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions('company', ['updateCompanySettings']),
|
||||
|
||||
async setInvoiceSetting() {
|
||||
let data = {
|
||||
settings: {
|
||||
invoice_auto_generate: this.invoiceAutogenerate ? 'YES' : 'NO',
|
||||
},
|
||||
}
|
||||
|
||||
let response = await this.updateCompanySettings(data)
|
||||
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$t('general.setting_updated'))
|
||||
}
|
||||
},
|
||||
|
||||
changeToUppercase(currentTab) {
|
||||
if (currentTab === 'INVOICES') {
|
||||
this.invoices.invoice_prefix = this.invoices.invoice_prefix.toUpperCase()
|
||||
|
||||
return true
|
||||
}
|
||||
},
|
||||
|
||||
async updateInvoiceSetting() {
|
||||
this.$v.invoices.$touch()
|
||||
|
||||
if (this.$v.invoices.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
invoice_prefix: this.invoices.invoice_prefix,
|
||||
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,
|
||||
invoice_shipping_address_format: this.invoices
|
||||
.shipping_address_format,
|
||||
},
|
||||
}
|
||||
|
||||
if (this.updateSetting(data)) {
|
||||
window.toastr['success'](
|
||||
this.$t('settings.customization.invoices.invoice_setting_updated')
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
async updateSetting(data) {
|
||||
this.isLoading = true
|
||||
let res = await this.updateCompanySettings(data)
|
||||
|
||||
if (res.data.success) {
|
||||
this.isLoading = false
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap justify-end mt-8 lg:flex-no-wrap">
|
||||
<sw-button size="lg" variant="primary-outline" @click="addItemUnit">
|
||||
<plus-icon class="w-6 h-6 mr-1 -ml-2" />
|
||||
{{ $t('settings.customization.items.add_item_unit') }}
|
||||
</sw-button>
|
||||
</div>
|
||||
|
||||
<sw-table-component
|
||||
ref="table"
|
||||
variant="gray"
|
||||
:data="fetchData"
|
||||
:show-filter="false"
|
||||
>
|
||||
<sw-table-column
|
||||
:sortable="true"
|
||||
:label="$t('settings.customization.items.unit_name')"
|
||||
show="name"
|
||||
>
|
||||
<template slot-scope="row">
|
||||
<span>{{ $t('settings.customization.items.unit_name') }}</span>
|
||||
<span class="mt-6">{{ row.name }}</span>
|
||||
</template>
|
||||
</sw-table-column>
|
||||
|
||||
<sw-table-column
|
||||
:sortable="false"
|
||||
:filterable="false"
|
||||
cell-class="action-dropdown"
|
||||
>
|
||||
<template slot-scope="row">
|
||||
<span>{{ $t('settings.tax_types.action') }}</span>
|
||||
<sw-dropdown>
|
||||
<dot-icon slot="activator" class="h-5 mr-3 text-primary-800" />
|
||||
|
||||
<sw-dropdown-item @click="editItemUnit(row)">
|
||||
<pencil-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('general.edit') }}
|
||||
</sw-dropdown-item>
|
||||
|
||||
<sw-dropdown-item @click="removeItemUnit(row.id)">
|
||||
<trash-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('general.delete') }}
|
||||
</sw-dropdown-item>
|
||||
</sw-dropdown>
|
||||
</template>
|
||||
</sw-table-column>
|
||||
</sw-table-component>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { TrashIcon, PencilIcon, PlusIcon } from '@vue-hero-icons/solid'
|
||||
const { required, maxLength, alpha } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TrashIcon,
|
||||
PlusIcon,
|
||||
PencilIcon,
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions('modal', ['openModal']),
|
||||
|
||||
...mapActions('item', ['deleteItemUnit', 'fetchItemUnits']),
|
||||
|
||||
async fetchData({ page, filter, sort }) {
|
||||
let data = {
|
||||
orderByField: sort.fieldName || 'created_at',
|
||||
orderBy: sort.order || 'desc',
|
||||
page,
|
||||
}
|
||||
|
||||
let response = await this.fetchItemUnits(data)
|
||||
|
||||
return {
|
||||
data: response.data.units.data,
|
||||
pagination: {
|
||||
totalPages: response.data.units.last_page,
|
||||
currentPage: page,
|
||||
count: response.data.units.count,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
async addItemUnit() {
|
||||
this.openModal({
|
||||
title: this.$t('settings.customization.items.add_item_unit'),
|
||||
componentName: 'ItemUnit',
|
||||
refreshData: this.$refs.table.refresh,
|
||||
})
|
||||
},
|
||||
|
||||
async editItemUnit(data) {
|
||||
this.openModal({
|
||||
title: this.$t('settings.customization.items.edit_item_unit'),
|
||||
componentName: 'ItemUnit',
|
||||
id: data.id,
|
||||
data: data,
|
||||
refreshData: this.$refs.table.refresh,
|
||||
})
|
||||
},
|
||||
|
||||
async removeItemUnit(id) {
|
||||
swal({
|
||||
title: this.$t('general.are_you_sure'),
|
||||
text: this.$t('settings.customization.items.item_unit_confirm_delete'),
|
||||
icon: '/assets/icon/trash-solid.svg',
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
}).then(async (value) => {
|
||||
if (value) {
|
||||
let response = await this.deleteItemUnit(id)
|
||||
|
||||
if (response.data.success) {
|
||||
window.toastr['success'](
|
||||
this.$t('settings.customization.items.deleted_message')
|
||||
)
|
||||
this.$refs.table.refresh()
|
||||
return true
|
||||
}
|
||||
window.toastr['error'](
|
||||
this.$t('settings.customization.items.already_in_use')
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div>
|
||||
<form action="" class="mt-6" @submit.prevent="updatePaymentSetting">
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.payments.payment_prefix')"
|
||||
:error="paymentPrefixError"
|
||||
>
|
||||
<sw-input
|
||||
v-model="payments.payment_prefix"
|
||||
:invalid="$v.payments.payment_prefix.$error"
|
||||
class="mt-2"
|
||||
style="max-width: 30%"
|
||||
@input="$v.payments.payment_prefix.$touch()"
|
||||
@keyup="changeToUppercase('PAYMENTS')"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="
|
||||
$t('settings.customization.payments.default_payment_email_body')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="payments.payment_mail_body"
|
||||
:fields="mailFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.customization.payments.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="payments.company_address_format"
|
||||
:fields="companyFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="
|
||||
$t('settings.customization.payments.from_customer_address_format')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<base-custom-input
|
||||
v-model="payments.from_customer_address_format"
|
||||
:fields="customerAddressFields"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-button
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="my-4"
|
||||
>
|
||||
<save-icon v-if="!isLoading" class="mr-2" />
|
||||
{{ $t('settings.customization.save') }}
|
||||
</sw-button>
|
||||
</form>
|
||||
|
||||
<sw-divider class="mt-6 mb-8" />
|
||||
|
||||
<div class="flex">
|
||||
<div class="relative w-12">
|
||||
<sw-switch
|
||||
v-model="paymentAutogenerate"
|
||||
class="absolute"
|
||||
style="top: -20px"
|
||||
@change="setPaymentSetting"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black">
|
||||
{{
|
||||
$t('settings.customization.payments.autogenerate_payment_number')
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="p-0 m-0 text-xs leading-tight text-gray-500"
|
||||
style="max-width: 480px"
|
||||
>
|
||||
{{
|
||||
$t('settings.customization.payments.payment_setting_description')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
const { required, maxLength, alpha } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
paymentAutogenerate: false,
|
||||
|
||||
payments: {
|
||||
payment_prefix: null,
|
||||
payment_mail_body: null,
|
||||
from_customer_address_format: null,
|
||||
company_address_format: null,
|
||||
},
|
||||
|
||||
mailFields: [
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'company',
|
||||
'payment',
|
||||
'paymentCustom',
|
||||
],
|
||||
customerAddressFields: [
|
||||
'billing',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'paymentCustom',
|
||||
],
|
||||
companyFields: ['company', 'paymentCustom'],
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paymentPrefixError() {
|
||||
if (!this.$v.payments.payment_prefix.$error) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (!this.$v.payments.payment_prefix.required) {
|
||||
return this.$t('validation.required')
|
||||
}
|
||||
|
||||
if (!this.$v.payments.payment_prefix.maxLength) {
|
||||
return this.$t('validation.prefix_maxlength')
|
||||
}
|
||||
|
||||
if (!this.$v.payments.payment_prefix.alpha) {
|
||||
return this.$t('validation.characters_only')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
validations: {
|
||||
payments: {
|
||||
payment_prefix: {
|
||||
required,
|
||||
maxLength: maxLength(5),
|
||||
alpha,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
settings(val) {
|
||||
this.payments.payment_prefix = val ? val.payment_prefix : ''
|
||||
|
||||
this.payments.payment_mail_body = val ? val.payment_mail_body : ''
|
||||
|
||||
this.payments.company_address_format = val
|
||||
? val.payment_company_address_format
|
||||
: ''
|
||||
|
||||
this.payments.from_customer_address_format = val
|
||||
? val.payment_from_customer_address_format
|
||||
: ''
|
||||
|
||||
this.payment_auto_generate = val ? val.payment_auto_generate : ''
|
||||
|
||||
if (this.payment_auto_generate === 'YES') {
|
||||
this.paymentAutogenerate = true
|
||||
} else {
|
||||
this.paymentAutogenerate = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions('modal', ['openModal']),
|
||||
|
||||
...mapActions('company', ['updateCompanySettings']),
|
||||
|
||||
changeToUppercase(currentTab) {
|
||||
if (currentTab === 'PAYMENTS') {
|
||||
this.payments.payment_prefix = this.payments.payment_prefix.toUpperCase()
|
||||
return true
|
||||
}
|
||||
},
|
||||
|
||||
async setPaymentSetting() {
|
||||
let data = {
|
||||
settings: {
|
||||
payment_auto_generate: this.paymentAutogenerate ? 'YES' : 'NO',
|
||||
},
|
||||
}
|
||||
let response = await this.updateCompanySettings(data)
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$t('general.setting_updated'))
|
||||
}
|
||||
},
|
||||
|
||||
async updatePaymentSetting() {
|
||||
this.$v.payments.$touch()
|
||||
|
||||
if (this.$v.payments.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
payment_prefix: this.payments.payment_prefix,
|
||||
payment_mail_body: this.payments.payment_mail_body,
|
||||
payment_company_address_format: this.payments.company_address_format,
|
||||
payment_from_customer_address_format: this.payments
|
||||
.from_customer_address_format,
|
||||
},
|
||||
}
|
||||
|
||||
if (this.updateSetting(data)) {
|
||||
window.toastr['success'](
|
||||
this.$t('settings.customization.payments.payment_setting_updated')
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
async updateSetting(data) {
|
||||
this.isLoading = true
|
||||
let res = await this.updateCompanySettings(data)
|
||||
|
||||
if (res.data.success) {
|
||||
this.isLoading = false
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user