From 52414789cdb80ad18f84dc383a0f6e7e56fe106f Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Tue, 4 Feb 2025 12:51:06 +0100
Subject: [PATCH 01/15] new approach for validation

---
 frontend/package.json                         |  4 +-
 .../Contributions/ContributionForm.vue        | 63 +++++++++----------
 frontend/src/components/Inputs/InputHour.vue  |  5 +-
 .../src/components/Inputs/ValidatedInput.vue  | 63 +++++++++++++++++++
 frontend/src/pages/Community.vue              |  2 +-
 frontend/src/validationSchemas.js             | 15 +++++
 frontend/yarn.lock                            | 21 ++++---
 7 files changed, 125 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/components/Inputs/ValidatedInput.vue
 create mode 100644 frontend/src/validationSchemas.js

diff --git a/frontend/package.json b/frontend/package.json
index 17dd58803..96c2e99fc 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,7 @@
     "@types/leaflet": "^1.9.12",
     "@vee-validate/i18n": "^4.14.7",
     "@vee-validate/rules": "^4.14.1",
-    "@vee-validate/yup": "^4.14.1",
+    "@vee-validate/yup": "^4.15.0",
     "@vitejs/plugin-vue": "5.1.4",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/apollo-composable": "^4.0.2",
@@ -68,7 +68,7 @@
     "vue-timer-hook": "^1.0.84",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0",
-    "yup": "^1.4.0"
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@apollo/client": "^3.10.8",
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 5612ae14b..3098a4dd1 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -5,26 +5,18 @@
       class="form-style p-3 bg-white app-box-shadow gradido-border-radius"
       @submit.prevent="submit"
     >
-      <label>{{ $t('contribution.selectDate') }}</label>
-      <BFormInput
+      <ValidatedInput
         id="contribution-date"
-        :model-value="date"
+        :model-value="formValues.date"
+        name="date"
         :state="dataFieldMeta.valid"
-        :locale="$i18n.locale"
-        :max="getMaximalDate"
-        :min="minimalDate.toISOString().slice(0, 10)"
-        class="mb-4 bg-248"
-        reset-value=""
-        :label-no-date-selected="$t('contribution.noDateSelected')"
-        required
+        :label="$t('contribution.selectDate')"
         :no-flip="true"
+        class="mb-4 bg-248"
         type="date"
-        @update:model-value="handleDateChange"
-      >
-        <template #nav-prev-year><span></span></template>
-        <template #nav-next-year><span></span></template>
-      </BFormInput>
-
+        :schema-description="schemaDescription.fields.date"
+        @update:model-value="updateField"
+      />
       <div v-if="showMessage" class="p-3" data-test="contribtion-message">
         {{ noOpenCreation }}
       </div>
@@ -39,12 +31,12 @@
         <input-hour
           name="hours"
           :label="$t('form.hours')"
-          placeholder="0.25"
+          placeholder="0.01"
           :rules="{
             required: true,
-            min: 0.25,
+            // decimal: 2,
+            min: 0.01,
             max: validMaxTime,
-            gddCreationTime: { min: 0.25, max: validMaxTime },
           }"
           :valid-max-time="validMaxTime"
         />
@@ -88,12 +80,14 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import InputHour from '@/components/Inputs/InputHour'
 import InputAmount from '@/components/Inputs/InputAmount'
 import InputTextarea from '@/components/Inputs/InputTextarea'
-import { useField, useForm } from 'vee-validate'
+import ValidatedInput from '@/components/Inputs/ValidatedInput.vue'
+import { createContributionFormValidation } from '@/validationSchemas'
+import { useForm, useField } from 'vee-validate'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -109,11 +103,14 @@ const { t } = useI18n()
 
 const form = ref({ ...props.modelValue })
 
+const validationSchema = createContributionFormValidation(t)
+const schemaDescription = validationSchema.describe()
+// console.log(schemaDescription)
+
 const {
   values: formValues,
   meta: formMeta,
   resetForm,
-  defineField,
   setFieldValue,
 } = useForm({
   initialValues: {
@@ -122,15 +119,15 @@ const {
     hours: props.modelValue.hours,
     amount: props.modelValue.amount,
   },
+  validationSchema
 })
 
-const [date, dateProps] = defineField('date')
+const { meta: dataFieldMeta } = useField('date')
 
-const { meta: dataFieldMeta } = useField('date', 'required')
-
-const handleDateChange = (newDate) => {
-  date.value = newDate
-  emit('update:model-value', { ...props.modelValue, date: newDate })
+const updateField = (newValue, name) => {
+  if(typeof name === 'string' && name.length) {
+    setFieldValue(name, newValue)
+  }
 }
 
 const showMessage = computed(() => {
@@ -146,8 +143,8 @@ const showMessage = computed(() => {
 const disabled = computed(() => {
   return (
     !formMeta.value.valid ||
-    (props.isThisMonth && parseInt(form.value.amount) > parseInt(props.maxGddThisMonth)) ||
-    (!props.isThisMonth && parseInt(form.value.amount) > parseInt(props.maxGddLastMonth))
+    (props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddThisMonth)) ||
+    (!props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddLastMonth))
   )
 })
 
@@ -172,15 +169,11 @@ const noOpenCreation = computed(() => {
   return ''
 })
 
-const getMaximalDate = computed(() => {
-  return new Date().toISOString().slice(0, 10)
-})
-
 watch(
   () => formValues.hours,
   () => {
     updateAmount(formValues.hours)
-  },
+  }
 )
 
 function updateAmount(hours) {
diff --git a/frontend/src/components/Inputs/InputHour.vue b/frontend/src/components/Inputs/InputHour.vue
index bb874ff93..132fbc2ad 100644
--- a/frontend/src/components/Inputs/InputHour.vue
+++ b/frontend/src/components/Inputs/InputHour.vue
@@ -3,16 +3,15 @@
     <BFormGroup :label="label" :label-for="labelFor">
       <BFormInput
         :id="labelFor"
-        :model-value="currentValue"
+        v-model="currentValue"
         :name="name"
         :placeholder="placeholder"
         type="number"
         :state="meta.valid"
-        step="0.25"
+        step="0.01"
         min="0"
         :max="validMaxTime"
         class="bg-248"
-        @update:model-value="currentValue = $event"
       />
       <BFormInvalidFeedback v-if="errorMessage">
         {{ errorMessage }}
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
new file mode 100644
index 000000000..305f4b8f3
--- /dev/null
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -0,0 +1,63 @@
+<template>
+  <div :class="wrapperClassName">
+    <BFormGroup :label="label" :label-for="labelFor">
+      <BFormInput
+        v-bind="$attrs"
+        :min="minValue"
+        :max="maxValue"
+        :model-value="modelValue"
+        :reset-value="props.schemaDescription.default"
+        :locale="$i18n.locale"
+        :required="!props.schemaDescription.optional"
+        @input="updateValue($event.target.value)"
+      />
+      <BFormInvalidFeedback v-if="errorMessage">
+        {{ props.errorMessage }}
+      </BFormInvalidFeedback>
+    </BFormGroup>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  errorMessage: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  schemaDescription: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits()
+const updateValue = (newValue) => emit('update:modelValue', newValue, props.name)
+
+// extract additional parameter like min and max from schema
+const getDateOnly = (rules, name) => rules.find(test => test.name === name)?.params[name]
+
+const rules = props.schemaDescription.tests
+const minValue = getDateOnly(rules, 'min')
+const maxValue = getDateOnly(rules, 'max')
+
+const wrapperClassName = computed(() => `input-${props.name}`)
+const labelFor = computed(() => `${props.name}-input-field`)
+</script>
\ No newline at end of file
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 6ab7d9875..e728ae6ab 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -94,7 +94,7 @@ const form = ref({
   id: null,
   date: '',
   memo: '',
-  hours: 0,
+  hours: 0.0,
   amount: '',
 })
 const originalContributionDate = ref('')
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
new file mode 100644
index 000000000..6aa614f67
--- /dev/null
+++ b/frontend/src/validationSchemas.js
@@ -0,0 +1,15 @@
+import {object, string, date } from 'yup'
+
+export const createContributionFormValidation = (t) => {
+  return object({
+    // The date field is required and needs to be a valid date
+    // contribution date
+    date: 
+      date()
+      .required(t('contribution.noDateSelected'))
+      .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: string().required(t('')).min(5).max(255)
+  })
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7eb244d40..4ebc33d80 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1657,14 +1657,13 @@
   dependencies:
     vee-validate "4.14.7"
 
-"@vee-validate/yup@^4.14.1":
-  version "4.14.7"
-  resolved "https://registry.yarnpkg.com/@vee-validate/yup/-/yup-4.14.7.tgz#a029151394ae4fbc7a038dbb49acc86f2ba78ddc"
-  integrity sha512-sMLkSXbVWIFK0BE8gEp2Gcdd3aqpTggBjbkrYmcdgyHBeYoPmhBHhUpkXDFhmsckie2xv6lNTicGO5oJt71N1Q==
+"@vee-validate/yup@^4.15.0":
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/@vee-validate/yup/-/yup-4.15.0.tgz#409f9b57414fadd5b86bc6ada18cd51a7ccd121c"
+  integrity sha512-paK2ZdxZJRrUGwqaqf7KMNC+n5C7UGs7DofK7wZCza/zKT/QtFSxVYgopGoYYrbAfd6DpVmNpf/ouBuRdPBthA==
   dependencies:
     type-fest "^4.8.3"
-    vee-validate "4.14.7"
-    yup "^1.3.2"
+    vee-validate "4.15.0"
 
 "@vitejs/plugin-vue@5.1.4":
   version "5.1.4"
@@ -7133,6 +7132,14 @@ vee-validate@4.14.7, vee-validate@^4.13.2:
     "@vue/devtools-api" "^7.5.2"
     type-fest "^4.8.3"
 
+vee-validate@4.15.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-4.15.0.tgz#eb77a9c867669d34abbc33ca5e16f2a991eb7ad5"
+  integrity sha512-PGJh1QCFwCBjbHu5aN6vB8macYVWrajbDvgo1Y/8fz9n/RVIkLmZCJDpUgu7+mUmCOPMxeyq7vXUOhbwAqdXcA==
+  dependencies:
+    "@vue/devtools-api" "^7.5.2"
+    type-fest "^4.8.3"
+
 vite-node@2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.8.tgz#9495ca17652f6f7f95ca7c4b568a235e0c8dbac5"
@@ -7518,7 +7525,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yup@^1.3.2, yup@^1.4.0:
+yup@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/yup/-/yup-1.6.1.tgz#8defcff9daaf9feac178029c0e13b616563ada4b"
   integrity sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==

From 851db7e8c5f0e8f1f2ae6a02cbec83e08a647046 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Tue, 4 Feb 2025 13:02:10 +0100
Subject: [PATCH 02/15] lint fix

---
 .../Contributions/ContributionForm.vue        |  6 +++---
 .../src/components/Inputs/ValidatedInput.vue  | 21 +++++++------------
 frontend/src/validationSchemas.js             | 11 +++++-----
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 3098a4dd1..5c00cd54a 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -119,13 +119,13 @@ const {
     hours: props.modelValue.hours,
     amount: props.modelValue.amount,
   },
-  validationSchema
+  validationSchema,
 })
 
 const { meta: dataFieldMeta } = useField('date')
 
 const updateField = (newValue, name) => {
-  if(typeof name === 'string' && name.length) {
+  if (typeof name === 'string' && name.length) {
     setFieldValue(name, newValue)
   }
 }
@@ -173,7 +173,7 @@ watch(
   () => formValues.hours,
   () => {
     updateAmount(formValues.hours)
-  }
+  },
 )
 
 function updateAmount(hours) {
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 305f4b8f3..9be51b9c1 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -19,10 +19,10 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, defineOptions } from 'vue'
 
 defineOptions({
-  inheritAttrs: false
+  inheritAttrs: false,
 })
 
 const props = defineProps({
@@ -38,26 +38,21 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  name: {
-    type: String,
-    required: true,
-  },
+  name: [String, Number],
   schemaDescription: {
     type: Object,
     required: true,
   },
 })
 
-const emit = defineEmits()
+const emit = defineEmits('update:modelValue')
 const updateValue = (newValue) => emit('update:modelValue', newValue, props.name)
 
 // extract additional parameter like min and max from schema
-const getDateOnly = (rules, name) => rules.find(test => test.name === name)?.params[name]
-
-const rules = props.schemaDescription.tests
-const minValue = getDateOnly(rules, 'min')
-const maxValue = getDateOnly(rules, 'max')
+const getDateOnly = (rules, name) => rules.find((test) => test.name === name)?.params[name]
 
+const minValue = computed(() => getDateOnly(props.schemaDescription.tests, 'min'))
+const maxValue = computed(() => getDateOnly(props.schemaDescription.tests, 'max'))
 const wrapperClassName = computed(() => `input-${props.name}`)
 const labelFor = computed(() => `${props.name}-input-field`)
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
index 6aa614f67..ae09a16a8 100644
--- a/frontend/src/validationSchemas.js
+++ b/frontend/src/validationSchemas.js
@@ -1,15 +1,14 @@
-import {object, string, date } from 'yup'
+import { object, string, date } from 'yup'
 
 export const createContributionFormValidation = (t) => {
   return object({
     // The date field is required and needs to be a valid date
     // contribution date
-    date: 
-      date()
+    date: date()
       .required(t('contribution.noDateSelected'))
-      .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))
+      .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: string().required(t('')).min(5).max(255)
+    memo: string().required(t('')).min(5).max(255),
   })
 }

From 6bbb97048ea4cf06e0be547e8ac5e6a960de4f90 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 6 Feb 2025 16:18:32 +0100
Subject: [PATCH 03/15] try modularizing validated form input(s)

---
 .../Contributions/ContributionForm.vue        | 102 +++++++++---------
 .../src/components/Inputs/InputTextarea.vue   |  16 ++-
 .../src/components/Inputs/LabeledInput.vue    |  32 ++++++
 .../src/components/Inputs/ValidatedInput.vue  |  87 ++++++++-------
 frontend/src/locales/de.json                  |  11 +-
 frontend/src/locales/en.json                  |   5 +
 frontend/src/validationSchemas.js             |  22 ++--
 7 files changed, 174 insertions(+), 101 deletions(-)
 create mode 100644 frontend/src/components/Inputs/LabeledInput.vue

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 5c00cd54a..84eb7f31c 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -9,12 +9,11 @@
         id="contribution-date"
         :model-value="formValues.date"
         name="date"
-        :state="dataFieldMeta.valid"
         :label="$t('contribution.selectDate')"
         :no-flip="true"
         class="mb-4 bg-248"
         type="date"
-        :schema-description="schemaDescription.fields.date"
+        :rules="validationSchema"
         @update:model-value="updateField"
       />
       <div v-if="showMessage" class="p-3" data-test="contribtion-message">
@@ -23,33 +22,33 @@
       <div v-else>
         <input-textarea
           id="contribution-memo"
+          :model-value="formValues.memo"
           name="memo"
           :label="$t('contribution.activity')"
           :placeholder="$t('contribution.yourActivity')"
-          :rules="{ required: true, min: 5, max: 255 }"
+          :rules="validationSchema"
+          @update:model-value="updateField"
         />
-        <input-hour
+        <ValidatedInput
           name="hours"
+          :model-value="formValues.hours"
           :label="$t('form.hours')"
           placeholder="0.01"
-          :rules="{
-            required: true,
-            // decimal: 2,
-            min: 0.01,
-            max: validMaxTime,
-          }"
-          :valid-max-time="validMaxTime"
+          step="0.01"
+          type="number"
+          :rules="validationSchema"
+          @update:model-value="updateField"
         />
-        <input-amount
+        <LabeledInput
           id="contribution-amount"
           class="mt-3"
           name="amount"
           :label="$t('form.amount')"
           placeholder="20"
-          :rules="{ required: true, gddSendAmount: { min: 20, max: validMaxGDD } }"
-          typ="ContributionForm"
+          readonly
+          type="text"
+          trim
         />
-
         <BRow class="mt-5">
           <BCol>
             <BButton
@@ -80,14 +79,14 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import InputHour from '@/components/Inputs/InputHour'
-import InputAmount from '@/components/Inputs/InputAmount'
 import InputTextarea from '@/components/Inputs/InputTextarea'
-import ValidatedInput from '@/components/Inputs/ValidatedInput.vue'
-import { createContributionFormValidation } from '@/validationSchemas'
-import { useForm, useField } from 'vee-validate'
+import ValidatedInput from '@/components/Inputs/ValidatedInput'
+import LabeledInput from '@/components/Inputs/LabeledInput'
+import { memo } from '@/validationSchemas'
+import { useForm } from 'vee-validate'
+import { object, date, number } from 'yup'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -103,10 +102,34 @@ const { t } = useI18n()
 
 const form = ref({ ...props.modelValue })
 
-const validationSchema = createContributionFormValidation(t)
-const schemaDescription = validationSchema.describe()
-// console.log(schemaDescription)
+const maxHours = computed(() => Number(props.isThisMonth ? props.maxGddThisMonth : props.maxGddLastMonth / 20))
 
+const validationSchema = computed(() => {
+  // const maxGDD = Number(props.isThisMonth ? props.maxGddThisMonth : props.maxGddLastMonth)
+  // const maxHours = Number(maxGDD / 20)
+  console.log('compute validationSchema', { maxHours })
+  return object({
+    // The date field is required and needs to be a valid date
+    // contribution date
+    date: date()
+      .required('contribution.noDateSelected')
+      .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,
+    hours: number().required('contribution.noHours')
+      .min(0.01, ({min}) => ({ key: 'form.validation.gddCreationTime.min', values: { min } }))
+      .max(maxHours.value, ({max}) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
+      .test(
+        'decimal-places',
+        'form.validation.gddCreationTime.decimal-places',
+        (value) => {
+          if (value === undefined || value === null) return true
+          return /^\d+(\.\d{0,2})?$/.test(value.toString())
+        }
+      ),
+  })  
+})
 const {
   values: formValues,
   meta: formMeta,
@@ -119,15 +142,16 @@ const {
     hours: props.modelValue.hours,
     amount: props.modelValue.amount,
   },
-  validationSchema,
+  validationSchema: validationSchema.value,
 })
 
-const { meta: dataFieldMeta } = useField('date')
-
 const updateField = (newValue, name) => {
   if (typeof name === 'string' && name.length) {
     setFieldValue(name, newValue)
   }
+  if (name === 'hours') {
+    setFieldValue('amount', (newValue * 20).toFixed(2).toString())
+  }
 }
 
 const showMessage = computed(() => {
@@ -148,14 +172,6 @@ const disabled = computed(() => {
   )
 })
 
-const validMaxGDD = computed(() => {
-  return Number(props.isThisMonth ? props.maxGddThisMonth : props.maxGddLastMonth)
-})
-
-const validMaxTime = computed(() => {
-  return Number(validMaxGDD.value / 20)
-})
-
 const noOpenCreation = computed(() => {
   if (props.maxGddThisMonth <= 0 && props.maxGddLastMonth <= 0) {
     return t('contribution.noOpenCreation.allMonth')
@@ -169,17 +185,6 @@ const noOpenCreation = computed(() => {
   return ''
 })
 
-watch(
-  () => formValues.hours,
-  () => {
-    updateAmount(formValues.hours)
-  },
-)
-
-function updateAmount(hours) {
-  setFieldValue('amount', (hours * 20).toFixed(2).toString())
-}
-
 function submit() {
   const dataToSave = { ...formValues }
   let emitOption = 'set-contribution'
@@ -194,12 +199,11 @@ function submit() {
 function fullFormReset() {
   resetForm({
     values: {
-      id: null,
       date: '',
       memo: '',
-      hours: 0,
+      hours: 0.0,
       amount: '',
-    },
+    }
   })
 }
 </script>
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index 2d1d2a12e..41e649265 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/frontend/src/components/Inputs/InputTextarea.vue
@@ -16,7 +16,7 @@
         @update:modelValue="currentValue = $event"
       />
       <BFormInvalidFeedback v-if="errorMessage">
-        {{ errorMessage }}
+        {{ translatedErrorString }}
       </BFormInvalidFeedback>
     </BFormGroup>
   </div>
@@ -25,6 +25,8 @@
 <script setup>
 import { computed } from 'vue'
 import { useField } from 'vee-validate'
+import { useI18n } from 'vue-i18n'
+import { isLanguageKey } from '@/validationSchemas'
 
 const props = defineProps({
   rules: {
@@ -50,7 +52,17 @@ 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 labelFor = computed(() => `${props.name}-input-field`)
 </script>
 
diff --git a/frontend/src/components/Inputs/LabeledInput.vue b/frontend/src/components/Inputs/LabeledInput.vue
new file mode 100644
index 000000000..7fd4a9efe
--- /dev/null
+++ b/frontend/src/components/Inputs/LabeledInput.vue
@@ -0,0 +1,32 @@
+<template>
+  <div :class="wrapperClassName">
+    <BFormGroup :label="label" :label-for="labelFor">
+      <BFormInput
+        v-bind="$attrs"
+      />
+      <slot></slot>
+    </BFormGroup>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineOptions } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+})
+
+const wrapperClassName = computed(() => `input-${props.name}`)
+const labelFor = computed(() => `${props.name}-input-field`)
+</script>
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 9be51b9c1..50d869529 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -1,58 +1,73 @@
 <template>
-  <div :class="wrapperClassName">
-    <BFormGroup :label="label" :label-for="labelFor">
-      <BFormInput
-        v-bind="$attrs"
-        :min="minValue"
-        :max="maxValue"
-        :model-value="modelValue"
-        :reset-value="props.schemaDescription.default"
-        :locale="$i18n.locale"
-        :required="!props.schemaDescription.optional"
-        @input="updateValue($event.target.value)"
-      />
-      <BFormInvalidFeedback v-if="errorMessage">
-        {{ props.errorMessage }}
-      </BFormInvalidFeedback>
-    </BFormGroup>
-  </div>
+  <LabeledInput 
+    v-bind="$attrs"
+    :min="minValue"
+    :max="maxValue"
+    :model-value="currentValue"
+    :reset-value="resetValue"
+    :locale="$i18n.locale"
+    :required="!isOptional"
+    :label="props.label"
+    :name="props.name"
+    :state="meta.valid"
+    @input="updateValue($event.target.value)">
+    <BFormInvalidFeedback v-if="errorMessage">
+        {{ $t(translatedErrorString) }}
+    </BFormInvalidFeedback>
+  </LabeledInput>
 </template>
 
 <script setup>
-import { computed, defineOptions } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
+import { computed } from 'vue'
+import LabeledInput from './LabeledInput'
+import { useI18n } from 'vue-i18n'
+import { isLanguageKey } from '@/validationSchemas'
+import { useField } from 'vee-validate'
 
 const props = defineProps({
-  errorMessage: {
-    type: String,
-    required: false,
-  },
+  errorMessage: [String, Object],
   label: {
     type: String,
     required: true,
   },
-  modelValue: {
+  modelValue: [String, Number],
+  name: {
     type: String,
     required: true,
   },
-  name: [String, Number],
-  schemaDescription: {
+  rules: {
     type: Object,
-    required: true,
+    default: () => ({}),
   },
 })
 
-const emit = defineEmits('update:modelValue')
+const { t } = useI18n()
+const translatedErrorString = computed(() => {
+  const error = errorMessage.value
+  const type = typeof error
+  console.log(error)
+  if (type === 'object') {
+    return t(error.key, error.values)
+  } else if (type === 'string' && error.length > 0 && isLanguageKey(error)) {
+    return t(error)
+  } else {
+    return error
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
 const updateValue = (newValue) => emit('update:modelValue', newValue, props.name)
 
 // extract additional parameter like min and max from schema
-const getDateOnly = (rules, name) => rules.find((test) => test.name === name)?.params[name]
+const getDateOnly = (schemaDescription, name) => schemaDescription.fields[props.name].tests.find((test) => test.name === name)?.params[name]
 
-const minValue = computed(() => getDateOnly(props.schemaDescription.tests, 'min'))
-const maxValue = computed(() => getDateOnly(props.schemaDescription.tests, 'max'))
-const wrapperClassName = computed(() => `input-${props.name}`)
-const labelFor = computed(() => `${props.name}-input-field`)
+const schemaDescription = computed(() => props.rules.describe())
+console.log(schemaDescription.value)
+const minValue = computed(() => getDateOnly(schemaDescription.value, 'min'))
+const maxValue = computed(() => getDateOnly(schemaDescription.value, 'max'))
+const resetValue = computed(() => schemaDescription.value.fields[props.name].default)
+const isOptional = computed(() => schemaDescription.value.fields[props.name].optional)
+
+const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
+console.log('max value: ', maxValue)
 </script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index dd34fbad4..0c71a5407 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -77,6 +77,7 @@
       "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.",
@@ -185,9 +186,17 @@
     "username": "Benutzername",
     "username-placeholder": "Wähle deinen Benutzernamen",
     "validation": {
-      "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
+      "gddCreationTime": {
+        "min": "Die Stunden sollten mindestens {min} groß sein",
+        "max": "Die Stunden sollten höchsten {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",
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
+      "memo": {
+        "min": "Die Tätigkeitsbeschreibung sollte mindestens {min} Zeichen lang sein",
+        "max": "Die Tätigkeitsbeschreibung sollte höchstens {max} Zeichen lang sein"
+      },
       "requiredField": "{fieldName} ist ein Pflichtfeld",
       "username-allowed-chars": "Der Nutzername darf nur aus Buchstaben (ohne Umlaute), Zahlen, Binde- oder Unterstrichen bestehen.",
       "username-hyphens": "Binde- oder Unterstriche müssen zwischen Buchstaben oder Zahlen stehen.",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 9346ea609..8804c7fe1 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -77,6 +77,7 @@
       "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.",
@@ -188,6 +189,10 @@
       "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
       "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": {
+        "min": "The job description should be at least {min} characters long",
+        "max": "The job description should not be longer than {max} characters"
+      },
       "requiredField": "The {fieldName} field is required",
       "username-allowed-chars": "The username may only contain letters, numbers, hyphens or underscores.",
       "username-hyphens": "Hyphens or underscores must be in between letters or numbers.",
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
index ae09a16a8..fe3ef901e 100644
--- a/frontend/src/validationSchemas.js
+++ b/frontend/src/validationSchemas.js
@@ -1,14 +1,10 @@
-import { object, string, date } from 'yup'
+import { string } from 'yup'
+
+// TODO: only needed for grace period, before all inputs updated for using veeValidate + yup
+export const isLanguageKey = (str) => str.match(/^(?!\.)[a-z][a-zA-Z0-9]*([.][a-z][a-zA-Z0-9]*)*(?<!\.)$/)
+
+export const memo = string()
+  .required('contribution.yourActivity')
+  .min(5, ({min}) => ({ key: 'form.validation.memo.min', values: { min } }))
+  .max(255, ({max}) => ({ key: 'form.validation.memo.max', values: { max } }))
 
-export const createContributionFormValidation = (t) => {
-  return object({
-    // The date field is required and needs to be a valid date
-    // contribution date
-    date: date()
-      .required(t('contribution.noDateSelected'))
-      .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: string().required(t('')).min(5).max(255),
-  })
-}

From a41829fe046e6d4a9d56c4dbc8e17ce4a3d9c78e Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Fri, 7 Feb 2025 08:16:07 +0100
Subject: [PATCH 04/15] rollback

---
 frontend/src/pages/Community.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index e728ae6ab..6ab7d9875 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -94,7 +94,7 @@ const form = ref({
   id: null,
   date: '',
   memo: '',
-  hours: 0.0,
+  hours: 0,
   amount: '',
 })
 const originalContributionDate = ref('')

From 4f1ea1f5ba48be0d1b6fdbe6a898f4884297c804 Mon Sep 17 00:00:00 2001
From: Einhornimmond <info@einhornimmond.de>
Date: Sat, 8 Feb 2025 13:24:09 +0100
Subject: [PATCH 05/15] change to using only yup

---
 .../Contributions/ContributionForm.vue        | 16 +++++++-
 .../src/components/Inputs/InputTextarea.vue   |  2 +-
 .../src/components/Inputs/ValidatedInput.vue  | 37 ++++++++++++++++---
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 84eb7f31c..37c7b72ec 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -99,6 +99,7 @@ const props = defineProps({
 const emit = defineEmits(['update-contribution', 'set-contribution'])
 
 const { t } = useI18n()
+let allFieldsValid = ref(false)
 
 const form = ref({ ...props.modelValue })
 
@@ -152,6 +153,17 @@ const updateField = (newValue, name) => {
   if (name === 'hours') {
     setFieldValue('amount', (newValue * 20).toFixed(2).toString())
   }
+  /*
+  validationSchema.value.validateAt(name, formValues)
+  .then(() => {
+    allFieldsValid = true
+  })
+  .catch((e) => {
+    allFieldsValid = false
+    console.log('validation error')
+    console.log(JSON.stringify(e, null, 2))
+    //errorMessage = e.message
+  })*/
 }
 
 const showMessage = computed(() => {
@@ -165,11 +177,13 @@ const showMessage = computed(() => {
 })
 
 const disabled = computed(() => {
+  return !allFieldsValid 
+  /*
   return (
     !formMeta.value.valid ||
     (props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddThisMonth)) ||
     (!props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddLastMonth))
-  )
+  )*/
 })
 
 const noOpenCreation = computed(() => {
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index 41e649265..a30a6510a 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/frontend/src/components/Inputs/InputTextarea.vue
@@ -54,7 +54,7 @@ const props = defineProps({
 const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
 const { t } = useI18n()
 const translatedErrorString = computed(() => {
-  console.log(errorMessage)
+  // console.log(errorMessage)
   if (typeof errorMessage.value === 'object') {
     return t(errorMessage.value.key, errorMessage.value.values)
   } else if (isLanguageKey(errorMessage.value)) {
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 50d869529..3e25bda6e 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -9,7 +9,7 @@
     :required="!isOptional"
     :label="props.label"
     :name="props.name"
-    :state="meta.valid"
+    :state="valid"
     @input="updateValue($event.target.value)">
     <BFormInvalidFeedback v-if="errorMessage">
         {{ $t(translatedErrorString) }}
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import LabeledInput from './LabeledInput'
 import { useI18n } from 'vue-i18n'
 import { isLanguageKey } from '@/validationSchemas'
@@ -41,11 +41,15 @@ const props = defineProps({
   },
 })
 
+let valid = ref(false)
+let errorMessage = ref('')
+let currentValue = ref(props.modelValue)
+
 const { t } = useI18n()
 const translatedErrorString = computed(() => {
   const error = errorMessage.value
   const type = typeof error
-  console.log(error)
+  // console.log(error)
   if (type === 'object') {
     return t(error.key, error.values)
   } else if (type === 'string' && error.length > 0 && isLanguageKey(error)) {
@@ -56,7 +60,28 @@ const translatedErrorString = computed(() => {
 })
 
 const emit = defineEmits(['update:modelValue'])
-const updateValue = (newValue) => emit('update:modelValue', newValue, props.name)
+const updateValue = ((newValue) => {
+  // emit('update:modelValue', newValue, props.name)
+
+  const data = new Object()
+  data[props.name] = newValue
+  
+  const result = props.rules.validateSyncAt(props.name, data)
+  console.log('result: ', JSON.stringify(result, null, 2))
+  /*
+  .then(() => {
+    valid = true
+    console.log("%s is valid, emit event", props.name)
+    emit('update:modelValue', newValue, props.name)
+  })
+  .catch((e) => {
+    valid = false
+    console.log(t(e.message))
+    errorMessage = e.message
+    console.log('max value: %o for name: %s, rules: %o', maxValue.value, props.name, props.rules)    
+  })
+*/  
+})
 
 // extract additional parameter like min and max from schema
 const getDateOnly = (schemaDescription, name) => schemaDescription.fields[props.name].tests.find((test) => test.name === name)?.params[name]
@@ -68,6 +93,6 @@ const maxValue = computed(() => getDateOnly(schemaDescription.value, 'max'))
 const resetValue = computed(() => schemaDescription.value.fields[props.name].default)
 const isOptional = computed(() => schemaDescription.value.fields[props.name].optional)
 
-const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
-console.log('max value: ', maxValue)
+// const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
+
 </script>

From 772901e073318a1c25218c07e206aa5bee075619 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Wed, 12 Feb 2025 10:46:47 +0100
Subject: [PATCH 06/15] finally a working solution

---
 .../Contributions/ContributionForm.vue        | 157 ++++++++----------
 .../src/components/Inputs/LabeledInput.vue    |  39 ++++-
 .../src/components/Inputs/ValidatedInput.vue  |  98 +++++------
 frontend/src/pages/Community.vue              |  21 +--
 frontend/src/validationSchemas.js             |  13 +-
 5 files changed, 163 insertions(+), 165 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 37c7b72ec..6b36c29fe 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -7,40 +7,42 @@
     >
       <ValidatedInput
         id="contribution-date"
-        :model-value="formValues.date"
+        :model-value="date"
         name="date"
         :label="$t('contribution.selectDate')"
         :no-flip="true"
         class="mb-4 bg-248"
         type="date"
-        :rules="validationSchema"
+        :rules="validationSchema.fields.date"
         @update:model-value="updateField"
       />
-      <div v-if="showMessage" class="p-3" data-test="contribtion-message">
+      <div v-if="noOpenCreation" class="p-3" data-test="contribtion-message">
         {{ noOpenCreation }}
       </div>
       <div v-else>
-        <input-textarea
+        <ValidatedInput
           id="contribution-memo"
-          :model-value="formValues.memo"
+          :model-value="memo"
           name="memo"
           :label="$t('contribution.activity')"
           :placeholder="$t('contribution.yourActivity')"
-          :rules="validationSchema"
+          :rules="validationSchema.fields.memo"
           @update:model-value="updateField"
+          textarea="true"
         />
         <ValidatedInput
           name="hours"
-          :model-value="formValues.hours"
+          :model-value="hours"
           :label="$t('form.hours')"
           placeholder="0.01"
           step="0.01"
           type="number"
-          :rules="validationSchema"
+          :rules="validationSchema.fields.hours"
           @update:model-value="updateField"
         />
         <LabeledInput
           id="contribution-amount"
+          :model-value="amount"
           class="mt-3"
           name="amount"
           :label="$t('form.amount')"
@@ -79,48 +81,63 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { reactive, computed, watchEffect, watch, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import InputTextarea from '@/components/Inputs/InputTextarea'
 import ValidatedInput from '@/components/Inputs/ValidatedInput'
 import LabeledInput from '@/components/Inputs/LabeledInput'
-import { memo } from '@/validationSchemas'
-import { useForm } from 'vee-validate'
-import { object, date, number } from 'yup'
+import { memo as memoSchema } from '@/validationSchemas'
+import { object, date as dateSchema, number } from 'yup'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
-  isThisMonth: { type: Boolean, required: true },
-  minimalDate: { type: Date, required: true },
   maxGddLastMonth: { type: Number, required: true },
   maxGddThisMonth: { type: Number, required: true },
 })
 
-const emit = defineEmits(['update-contribution', 'set-contribution'])
+const emit = defineEmits(['update-contribution', 'set-contribution', 'update:modelValue'])
 
 const { t } = useI18n()
-let allFieldsValid = ref(false)
 
-const form = ref({ ...props.modelValue })
+const form = reactive({ ...props.modelValue })
 
-const maxHours = computed(() => Number(props.isThisMonth ? props.maxGddThisMonth : props.maxGddLastMonth / 20))
+// update local form if in parent form changed, it is necessary because the community page will reuse this form also for editing existing
+// contributions, and it will reusing a existing instance of this component
+watch(() => props.modelValue, (newValue) => Object.assign(form, newValue))
+
+// use computed to make sure child input update if props from parent from this component change
+const amount = computed(() => (form.hours * 20).toFixed(2).toString())
+const date = computed(() => form.date)
+const hours = computed(() => form.hours)
+const memo = computed(() => form.memo)
+
+const isThisMonth = computed(() => {
+  const formDate = new Date(form.date)
+  const now = new Date()
+  return formDate.getMonth() === now.getMonth() && formDate.getFullYear() === now.getFullYear()
+});
+
+// const maxHours = computed(() => Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20))
+// const maxAmounts = computed(() => Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth)))
 
 const validationSchema = computed(() => {
-  // const maxGDD = Number(props.isThisMonth ? props.maxGddThisMonth : props.maxGddLastMonth)
-  // const maxHours = Number(maxGDD / 20)
-  console.log('compute validationSchema', { maxHours })
+  const maxHours = Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20)
+  const maxAmounts = Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth))
+
   return object({
     // The date field is required and needs to be a valid date
     // contribution date
-    date: date()
+    date: dateSchema()
       .required('contribution.noDateSelected')
       .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,
-    hours: number().required('contribution.noHours')
+    memo: memoSchema,
+    hours: number().transform((value, originalValue) => 
+        originalValue === "" ? undefined : value
+      )
+      .required('contribution.noHours')
       .min(0.01, ({min}) => ({ key: 'form.validation.gddCreationTime.min', values: { min } }))
-      .max(maxHours.value, ({max}) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
+      .max(maxHours, ({max}) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
       .test(
         'decimal-places',
         'form.validation.gddCreationTime.decimal-places',
@@ -129,78 +146,40 @@ const validationSchema = computed(() => {
           return /^\d+(\.\d{0,2})?$/.test(value.toString())
         }
       ),
-  })  
-})
-const {
-  values: formValues,
-  meta: formMeta,
-  resetForm,
-  setFieldValue,
-} = useForm({
-  initialValues: {
-    date: props.modelValue.date,
-    memo: props.modelValue.memo,
-    hours: props.modelValue.hours,
-    amount: props.modelValue.amount,
-  },
-  validationSchema: validationSchema.value,
+    amount: number().max(maxAmounts)
+  })
 })
 
 const updateField = (newValue, name) => {
   if (typeof name === 'string' && name.length) {
-    setFieldValue(name, newValue)
+    form[name] = newValue
+    if (name === 'hours') {
+      form.amount = (newValue * 20).toFixed(2).toString()
+    }
   }
-  if (name === 'hours') {
-    setFieldValue('amount', (newValue * 20).toFixed(2).toString())
-  }
-  /*
-  validationSchema.value.validateAt(name, formValues)
-  .then(() => {
-    allFieldsValid = true
-  })
-  .catch((e) => {
-    allFieldsValid = false
-    console.log('validation error')
-    console.log(JSON.stringify(e, null, 2))
-    //errorMessage = e.message
-  })*/
+  console.log('update field', { newValue, name, form, amount: amount.value })
+  emit('update:modelValue', form)  
 }
 
-const showMessage = computed(() => {
-  if (props.maxGddThisMonth <= 0 && props.maxGddLastMonth <= 0) return true
-  if (props.modelValue.date)
-    return (
-      (props.isThisMonth && props.maxGddThisMonth <= 0) ||
-      (!props.isThisMonth && props.maxGddLastMonth <= 0)
-    )
-  return false
-})
-
-const disabled = computed(() => {
-  return !allFieldsValid 
-  /*
-  return (
-    !formMeta.value.valid ||
-    (props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddThisMonth)) ||
-    (!props.isThisMonth && parseFloat(form.value.amount) > parseFloat(props.maxGddLastMonth))
-  )*/
-})
+const disabled = computed(() => !validationSchema.value.isValidSync(form))
 
 const noOpenCreation = computed(() => {
   if (props.maxGddThisMonth <= 0 && props.maxGddLastMonth <= 0) {
     return t('contribution.noOpenCreation.allMonth')
   }
-  if (props.isThisMonth && props.maxGddThisMonth <= 0) {
-    return t('contribution.noOpenCreation.thisMonth')
+  if (form.date) {
+    if (props.isThisMonth && props.maxGddThisMonth <= 0) {
+      return t('contribution.noOpenCreation.thisMonth')
+    }
+    if (!props.isThisMonth && props.maxGddLastMonth <= 0) {
+      return t('contribution.noOpenCreation.lastMonth')
+    }
   }
-  if (!props.isThisMonth && props.maxGddLastMonth <= 0) {
-    return t('contribution.noOpenCreation.lastMonth')
-  }
-  return ''
+  return undefined
 })
 
 function submit() {
-  const dataToSave = { ...formValues }
+  const dataToSave = { ...form }
   let emitOption = 'set-contribution'
   if (props.modelValue.id) {
     dataToSave.id = props.modelValue.id
@@ -211,14 +190,12 @@ function submit() {
 }
 
 function fullFormReset() {
-  resetForm({
-    values: {
-      date: '',
-      memo: '',
-      hours: 0.0,
-      amount: '',
-    }
-  })
+  form = {
+    date: '',
+    memo: '',
+    hours: 0.0,
+    amount: 0.0,
+  }
 }
 </script>
 <style>
diff --git a/frontend/src/components/Inputs/LabeledInput.vue b/frontend/src/components/Inputs/LabeledInput.vue
index 7fd4a9efe..03442160a 100644
--- a/frontend/src/components/Inputs/LabeledInput.vue
+++ b/frontend/src/components/Inputs/LabeledInput.vue
@@ -1,17 +1,25 @@
 <template>
   <div :class="wrapperClassName">
     <BFormGroup :label="label" :label-for="labelFor">
-      <BFormInput
-        v-bind="$attrs"
-      />
+      <BFormTextarea v-if="textarea" 
+        v-bind="{ ...$attrs, id: labelFor, name }"
+        v-model="model"
+        trim
+        :rows="4"
+        :max-rows="4"
+        no-resize
+        />
+      <BFormInput v-else 
+        v-bind="{ ...$attrs, id: labelFor, name }"
+        v-model="model"
+      />      
       <slot></slot>
     </BFormGroup>
   </div>
 </template>
 
 <script setup>
-import { computed, defineOptions } from 'vue'
-
+import { computed, defineOptions, watchEffect, ref, defineModel } from 'vue'
 defineOptions({
   inheritAttrs: false,
 })
@@ -25,8 +33,27 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  // modelValue: [String, Number, Date],
+  textarea: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
-const wrapperClassName = computed(() => `input-${props.name}`)
+const model = defineModel()
+// const model = ref(props.modelValue)
+/*const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})*/
+const wrapperClassName = computed(() => props.name ? `input-${props.name}` : 'input')
 const labelFor = computed(() => `${props.name}-input-field`)
+
+// const emit = defineEmits(['update:modelValue'])
+
+watchEffect(() => {
+  console.log(`${props.name}: ${props.modelValue}`)
+  // model.value = props.modelValue
+})
 </script>
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 3e25bda6e..1310585a2 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -3,96 +3,82 @@
     v-bind="$attrs"
     :min="minValue"
     :max="maxValue"
-    :model-value="currentValue"
+    :model-value="model"
     :reset-value="resetValue"
     :locale="$i18n.locale"
     :required="!isOptional"
-    :label="props.label"
-    :name="props.name"
+    :label="label"
+    :name="name"
     :state="valid"
-    @input="updateValue($event.target.value)">
+    @update:modelValue="updateValue"
+    >
     <BFormInvalidFeedback v-if="errorMessage">
-        {{ $t(translatedErrorString) }}
+        {{ errorMessage }}
     </BFormInvalidFeedback>
   </LabeledInput>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import LabeledInput from './LabeledInput'
+import { computed, ref, watchEffect, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { isLanguageKey } from '@/validationSchemas'
-import { useField } from 'vee-validate'
+import LabeledInput from './LabeledInput'
+import { translateYupErrorString } from '@/validationSchemas'
 
 const props = defineProps({
-  errorMessage: [String, Object],
   label: {
     type: String,
     required: true,
   },
-  modelValue: [String, Number],
+  modelValue: [String, Number, Date],
   name: {
     type: String,
     required: true,
   },
   rules: {
     type: Object,
-    default: () => ({}),
+    required: true,
   },
 })
+const model = ref(props.modelValue)
+let wasUpdated = false
 
-let valid = ref(false)
-let errorMessage = ref('')
-let currentValue = ref(props.modelValue)
+function updateErrorMessage() {
+  try {
+    props.rules.validateSync(model.value)
+    errorMessage.value = undefined
+  } catch(e) {
+    errorMessage.value = translateYupErrorString(e.message, t)
+  }
+}
 
 const { t } = useI18n()
-const translatedErrorString = computed(() => {
-  const error = errorMessage.value
-  const type = typeof error
-  // console.log(error)
-  if (type === 'object') {
-    return t(error.key, error.values)
-  } else if (type === 'string' && error.length > 0 && isLanguageKey(error)) {
-    return t(error)
-  } else {
-    return error
-  }
-})
+const errorMessage = ref()
+const valid = computed(() => props.rules.isValidSync(model.value))
 
 const emit = defineEmits(['update:modelValue'])
 const updateValue = ((newValue) => {
-  // emit('update:modelValue', newValue, props.name)
+  wasUpdated = true
+  model.value = newValue
+  updateErrorMessage()
+  emit('update:modelValue', newValue, props.name)  
+})
 
-  const data = new Object()
-  data[props.name] = newValue
-  
-  const result = props.rules.validateSyncAt(props.name, data)
-  console.log('result: ', JSON.stringify(result, null, 2))
-  /*
-  .then(() => {
-    valid = true
-    console.log("%s is valid, emit event", props.name)
-    emit('update:modelValue', newValue, props.name)
-  })
-  .catch((e) => {
-    valid = false
-    console.log(t(e.message))
-    errorMessage = e.message
-    console.log('max value: %o for name: %s, rules: %o', maxValue.value, props.name, props.rules)    
-  })
-*/  
+// validate on rule change, but only if updateValue was called at least one
+watch(() => props.rules, () => {
+  if(wasUpdated) {
+    updateErrorMessage()
+  }
+})
+// update model if parent change
+watch(() => props.modelValue, () => {
+  model.value = props.modelValue
 })
 
 // extract additional parameter like min and max from schema
-const getDateOnly = (schemaDescription, name) => schemaDescription.fields[props.name].tests.find((test) => test.name === name)?.params[name]
-
 const schemaDescription = computed(() => props.rules.describe())
-console.log(schemaDescription.value)
-const minValue = computed(() => getDateOnly(schemaDescription.value, 'min'))
-const maxValue = computed(() => getDateOnly(schemaDescription.value, 'max'))
-const resetValue = computed(() => schemaDescription.value.fields[props.name].default)
-const isOptional = computed(() => schemaDescription.value.fields[props.name].optional)
-
-// const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
-
+const getTestParameter = (name) => schemaDescription.value?.tests?.find(t => t.name === name)?.params[name]
+const minValue = computed(() => getTestParameter('min'))
+const maxValue = computed(() => getTestParameter('max'))
+const resetValue = computed(() => schemaDescription.default)
+const isOptional = computed(() => schemaDescription.optional)
 </script>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 6ab7d9875..59d7c283f 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -10,9 +10,7 @@
           />
           <div class="mb-3"></div>
           <contribution-form
-            :key="computedKeyFromForm"
             v-model="form"
-            :is-this-month="isThisMonth"
             :minimal-date="minimalDate"
             :max-gdd-last-month="maxForMonths[0]"
             :max-gdd-this-month="maxForMonths[1]"
@@ -95,7 +93,7 @@ const form = ref({
   date: '',
   memo: '',
   hours: 0,
-  amount: '',
+  amount: 20,
 })
 const originalContributionDate = ref('')
 const updateAmount = ref('')
@@ -107,14 +105,6 @@ const minimalDate = computed(() => {
   return new Date(date.setMonth(date.getMonth() - 1, 1))
 })
 
-const isThisMonth = computed(() => {
-  const formDate = new Date(form.value.date)
-  return (
-    formDate.getFullYear() === maximalDate.value.getFullYear() &&
-    formDate.getMonth() === maximalDate.value.getMonth()
-  )
-})
-
 const amountToAdd = computed(() => (form.value.id ? parseInt(updateAmount.value) : 0))
 
 const maxForMonths = computed(() => {
@@ -273,13 +263,20 @@ const handleUpdateListContributions = (pagination) => {
 }
 
 const handleUpdateContributionForm = (item) => {
+  /*Object.assign(form.value, {
+    id: item.id,
+    date: new Date(item.contributionDate).toISOString().slice(0, 10),
+    memo: item.memo,
+    amount: item.amount,
+    hours: item.amount / 20,
+  })*/
   form.value = {
     id: item.id,
     date: new Date(item.contributionDate).toISOString().slice(0, 10),
     memo: item.memo,
     amount: item.amount,
     hours: item.amount / 20,
-  }
+  }//*/
   originalContributionDate.value = item.contributionDate
   updateAmount.value = item.amount
   tabIndex.value = 0
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
index fe3ef901e..cbf74d0b8 100644
--- a/frontend/src/validationSchemas.js
+++ b/frontend/src/validationSchemas.js
@@ -1,7 +1,18 @@
 import { string } from 'yup'
 
 // TODO: only needed for grace period, before all inputs updated for using veeValidate + yup
-export const isLanguageKey = (str) => str.match(/^(?!\.)[a-z][a-zA-Z0-9]*([.][a-z][a-zA-Z0-9]*)*(?<!\.)$/)
+export const isLanguageKey = (str) => str.match(/^(?!\.)[a-z][a-zA-Z0-9-]*([.][a-z][a-zA-Z0-9-]*)*(?<!\.)$/)
+
+export const translateYupErrorString = (error, t) => {
+  const type = typeof error
+  if (type === 'object') {
+    return t(error.key, error.values)
+  } else if (type === 'string' && error.length > 0 && isLanguageKey(error)) {
+    return t(error)
+  } else {
+    return error
+  }
+}
 
 export const memo = string()
   .required('contribution.yourActivity')

From da51b691ea922c79a95adaa0b3c15263e1578595 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Wed, 12 Feb 2025 15:34:37 +0100
Subject: [PATCH 07/15] removed debug code

---
 .../Contributions/ContributionForm.vue        | 21 ++++-----
 .../src/components/Inputs/LabeledInput.vue    | 16 +------
 .../src/components/Inputs/ValidatedInput.vue  | 45 +++++++++----------
 frontend/src/pages/Community.vue              |  4 +-
 4 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 6b36c29fe..204105f1c 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script setup>
-import { reactive, computed, watchEffect, watch, ref } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ValidatedInput from '@/components/Inputs/ValidatedInput'
 import LabeledInput from '@/components/Inputs/LabeledInput'
@@ -105,7 +105,7 @@ const form = reactive({ ...props.modelValue })
 watch(() => props.modelValue, (newValue) => Object.assign(form, newValue))
 
 // use computed to make sure child input update if props from parent from this component change
-const amount = computed(() => (form.hours * 20).toFixed(2).toString())
+const amount = computed(() => form.hours ? (form.hours * 20).toFixed(2).toString() : '20')
 const date = computed(() => form.date)
 const hours = computed(() => form.hours)
 const memo = computed(() => form.memo)
@@ -116,9 +116,6 @@ const isThisMonth = computed(() => {
   return formDate.getMonth() === now.getMonth() && formDate.getFullYear() === now.getFullYear()
 });
 
-// const maxHours = computed(() => Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20))
-// const maxAmounts = computed(() => Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth)))
-
 const validationSchema = computed(() => {
   const maxHours = Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20)
   const maxAmounts = Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth))
@@ -150,14 +147,14 @@ const validationSchema = computed(() => {
   })
 })
 
-const updateField = (newValue, name) => {
+const updateField = (newValue, name, valid) => {
   if (typeof name === 'string' && name.length) {
     form[name] = newValue
     if (name === 'hours') {
       form.amount = (newValue * 20).toFixed(2).toString()
     }
   }
-  console.log('update field', { newValue, name, form, amount: amount.value })
+  // console.log('update field', { newValue, name, form, amount: amount.value })
   emit('update:modelValue', form)  
 }
 
@@ -190,12 +187,12 @@ function submit() {
 }
 
 function fullFormReset() {
-  form = {
-    date: '',
+  emit('update:modelValue', {
+    date: null,
     memo: '',
-    hours: 0.0,
-    amount: 0.0,
-  }
+    hours: '',
+    amount: null,
+  })
 }
 </script>
 <style>
diff --git a/frontend/src/components/Inputs/LabeledInput.vue b/frontend/src/components/Inputs/LabeledInput.vue
index 03442160a..825478d37 100644
--- a/frontend/src/components/Inputs/LabeledInput.vue
+++ b/frontend/src/components/Inputs/LabeledInput.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, defineOptions, watchEffect, ref, defineModel } from 'vue'
+import { computed, defineOptions, defineModel } from 'vue'
 defineOptions({
   inheritAttrs: false,
 })
@@ -33,7 +33,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  // modelValue: [String, Number, Date],
   textarea: {
     type: Boolean,
     required: false,
@@ -42,18 +41,7 @@ const props = defineProps({
 })
 
 const model = defineModel()
-// const model = ref(props.modelValue)
-/*const model = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})*/
+
 const wrapperClassName = computed(() => props.name ? `input-${props.name}` : 'input')
 const labelFor = computed(() => `${props.name}-input-field`)
-
-// const emit = defineEmits(['update:modelValue'])
-
-watchEffect(() => {
-  console.log(`${props.name}: ${props.modelValue}`)
-  // model.value = props.modelValue
-})
 </script>
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 1310585a2..d55828b1f 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watchEffect, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import LabeledInput from './LabeledInput'
 import { translateYupErrorString } from '@/validationSchemas'
@@ -39,37 +39,31 @@ const props = defineProps({
     required: true,
   },
 })
-const model = ref(props.modelValue)
-let wasUpdated = false
-
-function updateErrorMessage() {
-  try {
-    props.rules.validateSync(model.value)
-    errorMessage.value = undefined
-  } catch(e) {
-    errorMessage.value = translateYupErrorString(e.message, t)
-  }
-}
 
 const { t } = useI18n()
-const errorMessage = ref()
-const valid = computed(() => props.rules.isValidSync(model.value))
+
+const model = ref(props.modelValue)
+
+const valid = computed(() => props.rules.isValidSync(props.modelValue))
+const errorMessage = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === '' || props.modelValue === null) {
+    return undefined
+  } 
+  try {
+    props.rules.validateSync(props.modelValue)
+    return undefined
+  } catch(e) {
+    return translateYupErrorString(e.message, t)
+  }
+})
 
 const emit = defineEmits(['update:modelValue'])
 const updateValue = ((newValue) => {
-  wasUpdated = true
-  model.value = newValue
-  updateErrorMessage()
-  emit('update:modelValue', newValue, props.name)  
+  emit('update:modelValue', newValue, props.name, valid.value)  
 })
 
-// validate on rule change, but only if updateValue was called at least one
-watch(() => props.rules, () => {
-  if(wasUpdated) {
-    updateErrorMessage()
-  }
-})
-// update model if parent change
+// update model and if value changed and model isn't null, check validation,
+// for loading Input with existing value and show correct validation state
 watch(() => props.modelValue, () => {
   model.value = props.modelValue
 })
@@ -82,3 +76,4 @@ const maxValue = computed(() => getTestParameter('max'))
 const resetValue = computed(() => schemaDescription.default)
 const isOptional = computed(() => schemaDescription.optional)
 </script>
+
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 59d7c283f..887b3ed33 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -90,9 +90,9 @@ const contributionCount = ref(0)
 const contributionCountAll = ref(0)
 const form = ref({
   id: null,
-  date: '',
+  date: null,
   memo: '',
-  hours: 0,
+  hours: '',
   amount: 20,
 })
 const originalContributionDate = ref('')

From 86820b36fb7a6320ca0a4f716fb802117b573de2 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Wed, 12 Feb 2025 16:03:46 +0100
Subject: [PATCH 08/15] fix inaccuracy with using parseFloat instead of
 parseInt

---
 .../Contributions/ContributionForm.spec.js    |   7 --
 .../Contributions/ContributionForm.vue        |  65 +++++------
 .../Contributions/OpenCreationsAmount.vue     |  11 +-
 .../src/components/Inputs/InputHour.spec.js   | 108 ------------------
 frontend/src/components/Inputs/InputHour.vue  |  53 ---------
 .../src/components/Inputs/LabeledInput.vue    |  14 +--
 .../src/components/Inputs/ValidatedInput.vue  |  33 +++---
 frontend/src/pages/Community.vue              |  12 +-
 frontend/src/validationSchemas.js             |   8 +-
 9 files changed, 74 insertions(+), 237 deletions(-)
 delete mode 100644 frontend/src/components/Inputs/InputHour.spec.js
 delete mode 100644 frontend/src/components/Inputs/InputHour.vue

diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js
index 47ee4a763..36c209f8d 100644
--- a/frontend/src/components/Contributions/ContributionForm.spec.js
+++ b/frontend/src/components/Contributions/ContributionForm.spec.js
@@ -4,13 +4,6 @@ import ContributionForm from './ContributionForm.vue'
 import { useForm } from 'vee-validate'
 
 // Mock external components and dependencies
-vi.mock('@/components/Inputs/InputHour', () => ({
-  default: {
-    name: 'InputHour',
-    template: '<input data-testid="input-hour" />',
-  },
-}))
-
 vi.mock('@/components/Inputs/InputAmount', () => ({
   default: {
     name: 'InputAmount',
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 204105f1c..fc96b1706 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -27,8 +27,8 @@
           :label="$t('contribution.activity')"
           :placeholder="$t('contribution.yourActivity')"
           :rules="validationSchema.fields.memo"
-          @update:model-value="updateField"
           textarea="true"
+          @update:model-value="updateField"
         />
         <ValidatedInput
           name="hours"
@@ -102,10 +102,13 @@ const form = reactive({ ...props.modelValue })
 
 // update local form if in parent form changed, it is necessary because the community page will reuse this form also for editing existing
 // contributions, and it will reusing a existing instance of this component
-watch(() => props.modelValue, (newValue) => Object.assign(form, newValue))
+watch(
+  () => props.modelValue,
+  (newValue) => Object.assign(form, newValue),
+)
 
 // use computed to make sure child input update if props from parent from this component change
-const amount = computed(() => form.hours ? (form.hours * 20).toFixed(2).toString() : '20')
+const amount = computed(() => form.amount)
 const date = computed(() => form.date)
 const hours = computed(() => form.hours)
 const memo = computed(() => form.memo)
@@ -114,50 +117,37 @@ const isThisMonth = computed(() => {
   const formDate = new Date(form.date)
   const now = new Date()
   return formDate.getMonth() === now.getMonth() && formDate.getFullYear() === now.getFullYear()
-});
+})
 
+// reactive validation schema, because some boundaries depend on form input and existing data
 const validationSchema = computed(() => {
-  const maxHours = Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20)
-  const maxAmounts = Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth))
+  const maxAmounts = Number(
+    isThisMonth.value ? parseFloat(props.maxGddThisMonth) : parseFloat(props.maxGddLastMonth),
+  )
+  const maxHours = Number(maxAmounts / 20)
 
   return object({
     // The date field is required and needs to be a valid date
     // contribution date
     date: dateSchema()
       .required('contribution.noDateSelected')
-      .min(new Date(new Date().setMonth(new Date().getMonth() - 1, 1)).toISOString().slice(0, 10))  // min date is first day of last month
+      .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().transform((value, originalValue) => 
-        originalValue === "" ? undefined : value
-      )
+    hours: number()
+      .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) => {
-          if (value === undefined || value === null) return true
-          return /^\d+(\.\d{0,2})?$/.test(value.toString())
-        }
-      ),
-    amount: number().max(maxAmounts)
+      .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) => {
+        if (value === undefined || value === null) return true
+        return /^\d+(\.\d{0,2})?$/.test(value.toString())
+      }),
+    amount: number().max(maxAmounts),
   })
 })
 
-const updateField = (newValue, name, valid) => {
-  if (typeof name === 'string' && name.length) {
-    form[name] = newValue
-    if (name === 'hours') {
-      form.amount = (newValue * 20).toFixed(2).toString()
-    }
-  }
-  // console.log('update field', { newValue, name, form, amount: amount.value })
-  emit('update:modelValue', form)  
-}
-
 const disabled = computed(() => !validationSchema.value.isValidSync(form))
 
 const noOpenCreation = computed(() => {
@@ -175,6 +165,16 @@ const noOpenCreation = computed(() => {
   return undefined
 })
 
+const updateField = (newValue, name) => {
+  if (typeof name === 'string' && name.length) {
+    form[name] = newValue
+    if (name === 'hours') {
+      form.amount = form.hours ? (form.hours * 20).toFixed(2).toString() : '20'
+    }
+  }
+  emit('update:modelValue', form)
+}
+
 function submit() {
   const dataToSave = { ...form }
   let emitOption = 'set-contribution'
@@ -188,6 +188,7 @@ function submit() {
 
 function fullFormReset() {
   emit('update:modelValue', {
+    id: undefined,
     date: null,
     memo: '',
     hours: '',
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 3a0b6ea5a..e88fb4f46 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -33,6 +33,9 @@
   </div>
 </template>
 <script>
+function afterComma(input) {
+  return input.toFixed(2).toString()
+}
 export default {
   name: 'OpenCreationsAmount',
   props: {
@@ -42,16 +45,16 @@ export default {
   },
   computed: {
     hoursSubmittedThisMonth() {
-      return (1000 - this.maxGddThisMonth) / 20
+      return afterComma((1000 - this.maxGddThisMonth) / 20)
     },
     hoursSubmittedLastMonth() {
-      return (1000 - this.maxGddLastMonth) / 20
+      return afterComma((1000 - this.maxGddLastMonth) / 20)
     },
     hoursAvailableThisMonth() {
-      return this.maxGddThisMonth / 20
+      return afterComma(this.maxGddThisMonth / 20)
     },
     hoursAvailableLastMonth() {
-      return this.maxGddLastMonth / 20
+      return afterComma(this.maxGddLastMonth / 20)
     },
   },
 }
diff --git a/frontend/src/components/Inputs/InputHour.spec.js b/frontend/src/components/Inputs/InputHour.spec.js
deleted file mode 100644
index f2f127601..000000000
--- a/frontend/src/components/Inputs/InputHour.spec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { ref } from 'vue'
-import InputHour from './InputHour.vue'
-import { useField } from 'vee-validate'
-import { BFormGroup, BFormInput, BFormInvalidFeedback } from 'bootstrap-vue-next'
-
-// Mock vee-validate
-vi.mock('vee-validate', () => ({
-  useField: vi.fn(),
-}))
-
-describe('InputHour', () => {
-  let wrapper
-
-  const createWrapper = (propsData = {}) => {
-    return mount(InputHour, {
-      props: {
-        rules: {},
-        name: 'input-field-name',
-        label: 'input-field-label',
-        placeholder: 'input-field-placeholder',
-        validMaxTime: 25,
-        ...propsData,
-      },
-      global: {
-        components: {
-          BFormGroup,
-          BFormInput,
-          BFormInvalidFeedback,
-        },
-        mocks: {
-          $t: (t) => t,
-          $i18n: {
-            locale: () => 'en',
-          },
-          $n: (n) => String(n),
-          $route: {
-            params: {},
-          },
-        },
-      },
-    })
-  }
-
-  beforeEach(() => {
-    useField.mockReturnValue({
-      value: ref(0),
-      errorMessage: ref(''),
-      meta: ref({ valid: true }),
-    })
-    wrapper = createWrapper()
-  })
-
-  it('renders the component input-hour', () => {
-    expect(wrapper.find('div.input-hour').exists()).toBe(true)
-  })
-
-  it('has an input field', () => {
-    expect(wrapper.findComponent({ name: 'BFormInput' }).exists()).toBe(true)
-  })
-
-  describe('properties', () => {
-    it('passes correct props to BFormInput', () => {
-      const input = wrapper.findComponent({ name: 'BFormInput' })
-      expect(input.props()).toMatchObject({
-        id: 'input-field-name-input-field',
-        modelValue: 0,
-        name: 'input-field-name',
-        placeholder: 'input-field-placeholder',
-        type: 'number',
-        state: true,
-        step: '0.25',
-        min: '0',
-        max: 25,
-      })
-    })
-
-    it('passes correct props to BFormGroup', () => {
-      const formGroup = wrapper.findComponent({ name: 'BFormGroup' })
-      expect(formGroup.props()).toMatchObject({
-        label: 'input-field-label',
-        labelFor: 'input-field-name-input-field',
-      })
-    })
-  })
-
-  describe('input value changes', () => {
-    it('updates currentValue when input changes', async () => {
-      await wrapper.findComponent({ name: 'BFormInput' }).vm.$emit('update:modelValue', 12)
-      expect(wrapper.vm.currentValue).toBe(12)
-    })
-  })
-
-  describe('error handling', () => {
-    it('displays error message when present', async () => {
-      useField.mockReturnValue({
-        value: ref(0),
-        errorMessage: ref('Error message'),
-        meta: ref({ valid: false }),
-      })
-      wrapper = createWrapper()
-
-      expect(wrapper.findComponent({ name: 'BFormInvalidFeedback' }).exists()).toBe(true)
-      expect(wrapper.findComponent({ name: 'BFormInvalidFeedback' }).text()).toBe('Error message')
-    })
-  })
-})
diff --git a/frontend/src/components/Inputs/InputHour.vue b/frontend/src/components/Inputs/InputHour.vue
deleted file mode 100644
index 132fbc2ad..000000000
--- a/frontend/src/components/Inputs/InputHour.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="input-hour">
-    <BFormGroup :label="label" :label-for="labelFor">
-      <BFormInput
-        :id="labelFor"
-        v-model="currentValue"
-        :name="name"
-        :placeholder="placeholder"
-        type="number"
-        :state="meta.valid"
-        step="0.01"
-        min="0"
-        :max="validMaxTime"
-        class="bg-248"
-      />
-      <BFormInvalidFeedback v-if="errorMessage">
-        {{ errorMessage }}
-      </BFormInvalidFeedback>
-    </BFormGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { useField } from 'vee-validate'
-
-const props = defineProps({
-  rules: {
-    type: Object,
-    default: () => ({}),
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    required: true,
-  },
-  validMaxTime: {
-    type: Number,
-    required: true,
-  },
-})
-
-const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
-
-const labelFor = computed(() => `${props.name}-input-field`)
-</script>
diff --git a/frontend/src/components/Inputs/LabeledInput.vue b/frontend/src/components/Inputs/LabeledInput.vue
index 825478d37..920fceacd 100644
--- a/frontend/src/components/Inputs/LabeledInput.vue
+++ b/frontend/src/components/Inputs/LabeledInput.vue
@@ -1,18 +1,16 @@
 <template>
   <div :class="wrapperClassName">
     <BFormGroup :label="label" :label-for="labelFor">
-      <BFormTextarea v-if="textarea" 
+      <BFormTextarea
+        v-if="textarea"
         v-bind="{ ...$attrs, id: labelFor, name }"
         v-model="model"
         trim
         :rows="4"
         :max-rows="4"
         no-resize
-        />
-      <BFormInput v-else 
-        v-bind="{ ...$attrs, id: labelFor, name }"
-        v-model="model"
-      />      
+      />
+      <BFormInput v-else v-bind="{ ...$attrs, id: labelFor, name }" v-model="model" />
       <slot></slot>
     </BFormGroup>
   </div>
@@ -37,11 +35,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false,
-  }
+  },
 })
 
 const model = defineModel()
 
-const wrapperClassName = computed(() => props.name ? `input-${props.name}` : 'input')
+const wrapperClassName = computed(() => (props.name ? `input-${props.name}` : 'input'))
 const labelFor = computed(() => `${props.name}-input-field`)
 </script>
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index d55828b1f..04c346292 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <LabeledInput 
+  <LabeledInput
     v-bind="$attrs"
     :min="minValue"
     :max="maxValue"
@@ -11,9 +11,9 @@
     :name="name"
     :state="valid"
     @update:modelValue="updateValue"
-    >
+  >
     <BFormInvalidFeedback v-if="errorMessage">
-        {{ errorMessage }}
+      {{ errorMessage }}
     </BFormInvalidFeedback>
   </LabeledInput>
 </template>
@@ -48,32 +48,35 @@ const valid = computed(() => props.rules.isValidSync(props.modelValue))
 const errorMessage = computed(() => {
   if (props.modelValue === undefined || props.modelValue === '' || props.modelValue === null) {
     return undefined
-  } 
+  }
   try {
     props.rules.validateSync(props.modelValue)
     return undefined
-  } catch(e) {
+  } catch (e) {
     return translateYupErrorString(e.message, t)
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
-const updateValue = ((newValue) => {
-  emit('update:modelValue', newValue, props.name, valid.value)  
-})
+const updateValue = (newValue) => {
+  emit('update:modelValue', newValue, props.name, valid.value)
+}
 
 // update model and if value changed and model isn't null, check validation,
 // for loading Input with existing value and show correct validation state
-watch(() => props.modelValue, () => {
-  model.value = props.modelValue
-})
+watch(
+  () => props.modelValue,
+  () => {
+    model.value = props.modelValue
+  },
+)
 
 // extract additional parameter like min and max from schema
 const schemaDescription = computed(() => props.rules.describe())
-const getTestParameter = (name) => schemaDescription.value?.tests?.find(t => t.name === name)?.params[name]
+const getTestParameter = (name) =>
+  schemaDescription.value?.tests?.find((t) => t.name === name)?.params[name]
 const minValue = computed(() => getTestParameter('min'))
 const maxValue = computed(() => getTestParameter('max'))
-const resetValue = computed(() => schemaDescription.default)
-const isOptional = computed(() => schemaDescription.optional)
+const resetValue = computed(() => schemaDescription.value.default)
+const isOptional = computed(() => schemaDescription.value.optional)
 </script>
-
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 887b3ed33..47e2edc65 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -105,7 +105,7 @@ const minimalDate = computed(() => {
   return new Date(date.setMonth(date.getMonth() - 1, 1))
 })
 
-const amountToAdd = computed(() => (form.value.id ? parseInt(updateAmount.value) : 0))
+const amountToAdd = computed(() => (form.value.id ? parseFloat(updateAmount.value) : 0.0))
 
 const maxForMonths = computed(() => {
   const originalDate = new Date(originalContributionDate.value)
@@ -115,9 +115,9 @@ const maxForMonths = computed(() => {
         creation.year === originalDate.getFullYear() &&
         creation.month === originalDate.getMonth()
       ) {
-        return parseInt(creation.amount) + amountToAdd.value
+        return parseFloat(creation.amount)
       }
-      return parseInt(creation.amount)
+      return parseFloat(creation.amount)
     })
   }
   return [0, 0]
@@ -263,20 +263,20 @@ const handleUpdateListContributions = (pagination) => {
 }
 
 const handleUpdateContributionForm = (item) => {
-  /*Object.assign(form.value, {
+  /* Object.assign(form.value, {
     id: item.id,
     date: new Date(item.contributionDate).toISOString().slice(0, 10),
     memo: item.memo,
     amount: item.amount,
     hours: item.amount / 20,
-  })*/
+  }) */
   form.value = {
     id: item.id,
     date: new Date(item.contributionDate).toISOString().slice(0, 10),
     memo: item.memo,
     amount: item.amount,
     hours: item.amount / 20,
-  }//*/
+  } //* /
   originalContributionDate.value = item.contributionDate
   updateAmount.value = item.amount
   tabIndex.value = 0
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
index cbf74d0b8..e4f1194cf 100644
--- a/frontend/src/validationSchemas.js
+++ b/frontend/src/validationSchemas.js
@@ -1,7 +1,8 @@
 import { string } from 'yup'
 
 // TODO: only needed for grace period, before all inputs updated for using veeValidate + yup
-export const isLanguageKey = (str) => str.match(/^(?!\.)[a-z][a-zA-Z0-9-]*([.][a-z][a-zA-Z0-9-]*)*(?<!\.)$/)
+export const isLanguageKey = (str) =>
+  str.match(/^(?!\.)[a-z][a-zA-Z0-9-]*([.][a-z][a-zA-Z0-9-]*)*(?<!\.)$/)
 
 export const translateYupErrorString = (error, t) => {
   const type = typeof error
@@ -16,6 +17,5 @@ export const translateYupErrorString = (error, t) => {
 
 export const memo = string()
   .required('contribution.yourActivity')
-  .min(5, ({min}) => ({ key: 'form.validation.memo.min', values: { min } }))
-  .max(255, ({max}) => ({ key: 'form.validation.memo.max', values: { max } }))
-
+  .min(5, ({ min }) => ({ key: 'form.validation.memo.min', values: { min } }))
+  .max(255, ({ max }) => ({ key: 'form.validation.memo.max', values: { max } }))

From 9c757383407d2adf88c357d7f9aae945ca84739e Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Wed, 12 Feb 2025 16:58:21 +0100
Subject: [PATCH 09/15] remove leftofer from develop

---
 frontend/src/pages/Community.vue | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 47e2edc65..4fc5173b2 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -115,18 +115,13 @@ const maxForMonths = computed(() => {
         creation.year === originalDate.getFullYear() &&
         creation.month === originalDate.getMonth()
       ) {
-        return parseFloat(creation.amount)
+        return parseFloat(creation.amount) + amountToAdd
       }
       return parseFloat(creation.amount)
     })
   }
   return [0, 0]
 })
-
-const computedKeyFromForm = computed(() => {
-  return `${form.value.id}_${form.value.date}_${form.value.memo}_${form.value.amount}_${form.value.hours}`
-})
-
 const { onResult: onOpenCreationsResult, refetch: refetchOpenCreations } = useQuery(
   openCreations,
   () => ({}),
@@ -263,13 +258,6 @@ const handleUpdateListContributions = (pagination) => {
 }
 
 const handleUpdateContributionForm = (item) => {
-  /* Object.assign(form.value, {
-    id: item.id,
-    date: new Date(item.contributionDate).toISOString().slice(0, 10),
-    memo: item.memo,
-    amount: item.amount,
-    hours: item.amount / 20,
-  }) */
   form.value = {
     id: item.id,
     date: new Date(item.contributionDate).toISOString().slice(0, 10),

From f8fdd3e26ce82355894c9973fa67fedc6ffc5d6c Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 13 Feb 2025 14:08:03 +0100
Subject: [PATCH 10/15] fix tests and lint

---
 .../Contributions/ContributionForm.spec.js    | 123 ++++++++++--------
 .../Contributions/ContributionForm.vue        |  15 +--
 .../Contributions/ContributionListItem.vue    |   4 +-
 .../Contributions/OpenCreationsAmount.vue     |   2 +-
 .../components/Inputs/InputTextarea.spec.js   |   6 +
 .../src/components/Inputs/InputTextarea.vue   |  13 +-
 frontend/src/locales/de.json                  |   4 +-
 frontend/src/locales/en.json                  |   8 +-
 frontend/src/pages/Community.vue              |   4 +-
 9 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js
index 36c209f8d..71414d284 100644
--- a/frontend/src/components/Contributions/ContributionForm.spec.js
+++ b/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: '',
-      },
-    })
-  })
 })
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index fc96b1706..d879b7676 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/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>
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 87dffa6b3..6c80a9439 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/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,
   () => {
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index e88fb4f46..fe49a01a7 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/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',
diff --git a/frontend/src/components/Inputs/InputTextarea.spec.js b/frontend/src/components/Inputs/InputTextarea.spec.js
index 296bc22d4..dc04b5b63 100644
--- a/frontend/src/components/Inputs/InputTextarea.spec.js
+++ b/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
 
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index a30a6510a..e44179fc0 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/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>
 
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 0c71a5407..daa449afd 100644
--- a/frontend/src/locales/de.json
+++ b/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",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 8804c7fe1..4a3ce5a2a 100644
--- a/frontend/src/locales/en.json
+++ b/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": {
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 4fc5173b2..c735f35f1 100644
--- a/frontend/src/pages/Community.vue
+++ b/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)
     })

From f88bb7bcc730146eff86f01df5aa763926541c70 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 13 Feb 2025 14:38:24 +0100
Subject: [PATCH 11/15] fix lint

---
 .../Contributions/ContributionForm.spec.js    | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js
index 71414d284..626d5e062 100644
--- a/frontend/src/components/Contributions/ContributionForm.spec.js
+++ b/frontend/src/components/Contributions/ContributionForm.spec.js
@@ -67,22 +67,22 @@ describe('ContributionForm', () => {
   describe('compute isThisMonth', () => {
     it('return true', async () => {
       await wrapper.setProps({
-        modelValue: { date: new Date().toISOString() }
+        modelValue: { date: new Date().toISOString() },
       })
-      expect(wrapper.vm.isThisMonth).toBe(true)  
+      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() }
+        modelValue: { date: lastMonth.toISOString() },
       })
-      expect(wrapper.vm.isThisMonth).toBe(false)  
+      expect(wrapper.vm.isThisMonth).toBe(false)
     })
   })
 
   describe('noOpenCreations return correct translation key', () => {
-    it("if both max gdd are > 0", () => {
+    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 () => {
@@ -90,14 +90,14 @@ describe('ContributionForm', () => {
       const lastMonth = new Date(now.setMonth(now.getMonth() - 1, 1))
       await wrapper.setProps({
         maxGddThisMonth: 0,
-        modelValue: { date: lastMonth.toISOString() }
+        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() }
+        modelValue: { date: new Date().toISOString() },
       })
       expect(wrapper.vm.noOpenCreation).toBeUndefined()
     })
@@ -106,23 +106,23 @@ describe('ContributionForm', () => {
         maxGddThisMonth: 0,
         maxGddLastMonth: 0,
       })
-      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.allMonth')  
+      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() }
+        modelValue: { date: new Date().toISOString() },
       })
-      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.thisMonth')  
+      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() }
+        modelValue: { date: lastMonth.toISOString() },
       })
-      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.lastMonth')  
+      expect(wrapper.vm.noOpenCreation).toBe('contribution.noOpenCreation.lastMonth')
     })
   })
 
@@ -130,16 +130,15 @@ describe('ContributionForm', () => {
     expect(wrapper.vm.disabled).toBe(true)
 
     await wrapper.setProps({
-      modelValue: { date: new Date().toISOString().slice(0, 10) }
+      modelValue: { date: new Date().toISOString().slice(0, 10) },
     })
 
     wrapper.vm.form.amount = 100
-    
+
     expect(wrapper.vm.disabled).toBe(false)
-  })  
+  })
 
   it('updates amount when hours change', async () => {
-    
     wrapper = mount(ContributionForm, {
       props: defaultProps,
       global: {

From a7e4c91450cd65d94655e59e79a06b4da4074936 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 13 Feb 2025 17:40:04 +0100
Subject: [PATCH 12/15] revert unneccessary change

---
 frontend/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 96c2e99fc..17dd58803 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,7 @@
     "@types/leaflet": "^1.9.12",
     "@vee-validate/i18n": "^4.14.7",
     "@vee-validate/rules": "^4.14.1",
-    "@vee-validate/yup": "^4.15.0",
+    "@vee-validate/yup": "^4.14.1",
     "@vitejs/plugin-vue": "5.1.4",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/apollo-composable": "^4.0.2",
@@ -68,7 +68,7 @@
     "vue-timer-hook": "^1.0.84",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0",
-    "yup": "^1.6.1"
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@apollo/client": "^3.10.8",

From 4b21d709cbe37296a4fc182f74d93fa970231773 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 13 Feb 2025 17:44:15 +0100
Subject: [PATCH 13/15] missing update

---
 frontend/yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4ebc33d80..a2047b765 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1657,7 +1657,7 @@
   dependencies:
     vee-validate "4.14.7"
 
-"@vee-validate/yup@^4.15.0":
+"@vee-validate/yup@^4.14.1":
   version "4.15.0"
   resolved "https://registry.yarnpkg.com/@vee-validate/yup/-/yup-4.15.0.tgz#409f9b57414fadd5b86bc6ada18cd51a7ccd121c"
   integrity sha512-paK2ZdxZJRrUGwqaqf7KMNC+n5C7UGs7DofK7wZCza/zKT/QtFSxVYgopGoYYrbAfd6DpVmNpf/ouBuRdPBthA==
@@ -7525,7 +7525,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yup@^1.6.1:
+yup@^1.4.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/yup/-/yup-1.6.1.tgz#8defcff9daaf9feac178029c0e13b616563ada4b"
   integrity sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==

From d956ea91feb5220522a1aa86bf5a5a0bac15bfc6 Mon Sep 17 00:00:00 2001
From: einhornimmond <dario.rekowski@gmx.de>
Date: Sat, 15 Feb 2025 10:04:07 +0100
Subject: [PATCH 14/15] Update frontend/src/locales/en.json

Co-authored-by: clauspeterhuebner <86960882+clauspeterhuebner@users.noreply.github.com>
---
 frontend/src/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4a3ce5a2a..8c49ce4de 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -186,7 +186,7 @@
     "validation": {
       "gddCreationTime": {
         "min": "The hours should be at least {min} in size",
-        "max": "The hours should be no larger than {max}",
+        "max": "The hours should not be 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",

From ce6cdb51d3a82cbc26b0416f7411acc712a8cfb5 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Sat, 22 Feb 2025 09:32:17 +0100
Subject: [PATCH 15/15] add constant, remove some unused code

---
 .../Contributions/ContributionForm.vue        | 10 +++--
 .../ContributionListItem.spec.js              |  6 ---
 .../Contributions/ContributionListItem.vue    | 10 ++---
 .../Contributions/OpenCreationsAmount.vue     | 43 +++++++++----------
 frontend/src/constants.js                     |  1 +
 frontend/src/pages/Community.vue              |  3 +-
 6 files changed, 33 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/constants.js

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index d879b7676..19540c514 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -45,7 +45,7 @@
           class="mt-3"
           name="amount"
           :label="$t('form.amount')"
-          placeholder="20"
+          :placeholder="GDD_PER_HOUR"
           readonly
           type="text"
           trim
@@ -86,6 +86,7 @@ import ValidatedInput from '@/components/Inputs/ValidatedInput'
 import LabeledInput from '@/components/Inputs/LabeledInput'
 import { memo as memoSchema } from '@/validationSchemas'
 import { object, date as dateSchema, number } from 'yup'
+import { GDD_PER_HOUR } from '../../constants'
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -123,7 +124,7 @@ const validationSchema = computed(() => {
   const maxAmounts = Number(
     isThisMonth.value ? parseFloat(props.maxGddThisMonth) : parseFloat(props.maxGddLastMonth),
   )
-  const maxHours = parseFloat(Number(maxAmounts / 20).toFixed(2))
+  const maxHours = parseFloat(Number(maxAmounts / GDD_PER_HOUR).toFixed(2))
 
   return object({
     // The date field is required and needs to be a valid date
@@ -143,7 +144,7 @@ const validationSchema = computed(() => {
         if (value === undefined || value === null) return true
         return /^\d+(\.\d{0,2})?$/.test(value.toString())
       }),
-    amount: number().max(maxAmounts),
+    amount: number().min(0.01).max(maxAmounts),
   })
 })
 
@@ -168,7 +169,8 @@ const updateField = (newValue, name) => {
   if (typeof name === 'string' && name.length) {
     form[name] = newValue
     if (name === 'hours') {
-      form.amount = form.hours ? (form.hours * 20).toFixed(2).toString() : '20'
+      const amount = form.hours ? (form.hours * GDD_PER_HOUR).toFixed(2) : GDD_PER_HOUR
+      form.amount = amount.toString()
     }
   }
   emit('update:modelValue', form)
diff --git a/frontend/src/components/Contributions/ContributionListItem.spec.js b/frontend/src/components/Contributions/ContributionListItem.spec.js
index 6140a9147..5abb1f8b6 100644
--- a/frontend/src/components/Contributions/ContributionListItem.spec.js
+++ b/frontend/src/components/Contributions/ContributionListItem.spec.js
@@ -99,12 +99,6 @@ describe('ContributionListItem', () => {
       })
     })
 
-    describe('date', () => {
-      it('is equal to createdAt', () => {
-        expect(wrapper.vm.date).toBe(wrapper.vm.createdAt)
-      })
-    })
-
     describe('delete contribution', () => {
       describe('edit contribution', () => {
         beforeEach(() => {
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 6c80a9439..a08af2e4c 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -125,8 +125,9 @@ import ContributionMessagesList from '@/components/ContributionMessages/Contribu
 import { listContributionMessages } from '@/graphql/queries'
 import { useAppToast } from '@/composables/useToast'
 import { useI18n } from 'vue-i18n'
-import { useLazyQuery, useQuery } from '@vue/apollo-composable'
+import { useLazyQuery } from '@vue/apollo-composable'
 import AppAvatar from '@/components/AppAvatar.vue'
+import { GDD_PER_HOUR } from '../../constants'
 
 const props = defineProps({
   id: {
@@ -201,10 +202,9 @@ const props = defineProps({
   },
 })
 
-const { toastError, toastSuccess } = useAppToast()
+const { toastError } = useAppToast()
 const { t } = useI18n()
 
-const inProcess = ref(true)
 const messagesGet = ref([])
 const visible = ref(false)
 
@@ -224,8 +224,6 @@ const icon = computed(() => {
   return 'bell-fill'
 })
 
-const date = computed(() => props.createdAt)
-
 const collapseId = computed(() => 'collapse' + String(props.id))
 
 const username = computed(() => ({
@@ -233,7 +231,7 @@ const username = computed(() => ({
   initials: `${props.firstName[0]}${props.lastName[0]}`,
 }))
 
-const hours = computed(() => parseFloat((props.amount / 20).toFixed(2)))
+const hours = computed(() => parseFloat((props.amount / GDD_PER_HOUR).toFixed(2)))
 
 watch(
   () => visible.value,
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index fe49a01a7..2b15bdc52 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -32,32 +32,29 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { computed } from 'vue'
+import { GDD_PER_HOUR } from '../../constants'
+
+const props = defineProps({
+  minimalDate: { type: Date, required: true },
+  maxGddLastMonth: { type: Number, required: true },
+  maxGddThisMonth: { type: Number, required: true },
+})
+
 function afterComma(input) {
   return parseFloat(input.toFixed(2)).toString()
 }
-export default {
-  name: 'OpenCreationsAmount',
-  props: {
-    minimalDate: { type: Date, required: true },
-    maxGddLastMonth: { type: Number, required: true },
-    maxGddThisMonth: { type: Number, required: true },
-  },
-  computed: {
-    hoursSubmittedThisMonth() {
-      return afterComma((1000 - this.maxGddThisMonth) / 20)
-    },
-    hoursSubmittedLastMonth() {
-      return afterComma((1000 - this.maxGddLastMonth) / 20)
-    },
-    hoursAvailableThisMonth() {
-      return afterComma(this.maxGddThisMonth / 20)
-    },
-    hoursAvailableLastMonth() {
-      return afterComma(this.maxGddLastMonth / 20)
-    },
-  },
-}
+
+const hoursSubmittedThisMonth = computed(() =>
+  afterComma((1000 - props.maxGddThisMonth) / GDD_PER_HOUR),
+)
+const hoursSubmittedLastMonth = computed(() =>
+  afterComma((1000 - props.maxGddLastMonth) / GDD_PER_HOUR),
+)
+const hoursAvailableThisMonth = computed(() => afterComma(props.maxGddThisMonth / GDD_PER_HOUR))
+const hoursAvailableLastMonth = computed(() => afterComma(props.maxGddLastMonth / GDD_PER_HOUR))
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/constants.js b/frontend/src/constants.js
new file mode 100644
index 000000000..2a40a57c8
--- /dev/null
+++ b/frontend/src/constants.js
@@ -0,0 +1 @@
+export const GDD_PER_HOUR = 20
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index c735f35f1..6d7ab8ba0 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -68,6 +68,7 @@ import { createContribution, updateContribution, deleteContribution } from '@/gr
 import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
 import { useAppToast } from '@/composables/useToast'
 import { useI18n } from 'vue-i18n'
+import { GDD_PER_HOUR } from '../constants'
 
 const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
 
@@ -93,7 +94,7 @@ const form = ref({
   date: undefined,
   memo: '',
   hours: '',
-  amount: 20,
+  amount: GDD_PER_HOUR,
 })
 const originalContributionDate = ref('')
 const updateAmount = ref('')