From cd1a733ef6b740cd03484e4e98d46576acac4ce6 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 19 Oct 2023 13:47:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20currency=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CurruncyInput.vue              |   5 +-
 .../components/CurruncyInput.vue              |  60 +++
 .../03_recruiting/components/Occupation.vue   | 412 +++++++-----------
 .../03_recruiting/interface/index/Main.ts     |   4 +-
 4 files changed, 235 insertions(+), 246 deletions(-)
 create mode 100644 src/modules/03_recruiting/components/CurruncyInput.vue

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
index 89d371935..9386d093e 100644
--- a/src/components/CurruncyInput.vue
+++ b/src/components/CurruncyInput.vue
@@ -26,7 +26,10 @@ import { ref, useSlots, watch } from "vue";
 const slots = ref<any>(useSlots());
 
 const props = defineProps({
-  modelValue: Number,
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
   dense: {
     type: Boolean,
     default: true,
diff --git a/src/modules/03_recruiting/components/CurruncyInput.vue b/src/modules/03_recruiting/components/CurruncyInput.vue
new file mode 100644
index 000000000..9386d093e
--- /dev/null
+++ b/src/modules/03_recruiting/components/CurruncyInput.vue
@@ -0,0 +1,60 @@
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="formattedValue"
+    :dense="dense"
+    :outlined="edit"
+    :class="
+      edit == true
+        ? 'full-width inputgreen cursor-pointer'
+        : 'full-width cursor-pointer'
+    "
+    :readonly="!edit"
+    :borderless="!edit"
+    hide-bottom-space
+  >
+    <template v-for="slot in slots">
+      <slot :name="slot" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyInput } from "vue-currency-input";
+import { ref, useSlots, watch } from "vue";
+
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  dense: {
+    type: Boolean,
+    default: true,
+  },
+  edit: {
+    type: Boolean,
+  },
+});
+
+const { inputRef, formattedValue, setValue } = useCurrencyInput({
+  locale: "th-TH",
+  currency: "THB",
+  currencyDisplay: "hidden" as any,
+  hideCurrencySymbolOnFocus: true,
+  hideGroupingSeparatorOnFocus: true,
+  hideNegligibleDecimalDigitsOnFocus: true,
+  autoDecimalDigits: false,
+  useGrouping: true,
+  accountingSign: false,
+});
+
+watch(
+  () => props.modelValue,
+  (value: any) => {
+    setValue(value);
+  }
+);
+</script>
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index 9fc2ebc51..7ab6eb574 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -1,212 +1,138 @@
 <!-- card ตำแหน่งปัจจุบัน -->
 <template>
-	<HeaderTop
-		v-model:edit="edit"
-		header="ตำแหน่งปัจจุบัน"
-		icon="mdi-briefcase"
-		:addData="true"
-		:editOnly="false"
-		:editData="false"
-	/>
-	<q-form ref="myform">
-		<div class="row col-12 items-center">
-			<div class="col-12 q-pb-sm">
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างประจำ"
-					color="teal"
-					val="prem"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างชั่วคราว"
-					color="teal"
-					val="temp"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-					color="teal"
-					val="other"
-					:disable="
-						!(status == 'checkRegister' || status == 'payment')
-					"
-				/>
-			</div>
-			<div class="col-12 row q-col-gutter-sm">
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.position"
-						:rules="[
-							(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
-						]"
-						:label="`${'ชื่อตำแหน่ง'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						type="number"
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.salary"
-						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-						:label="`${'เงินเดือน'}`"
-					/>
-				</div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ตำแหน่งปัจจุบัน"
+    icon="mdi-briefcase"
+    :addData="true"
+    :editOnly="false"
+    :editData="false"
+  />
+  <q-form ref="myform">
+    <div class="row col-12 items-center">
+      <div class="col-12 q-pb-sm">
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างประจำ"
+          color="teal"
+          val="prem"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างชั่วคราว"
+          color="teal"
+          val="temp"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+          color="teal"
+          val="other"
+          :disable="!(status == 'checkRegister' || status == 'payment')"
+        />
+      </div>
+      <div class="col-12 row q-col-gutter-sm">
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.position"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+            :label="`${'ชื่อตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-4">
+          <CurrencyInput
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            :options="{
+              currency: 'THB',
+            }"
+            v-model="defaultOccupation.salary"
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+            :label="`${'เงินเดือน'}`"
+          />
+        </div>
 
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.group"
-						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-						:label="`${'กลุ่ม/ฝ่าย'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.pile"
-						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-						:label="`${'กอง'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.org"
-						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-						:label="`${'สังกัด'}`"
-					/>
-				</div>
-				<div class="col-4">
-					<q-input
-						:class="
-							getClass(
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						:counter="
-							status == 'checkRegister' || status == 'payment'
-								? true
-								: false
-						"
-						maxlength="10"
-						lazy-rules
-						type="tel"
-						mask="##########"
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						v-model="defaultOccupation.tel"
-						:rules="[
-							(val) =>
-								!!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-							(val) =>
-								(val.length >= 9 &&
-									val.length <= 10 &&
-									val.startsWith('0')) ||
-								'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
-						]"
-						:label="`${'เบอร์โทรที่ทำงาน'}`"
-					/>
-				</div>
-			</div>
-		</div>
-	</q-form>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.group"
+            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+            :label="`${'กลุ่ม/ฝ่าย'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.pile"
+            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+            :label="`${'กอง'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.org"
+            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
+            :outlined="status == 'checkRegister' || status == 'payment'"
+            dense
+            :counter="
+              status == 'checkRegister' || status == 'payment' ? true : false
+            "
+            maxlength="10"
+            lazy-rules
+            type="tel"
+            mask="##########"
+            autogrow
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            v-model="defaultOccupation.tel"
+            :rules="[
+              (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+              (val) =>
+                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
+            ]"
+            :label="`${'เบอร์โทรที่ทำงาน'}`"
+          />
+        </div>
+      </div>
+    </div>
+  </q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
@@ -214,24 +140,24 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
 import {
-	defaultOccupation,
-	changeData,
+  defaultOccupation,
+  changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
-
+import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const props = defineProps({
-	status: {
-		type: String,
-		required: true,
-	},
-	form: {
-		type: Object,
-		required: true,
-	},
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
 });
 
 const $q = useQuasar();
@@ -246,43 +172,43 @@ const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits(["update:form"]);
 
 watch(myform, async (count: any, prevCount: any) => {
-	emit("update:form", count);
+  emit("update:form", count);
 });
 
 watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-	await changeData("occupation", count);
+  await changeData("occupation", count);
 });
 
 onMounted(async () => {
-	await fetchData();
+  await fetchData();
 });
 
 const fetchData = async () => {
-	showLoader();
-	await http
-		.get(config.API.candidateOccupation(candidateId.value))
-		.then((res) => {
-			const data = res.data.result;
-			defaultOccupation.value.org = data.occupationOrg;
-			defaultOccupation.value.pile = data.occupationPile;
-			defaultOccupation.value.group = data.occupationGroup;
-			defaultOccupation.value.salary = data.occupationSalary;
-			defaultOccupation.value.position = data.occupationPosition;
-			defaultOccupation.value.positionType = data.occupationPositionType;
-			defaultOccupation.value.tel = data.occupationTelephone;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			hideLoader();
-		});
+  showLoader();
+  await http
+    .get(config.API.candidateOccupation(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      defaultOccupation.value.org = data.occupationOrg;
+      defaultOccupation.value.pile = data.occupationPile;
+      defaultOccupation.value.group = data.occupationGroup;
+      defaultOccupation.value.salary = data.occupationSalary;
+      defaultOccupation.value.position = data.occupationPosition;
+      defaultOccupation.value.positionType = data.occupationPositionType;
+      defaultOccupation.value.tel = data.occupationTelephone;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const getClass = (val: boolean) => {
-	return {
-		"full-width inputgreen cursor-pointer": val,
-		"full-width cursor-pointer": !val,
-	};
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
 };
 </script>
diff --git a/src/modules/03_recruiting/interface/index/Main.ts b/src/modules/03_recruiting/interface/index/Main.ts
index 2a92a069d..e7455baef 100644
--- a/src/modules/03_recruiting/interface/index/Main.ts
+++ b/src/modules/03_recruiting/interface/index/Main.ts
@@ -65,7 +65,7 @@ interface Occupation {
   org: string | null;
   pile: string | null;
   group: string | null;
-  salary: string | null;
+  salary: number | undefined;
   position: string | null;
   positionType: string | null;
   tel: string | null;
@@ -229,7 +229,7 @@ const defaultOccupation = ref<Occupation>({
   org: null,
   pile: null,
   group: null,
-  salary: null,
+  salary: undefined,
   position: null,
   positionType: null,
   tel: null,