refactor: add prefixId
This commit is contained in:
parent
1e4e2c2927
commit
1bbb5007d3
17 changed files with 241 additions and 175 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue