fix tests and lint

frontend/src/components/Contributions/ContributionForm.spec.js

@@ -47,8 +47,6 @@ describe('ContributionForm', () => {
       hours: 2,
       amount: 40,
     },
-    isThisMonth: true,
-    minimalDate: new Date('2024-01-01'),
     maxGddLastMonth: 100,
     maxGddThisMonth: 200,
   }
@@ -66,44 +64,82 @@ describe('ContributionForm', () => {
     expect(wrapper.find('.contribution-form').exists()).toBe(true)
   })
 
-  it('computes showMessage correctly', async () => {
-    expect(wrapper.vm.showMessage).toBe(false)
-
-    await wrapper.setProps({
-      maxGddThisMonth: 0,
-      maxGddLastMonth: 0,
+  describe('compute isThisMonth', () => {
+    it('return true', async () => {
+      await wrapper.setProps({
+        modelValue: { date: new Date().toISOString() }
+      })
+      expect(wrapper.vm.isThisMonth).toBe(true)  
     })
+    it('return false', async () => {
+      const now = new Date()
+      const lastMonth = new Date(now.setMonth(now.getMonth() - 1, 1))
+      await wrapper.setProps({
+        modelValue: { date: lastMonth.toISOString() }
+      })
+      expect(wrapper.vm.isThisMonth).toBe(false)  
+    })
+  })
 
-    expect(wrapper.vm.showMessage).toBe(true)
+  describe('noOpenCreations return correct translation key', () => {
+    it("if both max gdd are > 0", () => {
+      expect(wrapper.vm.noOpenCreation).toBeUndefined()
+    })
+    it('if max gdd for this month is 0, and form.date is in last month', async () => {
+      const now = new Date()
+      const lastMonth = new Date(now.setMonth(now.getMonth() - 1, 1))
+      await wrapper.setProps({
+        maxGddThisMonth: 0,
+        modelValue: { date: lastMonth.toISOString() }
+      })
+      expect(wrapper.vm.noOpenCreation).toBeUndefined()
+    })
+    it('if max gdd for last month is 0, and form.date is in this month', async () => {
+      await wrapper.setProps({
+        maxGddLastMonth: 0,
+        modelValue: { date: new Date().toISOString() }
+      })
+      expect(wrapper.vm.noOpenCreation).toBeUndefined()
+    })
+    it('if max gdd is 0 for both months', async () => {
+      await wrapper.setProps({
+        maxGddThisMonth: 0,
+        maxGddLastMonth: 0,
+      })
+      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.allMonth')  
+    })
+    it('if max gdd this month is zero and form.date is inside this month', async () => {
+      await wrapper.setProps({
+        maxGddThisMonth: 0,
+        modelValue: { date: new Date().toISOString() }
+      })
+      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.thisMonth')  
+    })
+    it('if max gdd last month is zero and form.date is inside last month', async () => {
+      const now = new Date()
+      const lastMonth = new Date(now.setMonth(now.getMonth() - 1, 1))
+      await wrapper.setProps({
+        maxGddLastMonth: 0,
+        modelValue: { date: lastMonth.toISOString() }
+      })
+      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.lastMonth')  
+    })
   })
 
   it('computes disabled correctly', async () => {
-    expect(wrapper.vm.disabled).toBe(false)
+    expect(wrapper.vm.disabled).toBe(true)
 
     await wrapper.setProps({
-      maxGddThisMonth: 30,
+      modelValue: { date: new Date().toISOString().slice(0, 10) }
     })
 
     wrapper.vm.form.amount = 100
-
-    expect(wrapper.vm.disabled).toBe(true)
-  })
-
-  it('computes validMaxGDD correctly', async () => {
-    expect(wrapper.vm.validMaxGDD).toBe(200)
-
-    await wrapper.setProps({ isThisMonth: false })
-
-    expect(wrapper.vm.validMaxGDD).toBe(100)
-  })
+    
+    expect(wrapper.vm.disabled).toBe(false)
+  })  
 
   it('updates amount when hours change', async () => {
-    const setFieldValueMock = vi.fn()
-    vi.mocked(useForm).mockReturnValue({
-      ...vi.mocked(useForm)(),
-      setFieldValue: setFieldValueMock,
-    })
-
+    
     wrapper = mount(ContributionForm, {
       props: defaultProps,
       global: {
@@ -114,9 +150,9 @@ describe('ContributionForm', () => {
     await wrapper.vm.$nextTick()
 
     // Simulate changing hours
-    wrapper.vm.updateAmount(3)
+    wrapper.vm.updateField(3, 'hours')
 
-    expect(setFieldValueMock).toHaveBeenCalledWith('amount', '60.00')
+    expect(wrapper.vm.form.amount).toBe('60.00')
   })
 
   it('emits update-contribution event on submit for existing contribution', async () => {
@@ -152,31 +188,4 @@ describe('ContributionForm', () => {
 
     expect(wrapper.emitted('set-contribution')).toBeTruthy()
   })
-
-  it('resets form on fullFormReset', () => {
-    const resetFormMock = vi.fn()
-    vi.mocked(useForm).mockReturnValue({
-      ...vi.mocked(useForm)(),
-      resetForm: resetFormMock,
-    })
-
-    wrapper = mount(ContributionForm, {
-      props: defaultProps,
-      global: {
-        stubs: ['BForm', 'BFormInput', 'BRow', 'BCol', 'BButton'],
-      },
-    })
-
-    wrapper.vm.fullFormReset()
-
-    expect(resetFormMock).toHaveBeenCalledWith({
-      values: {
-        id: null,
-        date: '',
-        memo: '',
-        hours: 0,
-        amount: '',
-      },
-    })
-  })
 })

frontend/src/components/Contributions/ContributionForm.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="contribution-form">
     <BForm
-      ref="form"
       class="form-style p-3 bg-white app-box-shadow gradido-border-radius"
       @submit.prevent="submit"
     >
@@ -16,7 +15,7 @@
         :rules="validationSchema.fields.date"
         @update:model-value="updateField"
       />
-      <div v-if="noOpenCreation" class="p-3" data-test="contribtion-message">
+      <div v-if="noOpenCreation" class="p-3" data-test="contribution-message">
         {{ noOpenCreation }}
       </div>
       <div v-else>
@@ -124,20 +123,20 @@ const validationSchema = computed(() => {
   const maxAmounts = Number(
     isThisMonth.value ? parseFloat(props.maxGddThisMonth) : parseFloat(props.maxGddLastMonth),
   )
-  const maxHours = Number(maxAmounts / 20)
+  const maxHours = parseFloat(Number(maxAmounts / 20).toFixed(2))
 
   return object({
     // The date field is required and needs to be a valid date
     // contribution date
     date: dateSchema()
-      .required('contribution.noDateSelected')
+      .required()
       .min(new Date(new Date().setMonth(new Date().getMonth() - 1, 1)).toISOString().slice(0, 10)) // min date is first day of last month
       .max(new Date().toISOString().slice(0, 10))
       .default(''), // date cannot be in the future
     memo: memoSchema,
     hours: number()
+      .required()
       .transform((value, originalValue) => (originalValue === '' ? undefined : value))
-      .required('contribution.noHours')
       .min(0.01, ({ min }) => ({ key: 'form.validation.gddCreationTime.min', values: { min } }))
       .max(maxHours, ({ max }) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
       .test('decimal-places', 'form.validation.gddCreationTime.decimal-places', (value) => {
@@ -155,10 +154,10 @@ const noOpenCreation = computed(() => {
     return t('contribution.noOpenCreation.allMonth')
   }
   if (form.date) {
-    if (props.isThisMonth && props.maxGddThisMonth <= 0) {
+    if (isThisMonth.value && props.maxGddThisMonth <= 0) {
       return t('contribution.noOpenCreation.thisMonth')
     }
-    if (!props.isThisMonth && props.maxGddLastMonth <= 0) {
+    if (!isThisMonth.value && props.maxGddLastMonth <= 0) {
       return t('contribution.noOpenCreation.lastMonth')
     }
   }
@@ -192,7 +191,7 @@ function fullFormReset() {
     date: null,
     memo: '',
     hours: '',
-    amount: null,
+    amount: undefined,
   })
 }
 </script>

frontend/src/components/Contributions/ContributionListItem.vue

@@ -48,7 +48,7 @@
         </BCol>
         <BCol cols="9" lg="3" offset="3" offset-md="0" offset-lg="0">
           <div class="small">
-            {{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
+            {{ $t('creation') }} {{ $t('(') }}{{ hours }} {{ $t('h') }}{{ $t(')') }}
           </div>
           <div v-if="status === 'DENIED' && allContribution" class="fw-bold">
             <variant-icon icon="x-circle" variant="danger" />
@@ -233,6 +233,8 @@ const username = computed(() => ({
   initials: `${props.firstName[0]}${props.lastName[0]}`,
 }))
 
+const hours = computed(() => parseFloat((props.amount / 20).toFixed(2)))
+
 watch(
   () => visible.value,
   () => {

frontend/src/components/Contributions/OpenCreationsAmount.vue

@@ -34,7 +34,7 @@
 </template>
 <script>
 function afterComma(input) {
-  return input.toFixed(2).toString()
+  return parseFloat(input.toFixed(2)).toString()
 }
 export default {
   name: 'OpenCreationsAmount',

frontend/src/components/Inputs/InputTextarea.spec.js

@@ -8,6 +8,12 @@ vi.mock('vee-validate', () => ({
   useField: vi.fn(),
 }))
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key) => key,
+  }),
+}))
+
 describe('InputTextarea', () => {
   let wrapper
 

frontend/src/components/Inputs/InputTextarea.vue

@@ -26,7 +26,7 @@
 import { computed } from 'vue'
 import { useField } from 'vee-validate'
 import { useI18n } from 'vue-i18n'
-import { isLanguageKey } from '@/validationSchemas'
+import { translateYupErrorString } from '@/validationSchemas'
 
 const props = defineProps({
   rules: {
@@ -53,16 +53,7 @@ const props = defineProps({
 
 const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
 const { t } = useI18n()
-const translatedErrorString = computed(() => {
-  // console.log(errorMessage)
-  if (typeof errorMessage.value === 'object') {
-    return t(errorMessage.value.key, errorMessage.value.values)
-  } else if (isLanguageKey(errorMessage.value)) {
-    return t(errorMessage.value)
-  } else {
-    return errorMessage
-  }
-})
+const translatedErrorString = computed(() => translateYupErrorString(errorMessage, t))
 const labelFor = computed(() => `${props.name}-input-field`)
 </script>
 

frontend/src/locales/de.json

@@ -76,8 +76,6 @@
       "allContributions": "Es wurden noch keine Beiträge eingereicht.",
       "myContributions": "Du hast noch keine Beiträge eingereicht."
     },
-    "noDateSelected": "Wähle irgendein Datum im Monat",
-    "noHours": "Bitte trage deine Stunden ein",
     "noOpenCreation": {
       "allMonth": "Für alle beiden Monate ist dein Schöpfungslimit erreicht. Den Nächsten Monat kannst du wieder 1000 GDD Schöpfen.",
       "lastMonth": "Für den ausgewählten Monat ist das Schöpfungslimit erreicht.",
@@ -188,7 +186,7 @@
     "validation": {
       "gddCreationTime": {
         "min": "Die Stunden sollten mindestens {min} groß sein",
-        "max": "Die Stunden sollten höchsten {max} groß sein",
+        "max": "Die Stunden sollten höchstens {max} groß sein",
         "decimal-places": "Die Stunden sollten maximal zwei Nachkommastellen enthalten"
       },
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",

frontend/src/locales/en.json

@@ -76,8 +76,6 @@
       "allContributions": "No contributions have been submitted yet.",
       "myContributions": "You have not submitted any entries yet."
     },
-    "noDateSelected": "Choose any date in the month",
-    "noHours": "Please enter your hours",
     "noOpenCreation": {
       "allMonth": "For all two months your creation limit is reached. The next month you can create 1000 GDD again.",
       "lastMonth": "The creation limit is reached for the selected month.",
@@ -186,7 +184,11 @@
     "username": "Username",
     "username-placeholder": "Choose your username",
     "validation": {
-      "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
+      "gddCreationTime": {
+        "min": "The hours should be at least {min} in size",
+        "max": "The hours should be no larger than {max}",
+        "decimal-places": "The hours should contain a maximum of two decimal places"
+      },
       "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
       "is-not": "You cannot send Gradidos to yourself",
       "memo": {

frontend/src/pages/Community.vue

@@ -90,7 +90,7 @@ const contributionCount = ref(0)
 const contributionCountAll = ref(0)
 const form = ref({
   id: null,
-  date: null,
+  date: undefined,
   memo: '',
   hours: '',
   amount: 20,
@@ -115,7 +115,7 @@ const maxForMonths = computed(() => {
         creation.year === originalDate.getFullYear() &&
         creation.month === originalDate.getMonth()
       ) {
-        return parseFloat(creation.amount) + amountToAdd
+        return parseFloat(creation.amount) + amountToAdd.value
       }
       return parseFloat(creation.amount)
     })