From 5c8593cf4b4bbcd04e74224b6d79543a3109602f Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:04:31 +0700
Subject: [PATCH] Currency input

---
 package.json                                  |  1 +
 .../components/CurrencyInput.vue              | 21 +++++++++++++++++++
 .../Expulsion/expulsionRegistry.vue           |  4 ++++
 3 files changed, 26 insertions(+)
 create mode 100644 src/modules/06_retirement/components/CurrencyInput.vue

diff --git a/package.json b/package.json
index 893544660..de70da7f7 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "quasar": "^2.11.1",
     "structure-chart": "^0.0.9",
     "vue": "^3.2.45",
+    "vue-currency-input": "^3.0.5",
     "vue-router": "^4.1.6",
     "vue3-datepicker": "^0.3.4",
     "vue3-pdfjs": "^0.1.6"
diff --git a/src/modules/06_retirement/components/CurrencyInput.vue b/src/modules/06_retirement/components/CurrencyInput.vue
new file mode 100644
index 000000000..f07e10f04
--- /dev/null
+++ b/src/modules/06_retirement/components/CurrencyInput.vue
@@ -0,0 +1,21 @@
+<template>
+  <input ref="inputRef" type="text" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCurrencyInput } from "vue-currency-input";
+
+const props = defineProps({
+  modelValue: Number, // Vue 2: value
+  options: Object,
+});
+
+const inputRef = ref<any>();
+
+watch(props, (count, prevCount) => {
+  console.log(" 1222", props);
+
+  if (props.options != null) inputRef.value = useCurrencyInput(props.options);
+});
+</script>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 77f132a3d..583812fe2 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -271,11 +271,13 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="salary"
+                @update:model-value="salary.toLocaleString('en-US')"
                 :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
               />
+              <CurrencyInput v-model="salary" :options="{ currency: 'EUR' }" />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
@@ -364,6 +366,7 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/modules/06_retirement/components/CurrencyInput.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -477,6 +480,7 @@ const getData = async () => {
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
       responseData.value.reason = data.reason ?? "";
       responseData.value.salary = data.salary !== null ? data.salary : 0;
+
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
       responseData.value.fullname = `${data.firstName ?? "-"} ${