From 92a63e9616b333e261a19d6b7024ed3b53afdb27 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 5 Apr 2020 11:55:34 +0200
Subject: [PATCH] :sparkles: (transaction) implementation of currency input lib

---
 src/components/TransactionCreate.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/TransactionCreate.vue b/src/components/TransactionCreate.vue
index c3b005d..a2e1a62 100644
--- a/src/components/TransactionCreate.vue
+++ b/src/components/TransactionCreate.vue
@@ -53,15 +53,15 @@
             <div class="field">
               <div class="field has-addons">
                 <p class="control is-expanded">
-                  <input
-                    type="number"
-                    class="input"
-                    v-model.number="amount"
+                  <currency-input
+                    v-model="amount"
                     placeholder="Montant"
-                    inputmode="numeric"
-                    pattern="[0-9]*"
-                    min="0"
-                    max="1000000"
+                    class="input"
+                    :currency="null"
+                    :locale="locale"
+                    :precision="2"
+                    :allow-negative="false"
+                    :value-range="{ min: 0, max: 1000000 }"
                   />
                 </p>
                 <p class="control">
@@ -228,6 +228,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
+import { CurrencyInput } from 'vue-currency-input'
 import IAccount from '@/models/IAccount'
 import ICurrency from '@/models/ICurrency'
 import ITransaction from '@/models/ITransaction'
@@ -249,6 +250,7 @@ const today: Date = new Date()
 
 @Component({
   components: {
+    'currency-input': CurrencyInput,
     'earth-map': () => import('@/components/EarthMap.vue'),
     'fab-button': () => import('@/components/FabButton.vue'),
     'transaction-split': () => import('@/components/TransactionSplit.vue'),
@@ -257,6 +259,8 @@ const today: Date = new Date()
   }
 })
 export default class TransactionCreate extends Vue {
+  @Getter
+  public locale!: string
   @Getter
   public user!: IUser | null
   @Prop({ type: Object, required: true })