chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor(02): input select

Browse source
This commit is contained in:
puriphatt 2024-07-30 04:04:17 +00:00
parent 05f0d00871
commit 3b0510922b
4 changed files with 428 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

284
src/components/02_personnel-management/FormAddress.vue
View file

@ -1,10 +1,12 @@
<script setup lang="ts">
import { onMounted, watch, reactive } from 'vue';
import { onMounted, watch, reactive, ref } from 'vue';
import useAddressStore, {
District,
Province,
SubDistrict,
} from 'src/stores/address';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { QSelect } from 'quasar';
defineProps<{
title?: string;
@ -43,6 +45,18 @@ async function fetchProvince() {
const result = await adrressStore.fetchProvince();
if (result) addrOptions.provinceOps = result;
provinceFilter = selectFilterOptionRefMod(
ref(addrOptions.provinceOps),
provinceOptions,
'name',
);
provinceEnFilter = selectFilterOptionRefMod(
ref(addrOptions.provinceOps),
provinceOptions,
'nameEN',
);
}
async function fetchDistrict() {
@ -50,6 +64,18 @@ async function fetchDistrict() {
const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
if (result) addrOptions.districtOps = result;
districtFilter = selectFilterOptionRefMod(
ref(addrOptions.districtOps),
districtOptions,
'name',
);
districtEnFilter = selectFilterOptionRefMod(
ref(addrOptions.districtOps),
districtOptions,
'nameEN',
);
}
async function fetchSubDistrict() {
@ -58,6 +84,18 @@ async function fetchSubDistrict() {
districtId.value,
);
if (result) addrOptions.subDistrictOps = result;
subDistrictFilter = selectFilterOptionRefMod(
ref(addrOptions.subDistrictOps),
subDistrictOptions,
'name',
);
subDistrictEnFilter = selectFilterOptionRefMod(
ref(addrOptions.subDistrictOps),
subDistrictOptions,
'nameEN',
);
}
async function selectSubDistrict(id: string) {
@ -68,6 +106,36 @@ async function selectSubDistrict(id: string) {
.map((x) => x.zipCode)[0] ?? '';
}
const provinceOptions = ref<Record<string, unknown>[]>([]);
let provinceFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
let provinceEnFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const districtOptions = ref<Record<string, unknown>[]>([]);
let districtFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
let districtEnFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const subDistrictOptions = ref<Record<string, unknown>[]>([]);
let subDistrictFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
let subDistrictEnFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(async () => {
await fetchProvince();
await fetchDistrict();
@ -124,15 +192,15 @@ watch(districtId, fetchSubDistrict);
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
:dense="dense"
outlined
:readonly="readonly || sameWithEmployer"
hide-bottom-space
:label="$t('address')"
class="col-12"
v-model="address"
lazy-rules="ondemand"
:dense="dense"
:label="$t('address')"
:readonly="readonly || sameWithEmployer"
:for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
:rules="
disabledRule
? []
@ -144,21 +212,26 @@ watch(districtId, fetchSubDistrict);
"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
hide-bottom-space
clearable
use-input
fill-input
emit-value
map-options
v-model="provinceId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
option-label="name"
:label="$t('province')"
v-model="provinceId"
lazy-rules="ondemand"
class="col-md-3 col-6"
:options="addrOptions.provinceOps"
:dense="dense"
:label="$t('province')"
:options="provinceOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
:rules="
disabledRule
? []
@ -168,25 +241,39 @@ watch(districtId, fetchSubDistrict);
$t('formDialogInputProvinceValidate'),
]
"
@filter="provinceFilter"
@update:model-value="districtId = subDistrictId = zipCode = null"
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
hide-bottom-space
clearable
use-input
fill-input
emit-value
map-options
v-model="districtId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
option-label="name"
:label="$t('district')"
v-model="districtId"
lazy-rules="ondemand"
class="col-md-3 col-6"
:options="addrOptions.districtOps"
:dense="dense"
:label="$t('district')"
:options="districtOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
:rules="
disabledRule
? []
@ -196,24 +283,38 @@ watch(districtId, fetchSubDistrict);
$t('formDialogInputDistrictValidate'),
]
"
@filter="districtFilter"
@update:model-value="subDistrictId = zipCode = null"
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
hide-bottom-space
clearable
use-input
fill-input
emit-value
map-options
v-model="subDistrictId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
option-label="name"
:label="$t('subDistrict')"
lazy-rules="ondemand"
class="col-md-3 col-6"
:options="addrOptions.subDistrictOps"
v-model="subDistrictId"
:dense="dense"
:label="$t('subDistrict')"
:options="subDistrictOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
:rules="
disabledRule
? []
@ -224,7 +325,16 @@ watch(districtId, fetchSubDistrict);
]
"
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
@filter="subDistrictFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
@ -264,21 +374,26 @@ watch(districtId, fetchSubDistrict);
"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
clearable
use-input
fill-input
emit-value
map-options
v-model="provinceId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
v-model="provinceId"
lazy-rules="ondemand"
option-label="nameEN"
:label="$t('province')"
class="col-md-3 col-6"
:options="addrOptions.provinceOps"
:dense="dense"
:label="$t('province')"
:options="provinceOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
:rules="
disabledRule
? []
@ -289,23 +404,37 @@ watch(districtId, fetchSubDistrict);
]
"
@update:model-value="districtId = subDistrictId = zipCode = null"
/>
@filter="provinceEnFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
clearable
use-input
fill-input
emit-value
map-options
v-model="districtId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
v-model="districtId"
lazy-rules="ondemand"
option-label="nameEN"
:label="$t('district')"
class="col-md-3 col-6"
:options="addrOptions.districtOps"
:dense="dense"
:label="$t('district')"
:options="districtOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
:rules="
disabledRule
? []
@ -316,23 +445,37 @@ watch(districtId, fetchSubDistrict);
]
"
@update:model-value="subDistrictId = zipCode = null"
/>
@filter="districtEnFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
outlined
:hide-dropdown-icon="readonly || sameWithEmployer"
clearable
use-input
fill-input
emit-value
map-options
v-model="subDistrictId"
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
lazy-rules="ondemand"
option-label="nameEN"
:label="$t('subDistrict')"
class="col-md-3 col-6"
:options="addrOptions.subDistrictOps"
v-model="subDistrictId"
:dense="dense"
:label="$t('subDistrict')"
:options="subDistrictOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
:id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
:rules="
disabledRule
? []
@ -343,7 +486,16 @@ watch(districtId, fetchSubDistrict);
]
"
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
@filter="subDistrictEnFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
hide-bottom-space

176
src/components/02_personnel-management/FormInformation.vue
View file

@ -1,8 +1,11 @@
<script setup lang="ts">
import useUserStore from 'src/stores/user';
import { onMounted } from 'vue';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
const userStore = useUserStore();
const { t } = useI18n();
const hqId = defineModel<string | null | undefined>('hqId');
const brId = defineModel<string | null | undefined>('brId');
@ -29,6 +32,39 @@ async function selectHq(id: string) {
}
}
const hqOptions = ref<Record<string, unknown>[]>([]);
const hqFilter = selectFilterOptionRefMod(
ref(userStore.userOption.hqOpts),
hqOptions,
'label',
);
const brOptions = ref<Record<string, unknown>[]>([]);
const brFilter = selectFilterOptionRefMod(
ref(userStore.userOption.brOpts),
brOptions,
'label',
);
const userTypeOptions = ref<Record<string, unknown>[]>([]);
const userTypeFilter = selectFilterOptionRefMod(
ref(
userStore.userOption.userTypeOpts.map((v) => ({
label: t(v.label),
value: v.value,
})),
),
userTypeOptions,
'label',
);
const roleOptions = ref<Record<string, unknown>[]>([]);
const roleFilter = selectFilterOptionRefMod(
ref(userStore.userOption.roleOpts),
roleOptions,
'label',
);
onMounted(async () => {
if (userStore.userOption.hqOpts[0].value)
await userStore.fetchBrOption(userStore.userOption.hqOpts[0].value);
@ -40,44 +76,69 @@ onMounted(async () => {
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
lazy-rules="ondemand"
id="select-hq-id"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
clearable
use-input
fill-input
emit-value
map-options
options-dense
hide-selected
hide-bottom-space
class="col-md-4 col-6"
v-model="hqId"
id="select-hq-id"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
class="col-md-4 col-6"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputCode')"
:options="userStore.userOption.hqOpts"
:options="hqOptions"
:rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
@update:model-value="(val: string) => selectHq(val)"
/>
@filter="hqFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
id="select-br-id"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
clearable
use-input
fill-input
emit-value
map-options
options-dense
clearable
hide-selected
hide-bottom-space
class="col-md-4 col-6"
v-model="brId"
:label="$t('formDialogInputBrId')"
id="select-br-id"
input-debounce="0"
option-label="label"
option-value="value"
:options="userStore.userOption.brOpts"
/>
lazy-rules="ondemand"
class="col-md-4 col-6"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputBrId')"
:options="brOptions"
@filter="brFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
for="input-username"
@ -97,54 +158,69 @@ onMounted(async () => {
]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
v-model="userType"
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
id="select-user-type"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
hide-bottom-space
class="col-6"
option-value="value"
:label="$t('formDialogInputUserType')"
v-model="userType"
:options="userStore.userOption.userTypeOpts"
:options="userTypeOptions"
:rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
@filter="userTypeFilter"
>
<template v-slot:option="scope">
<q-item v-if="scope.opt" v-bind="scope.itemProps">
{{ $t(scope.opt.label) }}
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
<template v-slot:selected-item="scope">
<div v-if="scope.opt">
{{ $t(scope.opt.label) }}
</div>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
id="select-user-role"
:dense="dense"
outlined
v-model="userRole"
:readonly="readonly"
:hide-dropdown-icon="readonly"
emit-value
map-options
options-dense
hide-bottom-space
class="col-6"
:label="$t('formDialogInputUserRole')"
option-label="label"
option-value="value"
v-model="userRole"
:options="userStore.userOption.roleOpts"
:options="roleOptions"
:rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
/>
@filter="roleFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<!-- <q-input lazy-rules="ondemand"
id="input-user-code"
:dense="dense"

123
src/components/02_personnel-management/FormPerson.vue
View file

@ -1,12 +1,13 @@
<script setup lang="ts">
import useOptionStore from 'src/stores/options';
import { selectOptionFilter } from 'src/stores/utils';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import {
dateFormat,
calculateAge,
parseAndFormatDate,
disabledAfterToday,
} from 'src/utils/datetime';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
@ -22,11 +23,19 @@ const gender = defineModel<string>('gender');
const birthDate = defineModel<Date | string | null>('birthDate');
const nationality = defineModel<string>('nationality');
const { options: genderOptions, filter: genderFilter } = selectOptionFilter(
optionStore.globalOption.gender,
const genderOptions = ref<Record<string, unknown>[]>([]);
const genderFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.gender),
genderOptions,
'label',
);
const nationalityOptions = ref<Record<string, unknown>[]>([]);
const nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
nationalityOptions,
'label',
);
const { options: nationalityOptions, filter: nationalityFilter } =
selectOptionFilter(optionStore.globalOption.nationality);
defineProps<{
dense?: boolean;
@ -121,24 +130,37 @@ defineProps<{
v-model="email"
/>
<q-select
lazy-rules="ondemand"
v-if="!employee"
:id="`${prefixId}-select-gender`"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
clearable
use-input
fill-input
emit-value
map-options
:label="$t('formDialogInputGender')"
class="col-md-3 col-6"
hide-selected
hide-bottom-space
v-model="gender"
input-debounce="0"
option-label="label"
option-value="value"
v-model="gender"
use-input
@filter="genderFilter"
lazy-rules="ondemand"
class="col-md-3 col-6"
:dense="dense"
:readonly="readonly"
:options="genderOptions"
/>
:hide-dropdown-icon="readonly"
:id="`${prefixId}-select-gender`"
:label="$t('formDialogInputGender')"
@filter="genderFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<VueDatePicker
:id="`${prefixId}-input-birth-date`"
@ -218,54 +240,77 @@ defineProps<{
"
/>
<q-select
lazy-rules="ondemand"
v-if="employee"
:id="`${prefixId}-select-gender`"
hide-bottom-space
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
clearable
use-input
fill-input
emit-value
map-options
:label="$t('formDialogInputGender')"
class="col-md-3 col-6"
hide-selected
hide-bottom-space
input-debounce="0"
option-label="label"
option-value="value"
use-input
lazy-rules="ondemand"
class="col-md-3 col-6"
:dense="dense"
v-model="gender"
@filter="genderFilter"
:readonly="readonly"
:options="genderOptions"
:hide-dropdown-icon="readonly"
:id="`${prefixId}-select-gender`"
:label="$t('formDialogInputGender')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputGender'),
]"
/>
@filter="genderFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
lazy-rules="ondemand"
v-if="employee"
:id="`${prefixId}-select-nationality`"
hide-bottom-space
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
clearable
use-input
fill-input
emit-value
map-options
options-dense
:label="$t('formDialogInputNationality')"
class="col-md-3 col-6"
hide-selected
hide-bottom-space
input-debounce="0"
option-label="label"
option-value="label"
v-model="nationality"
lazy-rules="ondemand"
class="col-md-3 col-6"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"
use-input
@filter="nationalityFilter"
:hide-dropdown-icon="readonly"
:id="`${prefixId}-select-nationality`"
:label="$t('formDialogInputNationality')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
]"
/>
@filter="nationalityFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-separator
v-if="separator"