Merge pull request #3583 from gradido/ui_success_message_creation_like_transfer

feat(frontend): success message on create contribution like on send

frontend/src/components/Contributions/ContributionCreate.vue

@@ -1,15 +1,28 @@
 <template>
-  <transition name="fade-out" @after-leave="resetForm">
+  <div>
     <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)"
+        :max-gdd-last-month="maxGddLastMonth"
+        :max-gdd-this-month="maxGddThisMonth"
+        :success-message="$t('contribution.submitted')"
         @upsert-contribution="handleCreateContribution"
       />
     </div>
-  </transition>
+    <div v-else>
+      <open-creations-amount
+        :minimal-date="minimalDate"
+        :max-gdd-last-month="maxGddLastMonth"
+        :max-gdd-this-month="maxGddThisMonth"
+      />
+      <div class="mb-3"></div>
+      <success-message
+        :message="$t('contribution.submitted')"
+        @on-back="showForm = true"
+      ></success-message>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -18,11 +31,12 @@ import { GDD_PER_HOUR } from '@/constants'
 import { useQuery, useMutation } from '@vue/apollo-composable'
 import { openCreationsAmounts, createContribution } from '@/graphql/contributions.graphql'
 import { useAppToast } from '@/composables/useToast'
-import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import SuccessMessage from '@/components/SuccessMessage.vue'
+import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
+import { useMinimalContributionDate } from '@/composables/useMinimalContributionDate'
 
-const { toastError, toastSuccess } = useAppToast()
-const { t } = useI18n()
+const { toastError } = useAppToast()
 
 const { result: maxForMonths, refetch } = useQuery(
   openCreationsAmounts,
@@ -34,6 +48,10 @@ const { mutate: createContributionMutation } = useMutation(createContribution)
 const form = ref(emptyForm())
 const showForm = ref(true)
 
+const maxGddLastMonth = computed(() => parseFloat(maxForMonths.value?.openCreations[1].amount))
+const maxGddThisMonth = computed(() => parseFloat(maxForMonths.value?.openCreations[2].amount))
+const minimalDate = computed(() => useMinimalContributionDate(new Date()))
+
 function emptyForm() {
   return {
     contributionDate: undefined,
@@ -45,18 +63,14 @@ function emptyForm() {
 
 async function handleCreateContribution(contribution) {
   try {
+    form.value = emptyForm()
     await createContributionMutation({ ...contribution })
-    toastSuccess(t('contribution.submitted'))
+    await refetch()
     showForm.value = false
   } catch (err) {
     toastError(err.message)
   }
 }
-
-function resetForm() {
-  refetch()
-  showForm.value = true
-}
 </script>
 <style scoped>
 .fade-out-enter-active,

frontend/src/components/Contributions/ContributionForm.vue

@@ -95,6 +95,7 @@ import LabeledInput from '@/components/Inputs/LabeledInput'
 import OpenCreationsAmount from './OpenCreationsAmount.vue'
 import { object, date as dateSchema, number, string } from 'yup'
 import { GDD_PER_HOUR } from '../../constants'
+import { useMinimalContributionDate } from '@/composables/useMinimalContributionDate'
 
 const amountToHours = (amount) => parseFloat(amount / GDD_PER_HOUR).toFixed(2)
 const hoursToAmount = (hours) => parseFloat(hours * GDD_PER_HOUR).toFixed(2)
@@ -103,6 +104,7 @@ const props = defineProps({
   modelValue: { type: Object, required: true },
   maxGddLastMonth: { type: Number, required: true },
   maxGddThisMonth: { type: Number, required: true },
+  successMessage: { type: String, required: true },
 })
 
 const emit = defineEmits(['upsert-contribution', 'abort'])
@@ -125,6 +127,7 @@ const form = reactive({ ...entityDataToForm.value })
 const now = ref(new Date()) // checked every minute, updated if day, month or year changed
 const disableSmartValidState = ref(false)
 
+const minimalDate = computed(() => useMinimalContributionDate(now.value))
 const isThisMonth = computed(() => {
   const formContributionDate = new Date(form.contributionDate)
   return (
@@ -133,12 +136,6 @@ const isThisMonth = computed(() => {
   )
 })
 
-const minimalDate = computed(() => {
-  const minimalDate = new Date(now.value)
-  minimalDate.setMonth(now.value.getMonth() - 1, 1)
-  return minimalDate
-})
-
 // reactive validation schema, because some boundaries depend on form input and existing data
 const validationSchema = computed(() => {
   const maxAmounts = Number(

frontend/src/components/SuccessMessage.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="bg-white app-box-shadow gradido-border-radius p-3">
-    <div class="p-4" data-test="send-transaction-success-text">
+    <div class="p-4" data-test="success-message">
       {{ $t('form.thx') }}
       <hr />
-      {{ $t('form.send_transaction_success') }}
+      {{ message }}
     </div>
     <div class="text-center mt-5">
       <BButton variant="primary" @click="$emit('on-back')">
@@ -12,8 +12,15 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'TransactionResultSendSuccess',
-}
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+})
+
+defineEmits(['on-back'])
 </script>

frontend/src/composables/useMinimalContributionDate.js

@@ -0,0 +1,5 @@
+export function useMinimalContributionDate(now) {
+  const minimalDate = new Date(now)
+  minimalDate.setMonth(now.getMonth() - 1, 1)
+  return minimalDate
+}

frontend/src/pages/Send.vue

@@ -28,7 +28,10 @@
         ></transaction-confirmation-link>
       </template>
       <template #transactionResultSendSuccess>
-        <transaction-result-send-success @on-back="onBack"></transaction-result-send-success>
+        <success-message
+          :message="$t('form.send_transaction_success')"
+          @on-back="onBack"
+        ></success-message>
       </template>
       <template #transactionResultSendError>
         <transaction-result-send-error
@@ -58,7 +61,7 @@ import GddSend, { TRANSACTION_STEPS } from '@/components/GddSend'
 import TransactionForm from '@/components/GddSend/TransactionForm'
 import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend'
 import TransactionConfirmationLink from '@/components/GddSend/TransactionConfirmationLink'
-import TransactionResultSendSuccess from '@/components/GddSend/TransactionResultSendSuccess'
+import SuccessMessage from '@/components/SuccessMessage'
 import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError'
 import TransactionResultLink from '@/components/GddSend/TransactionResultLink'
 import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'