feat: global option change language

This commit is contained in:
puriphatt 2024-06-24 07:21:36 +00:00
parent d3c03ef233
commit 52172b7133
5 changed files with 700 additions and 57 deletions

View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import useUserStore from 'src/stores/user';
import useOptionStore from 'src/stores/options';
import { dateFormat } from 'src/utils/datetime';
const userStore = useUserStore();
const optionStore = useOptionStore();
const firstName = defineModel<string>('firstName');
const lastName = defineModel<string>('lastName');
@ -117,7 +119,7 @@ defineProps<{
option-label="label"
option-value="value"
v-model="gender"
:options="userStore.userOption.genderOpts"
:options="optionStore.globalOption.gender"
/>
<VueDatePicker
id="input-birth-date"
@ -189,7 +191,7 @@ defineProps<{
option-label="label"
option-value="value"
v-model="gender"
:options="userStore.userOption.genderOpts"
:options="optionStore.globalOption.gender"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputGender'),
@ -212,7 +214,7 @@ defineProps<{
option-label="label"
option-value="label"
v-model="nationality"
:options="userStore.userOption.nationalityOpts"
:options="optionStore.globalOption.nationality"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputNationality'),

View file

@ -44,6 +44,7 @@ const { visible } = storeToRefs(loaderStore);
const { locale } = useI18n({ useScope: 'global' });
const userStore = useUserStore();
const rawOption = ref();
const canvasModal = ref(false);
const leftDrawerOpen = ref(false);
const filterUnread = ref(false);
@ -127,6 +128,12 @@ watch(
() => currentLanguage.value,
() => {
localStorage.setItem('currentLanguage', currentLanguage.value);
if (rawOption.value) {
if (locale.value === 'en-US')
optionStore.globalOption = rawOption.value.eng;
if (locale.value === 'th-th')
optionStore.globalOption = rawOption.value.tha;
}
},
);
@ -143,7 +150,9 @@ onMounted(async () => {
}
const resultOption = await fetch('/option/option.json');
optionStore.globalOption = await resultOption.json();
rawOption.value = await resultOption.json();
if (locale.value === 'en-US') optionStore.globalOption = rawOption.value.eng;
if (locale.value === 'th-th') optionStore.globalOption = rawOption.value.tha;
const user = getUsername();
const uid = getUserId();

View file

@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
import { Pagination } from 'src/stores/types';
import useCustomerStore from 'src/stores/customer';
import useEmployeeStore from 'src/stores/employee';
import useOptionStore from 'src/stores/options';
import { Status } from 'src/stores/types';
@ -74,6 +75,7 @@ const {
fetchListBranchById,
} = userCustomer;
const employeeStore = useEmployeeStore();
const optionStore = useOptionStore();
const formData = ref<CustomerCreate>({
status: 'CREATED',
personName: '',
@ -1087,9 +1089,6 @@ onMounted(async () => {
);
listEmployee.value = resultListEmployee.result;
}
const resultOption = await fetch('/option/option.json');
employeeStore.globalOption = await resultOption.json();
});
watch(locale, () => {
@ -1922,12 +1921,10 @@ watch(selectorLabel, async () => {
dense
outlined
v-model:employee-checkup="formDataEmployee.employeeCheckup"
v-model:checkup-type-option="employeeStore.globalOption.tha.nationality"
v-model:medical-benefit-option="
employeeStore.globalOption.tha.typeInsurance
"
v-model:checkup-type-option="optionStore.globalOption.nationality"
v-model:medical-benefit-option="optionStore.globalOption.typeInsurance"
v-model:insurance-company-option="
employeeStore.globalOption.tha.insurancePlace
optionStore.globalOption.insurancePlace
"
/>
<FormEmployeeWorkHistory
@ -1935,9 +1932,9 @@ watch(selectorLabel, async () => {
dense
outlined
v-model:employee-work="formDataEmployee.employeeWork"
v-model:position-name-option="employeeStore.globalOption.tha.position"
v-model:job-type-option="employeeStore.globalOption.tha.businessType"
v-model:workplace-option="employeeStore.globalOption.tha.area"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
/>
<FormEmployeeOther
v-if="
@ -1966,11 +1963,9 @@ watch(selectorLabel, async () => {
v-model:previous-passport-reference="
formDataEmployee.previousPassportReference
"
v-model:passport-type-option="
employeeStore.globalOption.tha.nationality
"
v-model:passport-type-option="optionStore.globalOption.nationality"
v-model:passport-issuing-country-option="
employeeStore.globalOption.tha.nationality
optionStore.globalOption.nationality
"
/>
<FormEmployeeVisa
@ -1986,7 +1981,7 @@ watch(selectorLabel, async () => {
v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
v-model:tm6-number="formDataEmployee.tm6Number"
v-model:entry-date="formDataEmployee.entryDate"
v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
v-model:visa-type-option="optionStore.globalOption.nationality"
/>
</template>
</FormDialog>
@ -2679,7 +2674,7 @@ watch(selectorLabel, async () => {
bg-color="surface-tab"
>
<InfoForm
v-if="employeeStore.globalOption"
v-if="optionStore.globalOption"
:readonly="!infoDrawerEmployeeEdit"
:noAddress="formDataEmployeeTab !== 'personalInfo'"
:noPaddingTab="
@ -2755,14 +2750,12 @@ watch(selectorLabel, async () => {
dense
outlined
v-model:employee-checkup="formDataEmployee.employeeCheckup"
v-model:checkup-type-option="
employeeStore.globalOption.tha.nationality
"
v-model:checkup-type-option="optionStore.globalOption.nationality"
v-model:medical-benefit-option="
employeeStore.globalOption.tha.typeInsurance
optionStore.globalOption.typeInsurance
"
v-model:insurance-company-option="
employeeStore.globalOption.tha.insurancePlace
optionStore.globalOption.insurancePlace
"
/>
<FormEmployeeWorkHistory
@ -2771,9 +2764,9 @@ watch(selectorLabel, async () => {
outlined
:readonly="!infoDrawerEmployeeEdit"
v-model:employee-work="formDataEmployee.employeeWork"
v-model:position-name-option="employeeStore.globalOption.tha.position"
v-model:job-type-option="employeeStore.globalOption.tha.businessType"
v-model:workplace-option="employeeStore.globalOption.tha.area"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
/>
<FormEmployeeOther
v-if="
@ -2805,11 +2798,9 @@ watch(selectorLabel, async () => {
v-model:previous-passport-reference="
formDataEmployee.previousPassportReference
"
v-model:passport-type-option="
employeeStore.globalOption.tha.nationality
"
v-model:passport-type-option="optionStore.globalOption.nationality"
v-model:passport-issuing-country-option="
employeeStore.globalOption.tha.nationality
optionStore.globalOption.nationality
"
/>
<FormEmployeeVisa
@ -2826,7 +2817,7 @@ watch(selectorLabel, async () => {
v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
v-model:tm6-number="formDataEmployee.tm6Number"
v-model:entry-date="formDataEmployee.entryDate"
v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
v-model:visa-type-option="optionStore.globalOption.nationality"
/>
</template>
</InfoForm>

View file

@ -651,12 +651,11 @@ const currentPropertiesMode = ref<'service' | 'work'>('service');
function openPropertiesDialog(type: 'service' | 'work') {
if (type === 'service') {
propertiesOption.value =
optionStore.globalOption.tha.servicePropertiesField;
propertiesOption.value = optionStore.globalOption.servicePropertiesField;
}
if (type === 'work') {
propertiesOption.value = optionStore.globalOption.tha.workPropertiesField;
propertiesOption.value = optionStore.globalOption.workPropertiesField;
}
currentPropertiesMode.value = type;