add listUnconfirmedContributions messages count

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="contribution-messages-list">
     <b-container>
+      {{ messagesCount }}
       <div v-for="message in messages" v-bind:key="message.id">
-        <contribution-messages-list-item :typeId="message.isModerator">
+        <b-container>
+          <div v-for="message in messages" v-bind:key="message.id">
+            <contribution-messages-list-item :message="message" />
+          </div>
+        </b-container>
+
+        <!-- <contribution-messages-list-item :typeId="message.isModerator">
           <template #1>
             <is-moderator :message="message"></is-moderator>
           </template>
           <template #0>
             <is-not-moderator :message="message" class="text-right"></is-not-moderator>
           </template>
-        </contribution-messages-list-item>
+        </contribution-messages-list-item> -->
       </div>
     </b-container>
     <br />
@@ -20,65 +27,27 @@
 </template>
 <script>
 import ContributionMessagesListItem from './slots/ContributionMessagesListItem.vue'
-import IsModerator from './slots/IsModerator.vue'
-import IsNotModerator from './slots/IsNotModerator.vue'
 import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
 
 export default {
   name: 'ContributionMessagesList',
+  components: {
+    ContributionMessagesListItem,
+    ContributionMessagesFormular,
+  },
   props: {
     contributionId: {
       type: Number,
       required: true,
     },
-  },
-  components: {
-    ContributionMessagesListItem,
-    IsModerator,
-    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,
-        },
-      ],
-    }
+    messagesCount: {
+      type: Number,
+      required: true,
+    },
+    messages: {
+      type: Array,
+      required: true,
+    },
   },
 }
 </script>

admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue

@@ -1,15 +1,37 @@
 <template>
   <div>
-    <slot :name="typeId"></slot>
+    <is-moderator v-if="isModerator" :message="message"></is-moderator>
+    <is-not-moderator v-else :message="message"></is-not-moderator>
   </div>
 </template>
 <script>
+import IsModerator from '@/components/ContributionMessages/slots/IsModerator.vue'
+import IsNotModerator from '@/components/ContributionMessages/slots/IsNotModerator.vue'
+
 export default {
   name: 'ContributionMessagesListItem',
+  components: {
+    IsModerator,
+    IsNotModerator,
+  },
   props: {
-    typeId: {
-      type: Number,
+    message: {
+      type: Object,
       required: true,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+      moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
+    }
+  },
+  computed: {
+    isModerator() {
+      return this.storeName === this.moderationName
     },
   },
 }

admin/src/components/Tables/OpenCreationsTable.vue

@@ -2,6 +2,7 @@
   <div class="open-creations-table">
     <b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
       <template #cell(bookmark)="row">
+        {{ row.item }}
         <b-button
           variant="danger"
           size="md"
@@ -21,7 +22,10 @@
         >
           <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
         </b-button>
-        <b-button v-else @click="rowToggleDetails(row, 0)">
+        <b-button
+          v-else
+          @click="rowToggleDetails(row, 0), getListContributionMessages(row.item.id)"
+        >
           <b-icon icon="chat-dots"></b-icon>
           <b-icon icon="exclamation-circle-fill"></b-icon>
         </b-button>
@@ -52,7 +56,11 @@
               />
             </div>
             <div v-else>
-              <contribution-messages-list :contributionId="row.item.id" />
+              <contribution-messages-list
+                :contributionId="row.item.id"
+                :messages="messages"
+                :messagesCount="messagesCount"
+              />
             </div>
           </template>
         </row-details>
@@ -65,8 +73,8 @@
 import { toggleRowDetails } from '../../mixins/toggleRowDetails'
 import RowDetails from '../RowDetails.vue'
 import EditCreationFormular from '../EditCreationFormular.vue'
-
 import ContributionMessagesList from '../ContributionMessages/ContributionMessagesList.vue'
+import { listContributionMessages } from '../../graphql/listContributionMessages.js'
 
 export default {
   name: 'OpenCreationsTable',
@@ -93,10 +101,30 @@ export default {
         date: null,
         memo: null,
         moderator: null,
+        messagesCount: 0,
+        messages: [],
       },
     }
   },
   methods: {
+    getListContributionMessages(id) {
+      console.log('getListContributionMessages', id)
+      this.$apollo
+        .query({
+          query: listContributionMessages,
+          variables: {
+            contributionId: id,
+          },
+        })
+        .then((result) => {
+          console.log('result', result.data.listContributionMessages)
+          this.messagesCount = result.data.getListContributionMessages.count
+          this.messages = result.data.getListContributionMessages.messages
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
     updateCreationData(data) {
       this.creationUserData = data
       // this.creationUserData.amount = data.amount

admin/src/graphql/listContributionMessages.js

@@ -1,7 +1,12 @@
 import gql from 'graphql-tag'
 
 export const listContributionMessages = gql`
-  query ($contributionId: Int, $pageSize: Int = 25, $currentPage: Int = 1, $order: Order = DESC) {
+  query (
+    $contributionId: Float!
+    $pageSize: Int = 25
+    $currentPage: Int = 1
+    $order: Order = DESC
+  ) {
     listContributionMessages(
       contributionId: $contributionId
       pageSize: $pageSize

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -17,6 +17,7 @@
 <script>
 import ContributionMessagesListItem from '@/components/ContributionMessages/ContributionMessagesListItem.vue'
 import ContributionMessagesFormular from '@/components/ContributionMessages/ContributionMessagesFormular.vue'
+
 export default {
   name: 'ContributionMessagesList',
   components: {