Change after Matts suggestions

Co-Authored-By: mattwr18 <mattwr18@gmail.com>

webapp/components/Notification/Notification.vue

@@ -6,19 +6,8 @@
       </ds-space>
       <ds-text data-test="reason-text" color="soft">
         <base-icon
-          v-if="notificationData.report"
-          name="balance-scale"
-          v-tooltip="{ content: $t('notifications.report.name'), placement: 'right' }"
-        />
-        <base-icon
-          v-else-if="notificationData.comment"
-          name="comment"
-          v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
-        />
-        <base-icon
-          v-else
-          name="bookmark"
-          v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
+          :name="notificationData.iconName"
+          v-tooltip="{ content: $t(notificationData.iconTooltip), placement: 'right' }"
         />
         {{
           $t(
@@ -32,23 +21,26 @@
     <nuxt-link :to="notificationData.linkTo" @click.native="$emit('read')">
       <ds-space margin-bottom="x-small">
         <ds-card
-          :header="(notificationData.post || notificationData.comment) && notificationData.title"
+          :header="
+            (notificationData.isPost || notificationData.isComment) && notificationData.title
+          "
           hover
           space="x-small"
           class="notifications-card"
         >
-          <div v-if="notificationData.user">
-            <!-- because of different margin above ds-card content without header property -->
-            <ds-space margin-bottom="small" />
-            <user-teaser :user="notificationData.user" />
-          </div>
-          <div v-else-if="notificationData.contentExcerpt">
-            <span v-if="notificationData.comment" class="notification-content-header-text">
+          <!-- because of different margin above ds-card content without header property -->
+          <user-teaser
+            v-if="notificationData.isUser"
+            class="notifications-user-teaser"
+            :user="notificationData.user"
+          />
+          <div v-else>
+            <span v-if="notificationData.isComment" class="notification-content-header-text">
               {{ $t(`notifications.comment`) }}:
             </span>
             {{ notificationData.contentExcerpt | removeHtml }}
           </div>
-          <div v-if="notificationData.report">
+          <div v-if="notificationData.isReport">
             <ds-space margin-bottom="x-small" />
             <span class="notification-content-header-text">
               {{ $t(`notifications.report.category`) }}:
@@ -72,7 +64,7 @@
           </div>
           <!-- because of different margin underneath ds-card content without header property -->
           <ds-space
-            v-if="!(notificationData.post || notificationData.comment)"
+            v-if="!(notificationData.isPost || notificationData.isComment)"
             margin-bottom="base"
           />
         </ds-card>
@@ -119,4 +111,12 @@ export default {
   font-weight: 700;
   margin-right: 0.1rem;
 }
+// Wolle .notifications-card {
+//   > .user-teaser {
+//     margin-top: $space-small;
+//   }
+// }
+.notifications-user-teaser {
+  margin-top: $space-small;
+}
 </style>

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -6,25 +6,12 @@
   >
     <template #icon="scope">
       <base-icon
-        v-if="scope.row.report"
-        name="balance-scale"
-        v-tooltip="{ content: $t('notifications.report.name'), placement: 'right' }"
-        :class="{ 'notification-status': scope.row.read }"
-      />
-      <base-icon
-        v-else-if="scope.row.comment"
-        name="comment"
-        v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
-        :class="{ 'notification-status': scope.row.read }"
-      />
-      <base-icon
-        v-else
-        name="bookmark"
-        v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
+        :name="scope.row.iconName"
+        v-tooltip="{ content: $t(scope.row.iconTooltip), placement: 'right' }"
         :class="{ 'notification-status': scope.row.read }"
       />
     </template>
-    <template #user="scope">
+    <template #triggerer="scope">
       <ds-space margin-bottom="base">
         <client-only>
           <user-teaser
@@ -38,7 +25,7 @@
         {{ $t(`notifications.reason.${scope.row.reason}` + scope.row.reasonTranslationExtention) }}
       </ds-text>
     </template>
-    <template #post="scope">
+    <template #title="scope">
       <nuxt-link
         data-test="notification-title-link"
         :class="{ 'notification-status': scope.row.read }"
@@ -48,17 +35,17 @@
         <b>{{ scope.row.title | truncate(50) }}</b>
       </nuxt-link>
     </template>
-    <template #content="scope">
-      <div v-if="scope.row.user" :class="{ 'notification-status': scope.row.read }">
+    <template #metadata="scope">
+      <div v-if="scope.row.isUser" :class="{ 'notification-status': scope.row.read }">
         <user-teaser :user="scope.row.user" />
       </div>
       <div v-else-if="scope.row.contentExcerpt" :class="{ 'notification-status': scope.row.read }">
-        <span v-if="scope.row.comment" class="notification-content-header-text">
+        <span v-if="scope.row.isComment" class="notification-content-header-text">
           {{ $t(`notifications.comment`) }}:
         </span>
         {{ scope.row.contentExcerpt | removeHtml }}
       </div>
-      <div v-if="scope.row.report" :class="{ 'notification-status': scope.row.read }">
+      <div v-if="scope.row.isReport" :class="{ 'notification-status': scope.row.read }">
         <ds-space margin-bottom="x-small" />
         <span class="notification-content-header-text">
           {{ $t(`notifications.report.category`) }}:
@@ -105,15 +92,15 @@ export default {
           label: ' ',
           width: '3%',
         },
-        user: {
+        triggerer: {
           label: ' ',
           width: '25%',
         },
-        post: {
+        title: {
           label: ' ',
           width: '25%',
         },
-        content: {
+        metadata: {
           label: ' ',
           width: '47%',
         },

webapp/components/utils/Notifications.js

@@ -69,13 +69,12 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
   let comment = null
   let contentExcerpt = null
   let report = null
+  let isUser = false
+  let isPost = false
+  let isComment = false
+  let isReport = false
   let reasonTranslationExtention = ''
-  let triggerer
-  let title
-  let author
-  let linkName
-  let linkParams
-  let linkHashParam
+  let iconName, iconTooltip, triggerer, title, author, linkName, linkParams, linkHashParam
 
   // extract data out of the deep structure of db response
 
@@ -84,10 +83,16 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
     case 'Comment':
       comment = from
       post = comment.post
+      isComment = true
+      iconName = 'comment'
+      iconTooltip = 'notifications.comment'
       triggerer = comment.author
       break
     case 'Post':
       post = from
+      isPost = true
+      iconName = 'bookmark'
+      iconTooltip = 'notifications.post'
       triggerer = post.author
       break
     case 'Report':
@@ -97,19 +102,25 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
           reasonCategory: filed.reasonCategory,
           reasonDescription: filed.reasonDescription,
         }
+        isReport = true
+        iconName = 'balance-scale'
+        iconTooltip = 'notifications.report.name'
         triggerer = currentUser
         switch (filed.reportedResource.__typename) {
           case 'User':
             user = filed.reportedResource
+            isUser = true
             reasonTranslationExtention = '.user'
             break
           case 'Comment':
             comment = filed.reportedResource
             post = filed.reportedResource.post
+            isComment = true
             reasonTranslationExtention = '.comment'
             break
           case 'Post':
             post = filed.reportedResource
+            isPost = true
             reasonTranslationExtention = '.post'
             break
         }
@@ -147,6 +158,12 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
     read: notification.read,
     reason: notification.reason,
     notificationSourceId: from.id,
+    isUser,
+    isPost,
+    isComment,
+    isReport,
+    iconName,
+    iconTooltip,
     triggerer,
     user,
     comment,