From 7db177ccba705f86a02f853e259409189602f338 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 15 Feb 2024 09:43:01 +0100
Subject: [PATCH] feat: refs #6317 create VnCurrency & useValidNumber

---
 src/components/common/VnCurrency.vue          | 42 ++++++++++++-------
 src/composables/useValidNumber.js             |  3 ++
 .../Payments/CustomerPaymentsFilter.vue       |  4 --
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue  |  7 +++-
 src/pages/InvoiceIn/InvoiceInFilter.vue       | 12 +-----
 src/pages/InvoiceOut/InvoiceOutFilter.vue     |  8 +++-
 .../InvoiceOutNegativeBasesFilter.vue         |  5 ++-
 7 files changed, 48 insertions(+), 33 deletions(-)
 create mode 100644 src/composables/useValidNumber.js

diff --git a/src/components/common/VnCurrency.vue b/src/components/common/VnCurrency.vue
index 9e08f4500..a97eb196a 100644
--- a/src/components/common/VnCurrency.vue
+++ b/src/components/common/VnCurrency.vue
@@ -1,33 +1,45 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import { useValidNumber } from 'src/composables/useValidNumber';
 import VnInput from 'src/components/common/VnInput.vue';
-import { useFirstUpper } from 'src/composables/useFirstUpper';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    currency: { type: String, default: 'euro' },
+    icon: { type: Boolean, default: false },
+});
 
 const { t } = useI18n();
-const amount = ref();
+const emit = defineEmits(['update:modelValue']);
 
-const isValidNumber = (value) => /^(\d|\d+(\.)?\d+)$/.test(value);
+const amount = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emit('update:modelValue', val.replaceAll(',', '.'));
+    },
+});
 </script>
 <template>
     <VnInput
-        :label="useFirstUpper(t('amount'))"
         v-model="amount"
+        :label="useCapitalize(t('amount'))"
+        :rules="[(val) => useValidNumber(val) || !val]"
         is-outlined
-        @update:model-value="
-            (value) => {
-                if (value.includes(',')) amount.value = amount.replace(',', '.');
-            }
-        "
-        :rules="[(val) => isValidNumber(val) || !val || 'Please type a number']"
-        lazy-rules
     >
-        <template #prepend>
-            <QIcon name="euro" size="sm" />
+        <template #prepend v-if="icon">
+            <QIcon :name="currency" size="sm" />
         </template>
     </VnInput>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.q-input {
+    max-height: 44px;
+}
+</style>
 <i18n>
 es:
     amount: importe
diff --git a/src/composables/useValidNumber.js b/src/composables/useValidNumber.js
new file mode 100644
index 000000000..32b1aba04
--- /dev/null
+++ b/src/composables/useValidNumber.js
@@ -0,0 +1,3 @@
+export function useValidNumber(value) {
+    return /^(\d|\d+(\.)?\d+)$/.test(value);
+}
diff --git a/src/pages/Customer/Payments/CustomerPaymentsFilter.vue b/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
index a45bc4f8c..b49fccce0 100644
--- a/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/Payments/CustomerPaymentsFilter.vue
@@ -12,10 +12,6 @@ const props = defineProps({
         required: true,
     },
 });
-
-function isValidNumber(value) {
-    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
-}
 </script>
 
 <template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index e240e9a8c..48c166191 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -158,7 +158,12 @@ async function insert() {
                 </template>
                 <template #body-cell-amount="{ row }">
                     <QTd>
-                        <QInput v-model="row.amount" clearable clear-icon="close" />
+                        <QInput
+                            v-model="row.amount"
+                            type="number"
+                            clearable
+                            clear-icon="close"
+                        />
                     </QTd>
                 </template>
                 <template #body-cell-foreignvalue="{ row }">
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 8bf007235..ae7f6a3a5 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -8,6 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import { useCapitalize } from 'src/composables/useCapitalize';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -137,16 +138,7 @@ const suppliersRef = ref();
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
-                        :label="t('Amount')"
-                        v-model="params.amount"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="euro" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    <VnCurrency v-model="params.amount" />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-md">
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index f8a430b51..306200a93 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -57,7 +58,12 @@ function setWorkers(data) {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
+                    <VnCurrency
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        :icon="false"
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
index 3adfa1d13..5d6752d1b 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -84,10 +85,10 @@ const props = defineProps({
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnCurrency
                         v-model="params.amount"
                         :label="t('invoiceOut.negativeBases.amount')"
-                        is-outlined
+                        :icon="false"
                     />
                 </QItemSection>
             </QItem>