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>