mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-29 12:41:10 -04:00
init crater
This commit is contained in:
Mohit Panjwani
311
resources/assets/js/views/wizard/CompanyInfo.vue
Normal file
311
resources/assets/js/views/wizard/CompanyInfo.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="card-body">
|
||||
<form action="" @submit.prevent="next()">
|
||||
<!-- <div v-if="previewLogo" class="upload-logo">
|
||||
<label class="form-label">{{ $t('wizard.logo_preview') }}</label><br>
|
||||
<img v-if="previewLogo" :src="previewLogo" class="preview-logo">
|
||||
</div> -->
|
||||
<p class="form-title">{{ $t('wizard.company_info') }}</p>
|
||||
<p class="form-desc">{{ $t('wizard.company_info_desc') }}</p>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="input-label">{{ $tc('settings.company_info.company_logo') }}</label>
|
||||
<div id="pick-avatar" class="image-upload-box">
|
||||
<img v-if="previewLogo" :src="previewLogo" class="preview-logo">
|
||||
<div v-else class="upload-content">
|
||||
<font-awesome-icon class="upload-icon" icon="cloud-upload-alt"/>
|
||||
<p class="upload-text"> {{ $t('general.choose_file') }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<avatar-cropper
|
||||
:labels="{ submit: 'submit', cancel: 'Cancle'}"
|
||||
:cropper-options="cropperOptions"
|
||||
:output-options="cropperOutputOptions"
|
||||
:output-quality="0.8"
|
||||
:upload-handler="cropperHandler"
|
||||
trigger="#pick-avatar"
|
||||
@changed="setFileObject"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">{{ $t('wizard.company_name') }}</label><span class="text-danger"> *</span>
|
||||
<base-input
|
||||
:invalid="$v.companyData.name.$error"
|
||||
v-model.trim="companyData.name"
|
||||
type="text"
|
||||
name="name"
|
||||
@input="$v.companyData.name.$touch()"
|
||||
/>
|
||||
<div v-if="$v.companyData.name.$error">
|
||||
<span v-if="!$v.companyData.name.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">{{ $t('wizard.country') }}</label><span class="text-danger"> *</span>
|
||||
<base-select
|
||||
v-model="country"
|
||||
:class="{'error': $v.companyData.country_id.$error }"
|
||||
:options="countries"
|
||||
:searchable="true"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('general.select_country')"
|
||||
track-by="id"
|
||||
label="name"
|
||||
@input="fetchState()"
|
||||
/>
|
||||
<div v-if="$v.companyData.country_id.$error">
|
||||
<span v-if="!$v.companyData.country_id.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">{{ $t('wizard.state') }}</label>
|
||||
<base-select
|
||||
v-model="state"
|
||||
:options="states"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledState"
|
||||
:placeholder="$t('general.select_state')"
|
||||
track-by="id"
|
||||
label="name"
|
||||
@input="fetchCities"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">{{ $t('wizard.city') }}</label>
|
||||
<base-select
|
||||
v-model="city"
|
||||
:options="cities"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:disabled="isDisabledCity"
|
||||
:placeholder="$t('general.select_city')"
|
||||
track-by="id"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">{{ $t('wizard.address') }}</label>
|
||||
<base-text-area
|
||||
v-model.trim="companyData.address_street_1"
|
||||
:placeholder="$t('general.street_1')"
|
||||
name="billing_street1"
|
||||
rows="2"
|
||||
/>
|
||||
<base-text-area
|
||||
v-model="companyData.address_street_2"
|
||||
:placeholder="$t('general.street_2')"
|
||||
name="billing_street2"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label">{{ $t('wizard.zip_code') }}</label>
|
||||
<base-input
|
||||
v-model.trim="companyData.zip"
|
||||
type="text"
|
||||
name="zip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label">{{ $t('wizard.phone') }}</label>
|
||||
<base-input
|
||||
v-model.trim="companyData.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<base-button
|
||||
:loading="loading"
|
||||
class="pull-right"
|
||||
icon="save"
|
||||
color="theme"
|
||||
type="submit"
|
||||
>
|
||||
{{ $t('wizard.save_cont') }}
|
||||
</base-button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MultiSelect from 'vue-multiselect'
|
||||
import AvatarCropper from 'vue-avatar-cropper'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
import Ls from '../../services/ls'
|
||||
const { required, minLength, email } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MultiSelect,
|
||||
AvatarCropper
|
||||
},
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
cropperOutputOptions: {
|
||||
width: 150,
|
||||
height: 150
|
||||
},
|
||||
cropperOptions: {
|
||||
autoCropArea: 1,
|
||||
viewMode: 0,
|
||||
movable: true,
|
||||
zoomable: true
|
||||
},
|
||||
companyData: {
|
||||
logo: '',
|
||||
name: null,
|
||||
address_street_1: '',
|
||||
address_street_2: '',
|
||||
city_id: '',
|
||||
state_id: '',
|
||||
country_id: '',
|
||||
zip: '',
|
||||
phone: ''
|
||||
},
|
||||
loading: false,
|
||||
step: 1,
|
||||
countries: [],
|
||||
country: null,
|
||||
states: [],
|
||||
state: null,
|
||||
cities: [],
|
||||
city: null,
|
||||
previewLogo: null,
|
||||
isDisabledCity: true,
|
||||
isDisabledState: true
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
companyData: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
country_id: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
country ({ id }) {
|
||||
this.companyData.country_id = id
|
||||
this.state = null
|
||||
this.city = null
|
||||
if (id !== null && id !== undefined) {
|
||||
this.isDisabledState = false
|
||||
return true
|
||||
}
|
||||
this.isDisabledState = true
|
||||
return true
|
||||
},
|
||||
state (newState) {
|
||||
if (newState !== null && newState !== undefined) {
|
||||
this.city = null
|
||||
this.companyData.state_id = newState.id
|
||||
this.isDisabledCity = false
|
||||
return true
|
||||
}
|
||||
this.companyData.state_id = null
|
||||
this.isDisabledCity = true
|
||||
this.cities = []
|
||||
this.city = null
|
||||
this.companyData.city_id = null
|
||||
return true
|
||||
},
|
||||
city (newCity) {
|
||||
if (newCity !== null && newCity !== undefined) {
|
||||
this.companyData.city_id = newCity.id
|
||||
return true
|
||||
}
|
||||
this.companyData.city_id = null
|
||||
return true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fetchCountry()
|
||||
},
|
||||
methods: {
|
||||
cropperHandler (cropper) {
|
||||
this.previewLogo = cropper.getCroppedCanvas().toDataURL(this.cropperOutputMime)
|
||||
},
|
||||
setFileObject (file) {
|
||||
this.fileObject = file
|
||||
},
|
||||
async next () {
|
||||
this.$v.companyData.$touch()
|
||||
if (this.$v.companyData.$invalid) {
|
||||
return true
|
||||
}
|
||||
this.loading = true
|
||||
let data = new FormData()
|
||||
data.append('logo', this.fileObject)
|
||||
data.append('name', this.companyData.name)
|
||||
data.append('address_street_1', this.companyData.address_street_1)
|
||||
data.append('address_street_2', this.companyData.address_street_2)
|
||||
data.append('city_id', this.companyData.city_id)
|
||||
data.append('state_id', this.companyData.state_id)
|
||||
data.append('country_id', this.companyData.country_id)
|
||||
data.append('zip', this.companyData.zip)
|
||||
data.append('phone', this.companyData.phone)
|
||||
|
||||
let response = await window.axios.post('/api/admin/onboarding/company', data, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data) {
|
||||
this.$emit('next')
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
onFileChange (e) {
|
||||
var input = event.target
|
||||
this.companyData.logo = input.files[0]
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
this.previewLogo = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(input.files[0])
|
||||
}
|
||||
},
|
||||
async fetchCountry () {
|
||||
let res = await window.axios.get('/api/countries')
|
||||
if (res) {
|
||||
this.countries = res.data.countries
|
||||
}
|
||||
},
|
||||
async fetchState () {
|
||||
this.$v.companyData.country_id.$touch()
|
||||
let res = await window.axios.get(`/api/states/${this.country.id}`)
|
||||
if (res) {
|
||||
this.states = res.data.states
|
||||
}
|
||||
},
|
||||
async fetchCities () {
|
||||
if (this.state === null || this.state === undefined) {
|
||||
return false
|
||||
}
|
||||
let res = await window.axios.get(`/api/cities/${this.state.id}`)
|
||||
if (res) {
|
||||
this.cities = res.data.cities
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user