refactor(02): use new toggle button

This commit is contained in:
puriphatt 2024-08-13 08:55:49 +00:00
parent 415aa4bc87
commit b4c01c7c28
3 changed files with 31 additions and 32 deletions

View file

@ -22,14 +22,12 @@ import PersonCard from 'components/shared/PersonCard.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'components/FormDialog.vue';
import FormInformation from 'components/02_personnel-management/FormInformation.vue';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import FormByType from 'components/02_personnel-management/FormByType.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import NoData from 'components/NoData.vue';
import ProfileUpload from 'components/ProfileUpload.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import useOptionStore from 'stores/options';
import ProfileBanner from 'components/ProfileBanner.vue';
@ -37,6 +35,7 @@ import SideMenu from 'components/SideMenu.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import { AddressForm } from 'components/form';
import DialogForm from 'components/DialogForm.vue';
import ToggleButton from 'src/components/button/ToggleButton.vue';
const { locale, t } = useI18n();
const $q = useQuasar();
@ -1383,17 +1382,13 @@ watch(
<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
:id="`view-detail-btn-${props.row.username}-status`"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
two-way
:model-value="props.row.status !== 'INACTIVE'"
@click="
async () => {
triggerChangeStatus(
@ -1402,8 +1397,14 @@ watch(
);
}
"
:model-value="props.row.status !== 'INACTIVE'"
/>
<span class="q-pl-md">
{{
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</span>
</div>
</q-item-section>
</q-item>