From ef22cb0b6778cb6a0d0b2ec63494998330b7147d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 21 Jun 2023 13:30:53 +0200
Subject: [PATCH] add stle for hidden moderator messages

---
 .../ContributionMessagesList.vue                  |  7 ++++---
 .../slots/ContributionMessagesListItem.vue        | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index b41892b40..bc488d9ed 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -18,7 +18,8 @@
 <script>
 import ContributionMessagesListItem from './slots/ContributionMessagesListItem'
 import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular'
-import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
+import { listContributionMessages } from '../../graphql/listContributionMessages.js'
+// import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
 
 export default {
   name: 'ContributionMessagesList',
@@ -45,7 +46,7 @@ export default {
     getListContributionMessages(id) {
       this.$apollo
         .query({
-          query: adminListContributionMessages,
+          query: listContributionMessages,
           variables: {
             contributionId: id,
           },
@@ -53,7 +54,7 @@ export default {
         })
         .then((result) => {
           console.log(result)
-          this.messages = result.data.adminListContributionMessages.messages
+          this.messages = result.data.listContributionMessages.messages
         })
         .catch((error) => {
           this.toastError(error.message)
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 4b94b0bf1..0b8a6f31f 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,11 +1,19 @@
 <template>
   <div class="contribution-messages-list-item">
-    <div v-if="message.isModerator" class="text-right is-moderator">
+    <div
+      v-if="message.isModerator"
+      class="text-right is-moderator"
+      :class="message.type === 'MODERATOR' ? 'is-hidden-moderator-message p-2' : ''"
+    >
       <b-avatar square variant="warning"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <small class="ml-4 text-success">{{ $t('moderator') }}</small>
+      <small class="ml-4 text-success" :class="message.type === 'MODERATOR' ? 'text-success' : 'text-warning'">{{ $t('moderator') }}</small>
       <parse-message v-bind="message"></parse-message>
+      <small v-if="message.type === 'MODERATOR'">
+        <hr />
+        Diese Nachricht ist nur für die Moderatoren sichtbar!
+      </small>
     </div>
     <div v-else class="text-left is-not-moderator">
       <b-avatar variant="info"></b-avatar>
@@ -46,4 +54,7 @@ export default {
   margin-bottom: 20px;
   /* background-color: rgb(255, 255, 128); */
 }
+.is-hidden-moderator-message {
+  background-color: rgb(161, 194, 228);
+}
 </style>