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 { QSelect } from 'quasar';
import { AddButton, DeleteButton } from 'components/button';
import ToggleButton from '../button/ToggleButton.vue';
const optionStore = useOptionStore();
@ -113,13 +114,10 @@ watch(
<div class="row items-center">
<div style="height: 30.8px" />
{{ $t('accountStatus') }}
<q-toggle
<ToggleButton
id="toggle-bank-status"
dense
size="md"
padding="none"
class="q-pl-md"
:disable="readonly"
class="q-ml-md"
v-model="book.currentlyUse"
/>
<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 ImageUploadDialog from 'components/ImageUploadDialog.vue';
import FormBank from 'components/01_branch-management/FormBank.vue';
import ToggleButton from 'src/components/button/ToggleButton.vue';
const $q = useQuasar();
const { t } = useI18n();
@ -1288,17 +1289,12 @@ watch(currentHq, () => {
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
color="positive"
<div
class="q-pa-sm surface-2 rounded flex items-center"
>
<ToggleButton
two-way
:id="`view-detail-btn-${props.row.name}-status`"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click="
async () => {
const res =
@ -1316,6 +1312,13 @@ watch(currentHq, () => {
props.row.status === 'ACTIVE'
"
/>
<span class="q-pl-md">
{{
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</span>
</div>
</q-item-section>
</q-item>
@ -1498,16 +1501,15 @@ watch(currentHq, () => {
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
<div
class="q-pa-sm surface-2 rounded flex items-center"
>
<ToggleButton
:id="`view-detail-btn-${props.row.name}-status`"
color="positive"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
two-way
:model-value="
props.row.status === 'CREATED' ||
props.row.status === 'ACTIVE'
"
@click="
async () => {
@ -1521,11 +1523,14 @@ watch(currentHq, () => {
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>
</q-item-section>
</q-item>
@ -2017,11 +2022,9 @@ watch(currentHq, () => {
<q-item clickable v-ripple>
<q-item-section avatar>
<q-toggle
dense
color="positive"
<ToggleButton
two-way
:id="`view-detail-btn-${currentNode.name}-status`"
size="sm"
@click="
async () => {
if (!currentNode) return;