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

refactor(03): use new toggle button

Browse source
This commit is contained in:
puriphatt 2024-08-13 08:55:49 +00:00
parent b4c01c7c28
commit a07d11db0a
1 changed files with 31 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/pages/03_customer-management/MainPage.vue
View file

@ -48,6 +48,7 @@ import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmplo
import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue'; import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
import useOptionStore from 'stores/options'; import useOptionStore from 'stores/options';
import { DialogContainer, DialogHeader } from 'components/dialog'; import { DialogContainer, DialogHeader } from 'components/dialog';
import ToggleButton from 'src/components/button/ToggleButton.vue';
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const $q = useQuasar(); const $q = useQuasar();
@ -649,8 +650,8 @@ watch(
? customerStats.map((v) => ({ ? customerStats.map((v) => ({
count: count:
v.name === 'CORP' v.name === 'CORP'
? statsCustomerType?.CORP ?? 0 ? (statsCustomerType?.CORP ?? 0)
: statsCustomerType?.PERS ?? 0, : (statsCustomerType?.PERS ?? 0),
label: label:
v.name === 'CORP' v.name === 'CORP'
? 'customerLegalEntity' ? 'customerLegalEntity'
@ -1144,15 +1145,14 @@ watch(
<q-item dense> <q-item dense>
<q-item-section class="q-py-sm"> <q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded"> <div
<q-toggle class="q-pa-sm surface-2 rounded flex items-center"
>
<ToggleButton
:id="`view-detail-btn-${props.row.name}-status`" :id="`view-detail-btn-${props.row.name}-status`"
dense two-way
size="sm" :model-value="
:label="
props.row.status !== 'INACTIVE' props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
" "
@click=" @click="
async () => { async () => {
@ -1162,10 +1162,14 @@ watch(
); );
} }
" "
:model-value="
props.row.status !== 'INACTIVE'
"
/> />
<span class="q-pl-md">
{{
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</span>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -1201,7 +1205,7 @@ watch(
female: undefined, female: undefined,
detail: [ detail: [
{ {
icon: 'mdi-cellphone-outline', icon: 'mdi-phone-outline',
value: props.row.branch[0]?.telephoneNo || '-', value: props.row.branch[0]?.telephoneNo || '-',
}, },
{ {
@ -1620,15 +1624,14 @@ watch(
<q-item dense> <q-item dense>
<q-item-section class="q-py-sm"> <q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded"> <div
<q-toggle class="q-pa-sm surface-2 rounded flex items-center"
>
<ToggleButton
:id="`view-detail-btn-${props.row.name}-status`" :id="`view-detail-btn-${props.row.name}-status`"
dense two-way
size="sm" :model-value="
:label="
props.row.status !== 'INACTIVE' props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
" "
@click=" @click="
async () => { async () => {
@ -1638,10 +1641,14 @@ watch(
); );
} }
" "
:model-value="
props.row.status !== 'INACTIVE'
"
/> />
<span class="q-pl-md">
{{
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</span>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -1679,7 +1686,7 @@ watch(
{ {
icon: 'mdi-clock-outline', icon: 'mdi-clock-outline',
value: props.row.dateOfBirth value: props.row.dateOfBirth
? calculateAge(props.row.dateOfBirth) ?? '' ? (calculateAge(props.row.dateOfBirth) ?? '')
: '', : '',
}, },
], ],