style contributionMessages and List

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="contribution-messages-list">
     <b-container>
-      {{ messagesCount }}
+      {{ messages.lenght }}
       <div v-for="message in messages" v-bind:key="message.id">
-        <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 :message="message" />
 
         <!-- <contribution-messages-list-item :typeId="message.isModerator">
           <template #1>
@@ -28,6 +24,7 @@
 <script>
 import ContributionMessagesListItem from './slots/ContributionMessagesListItem.vue'
 import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
+import { listContributionMessages } from '../../graphql/listContributionMessages.js'
 
 export default {
   name: 'ContributionMessagesList',
@@ -40,15 +37,35 @@ export default {
       type: Number,
       required: true,
     },
-    messagesCount: {
-      type: Number,
-      required: true,
-    },
-    messages: {
-      type: Array,
-      required: true,
+  },
+  data() {
+    return {
+      messages: [],
+    }
+  },
+  methods: {
+    getListContributionMessages(id) {
+      // console.log('getListContributionMessages', id)
+      this.messages = []
+      this.$apollo
+        .query({
+          query: listContributionMessages,
+          variables: {
+            contributionId: id,
+          },
+        })
+        .then((result) => {
+          // console.log('result', result.data.listContributionMessages)
+          this.messages = result.data.listContributionMessages.messages
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
     },
   },
+  created() {
+    this.getListContributionMessages(this.contributionId)
+  },
 }
 </script>
 <style scoped>

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

@@ -25,13 +25,13 @@ export default {
   },
   data() {
     return {
-      storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+      // storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
       moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
     }
   },
   computed: {
     isModerator() {
-      return this.storeName === this.moderationName
+      return this.$store.state.moderator.id === this.message.userId
     },
   },
 }

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

@@ -1,8 +1,14 @@
 <template>
   <div class="slot-is-moderator">
-    <b-avatar square text="AA"></b-avatar>
-    <span class="ml-2 mr-2">{{ message.firstName }} {{ message.lastName }}</span>
-    <div class="mt-2">{{ message }}</div>
+    <b-avatar
+      square
+      :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
+      variant="warning"
+    ></b-avatar>
+    <span class="ml-2 mr-2">
+      {{ message.userFirstName }} {{ message.userLastName }} (Moderator)
+    </span>
+    <div class="mt-2 text-bold h4">{{ message.message }}</div>
   </div>
 </template>
 <script>
@@ -20,7 +26,6 @@ export default {
 <style>
 .slot-is-moderator {
   clear: both;
-  background-color: rgb(250, 158, 207);
   width: 75%;
   margin-top: 20px;
 }

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

@@ -1,9 +1,14 @@
 <template>
   <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>
-      <div class="mt-2">{{ message }}</div>
+      <b-avatar
+        :text="`${message.userFirstName[0]} ${message.userLastName[0]}`"
+        variant="info"
+      ></b-avatar>
+      <span class="ml-2 mr-2 text-bold">
+        {{ message.userFirstName }} {{ message.userLastName }}
+      </span>
+      <div class="mt-2 text-bold h4">{{ message.message }}</div>
     </div>
   </div>
 </template>
@@ -26,7 +31,6 @@ export default {
 .slot-is-not-moderator {
   clear: both;
   float: right;
-  background-color: aquamarine;
   width: 75%;
   margin-top: 20px;
   margin-bottom: 20px;

admin/src/components/Tables/OpenCreationsTable.vue

@@ -2,7 +2,6 @@
   <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"
@@ -22,10 +21,7 @@
         >
           <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
         </b-button>
-        <b-button
-          v-else
-          @click="rowToggleDetails(row, 0), getListContributionMessages(row.item.id)"
-        >
+        <b-button v-else @click="rowToggleDetails(row, 0)">
           <b-icon icon="chat-dots"></b-icon>
           <b-icon icon="exclamation-circle-fill"></b-icon>
         </b-button>
@@ -56,11 +52,7 @@
               />
             </div>
             <div v-else>
-              <contribution-messages-list
-                :contributionId="row.item.id"
-                :messages="messages"
-                :messagesCount="messagesCount"
-              />
+              <contribution-messages-list :contributionId="row.item.id" />
             </div>
           </template>
         </row-details>
@@ -74,7 +66,6 @@ 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',
@@ -101,30 +92,10 @@ 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,12 +1,7 @@
 import gql from 'graphql-tag'
 
 export const listContributionMessages = gql`
-  query (
-    $contributionId: Float!
-    $pageSize: Int = 25
-    $currentPage: Int = 1
-    $order: Order = DESC
-  ) {
+  query ($contributionId: Float!, $pageSize: Int = 25, $currentPage: Int = 1, $order: Order = ASC) {
     listContributionMessages(
       contributionId: $contributionId
       pageSize: $pageSize