mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-30 13:11:08 -04:00
248 lines
9.0 KiB
Vue
248 lines
9.0 KiB
Vue
<template>
|
|
<div class="setting-main-container">
|
|
<div class="card setting-card">
|
|
<div class="page-header">
|
|
<h3 class="page-title">{{ $tc('settings.preferences.preference',2) }}</h3>
|
|
<p class="page-sub-title">
|
|
{{ $t('settings.preferences.general_settings') }}
|
|
</p>
|
|
</div>
|
|
<form action="" @submit.prevent="updatePreferencesData">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4 form-group">
|
|
<label class="input-label">{{ $tc('settings.preferences.currency') }}</label><span class="text-danger"> * </span>
|
|
<base-select
|
|
v-model="formData.currency"
|
|
:options="currencies"
|
|
:class="{'error': $v.formData.currency.$error }"
|
|
:searchable="true"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:placeholder="$tc('settings.currencies.select_currency')"
|
|
label="name"
|
|
track-by="id"
|
|
/>
|
|
<div v-if="$v.formData.currency.$error">
|
|
<span v-if="!$v.formData.currency.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-group">
|
|
<label class="input-label">{{ $tc('settings.preferences.language') }}</label><span class="text-danger"> * </span>
|
|
<base-select
|
|
v-model="formData.language"
|
|
:options="languages"
|
|
:class="{'error': $v.formData.language.$error }"
|
|
:searchable="true"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:placeholder="$tc('settings.preferences.select_language')"
|
|
label="name"
|
|
track-by="code"
|
|
/>
|
|
<div v-if="$v.formData.language.$error">
|
|
<span v-if="!$v.formData.language.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-group">
|
|
<label class="input-label">{{ $tc('settings.preferences.time_zone') }}</label><span class="text-danger"> * </span>
|
|
<base-select
|
|
v-model="formData.timeZone"
|
|
:options="timeZones"
|
|
:class="{'error': $v.formData.timeZone.$error }"
|
|
:searchable="true"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:placeholder="$tc('settings.preferences.select_time_zone')"
|
|
label="key"
|
|
track-by="key"
|
|
/>
|
|
<div v-if="$v.formData.timeZone.$error">
|
|
<span v-if="!$v.formData.timeZone.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-group">
|
|
<label class="input-label">{{ $tc('settings.preferences.date_format') }}</label><span class="text-danger"> * </span>
|
|
<base-select
|
|
v-model="formData.dateFormat"
|
|
:options="dateFormats"
|
|
:class="{'error': $v.formData.dateFormat.$error }"
|
|
:searchable="true"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:placeholder="$tc('settings.preferences.select_date_formate')"
|
|
label="display_date"
|
|
/>
|
|
<div v-if="$v.formData.dateFormat.$error">
|
|
<span v-if="!$v.formData.dateFormat.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4 form-group">
|
|
<label class="input-label">{{ $tc('settings.preferences.fiscal_year') }}</label><span class="text-danger"> * </span>
|
|
<base-select
|
|
v-model="formData.fiscalYear"
|
|
:options="fiscalYears"
|
|
:class="{'error': $v.formData.fiscalYear.$error }"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:searchable="true"
|
|
:placeholder="$tc('settings.preferences.select_financial_year')"
|
|
label="key"
|
|
track-by="value"
|
|
/>
|
|
<div v-if="$v.formData.fiscalYear.$error">
|
|
<span v-if="!$v.formData.fiscalYear.required" class="text-danger">{{ $tc('settings.company_info.errors.required') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-12 input-group">
|
|
<base-button
|
|
:loading="isLoading"
|
|
:disabled="isLoading"
|
|
icon="save"
|
|
color="theme"
|
|
type="submit"
|
|
>
|
|
{{ $tc('settings.company_info.save') }}
|
|
</base-button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<hr>
|
|
<div class="page-header mt-3">
|
|
<h3 class="page-title">{{ $t('settings.preferences.discount_setting') }}</h3>
|
|
<div class="flex-box">
|
|
<div class="left">
|
|
<base-switch
|
|
v-model="discount_per_item"
|
|
class="btn-switch"
|
|
@change="setDiscount"
|
|
/>
|
|
</div>
|
|
<div class="right ml-15">
|
|
<p class="box-title"> {{ $t('settings.preferences.discount_per_item') }} </p>
|
|
<p class="box-desc"> {{ $t('settings.preferences.discount_setting_description') }} </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import MultiSelect from 'vue-multiselect'
|
|
import { validationMixin } from 'vuelidate'
|
|
import { mapActions } from 'vuex'
|
|
const { required } = require('vuelidate/lib/validators')
|
|
|
|
export default {
|
|
components: { MultiSelect },
|
|
mixins: [validationMixin],
|
|
data () {
|
|
return {
|
|
isLoading: false,
|
|
formData: {
|
|
language: null,
|
|
currency: null,
|
|
timeZone: null,
|
|
dateFormat: null,
|
|
fiscalYear: null
|
|
},
|
|
discount_per_item: null,
|
|
languages: [],
|
|
currencies: [],
|
|
timeZones: [],
|
|
dateFormats: [],
|
|
fiscalYears: []
|
|
}
|
|
},
|
|
validations: {
|
|
formData: {
|
|
currency: {
|
|
required
|
|
},
|
|
language: {
|
|
required
|
|
},
|
|
dateFormat: {
|
|
required
|
|
},
|
|
timeZone: {
|
|
required
|
|
},
|
|
fiscalYear: {
|
|
required
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.setInitialData()
|
|
this.getDiscountSettings()
|
|
},
|
|
methods: {
|
|
...mapActions('currency', [
|
|
'setDefaultCurrency'
|
|
]),
|
|
...mapActions('preferences', [
|
|
'loadData',
|
|
'editPreferences'
|
|
]),
|
|
async setInitialData () {
|
|
let response = await this.loadData()
|
|
this.languages = [...response.data.languages]
|
|
this.currencies = response.data.currencies
|
|
this.dateFormats = response.data.date_formats
|
|
this.timeZones = response.data.time_zones
|
|
this.fiscalYears = [...response.data.fiscal_years]
|
|
this.formData.currency = response.data.currencies.find(currency => currency.id == response.data.selectedCurrency)
|
|
this.formData.language = response.data.languages.find(language => language.code == response.data.selectedLanguage)
|
|
this.formData.timeZone = response.data.time_zones.find(timeZone => timeZone.value == response.data.time_zone)
|
|
this.formData.fiscalYear = response.data.fiscal_years.find(fiscalYear => fiscalYear.value == response.data.fiscal_year)
|
|
this.formData.dateFormat = response.data.date_formats.find(dateFormat => dateFormat.carbon_format_value == response.data.carbon_date_format)
|
|
},
|
|
async updatePreferencesData () {
|
|
this.$v.formData.$touch()
|
|
if (this.$v.$invalid) {
|
|
return true
|
|
}
|
|
this.isLoading = true
|
|
let data = {
|
|
currency: this.formData.currency.id,
|
|
time_zone: this.formData.timeZone.value,
|
|
fiscal_year: this.formData.fiscalYear.value,
|
|
language: this.formData.language.code,
|
|
carbon_date_format: this.formData.dateFormat.carbon_format_value,
|
|
moment_date_format: this.formData.dateFormat.moment_format_value
|
|
}
|
|
let response = await this.editPreferences(data)
|
|
if (response.data.success) {
|
|
this.isLoading = false
|
|
window.i18n.locale = this.formData.language.code
|
|
this.setDefaultCurrency(this.formData.currency)
|
|
window.toastr['success'](this.$t('settings.preferences.updated_message'))
|
|
return true
|
|
}
|
|
window.toastr['error'](response.data.error)
|
|
return true
|
|
},
|
|
async getDiscountSettings () {
|
|
let response = await axios.get('/api/settings/get-setting?key=discount_per_item')
|
|
if (response.data) {
|
|
response.data.discount_per_item === 'YES' ?
|
|
this.discount_per_item = true :
|
|
this.discount_per_item = false
|
|
}
|
|
},
|
|
async setDiscount () {
|
|
let data = {
|
|
key: 'discount_per_item',
|
|
value: this.discount_per_item ? 'YES' : 'NO'
|
|
}
|
|
let response = await axios.put('/api/settings/update-setting', data)
|
|
if (response.data.success) {
|
|
window.toastr['success'](this.$t('general.setting_updated'))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|