mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-29 12:41:10 -04:00
build version 400
This commit is contained in:
Mohit Panjwani
297
resources/assets/js/views/wizard/WizardSettingsStep.vue
Normal file
297
resources/assets/js/views/wizard/WizardSettingsStep.vue
Normal file
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<sw-wizard-step
|
||||
:title="$t('wizard.preferences')"
|
||||
:description="$t('wizard.preferences_desc')"
|
||||
>
|
||||
<base-loader v-if="isFetching" :show-bg-overlay="true" />
|
||||
<form action="" @submit.prevent="next">
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
|
||||
<sw-input-group
|
||||
:label="$t('wizard.currency')"
|
||||
:error="currencyError"
|
||||
required
|
||||
>
|
||||
<sw-select
|
||||
v-model="settingData.currency"
|
||||
:class="{ error: $v.settingData.currency.$error }"
|
||||
:options="currencies"
|
||||
:custom-label="currencyNameWithCode"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('settings.currencies.select_currency')"
|
||||
track-by="id"
|
||||
label="name"
|
||||
@input="$v.settingData.currency.$touch()"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('settings.preferences.default_language')"
|
||||
:error="languageError"
|
||||
required
|
||||
>
|
||||
<sw-select
|
||||
v-model="settingData.language"
|
||||
:class="{ error: $v.settingData.language.$error }"
|
||||
:options="languages"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('settings.preferences.select_language')"
|
||||
label="name"
|
||||
@input="$v.settingData.language.$touch()"
|
||||
/>
|
||||
</sw-input-group>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
|
||||
<sw-input-group
|
||||
:label="$t('wizard.date_format')"
|
||||
:error="dateFormatError"
|
||||
required
|
||||
>
|
||||
<sw-select
|
||||
v-model="settingData.dateFormat"
|
||||
:class="{ error: $v.settingData.dateFormat.$error }"
|
||||
:options="dateFormats"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('settings.preferences.select_date_format')"
|
||||
label="display_date"
|
||||
@input="$v.settingData.dateFormat.$touch()"
|
||||
/>
|
||||
</sw-input-group>
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('wizard.time_zone')"
|
||||
:error="timeZoneError"
|
||||
required
|
||||
>
|
||||
<sw-select
|
||||
v-model="settingData.timeZone"
|
||||
:class="{ error: $v.settingData.timeZone.$error }"
|
||||
:options="timeZones"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('settings.preferences.select_time_zone')"
|
||||
label="key"
|
||||
@input="$v.settingData.timeZone.$touch()"
|
||||
/>
|
||||
</sw-input-group>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
|
||||
<sw-input-group
|
||||
:label="$t('wizard.fiscal_year')"
|
||||
:error="fiscalYearError"
|
||||
required
|
||||
>
|
||||
<sw-select
|
||||
v-model="settingData.fiscalYear"
|
||||
:class="{ error: $v.settingData.fiscalYear.$error }"
|
||||
:options="fiscalYears"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:placeholder="$t('settings.preferences.select_financial_year')"
|
||||
label="key"
|
||||
@input="$v.settingData.fiscalYear.$touch()"
|
||||
/>
|
||||
</sw-input-group>
|
||||
</div>
|
||||
<sw-button
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<save-icon v-if="!isLoading" class="mr-2" />
|
||||
{{ $t('wizard.save_cont') }}
|
||||
</sw-button>
|
||||
</div>
|
||||
</form>
|
||||
</sw-wizard-step>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ls from '../../services/ls'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
const { required, minLength, email } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
settingData: {
|
||||
language: null,
|
||||
currency: null,
|
||||
timeZone: null,
|
||||
dateFormat: null,
|
||||
fiscalYear: null,
|
||||
},
|
||||
isLoading: false,
|
||||
isFetching: false,
|
||||
step: 1,
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
settingData: {
|
||||
currency: {
|
||||
required,
|
||||
},
|
||||
language: {
|
||||
required,
|
||||
},
|
||||
dateFormat: {
|
||||
required,
|
||||
},
|
||||
timeZone: {
|
||||
required,
|
||||
},
|
||||
fiscalYear: {
|
||||
required,
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'languages',
|
||||
'currencies',
|
||||
'timeZones',
|
||||
'dateFormats',
|
||||
'fiscalYears',
|
||||
]),
|
||||
|
||||
...mapGetters('company', ['defaultFiscalYear', 'defaultTimeZone']),
|
||||
currencyError() {
|
||||
if (!this.$v.settingData.currency.$error) {
|
||||
return ''
|
||||
}
|
||||
if (!this.$v.settingData.currency.required) {
|
||||
return this.$tc('validation.required')
|
||||
}
|
||||
},
|
||||
languageError() {
|
||||
if (!this.$v.settingData.language.$error) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (!this.$v.settingData.language.required) {
|
||||
return this.$tc('validation.required')
|
||||
}
|
||||
},
|
||||
dateFormatError() {
|
||||
if (!this.$v.settingData.dateFormat.$error) {
|
||||
return ''
|
||||
}
|
||||
if (!this.$v.settingData.dateFormat.required) {
|
||||
return this.$tc('validation.required')
|
||||
}
|
||||
},
|
||||
timeZoneError() {
|
||||
if (!this.$v.settingData.timeZone.$error) {
|
||||
return ''
|
||||
}
|
||||
if (!this.$v.settingData.timeZone.required) {
|
||||
return this.$tc('validation.required')
|
||||
}
|
||||
},
|
||||
fiscalYearError() {
|
||||
if (!this.$v.settingData.fiscalYear.$error) {
|
||||
return ''
|
||||
}
|
||||
if (!this.$v.settingData.fiscalYear.required) {
|
||||
return this.$tc('validation.required')
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.getOnboardingData()
|
||||
this.setInitialData()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('company', ['updateCompanySettings', 'setSelectedCompany']),
|
||||
...mapActions([
|
||||
'fetchLanguages',
|
||||
'fetchCurrencies',
|
||||
'fetchFiscalYears',
|
||||
'fetchDateFormats',
|
||||
'fetchTimeZones',
|
||||
]),
|
||||
async setInitialData() {
|
||||
this.isFetching = true
|
||||
await this.fetchCurrencies()
|
||||
await this.fetchDateFormats()
|
||||
await this.fetchLanguages()
|
||||
await this.fetchFiscalYears()
|
||||
await this.fetchTimeZones()
|
||||
await this.fetchLanguages()
|
||||
|
||||
this.settingData.currency = this.currencies.find(
|
||||
(currency) => currency.id === 1
|
||||
)
|
||||
this.settingData.language = this.languages.find(
|
||||
(language) => language.code === 'en'
|
||||
)
|
||||
this.settingData.dateFormat = this.dateFormats.find(
|
||||
(dateFormat) => dateFormat.carbon_format_value == 'd M Y'
|
||||
)
|
||||
|
||||
this.settingData.timeZone = this.timeZones.find(
|
||||
(timeZone) => timeZone.value === 'UTC'
|
||||
)
|
||||
|
||||
this.settingData.fiscalYear = this.fiscalYears.find(
|
||||
(fiscalYear) => fiscalYear.value === '1-12'
|
||||
)
|
||||
this.isFetching = false
|
||||
},
|
||||
currencyNameWithCode({ name, code }) {
|
||||
return `${code} - ${name}`
|
||||
},
|
||||
async next() {
|
||||
this.$v.settingData.$touch()
|
||||
|
||||
if (this.$v.settingData.$invalid) {
|
||||
return true
|
||||
}
|
||||
|
||||
this.isLoading = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
currency: this.settingData.currency.id,
|
||||
time_zone: this.settingData.timeZone.value,
|
||||
language: this.settingData.language.code,
|
||||
fiscal_year: this.settingData.fiscalYear.value,
|
||||
carbon_date_format: this.settingData.dateFormat.carbon_format_value,
|
||||
moment_date_format: this.settingData.dateFormat.moment_format_value,
|
||||
},
|
||||
}
|
||||
|
||||
let response = await this.updateCompanySettings(data)
|
||||
|
||||
if (response.data) {
|
||||
this.isLoading = false
|
||||
this.updateUserSettings()
|
||||
Ls.set('auth.token', response.data.token)
|
||||
}
|
||||
},
|
||||
async updateUserSettings() {
|
||||
let data = {
|
||||
settings: {
|
||||
language: this.settingData.language.code,
|
||||
},
|
||||
}
|
||||
|
||||
let response = await axios.put('/api/v1/me/settings', data)
|
||||
|
||||
if (response.data) {
|
||||
this.$emit('next', 'COMPLETED')
|
||||
window.toastr['success']('Login Successful')
|
||||
this.$router.push('/admin/dashboard')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user