fix (frontend): Better History Messages

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -4,14 +4,14 @@
       <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>
-      <linkify-message :message="message.message"></linkify-message>
+      <linkify-message v-bind="message"></linkify-message>
     </div>
     <div v-else class="is-moderator text-left">
       <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('community.moderator') }}</small>
-      <linkify-message :message="message.message"></linkify-message>
+      <linkify-message v-bind="message"></linkify-message>
     </div>
   </div>
 </template>

frontend/src/components/ContributionMessages/LinkifyMessage.vue

@@ -2,6 +2,14 @@
   <div class="mt-2">
     <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
       <b-link v-if="type === 'link'" :href="text" target="_blank">{{ text }}</b-link>
+      <span v-else-if="type === 'date'">
+        {{ $d(new Date(text), 'short') }}
+        <br />
+      </span>
+      <span v-else-if="type === 'amount'">
+        <br />
+        {{ text | GDD }}
+      </span>
       <span v-else>{{ text }}</span>
     </span>
   </div>
@@ -17,11 +25,22 @@ export default {
       type: String,
       required: true,
     },
+    type: {
+      type: String,
+      reuired: true,
+    },
   },
   computed: {
     linkifiedMessage() {
-      const linkified = []
       let string = this.message
+      const linkified = []
+      let amount
+      if (this.type === 'HISTORY') {
+        const split = string.split(/\n\s*---\n\s*/)
+        string = split[1]
+        linkified.push({ type: 'date', text: split[0].trim() })
+        amount = split[2].trim()
+      }
       let match
       while ((match = string.match(LINK_REGEX_PATTERN))) {
         if (match.index > 0)
@@ -30,6 +49,7 @@ export default {
         string = string.substring(match.index + match[0].length)
       }
       if (string.length > 0) linkified.push({ type: 'text', text: string })
+      if (amount) linkified.push({ type: 'amount', text: amount })
       return linkified
     },
   },