Merge pull request #647 from AOEpeople/feature/272818_balancing-an-account

Balancing an account to the cent

Author: hacksch

src/Resources/src/components/balance/TransactionPanel.vue

@@ -11,7 +11,7 @@
     class="w-[300px] p-2 text-center align-middle sm:w-[420px]"
   >
     <div class="mb-8 flex justify-center gap-1">
-      <h5 class="m-0 self-center text-[14px] text-black sm:text-[18px]">{{ t('balance.amount') }}: €</h5>
+      <h5 class="m-0 self-center text-[14px] text-black sm:text-[18px]">{{ t('balance.amount') }}:</h5>
       <MoneyInput v-model="amountFieldValue" />
     </div>
     <div

src/Resources/src/components/costs/CashPaymentPanel.vue

@@ -1,32 +1,27 @@
 <template>
   <form
-    class="w-[300px] p-4 sm:w-[400px]"
+    class="flex w-[300px] flex-col p-4 sm:w-[400px]"
     @submit.prevent="onSubmit"
   >
     <h3 class="w-full text-center">
       {{ t('costs.payment').replace('#name#', getFullNameByUser(username)) }}
     </h3>
-    <InputLabel
-      v-model="amount"
-      :type="'number'"
-      :min="1"
-      :required="true"
-    />
+    <MoneyInput v-model="amount" />
     <SubmitButton />
   </form>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useCosts } from '@/stores/costsStore';
-import InputLabel from '../misc/InputLabel.vue';
 import { ref } from 'vue';
 import SubmitButton from '../misc/SubmitButton.vue';
+import MoneyInput from '@/components/misc/MoneyInput.vue';
 
 const { t } = useI18n();
 const { sendCashPayment, getFullNameByUser } = useCosts();
 
-const amount = ref('1');
+const amount = ref(0);
 
 const props = defineProps<{
   username: string;
@@ -35,7 +30,7 @@ const props = defineProps<{
 const emit = defineEmits(['closePanel']);
 
 async function onSubmit() {
-  const parsedAmount = parseFloat(amount.value);
+  const parsedAmount = amount.value;
   if (parsedAmount > 0) {
     await sendCashPayment(props.username, parsedAmount);
   }

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

@@ -13,11 +13,13 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
   modelValue: number;
 }>();
 
+const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
 const isFocused = ref(false);
 const rawValue = ref(props.modelValue.toString());
@@ -48,7 +50,9 @@ function round(value: number) {
 }
 
 function formatMoney(value: number) {
-  return value.toLocaleString('de-DE', {
+  return value.toLocaleString(t('languageCode'), {
+    style: 'currency',
+    currency: 'EUR',
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
   });

src/Resources/src/locales/de.json

@@ -1,4 +1,5 @@
 {
+  "languageCode": "de-DE",
   "Friday": "Freitag",
   "Monday": "Montag",
   "Saturday": "Samstag",

src/Resources/src/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "languageCode": "en-US",
   "Friday": "Friday",
   "Monday": "Monday",
   "Saturday": "Saturday",

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

@@ -1,6 +1,16 @@
-import { describe, it, expect} from 'vitest';
+import { describe, it, expect, vi} from 'vitest';
 import MoneyInput from '../../../src/components/misc/MoneyInput.vue';
 import {mount} from '@vue/test-utils';
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key: string) => {
+            if (key === 'languageCode') return 'de-DE';
+            return key;
+        },
+    }),
+}));
+
 describe('Test MoneyInput', () => {
     it('should input number and convert to money', async () => {
         const wrapper = mount(MoneyInput, {
@@ -11,13 +21,13 @@ describe('Test MoneyInput', () => {
 
         const input = wrapper.get('input');
 
-        expect((input.element as HTMLInputElement).value).toBe('1.234,57');
+        expect((input.element as HTMLInputElement).value).toBe('1.234,57\u00A0€');
 
         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');
+        expect((input.element as HTMLInputElement).value).toBe('1.234,57\u00A0€');
     });
 
     it('should input number with 30 cents and convert to money', async () => {
@@ -36,7 +46,7 @@ describe('Test MoneyInput', () => {
         expect((input.element as HTMLInputElement).value).toBe('12.3');
 
         await input.trigger('blur');
-        expect((input.element as HTMLInputElement).value).toBe('12,30');
+        expect((input.element as HTMLInputElement).value).toBe('12,30\u00A0€');
     });
 
     it('should input negative number and not convert to money', async () => {
@@ -56,6 +66,6 @@ describe('Test MoneyInput', () => {
         expect((input.element as HTMLInputElement).value).toBe('1234.5');
 
         await input.trigger('blur');
-        expect((input.element as HTMLInputElement).value).toBe('1.234,50');
+        expect((input.element as HTMLInputElement).value).toBe('1.234,50\u00A0€');
     });
 });