Implemented the notifications for filling reports Notification.vue

2026-01-15 09:24:34 +00:00 · 2020-01-17 15:22:02 +01:00 · 2020-01-17 15:22:02 +01:00 · 35660ca073
commit 35660ca073
parent f2d4d97645
8 changed files with 212 additions and 81 deletions
--- a/backend/src/models/Report.js
+++ b/backend/src/models/Report.js
@ -34,7 +34,7 @@ module.exports = {
        ],
        invalid: [null],
      },
-      reasonDescription: { type: 'string', allow: [null] },
+      reasonDescription: { type: 'string', allow: [null, ''] },
    },
  },
  reviewed: {
--- a/backend/src/schema/resolvers/reports.js
+++ b/backend/src/schema/resolvers/reports.js
@ -183,4 +183,10 @@ export default {
      return reviewed
    },
  },
+  FILED: {
+    reasonDescription: async (parent, _params, _context, _resolveInfo) => {
+      if (typeof parent.reasonDescription !== 'undefined') return parent.reasonDescription
+      return null
+    },
+  },
 }
--- a/backend/src/seed/seed-db.js
+++ b/backend/src/seed/seed-db.js
@ -606,7 +606,8 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        postId: 'p15',
      }),
    ])
-    const trollingComment = comments[0]
+    const trollingCommentC1 = comments[0]
+    const trollingCommentC2 = comments[1]

    await Promise.all([
      democracy.relateTo(p3, 'post'),
@ -670,16 +671,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
      louie.relateTo(p10, 'shouted'),
    ])

-    const reports = await Promise.all([
-      factory.create('Report'),
-      factory.create('Report'),
-      factory.create('Report'),
-      factory.create('Report'),
+    const [
+      reportAgainstDagobert,
+      reportAgainstHuey,
+      reportAgainstTrollingPostP2,
+      reportAgainstTrollingPostP9,
+      reportAgainstTrollingCommentC1,
+      reportAgainstTrollingCommentC2,
+      reportAgainstDewey,
+    ] = await Promise.all([
+      factory.create('Report', { id: 'reportAgainstDagobert' }),
+      factory.create('Report', { id: 'reportAgainstHuey' }),
+      factory.create('Report', { id: 'reportAgainstTrollingPostP2' }),
+      factory.create('Report', { id: 'reportAgainstTrollingPostP9' }),
+      factory.create('Report', { id: 'reportAgainstTrollingCommentC1' }),
+      factory.create('Report', { id: 'reportAgainstTrollingCommentC2' }),
+      factory.create('Report', { id: 'reportAgainstDewey' }),
    ])
-    const reportAgainstDagobert = reports[0]
-    const reportAgainstTrollingPost = reports[1]
-    const reportAgainstTrollingComment = reports[2]
-    const reportAgainstDewey = reports[3]

    // report resource first time
    await Promise.all([
@ -690,19 +698,40 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
      }),
      reportAgainstDagobert.relateTo(dagobert, 'belongsTo'),

-      reportAgainstTrollingPost.relateTo(jennyRostock, 'filed', {
+      reportAgainstHuey.relateTo(jennyRostock, 'filed', {
+        resourceId: 'u4',
+        reasonCategory: 'doxing',
+        reasonDescription: '',
+      }),
+      reportAgainstHuey.relateTo(huey, 'belongsTo'),
+
+      reportAgainstTrollingPostP2.relateTo(jennyRostock, 'filed', {
        resourceId: 'p2',
        reasonCategory: 'doxing',
        reasonDescription: "This shouldn't be shown to anybody else! It's my private thing!",
      }),
-      reportAgainstTrollingPost.relateTo(p2, 'belongsTo'),
+      reportAgainstTrollingPostP2.relateTo(p2, 'belongsTo'),

-      reportAgainstTrollingComment.relateTo(huey, 'filed', {
+      reportAgainstTrollingPostP9.relateTo(jennyRostock, 'filed', {
+        resourceId: 'p9',
+        reasonCategory: 'discrimination_etc',
+        reasonDescription: 'Discrimination !!!',
+      }),
+      reportAgainstTrollingPostP9.relateTo(p9, 'belongsTo'),
+
+      reportAgainstTrollingCommentC1.relateTo(huey, 'filed', {
        resourceId: 'c1',
        reasonCategory: 'other',
        reasonDescription: 'This comment is bigoted',
      }),
-      reportAgainstTrollingComment.relateTo(trollingComment, 'belongsTo'),
+      reportAgainstTrollingCommentC1.relateTo(trollingCommentC1, 'belongsTo'),
+
+      reportAgainstTrollingCommentC2.relateTo(jennyRostock, 'filed', {
+        resourceId: 'c2',
+        reasonCategory: 'other',
+        reasonDescription: 'This comment is bigoted',
+      }),
+      reportAgainstTrollingCommentC2.relateTo(trollingCommentC2, 'belongsTo'),

      reportAgainstDewey.relateTo(dagobert, 'filed', {
        resourceId: 'u5',
@ -717,11 +746,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        read: false,
        reason: 'filed_report_on_resource',
      }),
-      reportAgainstTrollingPost.relateTo(jennyRostock, 'notified', {
+      reportAgainstHuey.relateTo(jennyRostock, 'notified', {
        read: false,
        reason: 'filed_report_on_resource',
      }),
-      reportAgainstTrollingComment.relateTo(huey, 'notified', {
+      reportAgainstTrollingPostP2.relateTo(jennyRostock, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingPostP9.relateTo(jennyRostock, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingCommentC1.relateTo(huey, 'notified', {
+        read: false,
+        reason: 'filed_report_on_resource',
+      }),
+      reportAgainstTrollingCommentC2.relateTo(jennyRostock, 'notified', {
        read: false,
        reason: 'filed_report_on_resource',
      }),
@ -740,19 +781,19 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
      }),
      reportAgainstDagobert.relateTo(dagobert, 'belongsTo'),

-      reportAgainstTrollingPost.relateTo(peterLustig, 'filed', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'filed', {
        resourceId: 'p2',
        reasonCategory: 'discrimination_etc',
        reasonDescription: 'This post is bigoted',
      }),
-      reportAgainstTrollingPost.relateTo(p2, 'belongsTo'),
+      reportAgainstTrollingPostP2.relateTo(p2, 'belongsTo'),

-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'filed', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'filed', {
        resourceId: 'c1',
        reasonCategory: 'pornographic_content_links',
        reasonDescription: 'This comment is porno!!!',
      }),
-      reportAgainstTrollingComment.relateTo(trollingComment, 'belongsTo'),
+      reportAgainstTrollingCommentC1.relateTo(trollingCommentC1, 'belongsTo'),
    ])
    // notify second report filers
    await Promise.all([
@ -760,11 +801,11 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        read: false,
        reason: 'filed_report_on_resource',
      }),
-      reportAgainstTrollingPost.relateTo(peterLustig, 'notified', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'notified', {
        read: false,
        reason: 'filed_report_on_resource',
      }),
-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'notified', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'notified', {
        read: false,
        reason: 'filed_report_on_resource',
      }),
@ -783,16 +824,16 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        resourceId: 'u7',
      }),
      dagobert.update({ disabled: true, updatedAt: new Date().toISOString() }),
-      reportAgainstTrollingPost.relateTo(peterLustig, 'reviewed', {
+      reportAgainstTrollingPostP2.relateTo(peterLustig, 'reviewed', {
        ...disableVariables,
        resourceId: 'p2',
      }),
      p2.update({ disabled: true, updatedAt: new Date().toISOString() }),
-      reportAgainstTrollingComment.relateTo(bobDerBaumeister, 'reviewed', {
+      reportAgainstTrollingCommentC1.relateTo(bobDerBaumeister, 'reviewed', {
        ...disableVariables,
        resourceId: 'c1',
      }),
-      trollingComment.update({ disabled: true, updatedAt: new Date().toISOString() }),
+      trollingCommentC1.update({ disabled: true, updatedAt: new Date().toISOString() }),
    ])

    // second review of resource and close report
@ -803,19 +844,23 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
        closed: true,
      }),
      dagobert.update({ disabled: false, updatedAt: new Date().toISOString(), closed: true }),
-      reportAgainstTrollingPost.relateTo(bobDerBaumeister, 'reviewed', {
+      reportAgainstTrollingPostP2.relateTo(bobDerBaumeister, 'reviewed', {
        resourceId: 'p2',
        disable: true,
        closed: true,
      }),
      p2.update({ disabled: true, updatedAt: new Date().toISOString(), closed: true }),
-      reportAgainstTrollingComment.relateTo(peterLustig, 'reviewed', {
+      reportAgainstTrollingCommentC1.relateTo(peterLustig, 'reviewed', {
        ...disableVariables,
        resourceId: 'c1',
        disable: true,
        closed: true,
      }),
-      trollingComment.update({ disabled: true, updatedAt: new Date().toISOString(), closed: true }),
+      trollingCommentC1.update({
+        disabled: true,
+        updatedAt: new Date().toISOString(),
+        closed: true,
+      }),
    ])

    await Promise.all(
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@ -2,31 +2,46 @@
  <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
    <client-only>
      <ds-space margin-bottom="x-small">
-        <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        <hc-user :user="sourceData.triggerer" :date-time="sourceData.createdAt" :trunc="35" />
      </ds-space>
      <ds-text class="reason-text-for-test" color="soft">
-        {{ $t(`notifications.reason.${notification.reason}`) }}
+        {{ $t(`notifications.reason.${notification.reason}` + sourceData.reasonExtention) }}
      </ds-text>
    </client-only>
    <ds-space margin-bottom="x-small" />
-    <nuxt-link
-      class="notification-mention-post"
-      :to="{ name: 'post-id-slug', params, ...hashParam }"
-      @click.native="$emit('read')"
-    >
+    <nuxt-link class="notification-mention-post" :to="linkTo" @click.native="$emit('read')">
      <ds-space margin-bottom="x-small">
-        <ds-card
-          :header="from.title || from.post.title"
-          hover
-          space="x-small"
-          class="notifications-card"
-        >
+        <ds-card :header="sourceData.title" hover space="x-small" class="notifications-card">
          <ds-space margin-bottom="x-small" />
-          <div>
-            <span v-if="isComment" class="comment-notification-header">
+          <div v-if="sourceData.user">
+            <hc-user :user="sourceData.user" :trunc="35" />
+          </div>
+          <div v-else-if="sourceData.contentExcerpt">
+            <span v-if="sourceData.comment" class="text-notification-header">
              {{ $t(`notifications.comment`) }}:
            </span>
-            {{ from.contentExcerpt | removeHtml }}
+            {{ sourceData.contentExcerpt | removeHtml }}
+          </div>
+          <div v-if="sourceData.report">
+            <ds-space margin-bottom="x-small" />
+            <span class="text-notification-header">
+              {{ $t(`notifications.filedReport.category`) }}:
+            </span>
+            {{ this.$t('report.reason.category.options.' + sourceData.report.reasonCategory) }}
+            <br />
+            <span class="text-notification-header">
+              {{ $t(`notifications.filedReport.description`) }}:
+            </span>
+            <span
+              v-if="
+                sourceData.report.reasonDescription && sourceData.report.reasonDescription !== ''
+              "
+            >
+              {{ sourceData.report.reasonDescription }}
+            </span>
+            <span v-else>
+              —
+            </span>
          </div>
        </ds-card>
      </ds-space>
@ -35,6 +50,7 @@
 </template>

 <script>
+import { mapGetters } from 'vuex'
 import HcUser from '~/components/User/User'

 export default {
@ -49,41 +65,78 @@ export default {
    },
  },
  computed: {
-    from() {
-      return this.notification.from
-    },
-    isComment() {
-      return this.from.__typename === 'Comment'
-    },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
    sourceData() {
+      const from = this.notification.from
+      let triggerer
+      const createdAt = this.notification.createdAt
+      let title
+      let author
      let user = null
      let post = null
      let comment = null
+      let contentExcerpt = null
      let report = null
-      if (this.from.__typename === 'Post') {
-        post = this.from
-      } else if (this.from.__typename === 'Comment') {
-        comment = this.from
-        post = this.from.post
-      } else if (this.from.__typename === 'Report') {
+      let reasonExtention = ''
+
+      if (from.__typename === 'Post') {
+        post = from
+        triggerer = post.author
+      } else if (from.__typename === 'Comment') {
+        comment = from
+        triggerer = comment.author
+        post = comment.post
+      } else if (from.__typename === 'Report') {
        report = {
-          reasonCategory: this.from.filed.reasonCategory,
-          reasonDescription: this.from.filed.reasonDescription,
+          reasonCategory: from.filed[0].reasonCategory,
+          reasonDescription: from.filed[0].reasonDescription,
        }
-        if (this.from.filed.reportedResource.__typename === 'User') {
-          user = this.from.filed.reportedResource
-        } else if (this.from.filed.reportedResource.__typename === 'Post') {
-          post = this.from.filed.reportedResource
-        } else if (this.from.filed.reportedResource.__typename === 'Comment') {
-          comment = this.from.filed.reportedResource
-          post = this.from.filed.reportedResource.post
+        triggerer = this.currentUser
+        if (from.filed[0].reportedResource.__typename === 'User') {
+          user = from.filed[0].reportedResource
+          reasonExtention = '.user'
+        } else if (from.filed[0].reportedResource.__typename === 'Post') {
+          post = from.filed[0].reportedResource
+          reasonExtention = '.post'
+        } else if (from.filed[0].reportedResource.__typename === 'Comment') {
+          comment = from.filed[0].reportedResource
+          post = from.filed[0].reportedResource.post
+          reasonExtention = '.comment'
        }
      }
-      return { user, post, comment, report }
+
+      if (user) {
+        title = user.name
+        author = user
+      } else {
+        title = post.title
+        if (comment) {
+          author = comment.author
+          contentExcerpt = comment.contentExcerpt
+        } else {
+          author = post.author
+          contentExcerpt = post.contentExcerpt
+        }
+      }
+
+      const data = {
+        triggerer,
+        createdAt,
+        title,
+        user,
+        post,
+        comment,
+        contentExcerpt,
+        author,
+        report,
+        reasonExtention,
+      }
+      return data
    },
-    params() {
-      // Wolle const post = this.isComment ? this.from.post : this.from
-      return this.sourceData.user
+    linkTo() {
+      const params = this.sourceData.user
        ? {
            id: this.sourceData.user.id,
            slug: this.sourceData.user.slug,
@ -94,10 +147,14 @@ export default {
            slug: this.sourceData.post.slug,
          }
        : {}
-    },
-    hashParam() {
-      // Wolle return this.isComment ? { hash: `#commentId-${this.from.id}` } : {}
-      return this.sourceData.comment ? { hash: `#commentId-${this.sourceData.comment.id}` } : {}
+      const hashParam = this.sourceData.comment
+        ? { hash: `#commentId-${this.sourceData.comment.id}` }
+        : {}
+      return {
+        name: this.sourceData.user ? 'profile-id-slug' : 'post-id-slug',
+        params,
+        ...hashParam,
+      }
    },
  },
 }
@ -110,7 +167,7 @@ export default {
 .notifications-card {
  min-width: 500px;
 }
-.comment-notification-header {
+.text-notification-header {
  font-weight: 700;
  margin-right: 0.1rem;
 }
--- a/webapp/components/NotificationList/NotificationList.vue
+++ b/webapp/components/NotificationList/NotificationList.vue
@ -25,6 +25,7 @@ export default {
  },
  methods: {
    markAsRead(notificationSourceId) {
+      // Wolle console.log('markAsRead !!! notificationSourceId: ', notificationSourceId)
      this.$emit('markAsRead', notificationSourceId)
    },
  },
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@ -90,6 +90,7 @@ export const notificationQuery = i18n => {
            }
          }
          ... on Report {
+            id
            filed {
              reasonCategory
              reasonDescription
@ -154,6 +155,9 @@ export const markAsReadMutation = i18n => {
              }
            }
          }
+          ... on Report {
+            id
+          }
        }
      }
    }
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@ -656,9 +656,14 @@
    },
    "notifications": {
        "reason": {
+            "commented_on_post": "Hat deinen Beitrag kommentiert …",
+            "filed_report_on_resource": {
+              "user": "Du hast einen Benutzer gemeldet …",
+              "post": "Du hast einen Beitrag gemeldet …",
+              "comment": "Du hast einen Kommentar gemeldet …"
+            },
            "mentioned_in_post": "Hat dich in einem Beitrag erwähnt …",
-            "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …",
-            "commented_on_post": "Hat deinen Beitrag kommentiert …"
+            "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …"
        },
        "comment": "Kommentar",
        "title": "Benachrichtigungen",
@ -671,7 +676,11 @@
            "read": "Gelesen",
            "unread": "Ungelesen"
        },
-        "empty": "Bedaure, Du hast momentan keinerlei Benachrichtigungen."
+        "empty": "Bedaure, Du hast momentan keinerlei Benachrichtigungen.",
+        "filedReport": {
+          "category": "Kategorie der Meldung",
+          "description": "Beschreibung"
+        }
    },
    "delete": {
        "submit": "Löschen",
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@ -179,9 +179,14 @@
  },
  "notifications": {
    "reason": {
+      "commented_on_post": "Commented on your post …",
+      "filed_report_on_resource": {
+        "user": "You reported an user …",
+        "post": "You reported a post …",
+        "comment": "You reported a comment …"
+      },
      "mentioned_in_post": "Mentioned you in a post …",
-      "mentioned_in_comment": "Mentioned you in a comment …",
-      "commented_on_post": "Commented on your post …"
+      "mentioned_in_comment": "Mentioned you in a comment …"
    },
    "comment": "Comment",
    "title": "Notifications",
@ -194,7 +199,11 @@
      "read": "Read",
      "unread": "Unread"
    },
-    "empty": "Sorry, you don't have any notifications at the moment."
+    "empty": "Sorry, you don't have any notifications at the moment.",
+    "filedReport": {
+      "category": "Report category",
+      "description": "Description"
+    }
  },
  "search": {
    "placeholder": "Search",