refactor: add prefixId

This commit is contained in:
Net 2024-07-25 14:44:32 +07:00
parent 1e4e2c2927
commit 1bbb5007d3
17 changed files with 241 additions and 175 deletions

View file

@ -17,6 +17,7 @@ defineProps<{
employee?: boolean;
disabledRule?: boolean;
id?: number;
prefixId: string;
}>();
const adrressStore = useAddressStore();
@ -88,7 +89,7 @@ watch(districtId, fetchSubDistrict);
style="border-radius: var(--radius-3)"
>
<span
id="same"
:id="`${prefixId}-same`"
class="q-px-sm q-mr-lg rounded cursor-pointer"
:class="{
dark: $q.dark.isActive,
@ -100,7 +101,7 @@ watch(districtId, fetchSubDistrict);
{{ $t('formDialogToggleSameAddress') }}
</span>
<span
id="custom"
:id="`${prefixId}-custom`"
class="q-px-sm rounded cursor-pointer"
:class="{
dark: $q.dark.isActive,
@ -123,7 +124,7 @@ watch(districtId, fetchSubDistrict);
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
:for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
:dense="dense"
outlined
:readonly="readonly || sameWithEmployer"
@ -142,7 +143,7 @@ watch(districtId, fetchSubDistrict);
"
/>
<q-select
:id="`${id !== undefined ? `select-province-${id}` : 'select-province'}`"
:id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
@ -169,7 +170,7 @@ watch(districtId, fetchSubDistrict);
/>
<q-select
:id="`${id !== undefined ? `select-district-${id}` : 'select-district'}`"
:id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
@ -195,7 +196,7 @@ watch(districtId, fetchSubDistrict);
@update:model-value="subDistrictId = zipCode = null"
/>
<q-select
:id="`${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
@ -221,7 +222,7 @@ watch(districtId, fetchSubDistrict);
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
<q-input
:for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
:for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
:dense="dense"
outlined
readonly
@ -238,7 +239,7 @@ watch(districtId, fetchSubDistrict);
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
:for="`${prefixId}-${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
@ -257,7 +258,7 @@ watch(districtId, fetchSubDistrict);
"
/>
<q-select
:id="`${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
:id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
@ -283,7 +284,7 @@ watch(districtId, fetchSubDistrict);
@update:model-value="districtId = subDistrictId = zipCode = null"
/>
<q-select
:id="`${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
:id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
@ -309,7 +310,7 @@ watch(districtId, fetchSubDistrict);
@update:model-value="subDistrictId = zipCode = null"
/>
<q-select
:id="`${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
@ -336,7 +337,7 @@ watch(districtId, fetchSubDistrict);
/>
<q-input
hide-bottom-space
:for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
:for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
:dense="dense"
outlined
readonly

View file

@ -28,6 +28,7 @@ defineProps<{
separator?: boolean;
employee?: boolean;
title?: string;
prefixId: string;
}>();
</script>
<template>
@ -36,7 +37,7 @@ defineProps<{
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
for="input-first-name"
:for="`${prefixId}-input-first-name`"
:dense="dense"
outlined
:readonly="readonly"
@ -49,7 +50,7 @@ defineProps<{
]"
/>
<q-input
for="input-last-name"
:for="`${prefixId}-input-last-name`"
:dense="dense"
outlined
:readonly="readonly"
@ -60,7 +61,7 @@ defineProps<{
:rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
/>
<q-input
for="input-first-name-en"
:for="`${prefixId}-input-first-name-en`"
:dense="dense"
outlined
:readonly="readonly"
@ -73,7 +74,7 @@ defineProps<{
]"
/>
<q-input
for="input-last-name-en"
:for="`${prefixId}-input-last-name-en`"
:dense="dense"
outlined
:readonly="readonly"
@ -87,7 +88,7 @@ defineProps<{
/>
<q-input
v-if="!employee"
for="input-telephone"
:for="`${prefixId}-input-telephone`"
:dense="dense"
outlined
:readonly="readonly"
@ -98,7 +99,7 @@ defineProps<{
/>
<q-input
v-if="!employee"
for="input-email"
:for="`${prefixId}-input-email`"
:dense="dense"
outlined
:readonly="readonly"
@ -108,7 +109,7 @@ defineProps<{
/>
<q-select
v-if="!employee"
id="select-gender"
:id="`${prefixId}-select-gender`"
:dense="dense"
outlined
:readonly="readonly"
@ -124,8 +125,8 @@ defineProps<{
/>
<VueDatePicker
id="input-birth-date"
for="input-birth-date"
:id="`${prefixId}-input-birth-date`"
:for="`${prefixId}-input-birth-date`"
utc
autoApply
v-model="birthDate"
@ -145,7 +146,7 @@ defineProps<{
</template>
<template #trigger>
<q-input
for="input-birth-date"
:for="`${prefixId}-input-birth-date`"
hide-bottom-space
placeholder="DD/MM/YYYY"
:label="$t('formDialogInputBirthDate')"
@ -185,7 +186,7 @@ defineProps<{
</template>
</VueDatePicker>
<q-input
for="input-age"
:for="`${prefixId}-input-age`"
:dense="dense"
outlined
readonly
@ -200,7 +201,7 @@ defineProps<{
/>
<q-select
v-if="employee"
id="select-gender"
:id="`${prefixId}-select-gender`"
hide-bottom-space
:dense="dense"
outlined
@ -221,7 +222,7 @@ defineProps<{
/>
<q-select
v-if="employee"
id="select-nationality"
:id="`${prefixId}-select-nationality`"
hide-bottom-space
:dense="dense"
outlined