fix reset, animated fade out on create contribution

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -41,7 +41,12 @@
         />
       </div>
     </BContainer>
-    <div v-if="contribution.contributionStatus === 'PENDING' || contribution.contributionStatus === 'IN_PROGRESS'">
+    <div
+      v-if="
+        contribution.contributionStatus === 'PENDING' ||
+        contribution.contributionStatus === 'IN_PROGRESS'
+      "
+    >
       <contribution-messages-formular
         :contribution-id="contribution.id"
         :contribution-memo="contribution.memo"

frontend/src/components/Contributions/ContributionCreate.vue

@@ -1,12 +1,15 @@
 <template>
-  <contribution-form
-    v-if="maxForMonths"
-    :model-value="form"
-    :max-gdd-last-month="parseFloat(maxForMonths.openCreations[1].amount)"
-    :max-gdd-this-month="parseFloat(maxForMonths.openCreations[2].amount)"
-    @upsert-contribution="handleCreateContribution"
-    @reset-form="resetForm"
-  />
+  <transition name="fade-out" @after-leave="resetForm">
+    <div v-if="showForm">
+      <contribution-form
+        v-if="maxForMonths"
+        :model-value="form"
+        :max-gdd-last-month="parseFloat(maxForMonths.openCreations[1].amount)"
+        :max-gdd-this-month="parseFloat(maxForMonths.openCreations[2].amount)"
+        @upsert-contribution="handleCreateContribution"
+      />
+    </div>
+  </transition>
 </template>
 
 <script setup>
@@ -29,6 +32,7 @@ const { result: maxForMonths, refetch } = useQuery(
 const { mutate: createContributionMutation } = useMutation(createContribution)
 
 const form = ref(emptyForm())
+const showForm = ref(true)
 
 function emptyForm() {
   return {
@@ -43,14 +47,25 @@ async function handleCreateContribution(contribution) {
   try {
     await createContributionMutation({ ...contribution })
     toastSuccess(t('contribution.submitted'))
-    resetForm()
-    refetch()
+    showForm.value = false
   } catch (err) {
     toastError(err.message)
   }
 }
 
 function resetForm() {
-  form.value = emptyForm()
+  refetch()
+  showForm.value = true
 }
 </script>
+<style scoped>
+.fade-out-enter-active,
+.fade-out-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-out-enter-from,
+.fade-out-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/Contributions/ContributionEdit.vue

@@ -4,7 +4,6 @@
     :max-gdd-last-month="maxForMonths[0]"
     :max-gdd-this-month="maxForMonths[1]"
     @upsert-contribution="handleUpdateContribution"
-    @reset-form="emit('reset-form')"
   />
 </template>
 
@@ -19,7 +18,7 @@ import { useI18n } from 'vue-i18n'
 const { toastError, toastSuccess } = useAppToast()
 const { t } = useI18n()
 
-const emit = defineEmits(['contribution-updated', 'reset-form'])
+const emit = defineEmits(['contribution-updated'])
 
 const props = defineProps({
   modelValue: { type: Object, required: true },

frontend/src/components/Contributions/ContributionForm.vue

@@ -63,7 +63,7 @@
               type="reset"
               variant="secondary"
               data-test="button-cancel"
-              @click="emit('reset-form')"
+              @click="resetForm"
             >
               {{ $t('form.cancel') }}
             </BButton>
@@ -84,7 +84,6 @@
     </BForm>
   </div>
 </template>
-
 <script setup>
 import { reactive, computed, watch, ref, onMounted, onUnmounted, toRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -96,13 +95,6 @@ import { GDD_PER_HOUR } from '../../constants'
 
 const amountToHours = (amount) => parseFloat(amount / GDD_PER_HOUR).toFixed(2)
 const hoursToAmount = (hours) => parseFloat(hours * GDD_PER_HOUR).toFixed(2)
-const entityDataToForm = (entityData) => ({
-  ...entityData,
-  hours: entityData.hours !== undefined ? entityData.hours : amountToHours(entityData.amount),
-  contributionDate: entityData.contributionDate
-    ? new Date(entityData.contributionDate).toISOString().slice(0, 10)
-    : undefined,
-})
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -114,7 +106,18 @@ const emit = defineEmits(['upsert-contribution', 'update:modelValue', 'reset-for
 
 const { t } = useI18n()
 
-const form = reactive(entityDataToForm(props.modelValue))
+const entityDataToForm = computed(() => ({
+  ...props.modelValue,
+  hours:
+    props.modelValue.hours !== undefined
+      ? props.modelValue.hours
+      : amountToHours(props.modelValue.amount),
+  contributionDate: props.modelValue.contributionDate
+    ? new Date(props.modelValue.contributionDate).toISOString().slice(0, 10)
+    : undefined,
+}))
+
+const form = reactive({ ...entityDataToForm.value })
 
 const now = ref(new Date()) // checked every minute, updated if day, month or year changed
 
@@ -209,6 +212,9 @@ const updateField = (newValue, name) => {
 function submit() {
   emit('upsert-contribution', toRaw(form))
 }
+function resetForm() {
+  Object.assign(form, entityDataToForm.value)
+}
 </script>
 <style>
 .form-style {