refactor: convert numbers into thai text

src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
+import {
+  selectFilterOptionRefMod,
+  commaInput,
+  formatNumberDecimal,
+} from 'stores/utils';
 import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import ThaiBahtText from 'thai-baht-text';
 
 const { locale } = useI18n({ useScope: 'global' });
 
@@ -13,8 +18,8 @@ const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
 const payDateEN = defineModel<string>('payDateEn');
-const wageRate = defineModel<number | string>('wageRate');
+const wageRate = defineModel<string>('wageRate');
-const wageRateText = defineModel<string>('wageRateText');
+const wageRateText = defineModel<string>('wageRateText', { default: '0' });
 
 const wageRate4Show = ref('');
 const typeBusinessOption = ref([]);
@@ -32,6 +37,7 @@ defineProps<{
 }>();
 
 onMounted(async () => {
+
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
   typeBusinessENOption.value = rawOption.value.eng.businessType;
@@ -60,6 +66,18 @@ watch([typeBusinessOption, typeBusinessENOption], () => {
   );
 });
 
+watch(
+  () => wageRate.value,
+  (newValue) => {
+    console.log(newValue);
+    if (newValue !== undefined) {
+      const numericValue = newValue.replace(/,/g, '');
+
+      wageRateText.value = ThaiBahtText(numericValue);
+    }
+  },
+);
+
 watch([jobPositionOption, jobPositionENOption], () => {
   jobPositionFilter = selectFilterOptionRefMod(
     jobPositionOption,
@@ -289,28 +307,6 @@ let jobPositionENFilter = selectFilterOptionRefMod(
         (v) => (typeof v === 'string' ? (payDateEN = v) : '')
       "
     />
-    <q-input
-      :for="`${prefixId}-input-pay-rate`"
-      :id="`${prefixId}-input-pay-rate`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('customer.form.payRate')"
-      :model-value="commaInput(wageRate?.toString() || '-')"
-      @update:model-value="
-        (v) => {
-          if (typeof v === 'string') wageRate4Show = commaInput(v);
-          const x = parseFloat(
-            wageRate4Show && typeof wageRate4Show === 'string'
-              ? wageRate4Show.replace(/,/g, '')
-              : '',
-          );
-          wageRate = x;
-        }
-      "
-    />
 
     <q-input
       :for="`${prefixId}-input-pay-rate`"
@@ -320,6 +316,24 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       :readonly="readonly"
       hide-bottom-space
       class="col-md-3 col-6"
+      :label="$t('customer.form.payRate')"
+      :model-value="wageRate?.toString()"
+      @update:model-value="
+        (v) => {
+          if (typeof v === 'string') {
+            wageRate = commaInput(v, 'string');
+          }
+        }
+      "
+    />
+    <q-input
+      :for="`${prefixId}-input-pay-rate`"
+      :id="`${prefixId}-input-pay-rate`"
+      :dense="dense"
+      outlined
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-md-4 col-6"
       :label="`${$t('customer.form.payRate')} (Text)`"
       :model-value="readonly ? wageRateText || '-' : wageRateText"
       @update:model-value="