reload messages if submited

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -51,6 +51,8 @@ export default {
           },
         })
         .then((result) => {
+          this.$emit('get-list-contribution-messages', this.contributionId)
+          this.form.text = ''
           this.toastSuccess(result)
         })
         .catch((error) => {

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -10,6 +10,7 @@
       class="mt-5"
       :contributionId="contributionId"
       @toggle-contribution-messages-box="toggleContributionMessagesBox"
+      @get-list-contribution-messages="getListContributionMessages"
     />
   </div>
 </template>
@@ -41,6 +42,9 @@ export default {
     toggleContributionMessagesBox(id) {
       this.$emit('toggle-contribution-messages-box', id)
     },
+    getListContributionMessages() {
+      this.$emit('get-list-contribution-messages', this.contributionId)
+    },
   },
 }
 </script>

frontend/src/components/Contributions/ContributionList.vue

@@ -47,6 +47,7 @@ export default {
   data() {
     return {
       currentPage: 1,
+      messages: [],
     }
   },
   methods: {

frontend/src/components/Contributions/ContributionListItem.vue

@@ -2,7 +2,7 @@
   <div class="contribution-list-item">
     <slot>
       <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
-        <div v-b-toggle="messages.length ? collapsId : ''">
+        <div v-b-toggle="messages.length ? collapsId : ''" @click="getListContributionMessages">
           <div class="d-inline-flex">
             <div class="mr-2">
               <b-icon
@@ -64,10 +64,11 @@
           <b-collapse :id="collapsId" class="mt-2">
             <b-card>
               <contribution-messages-list
-                :messages="messages"
+                :messages="messages_get"
                 :state="state"
                 :contributionId="contributionId"
                 @toggle-contribution-messages-box="toggleContributionMessagesBox"
+                @get-list-contribution-messages="getListContributionMessages"
               />
             </b-card>
           </b-collapse>
@@ -78,6 +79,7 @@
 </template>
 <script>
 import ContributionMessagesList from '@/components/ContributionMessages/ContributionMessagesList.vue'
+import { listContributionMessages } from '../../graphql/queries.js'
 
 export default {
   name: 'ContributionListItem',
@@ -139,6 +141,7 @@ export default {
   data() {
     return {
       inProcess: true,
+      messages_get: [],
     }
   },
   computed: {
@@ -169,6 +172,24 @@ export default {
     toggleContributionMessagesBox(id) {
       alert('toggleContributionMessagesBox(' + id + ')')
     },
+    getListContributionMessages() {
+      console.log('getListContributionMessages', this.contributionId)
+      this.$apollo
+        .query({
+          query: listContributionMessages,
+          variables: {
+            contributionId: this.contributionId,
+          },
+          fetchPolicy: 'no-cache',
+        })
+        .then((result) => {
+          console.log('result', result.data.listContributionMessages.messages)
+          this.messages_get = result.data.listContributionMessages.messages
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
   },
 }
 </script>

frontend/src/graphql/queries.js

@@ -265,3 +265,26 @@ export const searchAdminUsers = gql`
     }
   }
 `
+
+export const listContributionMessages = gql`
+  query($contributionId: Float!, $pageSize: Int = 25, $currentPage: Int = 1, $order: Order = ASC) {
+    listContributionMessages(
+      contributionId: $contributionId
+      pageSize: $pageSize
+      currentPage: $currentPage
+      order: $order
+    ) {
+      count
+      messages {
+        id
+        message
+        createdAt
+        updatedAt
+        type
+        userFirstName
+        userLastName
+        userId
+      }
+    }
+  }
+`