refactor history message, fix test for ContributionMessagesListItem.spec.js

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', () => {

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>

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": {

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": {