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

refactor(01): use new toggle button

Browse source
This commit is contained in:
puriphatt 2024-08-13 08:55:49 +00:00
parent 50b63d4eca
commit 415aa4bc87
2 changed files with 33 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/01_branch-management/FormBank.vue
View file

@ -6,6 +6,7 @@ import { onMounted, ref, watch } from 'vue';
import { deleteItem } from 'stores/utils'; import { deleteItem } from 'stores/utils';
import { QSelect } from 'quasar'; import { QSelect } from 'quasar';
import { AddButton, DeleteButton } from 'components/button'; import { AddButton, DeleteButton } from 'components/button';
import ToggleButton from '../button/ToggleButton.vue';
const optionStore = useOptionStore(); const optionStore = useOptionStore();
@ -113,13 +114,10 @@ watch(
<div class="row items-center"> <div class="row items-center">
<div style="height: 30.8px" /> <div style="height: 30.8px" />
{{ $t('accountStatus') }} {{ $t('accountStatus') }}
<q-toggle <ToggleButton
id="toggle-bank-status" id="toggle-bank-status"
dense
size="md"
padding="none"
class="q-pl-md"
:disable="readonly" :disable="readonly"
class="q-ml-md"
v-model="book.currentlyUse" v-model="book.currentlyUse"
/> />
<q-separator <q-separator

57
src/pages/01_branch-management/MainPage.vue
View file

@ -35,6 +35,7 @@ import ProfileBanner from 'components/ProfileBanner.vue';
import SideMenu from 'components/SideMenu.vue'; import SideMenu from 'components/SideMenu.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue'; import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import FormBank from 'components/01_branch-management/FormBank.vue'; import FormBank from 'components/01_branch-management/FormBank.vue';
import ToggleButton from 'src/components/button/ToggleButton.vue';
const $q = useQuasar(); const $q = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
@ -1288,17 +1289,12 @@ watch(currentHq, () => {
<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"
color="positive" >
<ToggleButton
two-way
:id="`view-detail-btn-${props.row.name}-status`" :id="`view-detail-btn-${props.row.name}-status`"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click=" @click="
async () => { async () => {
const res = const res =
@ -1316,6 +1312,13 @@ watch(currentHq, () => {
props.row.status === 'ACTIVE' props.row.status === 'ACTIVE'
" "
/> />
<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>
@ -1498,16 +1501,15 @@ watch(currentHq, () => {
<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`"
color="positive" two-way
dense :model-value="
size="sm" props.row.status === 'CREATED' ||
:label=" props.row.status === 'ACTIVE'
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
" "
@click=" @click="
async () => { async () => {
@ -1521,11 +1523,14 @@ watch(currentHq, () => {
props.row.status = res.status; props.row.status = res.status;
} }
" "
:model-value="
props.row.status === 'CREATED' ||
props.row.status === 'ACTIVE'
"
/> />
<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>
@ -2017,11 +2022,9 @@ watch(currentHq, () => {
<q-item clickable v-ripple> <q-item clickable v-ripple>
<q-item-section avatar> <q-item-section avatar>
<q-toggle <ToggleButton
dense two-way
color="positive"
:id="`view-detail-btn-${currentNode.name}-status`" :id="`view-detail-btn-${currentNode.name}-status`"
size="sm"
@click=" @click="
async () => { async () => {
if (!currentNode) return; if (!currentNode) return;