From d742697a34ee9bd579db6921fc48576c6d665c78 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 21 Jun 2023 12:24:00 +0200
Subject: [PATCH 01/20] add moderator messages message type, add mutation
 adminListContributionMessages

---
 .../ContributionMessagesFormular.spec.js      | 10 ++++---
 .../ContributionMessagesFormular.vue          | 26 ++++++++++++++++---
 .../ContributionMessagesList.vue              |  7 ++---
 .../graphql/adminListContributionMessages.js  | 24 +++++++++++++++++
 4 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 admin/src/graphql/adminListContributionMessages.js

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index a81009c09..c575ba01c 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -64,7 +64,7 @@ describe('ContributionMessagesFormular', () => {
             text: 'text form message',
           },
         })
-        await wrapper.find('form').trigger('submit')
+        await wrapper.find('[data-test="submit-dialog"]').trigger('click')
       })
 
       it('emitted "get-list-contribution-messages" with data', async () => {
@@ -84,7 +84,7 @@ describe('ContributionMessagesFormular', () => {
       beforeEach(async () => {
         apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
         wrapper = Wrapper()
-        await wrapper.find('form').trigger('submit')
+        await wrapper.find('[data-test="submit-dialog"]').trigger('submit')
       })
 
       it('toasts an error message', () => {
@@ -100,7 +100,11 @@ describe('ContributionMessagesFormular', () => {
           },
         })
         wrapper = Wrapper()
-        await wrapper.find('form').trigger('submit')
+        await wrapper.find('data-test="submit-dialog').trigger('submit')
+      })
+
+      it('moderatorMesage has `DIALOG`', () => {
+        expect(wrapper.vm.messageType).toBeCalledWith('DIALOG')
       })
 
       it('toasts an success message', () => {
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 3a5d6e0b8..a13df5ef9 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="contribution-messages-formular">
     <div class="mt-5">
-      <b-form @submit.prevent="onSubmit" @reset.prevent="onReset">
+      <b-form @reset.prevent="onReset">
         <b-form-textarea
           id="textarea"
           v-model="form.text"
@@ -12,8 +12,27 @@
           <b-col>
             <b-button type="reset" variant="danger">{{ $t('form.cancel') }}</b-button>
           </b-col>
+          <b-col>
+            <b-button
+              type="button"
+              variant="warning"
+              class="text-black"
+              :disabled="disabled"
+              @click="onSubmit('MODERATOR')"
+              data-test="submit-moderator"
+            >
+              Moderator Notiz
+            </b-button>
+          </b-col>
+
           <b-col class="text-right">
-            <b-button type="submit" variant="primary" :disabled="disabled">
+            <b-button
+              type="submit"
+              variant="primary"
+              :disabled="disabled"
+              @click="onSubmit('DIALOG')"
+              data-test="submit-dialog"
+            >
               {{ $t('form.submit') }}
             </b-button>
           </b-col>
@@ -42,7 +61,7 @@ export default {
     }
   },
   methods: {
-    onSubmit(event) {
+    onSubmit(mType) {
       this.loading = true
       this.$apollo
         .mutate({
@@ -50,6 +69,7 @@ export default {
           variables: {
             contributionId: this.contributionId,
             message: this.form.text,
+            messageType: mType,
           },
         })
         .then((result) => {
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index fab6b5e4a..b41892b40 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -18,7 +18,7 @@
 <script>
 import ContributionMessagesListItem from './slots/ContributionMessagesListItem'
 import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular'
-import { listContributionMessages } from '../../graphql/listContributionMessages.js'
+import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
 
 export default {
   name: 'ContributionMessagesList',
@@ -45,14 +45,15 @@ export default {
     getListContributionMessages(id) {
       this.$apollo
         .query({
-          query: listContributionMessages,
+          query: adminListContributionMessages,
           variables: {
             contributionId: id,
           },
           fetchPolicy: 'no-cache',
         })
         .then((result) => {
-          this.messages = result.data.listContributionMessages.messages
+          console.log(result)
+          this.messages = result.data.adminListContributionMessages.messages
         })
         .catch((error) => {
           this.toastError(error.message)
diff --git a/admin/src/graphql/adminListContributionMessages.js b/admin/src/graphql/adminListContributionMessages.js
new file mode 100644
index 000000000..c6a95f4ce
--- /dev/null
+++ b/admin/src/graphql/adminListContributionMessages.js
@@ -0,0 +1,24 @@
+import gql from 'graphql-tag'
+
+export const adminListContributionMessages = gql`
+  query ($contributionId: Int!, $pageSize: Int = 25, $currentPage: Int = 1, $order: Order = ASC) {
+    adminListContributionMessages(
+      contributionId: $contributionId
+      pageSize: $pageSize
+      currentPage: $currentPage
+      order: $order
+    ) {
+      count
+      messages {
+        id
+        message
+        createdAt
+        updatedAt
+        type
+        userFirstName
+        userLastName
+        userId
+      }
+    }
+  }
+`

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 02/20] 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>

From 031f58651a622f75406a57d0c708a7fe450765aa Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 21 Jun 2023 13:31:47 +0200
Subject: [PATCH 03/20] add stle for hidden moderator messages 2

---
 .../slots/ContributionMessagesListItem.vue                 | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 0b8a6f31f..37e05334a 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -8,7 +8,12 @@
       <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" :class="message.type === 'MODERATOR' ? 'text-success' : 'text-warning'">{{ $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 />

From 95acf084f7ce53fb2cc6288aeeb5d6369dca6890 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 21 Jun 2023 19:20:03 +0200
Subject: [PATCH 04/20] get it working

---
 .../ContributionMessages/ContributionMessagesList.vue     | 8 +++-----
 admin/src/graphql/adminCreateContributionMessage.js       | 8 ++++++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index bc488d9ed..3ea1c4bc9 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -18,8 +18,7 @@
 <script>
 import ContributionMessagesListItem from './slots/ContributionMessagesListItem'
 import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular'
-import { listContributionMessages } from '../../graphql/listContributionMessages.js'
-// import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
+import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
 
 export default {
   name: 'ContributionMessagesList',
@@ -46,15 +45,14 @@ export default {
     getListContributionMessages(id) {
       this.$apollo
         .query({
-          query: listContributionMessages,
+          query: adminListContributionMessages,
           variables: {
             contributionId: id,
           },
           fetchPolicy: 'no-cache',
         })
         .then((result) => {
-          console.log(result)
-          this.messages = result.data.listContributionMessages.messages
+          this.messages = result.data.adminListContributionMessages.messages
         })
         .catch((error) => {
           this.toastError(error.message)
diff --git a/admin/src/graphql/adminCreateContributionMessage.js b/admin/src/graphql/adminCreateContributionMessage.js
index 747e6d7d4..66750b833 100644
--- a/admin/src/graphql/adminCreateContributionMessage.js
+++ b/admin/src/graphql/adminCreateContributionMessage.js
@@ -1,8 +1,12 @@
 import gql from 'graphql-tag'
 
 export const adminCreateContributionMessage = gql`
-  mutation ($contributionId: Int!, $message: String!) {
-    adminCreateContributionMessage(contributionId: $contributionId, message: $message) {
+  mutation ($contributionId: Int!, $message: String!, $messageType: ContributionMessageType) {
+    adminCreateContributionMessage(
+      contributionId: $contributionId
+      message: $message
+      messageType: $messageType
+    ) {
       id
       message
       createdAt

From c3f7b30e323ca96cf6c59610aa39233af56e843e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 26 Jun 2023 10:11:13 +0200
Subject: [PATCH 05/20] messages only visible for moderators

---
 .../ContributionMessagesFormular.vue          |  2 +-
 .../slots/ContributionMessagesListItem.vue    | 60 +++++++++++--------
 admin/src/locales/de.json                     |  6 +-
 admin/src/locales/en.json                     |  7 ++-
 admin/src/pages/CreationConfirm.vue           | 10 ++--
 5 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index a13df5ef9..68a58ec08 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -21,7 +21,7 @@
               @click="onSubmit('MODERATOR')"
               data-test="submit-moderator"
             >
-              Moderator Notiz
+              {{ $t('moderator.notice') }}
             </b-button>
           </b-col>
 
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 37e05334a..4a212ef23 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,29 +1,27 @@
 <template>
   <div class="contribution-messages-list-item">
     <div
-      v-if="message.isModerator"
-      class="text-right is-moderator"
-      :class="message.type === 'MODERATOR' ? 'is-hidden-moderator-message p-2' : ''"
+      v-if="isModerator"
+      class="text-right is-moderator p-2 rounded-sm mb-3"
+      :class="isModeratorMessage ? 'is-hidden-moderator-message ' : 'is-moderator-message'"
     >
-      <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"
-        :class="message.type === 'MODERATOR' ? 'text-success' : 'text-warning'"
-      >
-        {{ $t('moderator') }}
+      <small class="ml-4">
+        {{ $t('moderator.moderator') }}
       </small>
+      <small class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</small>
+      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <b-avatar square variant="warning"></b-avatar>
+
       <parse-message v-bind="message"></parse-message>
-      <small v-if="message.type === 'MODERATOR'">
+      <small v-if="isModeratorMessage">
         <hr />
-        Diese Nachricht ist nur für die Moderatoren sichtbar!
+        {{ $t('moderator.request') }}
       </small>
     </div>
-    <div v-else class="text-left is-not-moderator">
+    <div v-else class="text-left is-user p-2 rounded-sm is-user-message mb-3">
       <b-avatar variant="info"></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-2">{{ $d(new Date(message.createdAt), 'short') }}</small>
       <parse-message v-bind="message"></parse-message>
     </div>
   </div>
@@ -42,24 +40,36 @@ export default {
       required: true,
     },
   },
+  computed: {
+    isModerator() {
+      return (
+        this.message.userFirstName === this.$store.state.moderator.firstName &&
+        this.message.userLastName === this.$store.state.moderator.lastName
+      )
+    },
+    isModeratorMessage() {
+      return this.message.type === 'MODERATOR'
+    },
+  },
 }
 </script>
 <style>
-.is-not-moderator {
-  clear: both;
-  width: 75%;
-  margin-top: 20px;
-  /* background-color: rgb(261, 204, 221); */
-}
 .is-moderator {
   clear: both;
   float: right;
   width: 75%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  /* background-color: rgb(255, 255, 128); */
+}
+.is-moderator-message {
+  background-color: rgb(228, 237, 245);
 }
 .is-hidden-moderator-message {
-  background-color: rgb(161, 194, 228);
+  background-color: rgb(217, 161, 228);
+}
+.is-user {
+  clear: both;
+  width: 75%;
+}
+.is-user-message {
+  background-color: rgb(236, 235, 213);
 }
 </style>
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index e7fb80062..cc6b4d5ec 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -108,7 +108,11 @@
   "message": {
     "request": "Die Anfrage wurde gesendet."
   },
-  "moderator": "Moderator",
+  "moderator": {
+    "moderator": "Moderator",
+    "notice": "Moderator Notiz",
+    "modalNote":"Diese Nachricht ist nur für die Moderatoren sichtbar!"
+  },
   "name": "Name",
   "navbar": {
     "automaticContributions": "Automatische Beiträge",
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 8ed53cd4b..0a74b0fed 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -108,8 +108,11 @@
   "message": {
     "request": "Request has been sent."
   },
-  "moderator": "Moderator",
-  "name": "Name",
+  "moderator": {
+    "moderator": "Moderator",
+    "notice": "Moderator note",
+    "request":"This message is only visible to the moderators!"
+  },
   "navbar": {
     "automaticContributions": "Automatic Contributions",
     "instances": "Instances",
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index 53ffbd66e..415f2edf7 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -217,7 +217,7 @@ export default {
               return this.formatDateOrDash(value)
             },
           },
-          { key: 'moderatorId', label: this.$t('moderator') },
+          { key: 'moderatorId', label: this.$t('moderator.moderator') },
           { key: 'editCreation', label: this.$t('chat') },
           { key: 'confirm', label: this.$t('save') },
         ],
@@ -254,7 +254,7 @@ export default {
               return this.formatDateOrDash(value)
             },
           },
-          { key: 'confirmedBy', label: this.$t('moderator') },
+          { key: 'confirmedBy', label: this.$t('moderator.moderator') },
           { key: 'chatCreation', label: this.$t('chat') },
         ],
         [
@@ -290,7 +290,7 @@ export default {
               return this.formatDateOrDash(value)
             },
           },
-          { key: 'deniedBy', label: this.$t('moderator') },
+          { key: 'deniedBy', label: this.$t('moderator.moderator') },
           { key: 'chatCreation', label: this.$t('chat') },
         ],
         [
@@ -326,7 +326,7 @@ export default {
               return this.formatDateOrDash(value)
             },
           },
-          { key: 'deletedBy', label: this.$t('moderator') },
+          { key: 'deletedBy', label: this.$t('moderator.moderator') },
           { key: 'chatCreation', label: this.$t('chat') },
         ],
         [
@@ -363,7 +363,7 @@ export default {
               return this.formatDateOrDash(value)
             },
           },
-          { key: 'confirmedBy', label: this.$t('moderator') },
+          { key: 'confirmedBy', label: this.$t('moderator.moderator') },
           { key: 'chatCreation', label: this.$t('chat') },
         ],
       ][this.tabIndex]

From 0b8f822a944fe0f88516c5952b93253cf716a668 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 26 Jun 2023 10:19:02 +0200
Subject: [PATCH 06/20] Added missing locales

---
 admin/src/locales/de.json | 2 +-
 admin/src/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index cc6b4d5ec..cf072934e 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -111,7 +111,7 @@
   "moderator": {
     "moderator": "Moderator",
     "notice": "Moderator Notiz",
-    "modalNote":"Diese Nachricht ist nur für die Moderatoren sichtbar!"
+    "request": "Diese Nachricht ist nur für die Moderatoren sichtbar!"
   },
   "name": "Name",
   "navbar": {
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 0a74b0fed..350e98675 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -111,7 +111,7 @@
   "moderator": {
     "moderator": "Moderator",
     "notice": "Moderator note",
-    "request":"This message is only visible to the moderators!"
+    "request": "This message is only visible to the moderators!"
   },
   "navbar": {
     "automaticContributions": "Automatic Contributions",

From e14cfff6d689237fa5768b67e6d1aabc841d4ee6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 26 Jun 2023 10:20:09 +0200
Subject: [PATCH 07/20] Added missing locales

---
 admin/src/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 350e98675..1526b42df 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -113,6 +113,7 @@
     "notice": "Moderator note",
     "request": "This message is only visible to the moderators!"
   },
+  "name": "Name",
   "navbar": {
     "automaticContributions": "Automatic Contributions",
     "instances": "Instances",

From 1d53de99c2d9da041ff9b77fa08b87f255a00d23 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 26 Jun 2023 11:35:53 +0200
Subject: [PATCH 08/20] check for userId to filter moderators

---
 .../ContributionMessagesList.vue              |  9 +++++-
 .../ContributionMessagesListItem.spec.js      | 32 +++++++++----------
 .../slots/ContributionMessagesListItem.vue    | 31 +++++++++++-------
 .../components/Tables/OpenCreationsTable.vue  |  1 +
 4 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index 3ea1c4bc9..c6038b13c 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -2,7 +2,10 @@
   <div class="contribution-messages-list">
     <b-container>
       <div v-for="message in messages" v-bind:key="message.id">
-        <contribution-messages-list-item :message="message" />
+        <contribution-messages-list-item
+          :message="message"
+          :contributionUserId="contributionUserId"
+        />
       </div>
     </b-container>
 
@@ -35,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    contributionUserId: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index d02b5053a..3f9fef77d 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -13,6 +13,14 @@ describe('ContributionMessagesListItem', () => {
     $t: jest.fn((t) => t),
     $d: dateMock,
     $n: numberMock,
+    $store: {
+      state: {
+        moderator: {
+          firstName: 'Peter',
+          lastName: 'Lustig',
+        },
+      },
+    },
   }
 
   describe('if message author has moderator role', () => {
@@ -51,27 +59,21 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has the complete user name', () => {
-        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(2)').text()).toBe(
-          'Peter Lustig',
-        )
+        expect(wrapper.find('[data-test="moderator-name"]').text()).toBe('Peter Lustig')
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.text-right.is-moderator > span:nth-child(3)').text()).toMatch(
+        expect(wrapper.find('[data-test="moderator-date"]').text()).toMatch(
           'Mon Aug 29 2022 12:23:27 GMT+0000',
         )
       })
 
       it('has the moderator label', () => {
-        expect(wrapper.find('div.text-right.is-moderator > small:nth-child(4)').text()).toBe(
-          'moderator',
-        )
+        expect(wrapper.find('[data-test="moderator-label"]').text()).toBe('moderator.moderator')
       })
 
       it('has the message', () => {
-        expect(wrapper.find('div.text-right.is-moderator > div:nth-child(5)').text()).toBe(
-          'Lorem ipsum?',
-        )
+        expect(wrapper.find('[data-test="moderator-message"]').text()).toBe('Lorem ipsum?')
       })
     })
   })
@@ -107,23 +109,21 @@ describe('ContributionMessagesListItem', () => {
       })
 
       it('has a DIV .text-left.is-not-moderator', () => {
-        expect(wrapper.find('div.text-left.is-not-moderator').exists()).toBe(true)
+        expect(wrapper.find('div.text-left.is-user').exists()).toBe(true)
       })
 
       it('has the complete user name', () => {
-        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(2)').text()).toBe(
-          'Bibi Bloxberg',
-        )
+        expect(wrapper.find('[data-test="user-name"]').text()).toBe('Bibi Bloxberg')
       })
 
       it('has the message creation date', () => {
-        expect(wrapper.find('div.is-not-moderator.text-left > span:nth-child(3)').text()).toMatch(
+        expect(wrapper.find('[data-test="user-date"]').text()).toMatch(
           'Mon Aug 29 2022 12:25:34 GMT+0000',
         )
       })
 
       it('has the message', () => {
-        expect(wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)').text()).toBe(
+        expect(wrapper.find('[data-test="user-message"]').text()).toBe(
           'Asda sdad ad asdasd, das Ass das Das.',
         )
       })
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 4a212ef23..5be952a2c 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -5,14 +5,18 @@
       class="text-right is-moderator p-2 rounded-sm mb-3"
       :class="isModeratorMessage ? 'is-hidden-moderator-message ' : 'is-moderator-message'"
     >
-      <small class="ml-4">
+      <small class="ml-4" data-test="moderator-label">
         {{ $t('moderator.moderator') }}
       </small>
-      <small class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</small>
-      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
+      <small class="ml-2" data-test="moderator-date">
+        {{ $d(new Date(message.createdAt), 'short') }}
+      </small>
+      <span class="ml-2 mr-2" data-test="moderator-name">
+        {{ message.userFirstName }} {{ message.userLastName }}
+      </span>
       <b-avatar square variant="warning"></b-avatar>
 
-      <parse-message v-bind="message"></parse-message>
+      <parse-message v-bind="message" data-test="moderator-message"></parse-message>
       <small v-if="isModeratorMessage">
         <hr />
         {{ $t('moderator.request') }}
@@ -20,9 +24,13 @@
     </div>
     <div v-else class="text-left is-user p-2 rounded-sm is-user-message mb-3">
       <b-avatar variant="info"></b-avatar>
-      <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
-      <small class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</small>
-      <parse-message v-bind="message"></parse-message>
+      <span class="ml-2 mr-2" data-test="user-name">
+        {{ message.userFirstName }} {{ message.userLastName }}
+      </span>
+      <small class="ml-2" data-test="user-date">
+        {{ $d(new Date(message.createdAt), 'short') }}
+      </small>
+      <parse-message v-bind="message" data-test="user-message"></parse-message>
     </div>
   </div>
 </template>
@@ -39,13 +47,14 @@ export default {
       type: Object,
       required: true,
     },
+    contributionUserId: {
+      type: Number,
+      required: true,
+    },
   },
   computed: {
     isModerator() {
-      return (
-        this.message.userFirstName === this.$store.state.moderator.firstName &&
-        this.message.userLastName === this.$store.state.moderator.lastName
-      )
+      return this.contributionUserId !== this.message.userId
     },
     isModeratorMessage() {
       return this.message.type === 'MODERATOR'
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 9d93eba60..33e9bb141 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -103,6 +103,7 @@
               <contribution-messages-list
                 :contributionId="row.item.id"
                 :contributionState="row.item.state"
+                :contributionUserId="row.item.userId"
                 @update-state="updateState"
               />
             </div>

From 6f1bb9653b7ad1c6c763640eef96027e549b4aad Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Jun 2023 09:38:39 +0200
Subject: [PATCH 09/20] refactor history message, fix test for
 ContributionMessagesListItem.spec.js

---
 .../ContributionMessagesListItem.spec.js      | 10 ++++--
 .../slots/ContributionMessagesListItem.vue    | 33 +++++++++++++------
 admin/src/locales/de.json                     |  3 +-
 admin/src/locales/en.json                     |  3 +-
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index 3f9fef77d..9f8ad5ba2 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -26,6 +26,7 @@ describe('ContributionMessagesListItem', () => {
   describe('if message author has moderator role', () => {
     const propsData = {
       contributionId: 42,
+      contributionUserId: 108,
       state: 'PENDING',
       message: {
         id: 111,
@@ -81,6 +82,7 @@ describe('ContributionMessagesListItem', () => {
   describe('if message author does not have moderator role', () => {
     const propsData = {
       contributionId: 42,
+      contributionUserId: 108,
       state: 'PENDING',
       message: {
         id: 113,
@@ -132,6 +134,7 @@ describe('ContributionMessagesListItem', () => {
 
   describe('links in contribtion message', () => {
     const propsData = {
+      contributionUserId: 108,
       message: {
         id: 111,
         message: 'Lorem ipsum?',
@@ -159,7 +162,7 @@ describe('ContributionMessagesListItem', () => {
       beforeEach(() => {
         propsData.message.message = 'https://gradido.net/de/'
         wrapper = ModeratorItemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)')
+        messageField = wrapper.find('[data-test="moderator-message"]')
       })
 
       it('contains the link as text', () => {
@@ -176,7 +179,7 @@ describe('ContributionMessagesListItem', () => {
         propsData.message.message = `Here you find all you need to know about Gradido: https://gradido.net/de/
 and here is the link to the repository: https://github.com/gradido/gradido`
         wrapper = ModeratorItemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)')
+        messageField = wrapper.find('[data-test="moderator-message"]')
       })
 
       it('contains the whole text', () => {
@@ -196,6 +199,7 @@ and here is the link to the repository: https://github.com/gradido/gradido`)
 
   describe('contribution message type HISTORY', () => {
     const propsData = {
+      contributionUserId: 108,
       message: {
         id: 111,
         message: `Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time)
@@ -227,7 +231,7 @@ This message also contains a link: https://gradido.net/de/
       beforeEach(() => {
         jest.clearAllMocks()
         wrapper = itemWrapper()
-        messageField = wrapper.find('div.is-not-moderator.text-left > div:nth-child(4)')
+        messageField = wrapper
       })
 
       it('renders the date', () => {
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 5be952a2c..67a42433e 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="contribution-messages-list-item">
-    <div
-      v-if="isModerator"
-      class="text-right is-moderator p-2 rounded-sm mb-3"
-      :class="isModeratorMessage ? 'is-hidden-moderator-message ' : 'is-moderator-message'"
-    >
+    <div v-if="isModeratorMessage" class="text-right p-2 rounded-sm mb-3" :class="boxClass">
       <small class="ml-4" data-test="moderator-label">
         {{ $t('moderator.moderator') }}
       </small>
@@ -17,12 +13,12 @@
       <b-avatar square variant="warning"></b-avatar>
 
       <parse-message v-bind="message" data-test="moderator-message"></parse-message>
-      <small v-if="isModeratorMessage">
+      <small v-if="isModeratorHiddenMessage">
         <hr />
         {{ $t('moderator.request') }}
       </small>
     </div>
-    <div v-else class="text-left is-user p-2 rounded-sm is-user-message mb-3">
+    <div v-else class="text-left p-2 rounded-sm mb-3" :class="boxClass">
       <b-avatar variant="info"></b-avatar>
       <span class="ml-2 mr-2" data-test="user-name">
         {{ message.userFirstName }} {{ message.userLastName }}
@@ -30,6 +26,11 @@
       <small class="ml-2" data-test="user-date">
         {{ $d(new Date(message.createdAt), 'short') }}
       </small>
+      <small v-if="isHistory">
+        <hr />
+        {{ $t('moderator.history') }}
+        <hr />
+      </small>
       <parse-message v-bind="message" data-test="user-message"></parse-message>
     </div>
   </div>
@@ -53,12 +54,21 @@ export default {
     },
   },
   computed: {
-    isModerator() {
+    isModeratorMessage() {
       return this.contributionUserId !== this.message.userId
     },
-    isModeratorMessage() {
+    isModeratorHiddenMessage() {
       return this.message.type === 'MODERATOR'
     },
+    isHistory() {
+      return this.message.type === 'HISTORY'
+    },
+    boxClass() {
+      if (this.isModeratorMessage) return 'is-moderator is-moderator-message'
+      if (this.isModeratorHiddenMessage) return 'is-moderator is-moderator-hidden-message'
+      if (this.isHistory) return 'is-user is-user-history-message'
+      return 'is-user is-user-message'
+    },
   },
 }
 </script>
@@ -71,7 +81,7 @@ export default {
 .is-moderator-message {
   background-color: rgb(228, 237, 245);
 }
-.is-hidden-moderator-message {
+.is-moderator-hidden-message {
   background-color: rgb(217, 161, 228);
 }
 .is-user {
@@ -81,4 +91,7 @@ export default {
 .is-user-message {
   background-color: rgb(236, 235, 213);
 }
+.is-user-history-message {
+  background-color: rgb(235, 226, 57);
+}
 </style>
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index cf072934e..a15fc139e 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -111,7 +111,8 @@
   "moderator": {
     "moderator": "Moderator",
     "notice": "Moderator Notiz",
-    "request": "Diese Nachricht ist nur für die Moderatoren sichtbar!"
+    "request": "Diese Nachricht ist nur für die Moderatoren sichtbar!",
+    "history": "Die Daten wurden geändert. Dies sind die alten Daten."
   },
   "name": "Name",
   "navbar": {
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 1526b42df..b173b38f3 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -111,7 +111,8 @@
   "moderator": {
     "moderator": "Moderator",
     "notice": "Moderator note",
-    "request": "This message is only visible to the moderators!"
+    "request": "This message is only visible to the moderators!",
+    "history": "The data has been changed. This is the old data."
   },
   "name": "Name",
   "navbar": {

From f4408a14ae36a5399895628e642439ef7410c5bf Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Jun 2023 09:41:30 +0200
Subject: [PATCH 10/20] fix test for ContributionMessagesList.spec.js

---
 .../ContributionMessages/ContributionMessagesList.spec.js        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
index f0b6ea821..d0ef8cd91 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
@@ -10,6 +10,7 @@ describe('ContributionMessagesList', () => {
 
   const propsData = {
     contributionId: 42,
+    contributionUserId: 108,
     contributionState: 'PENDING',
   }
 

From 13657682b2a132026bf741ed52b5768db3e72ffa Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Jun 2023 11:46:00 +0200
Subject: [PATCH 11/20] delete src/graphql/listContributionMessages.js

---
 admin/src/graphql/listContributionMessages.js | 25 -------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 admin/src/graphql/listContributionMessages.js

diff --git a/admin/src/graphql/listContributionMessages.js b/admin/src/graphql/listContributionMessages.js
deleted file mode 100644
index a311598e2..000000000
--- a/admin/src/graphql/listContributionMessages.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import gql from 'graphql-tag'
-
-export const listContributionMessages = gql`
-  query ($contributionId: Int!, $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
-        isModerator
-      }
-    }
-  }
-`

From 387d9e87b79fa1d23fb8cafdd6a214c254d0bfad Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Jun 2023 14:39:10 +0200
Subject: [PATCH 12/20] fix test for ContributionMessagesFormular.spec.js

---
 .../ContributionMessagesFormular.spec.js             |  9 +++++----
 .../ContributionMessagesFormular.vue                 | 12 ++++++++----
 .../slots/ContributionMessagesListItem.vue           |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index c575ba01c..941973b27 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -64,7 +64,7 @@ describe('ContributionMessagesFormular', () => {
             text: 'text form message',
           },
         })
-        await wrapper.find('[data-test="submit-dialog"]').trigger('click')
+        await wrapper.find('form').trigger('submit')
       })
 
       it('emitted "get-list-contribution-messages" with data', async () => {
@@ -84,7 +84,7 @@ describe('ContributionMessagesFormular', () => {
       beforeEach(async () => {
         apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
         wrapper = Wrapper()
-        await wrapper.find('[data-test="submit-dialog"]').trigger('submit')
+        await wrapper.find('form').trigger('submit')
       })
 
       it('toasts an error message', () => {
@@ -100,11 +100,12 @@ describe('ContributionMessagesFormular', () => {
           },
         })
         wrapper = Wrapper()
-        await wrapper.find('data-test="submit-dialog').trigger('submit')
+        await wrapper.find('form').trigger('submit')
+        wrapper.vm.$nextTick()
       })
 
       it('moderatorMesage has `DIALOG`', () => {
-        expect(wrapper.vm.messageType).toBeCalledWith('DIALOG')
+        expect(wrapper.vm.messageType.DIALOG).toBe('DIALOG')
       })
 
       it('toasts an success message', () => {
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 68a58ec08..056db4508 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="contribution-messages-formular">
     <div class="mt-5">
-      <b-form @reset.prevent="onReset">
+      <b-form @reset.prevent="onReset" @submit="onSubmit(messageType.DIALOG)">
         <b-form-textarea
           id="textarea"
           v-model="form.text"
@@ -12,13 +12,13 @@
           <b-col>
             <b-button type="reset" variant="danger">{{ $t('form.cancel') }}</b-button>
           </b-col>
-          <b-col>
+          <b-col class="text-center">
             <b-button
               type="button"
               variant="warning"
               class="text-black"
               :disabled="disabled"
-              @click="onSubmit('MODERATOR')"
+              @click.prevent="onSubmit(messageType.MODERATOR)"
               data-test="submit-moderator"
             >
               {{ $t('moderator.notice') }}
@@ -30,7 +30,7 @@
               type="submit"
               variant="primary"
               :disabled="disabled"
-              @click="onSubmit('DIALOG')"
+              @click.prevent="onSubmit(messageType.DIALOG)"
               data-test="submit-dialog"
             >
               {{ $t('form.submit') }}
@@ -58,6 +58,10 @@ export default {
         text: '',
       },
       loading: false,
+      messageType: {
+        DIALOG: 'DIALOG',
+        MODERATOR: 'MODERATOR',
+      },
     }
   },
   methods: {
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 67a42433e..4492fa88f 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -64,9 +64,9 @@ export default {
       return this.message.type === 'HISTORY'
     },
     boxClass() {
-      if (this.isModeratorMessage) return 'is-moderator is-moderator-message'
       if (this.isModeratorHiddenMessage) return 'is-moderator is-moderator-hidden-message'
       if (this.isHistory) return 'is-user is-user-history-message'
+      if (this.isModeratorMessage) return 'is-moderator is-moderator-message'
       return 'is-user is-user-message'
     },
   },

From 2099322ef4eccf4437a246292e76abd3ce230857 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 14:55:30 +0200
Subject: [PATCH 13/20] improve test for API call

---
 .../ContributionMessagesFormular.spec.js      | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index e102aa132..23ade8c77 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import ContributionMessagesFormular from './ContributionMessagesFormular'
 import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
+import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
 
 const localVue = global.localVue
 
@@ -34,6 +35,7 @@ describe('ContributionMessagesFormular', () => {
   describe('mount', () => {
     beforeEach(() => {
       wrapper = Wrapper()
+      jest.clearAllMocks()
     })
 
     it('has a DIV .contribution-messages-formular', () => {
@@ -80,6 +82,32 @@ describe('ContributionMessagesFormular', () => {
       })
     })
 
+    describe('send contribution message with success', () => {
+      beforeEach(async () => {
+        await wrapper.setData({
+          form: {
+            text: 'text form message',
+          },
+        })
+        await wrapper.find('form').trigger('submit')
+      })
+
+      it('moderatorMesage has `DIALOG`', () => {
+        expect(apolloMutateMock).toBeCalledWith({
+          mutation: adminCreateContributionMessage,
+          variables: {
+            contributionId: 42,
+            message: 'text form message',
+            messageType: 'DIALOG',
+          },
+        })
+      })
+
+      it('toasts an success message', () => {
+        expect(toastSuccessSpy).toBeCalledWith('message.request')
+      })
+    })
+
     describe('send contribution message with error', () => {
       beforeEach(async () => {
         apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
@@ -91,26 +119,5 @@ describe('ContributionMessagesFormular', () => {
         expect(toastErrorSpy).toBeCalledWith('OUCH!')
       })
     })
-
-    describe('send contribution message with success', () => {
-      beforeEach(async () => {
-        wrapper.setData({
-          form: {
-            text: 'text form message',
-          },
-        })
-        wrapper = Wrapper()
-        await wrapper.find('form').trigger('submit')
-        wrapper.vm.$nextTick()
-      })
-
-      it('moderatorMesage has `DIALOG`', () => {
-        expect(wrapper.vm.messageType.DIALOG).toBe('DIALOG')
-      })
-
-      it('toasts an success message', () => {
-        expect(toastSuccessSpy).toBeCalledWith('message.request')
-      })
-    })
   })
 })

From 58b5a0afc6a9e50e5e515310e9f4c61b7a72509b Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 15:00:46 +0200
Subject: [PATCH 14/20] test submit MODERATOR message type

---
 .../ContributionMessagesFormular.spec.js      | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index 23ade8c77..38faa3da2 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -82,14 +82,14 @@ describe('ContributionMessagesFormular', () => {
       })
     })
 
-    describe('send contribution message with success', () => {
+    describe('send DIALOG contribution message with success', () => {
       beforeEach(async () => {
         await wrapper.setData({
           form: {
             text: 'text form message',
           },
         })
-        await wrapper.find('form').trigger('submit')
+        await wrapper.findAll('button').at(2).trigger('click')
       })
 
       it('moderatorMesage has `DIALOG`', () => {
@@ -108,6 +108,32 @@ describe('ContributionMessagesFormular', () => {
       })
     })
 
+    describe('send MODERATOR contribution message with success', () => {
+      beforeEach(async () => {
+        await wrapper.setData({
+          form: {
+            text: 'text form message',
+          },
+        })
+        await wrapper.findAll('button').at(1).trigger('click')
+      })
+
+      it('moderatorMesage has `MODERATOR`', () => {
+        expect(apolloMutateMock).toBeCalledWith({
+          mutation: adminCreateContributionMessage,
+          variables: {
+            contributionId: 42,
+            message: 'text form message',
+            messageType: 'MODERATOR',
+          },
+        })
+      })
+
+      it('toasts an success message', () => {
+        expect(toastSuccessSpy).toBeCalledWith('message.request')
+      })
+    })
+
     describe('send contribution message with error', () => {
       beforeEach(async () => {
         apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })

From b898ca62d38883682085875ce8657979c0268a84 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 15:03:37 +0200
Subject: [PATCH 15/20] use data test for button selectors

---
 .../ContributionMessages/ContributionMessagesFormular.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
index 38faa3da2..b7f01f8b8 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
@@ -89,7 +89,7 @@ describe('ContributionMessagesFormular', () => {
             text: 'text form message',
           },
         })
-        await wrapper.findAll('button').at(2).trigger('click')
+        await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
       })
 
       it('moderatorMesage has `DIALOG`', () => {
@@ -115,7 +115,7 @@ describe('ContributionMessagesFormular', () => {
             text: 'text form message',
           },
         })
-        await wrapper.findAll('button').at(1).trigger('click')
+        await wrapper.find('button[data-test="submit-moderator"]').trigger('click')
       })
 
       it('moderatorMesage has `MODERATOR`', () => {

From a2d17ba509dd3a5d519f8be3908d4b3046c8ccee Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 15:40:19 +0200
Subject: [PATCH 16/20] refactor apollo query, improved test

---
 .../ContributionMessagesList.spec.js          | 115 +++++++++++++++---
 .../ContributionMessagesList.vue              |  40 +++---
 .../graphql/adminListContributionMessages.js  |   1 +
 3 files changed, 118 insertions(+), 38 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
index d0ef8cd91..35fa8916e 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
@@ -1,27 +1,102 @@
 import { mount } from '@vue/test-utils'
 import ContributionMessagesList from './ContributionMessagesList'
+import VueApollo from 'vue-apollo'
+import { createMockClient } from 'mock-apollo-client'
+import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
+import { toastErrorSpy } from '../../../test/testSetup'
+
+const mockClient = createMockClient()
+const apolloProvider = new VueApollo({
+  defaultClient: mockClient,
+})
 
 const localVue = global.localVue
 
-const apolloQueryMock = jest.fn().mockResolvedValue()
+localVue.use(VueApollo)
+
+const defaultData = () => {
+  return {
+    adminListContributionMessages: {
+      count: 4,
+      messages: [
+        {
+          id: 43,
+          message: 'A DIALOG message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'DIALOG',
+          userFirstName: 'Peter',
+          userLastName: 'Lustig',
+          userId: 1,
+          isModerator: true,
+        },
+        {
+          id: 44,
+          message: 'Another DIALOG message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'DIALOG',
+          userFirstName: 'Bibi',
+          userLastName: 'Bloxberg',
+          userId: 2,
+          isModerator: false,
+        },
+        {
+          id: 45,
+          message: `DATE
+---
+A HISTORY message
+---
+AMOUNT`,
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'HISTORY',
+          userFirstName: 'Bibi',
+          userLastName: 'Bloxberg',
+          userId: 2,
+          isModerator: false,
+        },
+        {
+          id: 46,
+          message: 'A MODERATOR message',
+          createdAt: new Date().toString(),
+          updatedAt: null,
+          type: 'MODERATOR',
+          userFirstName: 'Peter',
+          userLastName: 'Lustig',
+          userId: 1,
+          isModerator: true,
+        },
+      ],
+    },
+  }
+}
 
 describe('ContributionMessagesList', () => {
   let wrapper
 
+  const adminListContributionMessagessMock = jest.fn()
+
+  mockClient.setRequestHandler(
+    adminListContributionMessages,
+    adminListContributionMessagessMock
+      .mockRejectedValueOnce({ message: 'Auaa!' })
+      .mockResolvedValue({ data: defaultData() }),
+  )
+
   const propsData = {
     contributionId: 42,
     contributionUserId: 108,
-    contributionState: 'PENDING',
+    contributionStatus: 'PENDING',
   }
 
   const mocks = {
     $t: jest.fn((t) => t),
+    $d: jest.fn((d) => d),
+    $n: jest.fn((d) => d),
     $i18n: {
       locale: 'en',
     },
-    $apollo: {
-      query: apolloQueryMock,
-    },
   }
 
   const Wrapper = () => {
@@ -29,30 +104,34 @@ describe('ContributionMessagesList', () => {
       localVue,
       mocks,
       propsData,
+      apolloProvider,
     })
   }
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
-    it('sends query to Apollo when created', () => {
-      expect(apolloQueryMock).toBeCalledWith(
-        expect.objectContaining({
-          variables: {
-            contributionId: propsData.contributionId,
-          },
-        }),
-      )
+    describe('server response for admin list contribution messages is error', () => {
+      it('toast an error message', () => {
+        expect(toastErrorSpy).toBeCalledWith('Auaa!')
+      })
     })
 
-    it('has a DIV .contribution-messages-list', () => {
-      expect(wrapper.find('div.contribution-messages-list').exists()).toBe(true)
-    })
+    describe('server response is succes', () => {
+      it('has a DIV .contribution-messages-list', () => {
+        expect(wrapper.find('div.contribution-messages-list').exists()).toBe(true)
+      })
 
-    it('has a Component ContributionMessagesFormular', () => {
-      expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
+      it('has 4 messages', () => {
+        expect(wrapper.findAll('div.contribution-messages-list-item')).toHaveLength(4)
+      })
+
+      it('has a Component ContributionMessagesFormular', () => {
+        expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
+      })
     })
   })
 })
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index b74b6923b..e53b371e2 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -12,7 +12,7 @@
     <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
       <contribution-messages-formular
         :contributionId="contributionId"
-        @get-list-contribution-messages="getListContributionMessages"
+        @get-list-contribution-messages="$apollo.queries.Messages.refetch()"
         @update-status="updateStatus"
       />
     </div>
@@ -48,30 +48,30 @@ export default {
       messages: [],
     }
   },
-  methods: {
-    getListContributionMessages(id) {
-      this.$apollo
-        .query({
-          query: adminListContributionMessages,
-          variables: {
-            contributionId: id,
-          },
-          fetchPolicy: 'no-cache',
-        })
-        .then((result) => {
-          this.messages = result.data.adminListContributionMessages.messages
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
+  apollo: {
+    Messages: {
+      query() {
+        return adminListContributionMessages
+      },
+      variables() {
+        return {
+          contributionId: this.contributionId,
+        }
+      },
+      fetchPolicy: 'no-cache',
+      update({ adminListContributionMessages }) {
+        this.messages = adminListContributionMessages.messages
+      },
+      error({ message }) {
+        this.toastError(message)
+      },
     },
+  },
+  methods: {
     updateStatus(id) {
       this.$emit('update-status', id)
     },
   },
-  created() {
-    this.getListContributionMessages(this.contributionId)
-  },
 }
 </script>
 <style scoped>
diff --git a/admin/src/graphql/adminListContributionMessages.js b/admin/src/graphql/adminListContributionMessages.js
index c6a95f4ce..fb5e7c8c1 100644
--- a/admin/src/graphql/adminListContributionMessages.js
+++ b/admin/src/graphql/adminListContributionMessages.js
@@ -18,6 +18,7 @@ export const adminListContributionMessages = gql`
         userFirstName
         userLastName
         userId
+        isModerator
       }
     }
   }

From 0c96c76d322c62c896707ca6c26a5023fc3b59d6 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 15:47:41 +0200
Subject: [PATCH 17/20] add moderatorId to avoid schema warnings

---
 admin/src/components/CreationTransactionList.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/admin/src/components/CreationTransactionList.spec.js b/admin/src/components/CreationTransactionList.spec.js
index bff1bb32c..28aa1707d 100644
--- a/admin/src/components/CreationTransactionList.spec.js
+++ b/admin/src/components/CreationTransactionList.spec.js
@@ -39,6 +39,7 @@ const defaultData = () => {
           deletedBy: null,
           deletedAt: null,
           createdAt: new Date(),
+          moderatorId: null,
         },
         {
           id: 2,
@@ -61,6 +62,7 @@ const defaultData = () => {
           deletedBy: null,
           deletedAt: null,
           createdAt: new Date(),
+          moderatorId: null,
         },
       ],
     },

From 7462e6f36ef567e581f13fa7562b2f53e8bef5b6 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 29 Jun 2023 16:01:32 +0200
Subject: [PATCH 18/20] sort locales

---
 admin/src/locales/de.json | 4 ++--
 admin/src/locales/en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index 18412c969..1f5e41fbe 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -109,10 +109,10 @@
     "request": "Die Anfrage wurde gesendet."
   },
   "moderator": {
+    "history": "Die Daten wurden geändert. Dies sind die alten Daten.",
     "moderator": "Moderator",
     "notice": "Moderator Notiz",
-    "request": "Diese Nachricht ist nur für die Moderatoren sichtbar!",
-    "history": "Die Daten wurden geändert. Dies sind die alten Daten."
+    "request": "Diese Nachricht ist nur für die Moderatoren sichtbar!"
   },
   "name": "Name",
   "navbar": {
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 095b53970..99c438365 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -109,10 +109,10 @@
     "request": "Request has been sent."
   },
   "moderator": {
+    "history": "The data has been changed. This is the old data.",
     "moderator": "Moderator",
     "notice": "Moderator note",
-    "request": "This message is only visible to the moderators!",
-    "history": "The data has been changed. This is the old data."
+    "request": "This message is only visible to the moderators!"
   },
   "name": "Name",
   "navbar": {

From a5dae526fc091432088eb83c93e6e5b3d0bb9a00 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Jun 2023 10:07:24 +0200
Subject: [PATCH 19/20] refactor names state to status

---
 .../ContributionMessages/ContributionMessagesList.vue         | 1 -
 admin/src/components/Tables/OpenCreationsTable.vue            | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.vue b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
index e53b371e2..15877feef 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -8,7 +8,6 @@
         />
       </div>
     </b-container>
-
     <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
       <contribution-messages-formular
         :contributionId="contributionId"
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 50324a8b3..9542f058d 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -102,9 +102,9 @@
             <div v-else>
               <contribution-messages-list
                 :contributionId="row.item.id"
-                :contributionState="row.item.state"
+                :contributionStatus="row.item.status"
                 :contributionUserId="row.item.userId"
-                @update-state="updateState"
+                @update-status="updateStatus"
               />
             </div>
           </template>

From c9c328518c50e3510f473c80e06197871d4fc4e3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Jun 2023 10:42:26 +0200
Subject: [PATCH 20/20] fix test ContributionMessagesList.spec.js

---
 .../ContributionMessages/ContributionMessagesList.spec.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
index 35fa8916e..023f65974 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
+++ b/admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
@@ -93,7 +93,7 @@ describe('ContributionMessagesList', () => {
   const mocks = {
     $t: jest.fn((t) => t),
     $d: jest.fn((d) => d),
-    $n: jest.fn((d) => d),
+    $n: jest.fn((n) => n),
     $i18n: {
       locale: 'en',
     },