add apollo mutation createContributionMessage

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -7,7 +7,7 @@
           <b-col cols="1"><b-avatar square text="AA"></b-avatar></b-col>
           <b-col cols="11">
             <pre class="mt-2">
-            {{ $store.state.moderator.firstName }} {{ $store.state.moderator.lastName }}
+            {{ $store.state.firstName }} {{ $store.state.lastName }}
             </pre>
           </b-col>
         </b-row>
@@ -34,8 +34,16 @@
   </div>
 </template>
 <script>
+import {createContributionMessage} from '../../graphql/mutations.js'
+
 export default {
   name: 'ContributionMessagesFormular',
+  props: {
+    contributionId: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       form: {
@@ -46,7 +54,20 @@ export default {
   methods: {
     onSubmit(event) {
       event.preventDefault()
-      alert(JSON.stringify(this.form))
+      this.$apollo
+        .mutate({
+          mutation: createContributionMessage,
+          variables: {
+            contributionId: this.contributionId,
+            message: this.form.text,
+          },
+        })
+        .then((result) => {
+          this.toastSuccess(result)
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
     },
     onReset(event) {
       event.preventDefault()

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -2,11 +2,11 @@
   <div class="contribution-messages-list">
     <b-container>
       <div v-for="message in messages" v-bind:key="message.id">
-        <contribution-messages-list-item :typeId="message.isModerator">
-          <template #1>
+        <contribution-messages-list-item :typeId="state">
+          <template #IN_PROGRESS>
             <is-moderator :message="message"></is-moderator>
           </template>
-          <template #0>
+          <template #PENDING>
             <is-not-moderator :message="message" class="text-right"></is-not-moderator>
           </template>
         </contribution-messages-list-item>
@@ -15,7 +15,7 @@
     <br />
     <br />
     <br />
-    <contribution-messages-formular />
+    <contribution-messages-formular :contributionId="contributionId" />
   </div>
 </template>
 <script>
@@ -31,47 +31,19 @@ export default {
     IsNotModerator,
     ContributionMessagesFormular,
   },
-  data() {
-    return {
-      messages: [
-        {
-          id: '0',
-          msgid: '0',
-          memo: 'kjsdn sdnnasd andandandak sd n askdna kdnak asdnadjasndk adkand',
-          uuid: '1',
-          firstName: 'peter',
-          lastName: 'lustig',
-          isModerator: 1,
-        },
-        {
-          id: '1',
-          msgid: '0',
-          memo: 'nftzfD dfRDTD FDdrD TFt F ZTFZF TZfz FF T TZF Z ff ',
-          uuid: '2',
-          firstName: 'bibi',
-          lastName: 'bloxberg',
-          isModerator: 0,
-        },
-        {
-          id: '2',
-          msgid: '0',
-          memo: 'oG iu Hih hi  ',
-          uuid: '1',
-          firstName: 'peter',
-          lastName: 'lustig',
-          isModerator: 1,
-        },
-        {
-          id: '3',
-          msgid: '0',
-          memo: 'zdg  gdggs ds gdggusgdug nftz s s ZF TZfz FF 564c ',
-          uuid: '2',
-          firstName: 'bibi',
-          lastName: 'bloxberg',
-          isModerator: 0,
-        },
-      ],
-    }
+  props: {
+    contributionId: {
+      type: Number,
+      required: true,
+    },
+    state: {
+      type: String,
+      required: true,
+    },
+    messages: {
+      type: Array,
+      required: true,
+    },
   },
 }
 </script>

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -8,7 +8,7 @@ export default {
   name: 'ContributionMessagesListItem',
   props: {
     typeId: {
-      type: Number,
+      type: String,
       required: true,
     },
   },

frontend/src/components/ContributionMessages/slots/IsModerator.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="slot-is-moderator">
     <b-avatar square text="AA"></b-avatar>
-    <span class="ml-2 mr-2">{{ message.firstName }} {{ message.lastName }}</span>
+    <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
     <div class="mt-2">{{ message }}</div>
   </div>
 </template>

frontend/src/components/ContributionMessages/slots/IsNotModerator.vue

@@ -2,7 +2,9 @@
   <div class="slot-is-not-moderator">
     <div class="text-right">
       <b-avatar text="BV"></b-avatar>
-      <span class="ml-2 mr-2 text-bold">{{ message.firstName }} {{ message.lastName }}</span>
+      <span class="ml-2 mr-2 text-bold">
+        {{ message.userFirstName }} {{ message.userLastName }}
+      </span>
       <div class="mt-2">{{ message }}</div>
     </div>
   </div>

frontend/src/components/Contributions/ContributionList.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="contribution-list container">
     <div class="list-group" v-for="item in items" :key="item.id">
+    {{item}}
       <contribution-list-item
         v-bind="item"
+        :contributionId="item.id"
         @update-contribution-form="updateContributionForm"
         @delete-contribution="deleteContribution"
       />

frontend/src/components/Contributions/ContributionListItem.vue

@@ -5,7 +5,7 @@
         <div class="d-inline-flex">
           <div class="mr-2"><b-icon :icon="icon" :variant="variant" class="h2"></b-icon></div>
           <div v-if="firstName" class="mr-3">{{ firstName }} {{ lastName }}</div>
-          <div class="mr-2" :class="type != 'deleted' ? 'font-weight-bold' : ''">
+          <div class="mr-2" :class="state !== 'DELETED' ? 'font-weight-bold' : ''">
             {{ amount | GDD }}
           </div>
           {{ $t('math.minus') }}
@@ -18,7 +18,10 @@
           </span>
         </div>
         <div class="mr-2">{{ memo }}</div>
-        <div v-if="type === 'pending' && !firstName" class="d-flex flex-row-reverse">
+        <div
+          v-if="(state !== 'DELETED' && !firstName) || (state !== 'CONFIRMED' && !firstName)"
+          class="d-flex flex-row-reverse"
+        >
           <div
             class="pointer ml-5"
             @click="
@@ -35,18 +38,21 @@
           <div class="pointer" @click="deleteContribution({ id })">
             <b-icon icon="trash" class="h2"></b-icon>
           </div>
-          <div v-if="inProcess && type === 'pending'" class="pointer">
+          <div v-if="messages" class="pointer">
             <b-icon v-b-toggle="collapsId" icon="chat-dots" class="h2 mr-5"></b-icon>
           </div>
         </div>
-
-        <div v-if="inProcess && type === 'pending'">
-          <b-button v-if="inProcess && id > 36" v-b-toggle="collapsId" variant="primary">
+        <div v-if="messages">
+          <b-button v-if="state === 'IN_PROGRESS'" v-b-toggle="collapsId" variant="primary">
             Bitte beantworte die Nachfrage
           </b-button>
           <b-collapse :id="collapsId" class="mt-2">
             <b-card>
-              <contribution-messages-list />
+              <contribution-messages-list
+                :messages="messages"
+                :state="state"
+                :contributionId="contributionId"
+              />
             </b-card>
           </b-collapse>
         </div>
@@ -98,6 +104,18 @@ export default {
       type: String,
       required: false,
     },
+    state: {
+      type: String,
+      required: false,
+    },
+    messages: {
+      type: Array,
+      required: false,
+    },
+    contributionId: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -105,11 +123,6 @@ export default {
     }
   },
   computed: {
-    type() {
-      if (this.deletedAt) return 'deleted'
-      if (this.confirmedAt) return 'confirmed'
-      return 'pending'
-    },
     icon() {
       if (this.deletedAt) return 'x-circle'
       if (this.confirmedAt) return 'check'
@@ -121,9 +134,6 @@ export default {
       return 'primary'
     },
     date() {
-      // if (this.deletedAt) return this.deletedAt
-      // if (this.confirmedAt) return this.confirmedAt
-      // return this.contributionDate
       return this.createdAt
     },
     collapsId() {

frontend/src/graphql/mutations.js

@@ -122,3 +122,17 @@ export const deleteContribution = gql`
     deleteContribution(id: $id)
   }
 `
+
+export const createContributionMessage = gql`
+  mutation($contributionId: Float!, $message: String!) {
+    createContributionMessage(contributionId: $contributionId, message: $message) {
+      id
+      message
+      createdAt
+      updatedAt
+      type
+      userFirstName
+      userLastName
+    }
+  }
+`