add updateContribution

frontend/src/components/Contributions/ContributionForm.vue

@@ -16,7 +16,7 @@
       <label>{{ $t('time.month') }}</label>
       <b-form-datepicker
         id="testdate"
-        v-model="form.date"
+        v-model="date"
         size="lg"
         :max="max"
         :min="min"
@@ -28,7 +28,7 @@
       <label class="mt-3">{{ $t('contribution.activity') }}</label>
       <b-form-textarea
         id="testmemo"
-        v-model="form.memo"
+        v-model="memo"
         rows="3"
         max-rows="6"
         required
@@ -46,7 +46,7 @@
       <b-input-group size="lg" prepend="GDD" append=".00">
         <b-form-input
           id="testamount"
-          v-model="form.amount"
+          v-model="amount"
           type="number"
           min="1"
           max="1000"
@@ -57,7 +57,7 @@
         <b-button class="test-submit" type="submit" variant="primary" :disabled="disable">
           {{ $t('contribution.submit') }}
         </b-button>
-        {{ $store.state }}
+        {{date}}, {{amount}}, {{ memo}}
       </div>
     </b-form>
   </div>
@@ -70,6 +70,12 @@
  */
 export default {
   name: 'ContributionForm',
+  props: {
+    id: { type: Number, required: false},
+    date: { type: String, required: true},
+    memo: { type: String, required: true},
+    amount: { type: String, required: true},
+  },
   data() {
     return {
       minlength: 50,
@@ -78,9 +84,9 @@ export default {
       min: new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)),
       max: new Date(),
       form: {
-        date: '',
-        memo: '',
-        amount: 0,
+        date: this.date,
+        memo: this.memo,
+        amount: this.amount,
       },
     }
   },
@@ -119,5 +125,11 @@ export default {
       return this.$t('contribution.formText.thisMonth', obj)
     },
   },
+  watch: {
+    id(newId, oldId){
+      console.log('eine id kommt mit')
+    }
+
+  }
 }
 </script>

frontend/src/components/Contributions/ContributionList.vue

@@ -2,7 +2,7 @@
   <div class="contribution-list container">
     {{ items.length }}
     <div class="list-group" v-for="item in items" :key="item.id">
-      <contribution-list-item v-bind="item" />
+      <contribution-list-item v-bind="item" @update-contribution="updateContribution" />
     </div>
     <b-pagination
       v-if="isPaginationVisible"
@@ -50,6 +50,9 @@ export default {
       })
       window.scrollTo(0, 0)
     },
+    updateContribution(item) {
+      this.$emit('update-contribution', item)
+    },
   },
   computed: {
     isPaginationVisible() {

frontend/src/components/Contributions/ContributionListItem.vue

@@ -11,12 +11,20 @@
           <div class="mx-2">{{ $d(new Date(date), 'short') }}</div>
         </div>
         <div class="mr-2">{{ memo }}</div>
-        <div v-if="type === 'pending'" class="text-right pointer">
+        <div
+          v-if="type === 'pending'"
+          class="text-right pointer"
+          @click="
+            $emit('update-contribution', {
+              id: id,
+              createdAt: createdAt,
+              memo: memo,
+              amount: amount,
+            })
+          "
+        >
           <b-icon icon="pencil" class="h2"></b-icon>
         </div>
-        <div v-if="type === 'deleted'" class="text-right pointer">
-          <b-icon icon="trash-fill" class="h2"></b-icon>
-        </div>
       </div>
     </slot>
   </div>
@@ -69,5 +77,10 @@ export default {
       return this.createdAt
     },
   },
+  methods: {
+    updateContribution(item) {
+      this.$emit('update-contribution', item)
+    },
+  },
 }
 </script>

frontend/src/pages/Community.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="community-page">
     <div>
-      <b-tabs content-class="mt-3" align="center">
+      <b-tabs v-model="tabIndex" content-class="mt-3" align="center">
         <b-tab :title="$t('community.writing')" active>
-          <contribution-form @set-contribution="setContribution" />
+          <contribution-form @set-contribution="setContribution" v-bind="form" />
         </b-tab>
         <b-tab :title="$t('community.myContributions')">
           <contribution-list
             :items="items"
             @update-list-contributions="updateListContributions"
+            @update-contribution="updateContribution"
             :contributionCount="contributionCount"
             :showPagination="true"
             :pageSize="pageSize"
@@ -33,10 +34,17 @@ export default {
   },
   data() {
     return {
+      tabIndex: 0,
       items: [],
       currentPage: 1,
       pageSize: 25,
       contributionCount: 0,
+      form: {
+        id: null,
+        date: '',
+        memo: '',
+        amount: '',
+      },
     }
   },
   methods: {
@@ -104,6 +112,12 @@ export default {
           this.$emit('logout')
         })
     },
+    updateContribution(item) {
+      this.tabIndex = 0
+      this.form.date = item.createdAt
+      this.form.memo = item.memo
+      this.form.amount = item.amount
+    },
   },
   created() {
     this.updateListContributions({