refactor(02): use new toggle button

src/components/02_personnel-management/FormPerson.vue

@@ -13,7 +13,8 @@ import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
 const optionStore = useOptionStore();
-const prefixNameTh = defineModel<string>('prefixName');
+const prefixName = defineModel<string>('prefixName');
+const prefixNameEn = defineModel<string>('prefixNameEn');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
 const firstNameEN = defineModel<string>('firstNameEN');
@@ -117,7 +118,7 @@ watch(
           map-options
           hide-selected
           hide-bottom-space
-          v-model="prefixNameTh"
+          v-model="prefixName"
           input-debounce="0"
           option-label="label"
           option-value="value"
@@ -190,10 +191,11 @@ watch(
           :dense="dense"
           outlined
           hide-bottom-space
-          disable
+          :readonly="readonly"
+          :disable="!readonly"
           class="col-1"
           :label="$t('formDialogInputPrefixName')"
-          v-model="firstName"
+          v-model="prefixNameEn"
         />
 
         <q-input

src/components/shared/PersonCard.vue

@@ -3,6 +3,7 @@ import { Icon } from '@iconify/vue';
 
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
+import ToggleButton from '../button/ToggleButton.vue';
 
 defineProps<{
   data: {
@@ -143,22 +144,17 @@ defineEmits<{
               </q-item>
               <q-item dense>
                 <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded">
-                    <q-toggle
-                      dense
-                      color="positive"
-                      size="sm"
-                      @click="$emit('toggleStatus', disabled === false)"
+                  <div class="q-pa-sm surface-2 rounded flex items-center">
+                    <ToggleButton
+                      two-way
                       :model-value="!disabled"
-                      val="xs"
-                      padding="none"
-                    >
-                      <div class="q-ml-xs">
-                        {{
-                          !disabled ? $t('switchOnLabel') : $t('switchOffLabel')
-                        }}
-                      </div>
-                    </q-toggle>
+                      @click="$emit('toggleStatus', disabled === false)"
+                    />
+                    <span class="q-pl-md">
+                      {{
+                        !disabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                      }}
+                    </span>
                   </div>
                 </q-item-section>
               </q-item>

src/pages/02_personnel-management/MainPage.vue

@@ -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>