Merge pull request #638 from AOEpeople/feature/272351_money-input

Add automated money formatting

Author: hacksch

src/Resources/src/components/misc/MoneyInput.vue

@@ -1,36 +1,57 @@
 <template>
   <input
-    v-model="value"
-    type="number"
+    v-model="displayValue"
+    type="text"
+    inputmode="decimal"
     required
-    min="0.00"
-    step=".01"
     class="h-[46px] rounded-full border-2 border-solid border-[#CAD6E1] bg-white text-center"
-    @focus="(e) => selectAllAndPlaceCursor(e.target as HTMLInputElement)"
+    @input="onInput"
+    @focus="onFocus"
+    @blur="onBlur"
   />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
   modelValue: number;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
+const isFocused = ref(false);
+const rawValue = ref(props.modelValue.toString());
+const displayValue = computed(() => (isFocused.value ? rawValue.value : formatMoney(props.modelValue)));
 
-const value = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', parseFloat(value.toFixed(2)));
+function onInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value;
+  rawValue.value = value;
+  const parsed = parseFloat(value.replace(',', '.'));
+  if (isNaN(parsed) || parsed < 0) {
+    return;
   }
-});
+  emit('update:modelValue', round(parsed));
+}
+
+function onFocus() {
+  isFocused.value = true;
+  rawValue.value = props.modelValue.toString();
+}
+
+function onBlur() {
+  isFocused.value = false;
+  rawValue.value = formatMoney(props.modelValue);
+}
+
+function round(value: number) {
+  return Math.round(value * 100) / 100;
+}
 
-function selectAllAndPlaceCursor(element: HTMLInputElement) {
-  element.select();
-  element.focus();
+function formatMoney(value: number) {
+  return value.toLocaleString('de-DE', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
 }
 </script>
 

src/Resources/tests/unit/misc/MoneyInput.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect} from 'vitest';
+import MoneyInput from '../../../src/components/misc/MoneyInput.vue';
+import {mount} from '@vue/test-utils';
+describe('Test MoneyInput', () => {
+    it('should input number and convert to money', async () => {
+        const wrapper = mount(MoneyInput, {
+            props: {
+                modelValue: 1234.567,
+            },
+        });
+
+        const input = wrapper.get('input');
+
+        expect((input.element as HTMLInputElement).value).toBe('1.234,57');
+
+        await input.trigger('focus');
+        expect((input.element as HTMLInputElement).value).toBe('1234.567');
+
+        await input.trigger('blur');
+        expect((input.element as HTMLInputElement).value).toBe('1.234,57');
+    });
+
+    it('should input number with 30 cents and convert to money', async () => {
+        const wrapper = mount(MoneyInput, {
+            props: {
+                modelValue: 12.3,
+            },
+        });
+
+        const input = wrapper.get('input');
+        await input.setValue('12,3');
+
+        expect((input.element as HTMLInputElement).value).toBe('12,3');
+
+        await input.trigger('focus');
+        expect((input.element as HTMLInputElement).value).toBe('12.3');
+
+        await input.trigger('blur');
+        expect((input.element as HTMLInputElement).value).toBe('12,30');
+    });
+
+    it('should input negative number and not convert to money', async () => {
+        const wrapper = mount(MoneyInput, {
+            props: {
+                modelValue: 1234.5,
+            },
+        });
+
+        const input = wrapper.get('input');
+        await input.setValue('-1234.5');
+        expect(wrapper.emitted("update:modelValue")).toBeFalsy();
+
+        expect((input.element as HTMLInputElement).value).toBe('-1234.5');
+
+        await input.trigger('focus');
+        expect((input.element as HTMLInputElement).value).toBe('1234.5');
+
+        await input.trigger('blur');
+        expect((input.element as HTMLInputElement).value).toBe('1.234,50');
+    });
+});