mirror of
https://github.com/crater-invoice/crater.git
synced 2025-12-16 02:12:54 -05:00
init crater
This commit is contained in:
Mohit Panjwani
73
resources/assets/js/components/base/modal/BaseModal.vue
Normal file
73
resources/assets/js/components/base/modal/BaseModal.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="modalActive" class="base-modal" :class="'size-' + modalSize">
|
||||
<div class="modal-body">
|
||||
<div class="close-icon">
|
||||
<font-awesome-icon class="mr-2" icon="times" @click="closeModal"/>
|
||||
</div>
|
||||
<div class="modal-header p-3">
|
||||
<h5 class="modal-heading">{{ modalTitle }}</h5>
|
||||
</div>
|
||||
<component :is="component" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import TaxTypeModal from './TaxTypeModal'
|
||||
import ItemModal from './ItemModal'
|
||||
import EstimateTemplate from './EstimateTemplate'
|
||||
import InvoiceTemplate from './InvoiceTemplate'
|
||||
import CustomerModal from './CustomerModal'
|
||||
import CategoryModal from './CategoryModal'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TaxTypeModal,
|
||||
ItemModal,
|
||||
EstimateTemplate,
|
||||
InvoiceTemplate,
|
||||
CustomerModal,
|
||||
CategoryModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
component: '',
|
||||
hasFocus: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('modal', [
|
||||
'modalActive',
|
||||
'modalTitle',
|
||||
'componentName',
|
||||
'modalSize',
|
||||
'modalData'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
componentName (component) {
|
||||
if (!component) {
|
||||
return
|
||||
}
|
||||
|
||||
this.component = component
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'openModal',
|
||||
'closeModal'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
172
resources/assets/js/components/base/modal/CategoryModal.vue
Normal file
172
resources/assets/js/components/base/modal/CategoryModal.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="category-modal">
|
||||
<form action="" @submit.prevent="submitCategoryData">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('expenses.category') }}<span class="required text-danger">*</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="text-danger">{{ $tc('validation.required') }}</span>
|
||||
<span v-if="!$v.formData.name.minLength" class="text-danger"> {{ $tc('validation.name_min_length', $v.formData.name.$params.minLength.min, { count: $v.formData.name.$params.minLength.min }) }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label input-label">{{ $t('expenses.description') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-text-area
|
||||
v-model="formData.description"
|
||||
rows="4"
|
||||
cols="50"
|
||||
@input="$v.formData.description.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.description.$error">
|
||||
<span v-if="!$v.formData.name.maxLength" class="text-danger"> {{ $tc('validation.description_maxlength') }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<base-button
|
||||
:outline="true"
|
||||
class="mr-3"
|
||||
color="theme"
|
||||
@click="closeCategoryModal"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
:loading="isLoading"
|
||||
icon="save"
|
||||
color="theme"
|
||||
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, maxLength } = require('vuelidate/lib/validators')
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
isEdit: false,
|
||||
isLoading: false,
|
||||
formData: {
|
||||
id: null,
|
||||
name: null,
|
||||
description: null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('modal', [
|
||||
'modalDataID',
|
||||
'modalData',
|
||||
'modalActive'
|
||||
])
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(3)
|
||||
},
|
||||
description: {
|
||||
maxLength: maxLength(255)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'modalDataID' (val) {
|
||||
if (val) {
|
||||
this.isEdit = true
|
||||
this.setData()
|
||||
} else {
|
||||
this.isEdit = false
|
||||
}
|
||||
},
|
||||
'modalActive' (val) {
|
||||
if (!this.modalActive) {
|
||||
this.resetFormData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.name.focus = true
|
||||
if (this.modalDataID) {
|
||||
this.isEdit = true
|
||||
this.setData()
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'closeModal',
|
||||
'resetModalData'
|
||||
]),
|
||||
...mapActions('category', [
|
||||
'addCategory',
|
||||
'updateCategory'
|
||||
]),
|
||||
resetFormData () {
|
||||
this.formData = {
|
||||
id: null,
|
||||
name: null,
|
||||
description: null
|
||||
}
|
||||
this.$v.formData.$reset()
|
||||
},
|
||||
async submitCategoryData () {
|
||||
this.$v.formData.$touch()
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return true
|
||||
}
|
||||
this.isLoading = true
|
||||
let response
|
||||
if (!this.isEdit) {
|
||||
response = await this.addCategory(this.formData)
|
||||
} else {
|
||||
response = await this.updateCategory(this.formData)
|
||||
}
|
||||
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$t('settings.expense_category.created_message'))
|
||||
window.hub.$emit('newCategory', response.data.category)
|
||||
this.closeCategoryModal()
|
||||
this.isLoading = false
|
||||
return true
|
||||
}
|
||||
window.toastr['error'](response.data.error)
|
||||
},
|
||||
async setData () {
|
||||
this.formData = {
|
||||
id: this.modalData.id,
|
||||
name: this.modalData.name,
|
||||
description: this.modalData.description
|
||||
}
|
||||
},
|
||||
closeCategoryModal () {
|
||||
this.resetFormData()
|
||||
this.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
681
resources/assets/js/components/base/modal/CustomerModal.vue
Normal file
681
resources/assets/js/components/base/modal/CustomerModal.vue
Normal file
@@ -0,0 +1,681 @@
|
||||
<template>
|
||||
<div class="customer-modal">
|
||||
<form action="" @submit.prevent="submitCustomerData">
|
||||
<div class="card-body">
|
||||
<!-- tab-1 -->
|
||||
<tabs :options="{defaultTabHash: 'basic-home' }" class="tabs-simple">
|
||||
<tab id="basic-home" name="Basic Info">
|
||||
<div class="basic-info">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.display_name') }} <span class="required">*</span></label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
ref="name"
|
||||
:invalid="$v.formData.name.$error"
|
||||
v-model.trim="formData.name"
|
||||
type="text"
|
||||
name="name"
|
||||
@input="$v.formData.name.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.name.$error">
|
||||
<span v-if="!$v.formData.name.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
<span v-if="!$v.formData.name.minLength" class="text-danger"> {{ $tc('validation.name_min_length', $v.formData.name.$params.minLength.min, { count: $v.formData.name.$params.minLength.min }) }} </span>
|
||||
<span v-if="!$v.formData.name.alpha" class="text-danger">{{ $tc('validation.characters_only') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.primary_display_name') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="formData.contact_name"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('login.email') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
:invalid="$v.formData.email.$error"
|
||||
v-model.trim="formData.email"
|
||||
type="text"
|
||||
name="email"
|
||||
@input="$v.formData.email.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.email.$error">
|
||||
<span v-if="!$v.formData.email.email" class="text-danger"> {{ $t('validation.email_incorrect') }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $tc('settings.currencies.currency') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="currency"
|
||||
:options="currencies"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
placeholder="select currency"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.phone') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
:invalid="$v.formData.phone.$error"
|
||||
v-model.trim="formData.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
@input="$v.formData.phone.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.phone.$error">
|
||||
<span v-if="!$v.formData.phone.numeric" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.website') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="formData.website"
|
||||
:invalid="$v.formData.website.$error"
|
||||
type="url"
|
||||
@input="$v.formData.website.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.website.$error">
|
||||
<span v-if="!$v.formData.website.url" class="text-danger">{{ $tc('validation.invalid_url') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</tab>
|
||||
|
||||
<!-- tab-2 -->
|
||||
<tab id="basic-profile" name="Billing Address">
|
||||
<div class="basic-info">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.name') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="billing.name"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.phone') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
:invalid="$v.billing.phone.$error"
|
||||
v-model.trim="billing.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
@input="$v.billing.phone.$touch()"
|
||||
/>
|
||||
<div v-if="$v.billing.phone.$error">
|
||||
<span v-if="!$v.billing.phone.numberic" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.address') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-text-area
|
||||
v-model="billing.address_street_1"
|
||||
rows="2"
|
||||
cols="50"
|
||||
placeholder="Street 1"
|
||||
class="mb-1"
|
||||
@input="$v.billing.address_street_1.$touch()"
|
||||
/>
|
||||
<div v-if="$v.billing.address_street_1.$error">
|
||||
<span v-if="!$v.billing.address_street_1.maxLength" class="text-danger">{{ $t('validation.address_maxlength') }}</span>
|
||||
</div>
|
||||
|
||||
<base-text-area
|
||||
v-model="billing.address_street_2"
|
||||
rows="2"
|
||||
cols="50"
|
||||
placeholder="Street 2"
|
||||
@input="$v.billing.address_street_2.$touch()"
|
||||
/>
|
||||
|
||||
<div v-if="$v.billing.address_street_2.$error">
|
||||
<span v-if="!$v.billing.address_street_2.maxLength" class="text-danger">{{ $t('validation.address_maxlength') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.country') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="billingCountry"
|
||||
:options="countryList"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="false"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select country"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.state') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="billingState"
|
||||
:options="billingStates"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledBillingState"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select state"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.city') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="billingCity"
|
||||
:options="billingCities"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledBillingCity"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select city"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Zip Code</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="billing.zip"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.zip_code') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="billing.zip"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
<!-- tab-3 -->
|
||||
<tab id="basic-message" name="Shipping Address">
|
||||
<div class="basic-info">
|
||||
<div class="form-group row ">
|
||||
<div class="col-sm-12 copy-address-button">
|
||||
<base-button ref="sameAddress" icon="copy" class="mr-2 btn-sm" color="theme" @click="copyAddress(true)">
|
||||
{{ $t('customers.copy_billing_address') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.name') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="shipping.name"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.phone') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
:invalid="$v.shipping.phone.$error"
|
||||
v-model.trim="shipping.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
@input="$v.shipping.phone.$touch()"
|
||||
/>
|
||||
<div v-if="$v.shipping.phone.$error">
|
||||
<span v-if="!$v.shipping.phone.numberic" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.address') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-text-area
|
||||
v-model="shipping.address_street_1"
|
||||
rows="2"
|
||||
cols="50"
|
||||
placeholder="Street 1"
|
||||
class="mb-1"
|
||||
@input="$v.shipping.address_street_1.$touch()"
|
||||
/>
|
||||
<div v-if="$v.shipping.address_street_1.$error">
|
||||
<span v-if="!$v.shipping.address_street_1.maxLength" class="text-danger">{{ $t('validation.address_maxlength') }}</span>
|
||||
</div>
|
||||
|
||||
<base-text-area
|
||||
v-model="shipping.address_street_2"
|
||||
rows="2"
|
||||
cols="50"
|
||||
placeholder="Street 2"
|
||||
@input="$v.shipping.address_street_2.$touch()"
|
||||
/>
|
||||
<div v-if="$v.shipping.address_street_2.$error">
|
||||
<span v-if="!$v.shipping.address_street_2.maxLength" class="text-danger">{{ $t('validation.address_maxlength') }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.country') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="shippingCountry"
|
||||
:options="countryList"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="false"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select country"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.state') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="shippingState"
|
||||
:options="shippingStates"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledShippingState"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select state"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.city') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="shippingCity"
|
||||
:options="shippingCities"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledShippingCity"
|
||||
track-by="id"
|
||||
label="name"
|
||||
placeholder="select city"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('customers.zip_code') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-input
|
||||
v-model="shipping.zip"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
</tabs>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<base-button :outline="true" class="mr-3" color="theme" @click="cancelCustomer">
|
||||
{{ $t('general.cancel') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
:loading="isLoading"
|
||||
icon="save"
|
||||
color="theme"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('general.save') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tabs, Tab } from 'vue-tabs-component'
|
||||
import MultiSelect from 'vue-multiselect'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import AddressStub from '../../../stub/address'
|
||||
const { required, minLength, email, numeric, alpha, url, maxLength } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'tabs': Tabs,
|
||||
'tab': Tab,
|
||||
MultiSelect
|
||||
},
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
countryList: [],
|
||||
billingStates: [],
|
||||
billingCities: [],
|
||||
billingCountry: null,
|
||||
billingState: null,
|
||||
billingCity: null,
|
||||
shippingStates: [],
|
||||
shippingCities: [],
|
||||
shippingCountry: null,
|
||||
shippingState: null,
|
||||
shippingCity: null,
|
||||
isCopyFromBilling: false,
|
||||
currencyList: [],
|
||||
currency: '',
|
||||
isDisabledBillingState: true,
|
||||
isDisabledBillingCity: true,
|
||||
isDisabledShippingState: true,
|
||||
isDisabledShippingCity: true,
|
||||
formData: {
|
||||
id: null,
|
||||
name: null,
|
||||
currency_id: null,
|
||||
phone: null,
|
||||
website: null,
|
||||
contact_name: null,
|
||||
addresses: []
|
||||
},
|
||||
billing: {...AddressStub},
|
||||
shipping: {...AddressStub}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(3),
|
||||
alpha
|
||||
},
|
||||
email: {
|
||||
email
|
||||
},
|
||||
phone: {
|
||||
numeric
|
||||
},
|
||||
website: {
|
||||
url
|
||||
}
|
||||
},
|
||||
billing: {
|
||||
phone: {
|
||||
numeric
|
||||
},
|
||||
address_street_1: {
|
||||
maxLength: maxLength(255)
|
||||
},
|
||||
address_street_2: {
|
||||
maxLength: maxLength(255)
|
||||
}
|
||||
},
|
||||
shipping: {
|
||||
phone: {
|
||||
numeric
|
||||
},
|
||||
address_street_1: {
|
||||
maxLength: maxLength(255)
|
||||
},
|
||||
address_street_2: {
|
||||
maxLength: maxLength(255)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('currency', [
|
||||
'defaultCurrency',
|
||||
'currencies'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
billingCountry () {
|
||||
if (this.billingCountry) {
|
||||
this.billing.country_id = this.billingCountry.id
|
||||
this.isDisabledBillingState = false
|
||||
this.fetchBillingStates(this.billingCountry.id)
|
||||
this.billingState = null
|
||||
this.billingCity = null
|
||||
return true
|
||||
}
|
||||
},
|
||||
billingState () {
|
||||
if (this.billingState) {
|
||||
this.billing.state_id = this.billingState.id
|
||||
this.isDisabledBillingCity = false
|
||||
this.fetchBillingCities(this.billingState.id)
|
||||
this.billingCity = null
|
||||
return true
|
||||
}
|
||||
this.billingCity = null
|
||||
this.isDisabledBillingCity = true
|
||||
},
|
||||
billingCity () {
|
||||
if (this.billingCity) {
|
||||
this.billing.city_id = this.billingCity.id
|
||||
}
|
||||
},
|
||||
shippingCountry () {
|
||||
if (this.shippingCountry) {
|
||||
this.shipping.country_id = this.shippingCountry.id
|
||||
this.isDisabledShippingState = false
|
||||
this.fetchShippingStates(this.shippingCountry.id)
|
||||
if (this.isCopyFromBilling) {
|
||||
return true
|
||||
}
|
||||
this.shippingState = null
|
||||
this.shippingCity = null
|
||||
return true
|
||||
}
|
||||
},
|
||||
shippingState () {
|
||||
if (this.shippingState) {
|
||||
this.shipping.state_id = this.shippingState.id
|
||||
this.isDisabledShippingCity = false
|
||||
this.fetchShippingCities(this.shippingState.id)
|
||||
if (this.isCopyFromBilling) {
|
||||
this.isCopyFromBilling = false
|
||||
return true
|
||||
}
|
||||
this.shippingCity = null
|
||||
return true
|
||||
}
|
||||
this.shippingCity = null
|
||||
this.isDisabledShippingCity = true
|
||||
},
|
||||
shippingCity () {
|
||||
if (this.shippingCity) {
|
||||
this.shipping.city_id = this.shippingCity.id
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.name.focus = true
|
||||
this.currency = this.defaultCurrency
|
||||
this.fetchCountry()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('invoice', {
|
||||
setInvoiceCustomer: 'selectCustomer'
|
||||
}),
|
||||
...mapActions('estimate', {
|
||||
setEstimateCustomer: 'selectCustomer'
|
||||
}),
|
||||
...mapActions('customer', [
|
||||
'fetchCustomer',
|
||||
'addCustomer',
|
||||
'updateCustomer'
|
||||
]),
|
||||
...mapActions('modal', [
|
||||
'closeModal'
|
||||
]),
|
||||
resetData () {
|
||||
this.formData = {
|
||||
name: null,
|
||||
currency_id: null,
|
||||
phone: null,
|
||||
website: null,
|
||||
contact_name: null,
|
||||
addresses: []
|
||||
}
|
||||
|
||||
this.billingStates = []
|
||||
this.billingCities = []
|
||||
this.billingCountry = null
|
||||
this.billingState = null
|
||||
this.billingCity = null
|
||||
this.shippingStates = []
|
||||
this.shippingCities = []
|
||||
this.shippingCountry = null
|
||||
this.shippingState = null
|
||||
this.shippingCity = null
|
||||
|
||||
this.billing = {...AddressStub}
|
||||
this.shipping = {...AddressStub}
|
||||
this.$v.formData.$reset()
|
||||
},
|
||||
cancelCustomer () {
|
||||
this.resetData()
|
||||
this.closeModal()
|
||||
},
|
||||
copyAddress (val) {
|
||||
if (val === true) {
|
||||
this.isCopyFromBilling = true
|
||||
this.shipping = {...this.billing, type: 'shipping'}
|
||||
this.shippingCountry = this.billingCountry
|
||||
this.shippingState = this.billingState
|
||||
this.shippingCity = this.billingCity
|
||||
} else {
|
||||
this.shipping = {...AddressStub, type: 'shipping'}
|
||||
this.shippingCountry = null
|
||||
this.shippingState = null
|
||||
this.shippingCity = null
|
||||
}
|
||||
},
|
||||
async loadData () {
|
||||
let response = await this.fetchCustomer()
|
||||
this.currencyList = this.currencies
|
||||
this.formData.currency_id = response.data.currency.id
|
||||
return true
|
||||
},
|
||||
checkAddress () {
|
||||
const isBillingEmpty = Object.values(this.billing).every(val => (val === null || val === ''))
|
||||
const isShippingEmpty = Object.values(this.shipping).every(val => (val === null || val === ''))
|
||||
if (isBillingEmpty === true && isBillingEmpty === true) {
|
||||
this.formData.addresses = []
|
||||
return true
|
||||
}
|
||||
|
||||
if (isBillingEmpty === false && isShippingEmpty === false) {
|
||||
this.formData.addresses = [{...this.billing, type: 'billing'}, {...this.shipping, type: 'shipping'}]
|
||||
return true
|
||||
}
|
||||
|
||||
if (isBillingEmpty === false) {
|
||||
this.formData.addresses.push({...this.billing, type: 'billing'})
|
||||
return true
|
||||
}
|
||||
|
||||
this.formData.addresses = [{...this.shipping, type: 'shipping'}]
|
||||
return true
|
||||
},
|
||||
async submitCustomerData () {
|
||||
this.$v.formData.$touch()
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return true
|
||||
}
|
||||
|
||||
// this.checkAddress()
|
||||
this.formData.addresses = [{...this.shipping, type: 'shipping'}, {...this.billing, type: 'billing'}]
|
||||
this.isLoading = true
|
||||
|
||||
if (this.currency) {
|
||||
this.formData.currency_id = this.currency.id
|
||||
} else {
|
||||
this.formData.currency_id = this.defaultCurrency.id
|
||||
}
|
||||
let response = await this.addCustomer(this.formData)
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$tc('customers.created_message'))
|
||||
this.isLoading = false
|
||||
if (this.$route.name === 'invoices.create') {
|
||||
this.setInvoiceCustomer(response.data.customer.id)
|
||||
}
|
||||
if (this.$route.name === 'estimates.create') {
|
||||
this.setEstimateCustomer(response.data.customer.id)
|
||||
}
|
||||
this.resetData()
|
||||
this.closeModal()
|
||||
return true
|
||||
}
|
||||
window.toastr['error'](response.data.error)
|
||||
},
|
||||
async fetchCountry () {
|
||||
let res = await window.axios.get('/api/countries')
|
||||
if (res) {
|
||||
this.countryList = res.data.countries
|
||||
}
|
||||
},
|
||||
async fetchBillingStates (id) {
|
||||
let res = await window.axios.get(`/api/states/${id}`)
|
||||
if (res) {
|
||||
this.billingStates = res.data.states
|
||||
}
|
||||
},
|
||||
async fetchBillingCities (id) {
|
||||
let res = await window.axios.get(`/api/cities/${id}`)
|
||||
if (res) {
|
||||
this.billingCities = res.data.cities
|
||||
}
|
||||
},
|
||||
async fetchShippingStates (id) {
|
||||
let res = await window.axios.get(`/api/states/${id}`)
|
||||
if (res) {
|
||||
this.shippingStates = res.data.states
|
||||
}
|
||||
},
|
||||
async fetchShippingCities (id) {
|
||||
let res = await window.axios.get(`/api/cities/${id}`)
|
||||
if (res) {
|
||||
this.shippingCities = res.data.cities
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="template-modal">
|
||||
<div class="card-body">
|
||||
<div class="template-container">
|
||||
<div
|
||||
v-for="(template,index) in modalData"
|
||||
:key="index"
|
||||
:class="{'selected-template': selectedTemplate === template.id}"
|
||||
class="template-img"
|
||||
>
|
||||
<img
|
||||
:src="template.path"
|
||||
alt="template-image"
|
||||
height="200" width="140"
|
||||
@click="selectedTemplate = template.id"
|
||||
>
|
||||
<img
|
||||
v-if="selectedTemplate === template.id"
|
||||
class="check-icon"
|
||||
src="/assets/img/tick.png"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<base-button outline class="mr-3" color="theme" @click="closeEstimateModal">
|
||||
{{ $t('general.cancel') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
:loading="isLoading"
|
||||
color="theme"
|
||||
@click="chooseTemplate()"
|
||||
>
|
||||
{{ $t('general.choose_template') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedTemplate: 1,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('modal', [
|
||||
'modalData'
|
||||
]),
|
||||
...mapGetters('estimate', [
|
||||
'getTemplateId'
|
||||
])
|
||||
},
|
||||
mounted () {
|
||||
this.selectedTemplate = this.getTemplateId
|
||||
},
|
||||
methods: {
|
||||
...mapActions('estimate', [
|
||||
'setTemplate'
|
||||
]),
|
||||
...mapActions('modal', [
|
||||
'closeModal',
|
||||
'resetModalData'
|
||||
]),
|
||||
async chooseTemplate () {
|
||||
this.isLoading = true
|
||||
let resp = await this.setTemplate(this.selectedTemplate)
|
||||
if (resp) {
|
||||
this.isLoading = false
|
||||
this.resetModalData()
|
||||
this.closeModal()
|
||||
}
|
||||
},
|
||||
closeEstimateModal () {
|
||||
this.selectedTemplate = this.getTemplateId
|
||||
this.closeModal()
|
||||
this.resetModalData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="template-modal">
|
||||
<div class="card-body">
|
||||
<div class="template-container">
|
||||
<div
|
||||
v-for="(template,index) in modalData"
|
||||
:key="index"
|
||||
:class="{'selected-template': selectedTemplate === template.id}"
|
||||
class="template-img"
|
||||
>
|
||||
<img
|
||||
:src="template.path"
|
||||
alt="template-image"
|
||||
height="200" width="140"
|
||||
@click="selectedTemplate = template.id"
|
||||
>
|
||||
<img
|
||||
v-if="selectedTemplate === template.id"
|
||||
class="check-icon"
|
||||
src="/assets/img/tick.png"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<base-button outline class="mr-3" color="theme" @click="closeInvoiceModal">
|
||||
{{ $t('general.cancel') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
:loading="isLoading"
|
||||
color="theme"
|
||||
@click="chooseTemplate()"
|
||||
>
|
||||
{{ $t('general.choose_template') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedTemplate: 1,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('modal', [
|
||||
'modalData'
|
||||
]),
|
||||
...mapGetters('invoice', [
|
||||
'getTemplateId'
|
||||
])
|
||||
},
|
||||
mounted () {
|
||||
this.selectedTemplate = this.getTemplateId
|
||||
},
|
||||
methods: {
|
||||
...mapActions('invoice', [
|
||||
'setTemplate'
|
||||
]),
|
||||
...mapActions('modal', [
|
||||
'closeModal',
|
||||
'resetModalData'
|
||||
]),
|
||||
async chooseTemplate () {
|
||||
this.isLoading = true;
|
||||
let resp = await this.setTemplate(this.selectedTemplate)
|
||||
if (resp) {
|
||||
this.isLoading = false
|
||||
this.resetModalData()
|
||||
this.closeModal()
|
||||
}
|
||||
},
|
||||
closeInvoiceModal () {
|
||||
this.selectedTemplate = this.getTemplateId
|
||||
this.closeModal()
|
||||
this.resetModalData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
251
resources/assets/js/components/base/modal/ItemModal.vue
Normal file
251
resources/assets/js/components/base/modal/ItemModal.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="item-modal">
|
||||
<form action="" @submit.prevent="submitItemData">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{ $t('items.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="text-danger">{{ $tc('validation.required') }}</span>
|
||||
<span v-if="!$v.formData.name.minLength" class="text-danger"> {{ $tc('validation.name_min_length', $v.formData.name.$params.minLength.min, { count: $v.formData.name.$params.minLength.min }) }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('items.price') }}<span class="required">*</span></label>
|
||||
<div class="col-sm-7">
|
||||
<div class="base-input">
|
||||
<money
|
||||
:class="{'invalid' : $v.formData.price.$error}"
|
||||
v-model="price"
|
||||
v-bind="defaultCurrencyForInput"
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="$v.formData.price.$error">
|
||||
<span v-if="!$v.formData.price.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
<span v-if="!$v.formData.price.numeric" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('items.unit') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-select
|
||||
v-model="formData.unit"
|
||||
:options="units"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">{{ $t('items.description') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-text-area
|
||||
v-model="formData.description"
|
||||
rows="4"
|
||||
cols="50"
|
||||
@input="$v.formData.description.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.description.$error">
|
||||
<span v-if="!$v.formData.description.maxLength" class="text-danger">{{ $t('validation.description_maxlength') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<base-button
|
||||
:outline="true"
|
||||
class="mr-3"
|
||||
color="theme"
|
||||
type="button"
|
||||
@click="closeItemModal"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
v-if="isEdit"
|
||||
:loading="isLoading"
|
||||
color="theme"
|
||||
@click="submitItemData"
|
||||
>
|
||||
{{ $t('general.update') }}
|
||||
</base-button>
|
||||
<base-button
|
||||
v-else
|
||||
:loading="isLoading"
|
||||
icon="save"
|
||||
color="theme"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('general.save') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required, minLength, numeric, maxLength, minValue } = require('vuelidate/lib/validators')
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
isEdit: false,
|
||||
isLoading: false,
|
||||
tempData: null,
|
||||
units: [
|
||||
{ name: 'box', value: 'box' },
|
||||
{ name: 'cm', value: 'cm' },
|
||||
{ name: 'dz', value: 'dz' },
|
||||
{ name: 'ft', value: 'ft' },
|
||||
{ name: 'g', value: 'g' },
|
||||
{ name: 'in', value: 'in' },
|
||||
{ name: 'kg', value: 'kg' },
|
||||
{ name: 'km', value: 'km' },
|
||||
{ name: 'lb', value: 'lb' },
|
||||
{ name: 'mg', value: 'mg' }
|
||||
],
|
||||
formData: {
|
||||
name: null,
|
||||
price: null,
|
||||
description: null,
|
||||
unit: null
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(3)
|
||||
},
|
||||
price: {
|
||||
required,
|
||||
numeric,
|
||||
minValue: minValue(0.1)
|
||||
},
|
||||
description: {
|
||||
maxLength: maxLength(255)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('currency', [
|
||||
'defaultCurrencyForInput'
|
||||
]),
|
||||
price: {
|
||||
get: function () {
|
||||
return this.formData.price / 100
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.formData.price = newValue * 100
|
||||
}
|
||||
},
|
||||
...mapGetters('modal', [
|
||||
'modalDataID'
|
||||
]),
|
||||
...mapGetters('item', [
|
||||
'getItemById'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
modalDataID () {
|
||||
this.isEdit = true
|
||||
this.fetchEditData()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.modalDataID) {
|
||||
this.isEdit = true
|
||||
this.fetchEditData()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.name.focus = true
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'closeModal',
|
||||
'resetModalData'
|
||||
]),
|
||||
...mapActions('item', [
|
||||
'addItem',
|
||||
'updateItem'
|
||||
]),
|
||||
...mapActions('invoice', [
|
||||
'setItem'
|
||||
]),
|
||||
resetFormData () {
|
||||
this.formData = {
|
||||
name: null,
|
||||
price: null,
|
||||
description: null,
|
||||
unit: null,
|
||||
id: null
|
||||
}
|
||||
|
||||
this.$v.$reset()
|
||||
},
|
||||
fetchEditData () {
|
||||
this.tempData = this.getItemById(this.modalDataID)
|
||||
if (this.tempData) {
|
||||
this.formData.name = this.tempData.name
|
||||
this.formData.price = this.tempData.price
|
||||
this.formData.description = this.tempData.description
|
||||
this.formData.unit = this.tempData.unit
|
||||
this.formData.id = this.tempData.id
|
||||
}
|
||||
},
|
||||
async submitItemData () {
|
||||
this.$v.formData.$touch()
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return true
|
||||
}
|
||||
if (this.formData.unit) {
|
||||
this.formData.unit = this.formData.unit.name
|
||||
}
|
||||
this.isLoading = true
|
||||
let response
|
||||
if (this.isEdit) {
|
||||
response = await this.updateItem(this.formData)
|
||||
} else {
|
||||
response = await this.addItem(this.formData)
|
||||
}
|
||||
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$tc('items.created_message'))
|
||||
this.setItem(response.data.item)
|
||||
window.hub.$emit('newItem', response.data.item)
|
||||
this.isLoading = false
|
||||
this.resetModalData()
|
||||
this.resetFormData()
|
||||
this.closeModal()
|
||||
return true
|
||||
}
|
||||
window.toastr['error'](response.data.error)
|
||||
},
|
||||
closeItemModal () {
|
||||
this.resetFormData()
|
||||
this.closeModal()
|
||||
this.resetModalData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
216
resources/assets/js/components/base/modal/TaxTypeModal.vue
Normal file
216
resources/assets/js/components/base/modal/TaxTypeModal.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="tax-type-modal">
|
||||
<form action="" @submit.prevent="submitTaxTypeData">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label input-label">{{ $t('tax_types.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>
|
||||
<span v-if="!$v.formData.name.minLength" class="form-group__message text-danger"> {{ $tc('validation.name_min_length', $v.formData.name.$params.minLength.min, { count: $v.formData.name.$params.minLength.min }) }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label input-label">{{ $t('tax_types.percent') }} <span class="required"> *</span></label>
|
||||
<div class="col-sm-7">
|
||||
<div class="base-input">
|
||||
<money
|
||||
:class="{'invalid' : $v.formData.percent.$error}"
|
||||
v-model="formData.percent"
|
||||
v-bind="defaultInput"
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="$v.formData.percent.$error">
|
||||
<span v-if="!$v.formData.percent.required" class="text-danger">{{ $t('validation.required') }}</span>
|
||||
<span v-if="!$v.formData.percent.between" class="form-group__message text-danger">{{ $t('validation.enter_valid_tax_rate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label input-label">{{ $t('tax_types.description') }}</label>
|
||||
<div class="col-sm-7">
|
||||
<base-text-area
|
||||
v-model="formData.description"
|
||||
rows="4"
|
||||
cols="50"
|
||||
@input="$v.formData.description.$touch()"
|
||||
/>
|
||||
<div v-if="$v.formData.description.$error">
|
||||
<span v-if="!$v.formData.description.maxLength" class="text-danger">{{ $t('validation.description_maxlength') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label input-label">{{ $t('tax_types.compound_tax') }}</label>
|
||||
<div class="col-sm-7 mr-4">
|
||||
<base-switch
|
||||
v-model="formData.compound_tax"
|
||||
class="btn-switch compound-tax-toggle"
|
||||
/>
|
||||
</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, between, maxLength } = require('vuelidate/lib/validators')
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
isEdit: false,
|
||||
isLoading: false,
|
||||
formData: {
|
||||
id: null,
|
||||
name: null,
|
||||
percent: '',
|
||||
description: null,
|
||||
compound_tax: false,
|
||||
collective_tax: 0
|
||||
},
|
||||
defaultInput: {
|
||||
decimal: '.',
|
||||
thousands: ',',
|
||||
prefix: '% ',
|
||||
precision: 2,
|
||||
masked: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('modal', [
|
||||
'modalDataID',
|
||||
'modalData',
|
||||
'modalActive'
|
||||
])
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(3)
|
||||
},
|
||||
percent: {
|
||||
required,
|
||||
between: between(0.10, 100)
|
||||
},
|
||||
description: {
|
||||
maxLength: maxLength(255)
|
||||
}
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// 'modalDataID' (val) {
|
||||
// if (val) {
|
||||
// this.isEdit = true
|
||||
// this.setData()
|
||||
// } else {
|
||||
// this.isEdit = false
|
||||
// }
|
||||
// },
|
||||
// 'modalActive' (val) {
|
||||
// if (!this.modalActive) {
|
||||
// this.resetFormData()
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
async mounted () {
|
||||
this.$refs.name.focus = true
|
||||
if (this.modalDataID) {
|
||||
this.isEdit = true
|
||||
this.setData()
|
||||
// this.resetFormData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'closeModal',
|
||||
'resetModalData'
|
||||
]),
|
||||
...mapActions('taxType', [
|
||||
'addTaxType',
|
||||
'updateTaxType',
|
||||
'fetchTaxType'
|
||||
]),
|
||||
resetFormData () {
|
||||
this.formData = {
|
||||
id: null,
|
||||
name: null,
|
||||
percent: null,
|
||||
description: null,
|
||||
collective_tax: 0
|
||||
}
|
||||
this.$v.formData.$reset()
|
||||
},
|
||||
async submitTaxTypeData () {
|
||||
this.$v.formData.$touch()
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return true
|
||||
}
|
||||
|
||||
this.isLoading = true
|
||||
let response
|
||||
if (!this.isEdit) {
|
||||
response = await this.addTaxType(this.formData)
|
||||
} else {
|
||||
response = await this.updateTaxType(this.formData)
|
||||
}
|
||||
if (response.data) {
|
||||
window.toastr['success'](this.$t('settings.sales_taxes.created_message'))
|
||||
window.hub.$emit('newTax', response.data.taxType)
|
||||
this.closeTaxModal()
|
||||
this.isLoading = false
|
||||
return true
|
||||
}
|
||||
window.toastr['error'](response.data.error)
|
||||
},
|
||||
async setData () {
|
||||
this.formData = {
|
||||
id: this.modalData.id,
|
||||
name: this.modalData.name,
|
||||
percent: this.modalData.percent,
|
||||
description: this.modalData.description,
|
||||
compound_tax: this.modalData.compound_tax ? true : false
|
||||
}
|
||||
},
|
||||
closeTaxModal () {
|
||||
this.resetModalData()
|
||||
this.resetFormData()
|
||||
this.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user