parse history message in admin interface

admin/src/components/ContributionMessages/LinkifyMessage.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="mt-2">
-    <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
+    <span v-for="({ type, text }, index) in parsedMessage" :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>
@@ -12,17 +20,28 @@ const LINK_REGEX_PATTERN =
   /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
 
 export default {
-  name: 'LinkifyMessage',
+  name: 'ParseMessage',
   props: {
     message: {
       type: String,
       required: true,
     },
+    type: {
+      type: String,
+      reuired: true,
+    },
   },
   computed: {
-    linkifiedMessage() {
-      const linkified = []
+    parsedMessage() {
       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)
@@ -31,6 +50,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
     },
   },

admin/src/components/ContributionMessages/ParseMessage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="mt-2">
+    <span v-for="({ type, text }, index) in parsedMessage" :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 />
+        {{ $n(parseFloat(text), 'decimal') }} GDD
+      </span>
+      <span v-else>{{ text }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+const LINK_REGEX_PATTERN =
+  /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
+
+export default {
+  name: 'ParseMessage',
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      reuired: true,
+    },
+  },
+  computed: {
+    parsedMessage() {
+      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)
+          linkified.push({ type: 'text', text: string.substring(0, match.index) })
+        linkified.push({ type: 'link', text: match[0] })
+        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
+    },
+  },
+}
+</script>

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

@@ -5,23 +5,23 @@
       <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>
-      <linkify-message :message="message.message"></linkify-message>
+      <parse-message v-bind="message"></parse-message>
     </div>
     <div v-else class="text-left is-not-moderator">
       <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>
+      <parse-message v-bind="message"></parse-message>
     </div>
   </div>
 </template>
 <script>
-import LinkifyMessage from '@/components/ContributionMessages/LinkifyMessage.vue'
+import ParseMessage from '@/components/ContributionMessages/ParseMessage.vue'
 
 export default {
   name: 'ContributionMessagesListItem',
   components: {
-    LinkifyMessage,
+    ParseMessage,
   },
   props: {
     message: {