feat: select male , female

This commit is contained in:
oat_dev 2024-06-13 13:33:47 +07:00
parent eef6e53c6d
commit 3bf2d69b64

View file

@ -6,7 +6,6 @@ import { Pagination } from 'src/stores/types';
import useCustomerStore from 'src/stores/customer';
import useEmployeeStore from 'src/stores/employee';
import AddCardCompoent from 'src/components/AddCardCompoent.vue';
import PersonCard from 'components/home/PersonCard.vue';
import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
import SelectorList from 'components/SelectorList.vue';
@ -51,7 +50,7 @@ import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormE
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
import { Icon } from '@iconify/vue';
import { dialog, calculateAge } from 'src/stores/utils';
import { useI18n } from 'vue-i18n';
@ -233,6 +232,7 @@ const pageSizeEmployee = ref<number>(30);
const currentBranchId = ref<string>('');
const currentCustomerName = ref<string>('');
const currentCustomerUrlImage = ref<string | null>(null);
const genderselector = ref<string>('');
const inputFile = (() => {
const element = document.createElement('input');
@ -1158,6 +1158,40 @@ watch(fieldSelectedCustomer, async () => {
:label="$t('customerCardUserType')"
dense
/>
<q-btn-toggle
v-else
v-model="genderselector"
id="btn-mode"
dense
class="no-shadow bordered"
toggle-color="grey-4"
size="xs"
:options="[
{ value: 'female', slot: 'female' },
{ value: 'male', slot: 'male' },
]"
>
<template v-slot:female>
<div
class="q-px-sm q-py-xs app-text-female text-weight-medium text-body2 row items-center"
>
<q-icon
name="mdi-gender-female"
class="q-mr-sm"
size="18px"
/>
5 คน
</div>
</template>
<template v-slot:male>
<div
class="q-px-sm q-py-xs app-text-male text-weight-medium text-body2 row items-center"
>
<q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
5 คน
</div>
</template>
</q-btn-toggle>
</div>
<q-input