change form, ,maxlenght 255, add items for list

frontend/src/components/Contributions/ContributionForm.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="container contribution-form">
-    <b-form @submit="submit">
+    <b-form @submit.prevent="submit">
       <label>{{ $t('time.month') }}</label>
-      <b-form-radio-group
+      <b-form-datepicker
-        v-model="form.selected"
+        v-model="form.date"
-        :options="options"
+        size="lg"
-        class="mb-3"
+        :max="max"
-        value-field="value"
+        :min="min"
-        text-field="name"
+        class="mb-4"
-        disabled-field="notEnabled"
+        reset-value=""
-      ></b-form-radio-group>
+        :label-no-date-selected="$t('contribution.noDateSelected')"
+        required
+      ></b-form-datepicker>
       <label class="mt-3">{{ $t('contribution.activity') }}</label>
       <b-form-textarea
         id="textarea"
@@ -19,6 +21,7 @@
         max-rows="6"
         required
         :minlength="minlength"
+        :maxlength="maxlength"
       ></b-form-textarea>
       <div
         class="text-right"
@@ -47,26 +50,19 @@ export default {
   data() {
     return {
       minlength: 50,
-      maxlength: 500,
+      maxlength: 255,
+      min: new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)),
+      max: new Date(),
       form: {
-        selected: this.$moment().format('MMMM'),
+        date: '',
         memo: '',
-
         amount: 0,
       },
-      options: [
-        {
-          name: this.$moment().subtract(1, 'months').format('MMMM'),
-          value: this.$moment().subtract(1, 'months').format('MMMM'),
-        },
-        { name: this.$moment().format('MMMM'), value: this.$moment().format('MMMM') },
-      ],
     }
   },
   methods: {
-    submit(event) {
+    submit() {
-      event.preventDefault()
+      this.$emit('set-contribution', this.form)
-      alert(JSON.stringify(this.form))
     },
   },
   computed: {

frontend/src/locales/de.json

@@ -34,7 +34,8 @@
   },
   "contribution": {
     "activity":"Tätigkeit",
-    "submit":"Einreichen"
+    "submit":"Einreichen",
+    "noDateSelected": "Kein Datum ausgewählt"
   },
   "contribution-link": {
     "thanksYouWith": "dankt dir mit"

frontend/src/locales/en.json

@@ -34,7 +34,8 @@
   },
   "contribution": {
     "activity":"Activity",
-    "submit":"Submit"
+    "submit":"Submit",
+    "noDateSelected": "No date selected"
   },
   "contribution-link": {
     "thanksYouWith": "thanks you with"

frontend/src/pages/Community.vue

@@ -3,13 +3,14 @@
     <div>
       <b-tabs content-class="mt-3" align="center">
         <b-tab :title="$t('community.writing')" active>
-          <contribution-form />
+          <contribution-form @set-contribution="setContribution" />
         </b-tab>
         <b-tab :title="$t('community.myContributions')">
-          <p>{{ $t('community.myContributions') }}</p>
+          <contribution-list :items="items" />
         </b-tab>
         <b-tab :title="$t('navigation.community')">
-          <p>{{ $t('navigation.community') }}</p>
+          <contribution-list :items="items" />
+          <contribution-list :items="items" />
         </b-tab>
       </b-tabs>
     </div>
@@ -17,10 +18,63 @@
 </template>
 <script>
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
+import ContributionList from '@/components/Contributions/ContributionList.vue'
+import { createContribution } from '@/graphql/mutations'
+
 export default {
   name: 'Community',
   components: {
     ContributionForm,
+    ContributionList,
+  },
+  data() {
+    return {
+      items: [
+        {
+          id: '0',
+          date: '07/06/2022',
+          memo: 'sadd sd ad adad asd asd asd ad',
+          amount: 200,
+          status: 'pending',
+        },
+        {
+          id: '1',
+          date: '06/22/2022',
+          memo: 'sadd sd ad adad asd asd asd ad',
+          amount: 600,
+          status: 'pending',
+        },
+        {
+          id: '2',
+          date: '05/04/2022',
+          memo: 'sadd sd ad adad asd asd asd ad',
+          amount: 1200,
+          status: 'pending',
+        },
+      ],
+    }
+  },
+  methods: {
+    setContribution(data) {
+      // console.log('setContribution', data)
+      this.$apollo
+        .query({
+          fetchPolicy: 'no-cache',
+          query: createContribution,
+          variables: {
+            creationDate: data.date,
+            memo: data.memo,
+            amount: data.amount,
+          },
+        })
+        .then((result) => {
+          // console.log('result', result.data)
+          this.toastSuccess(result.data)
+        })
+        .catch((err) => {
+          this.toastError(err.message)
+        })
+    },
   },
 }
 </script>