separated component

src/components/notification/notification.js

@@ -4,6 +4,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import Report from '../report/report.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -44,7 +45,8 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status
+    Status,
+    Report
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.scss

@@ -56,34 +56,6 @@
     margin: 0 0.1em;
   }
 
-  .report-content {
-    margin: 0.5em 0;
-  }
-
-  .reported-status {
-    border: 1px solid $fallback--faint;
-    border-color: var(--faint, $fallback--faint);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    display: block;
-    padding: 0.5em;
-    margin: 0.5em 0;
-
-    .status-content {
-      pointer-events: none;
-    }
-
-    .reported-status-name {
-      font-weight: bold;
-    }
-
-    .reported-status-timeago {
-      float: right;
-    }
-  }
-
   &.-type--repeat .type-icon {
     color: $fallback--cGreen;
     color: var(--cGreen, $fallback--cGreen);

src/components/notification/notification.vue

@@ -183,37 +183,10 @@
             @{{ notification.target.screen_name }}
           </router-link>
         </div>
-        <div
+        <Report
           v-else-if="notification.type === 'pleroma:report'"
-        >
+          :report="notification.report"
-          <small>Reported user:</small>
+        />
-          <router-link :to="generateUserProfileLink(notification.report.acct)">
-            @{{ notification.report.acct.screen_name }}
-          </router-link>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            class="report-content"
-            v-html="notification.report.content"
-          />
-          <div v-if="notification.report.statuses.length">
-            <small>Reported statuses:</small>
-            <!-- eslint-enable vue/no-v-html -->
-            <router-link
-              v-for="status in notification.report.statuses"
-              :key="status.id"
-              :to="{ name: 'conversation', params: { id: status.id } }"
-              class="reported-status"
-            >
-              <span class="reported-status-name">{{ status.user.name }}</span>
-              <Timeago
-                :time="status.created_at"
-                :auto-update="240"
-                class="reported-status-timeago faint"
-              />
-              <status-content :status="status" />
-            </router-link>
-          </div>
-        </div>
         <template v-else>
           <status-content
             class="faint"

src/components/report/report.js

@@ -0,0 +1,23 @@
+import StatusContent from '../status_content/status_content.vue'
+import Timeago from '../timeago/timeago.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const Report = {
+  props: [
+    'report'
+  ],
+  components: {
+    StatusContent,
+    Timeago
+  },
+  methods: {
+    generateUserProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    },
+    setReportState (id, state) {
+      return this.$store.state.api.backendInteractor.setReportState({ id, state })
+    }
+  }
+}
+
+export default Report

src/components/report/report.scss

@@ -0,0 +1,39 @@
+@import '../../_variables.scss';
+
+.Report {
+  .report-content {
+    margin: 0.5em 0;
+  }
+
+  .reported-status {
+    border: 1px solid $fallback--faint;
+    border-color: var(--faint, $fallback--faint);
+    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius, $fallback--inputRadius);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    display: block;
+    padding: 0.5em;
+    margin: 0.5em 0;
+
+    .status-content {
+      pointer-events: none;
+    }
+
+    .reported-status-heading {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      margin-bottom: 0.2em;
+    }
+
+    .reported-status-name {
+      font-weight: bold;
+    }
+  }
+
+  .note {
+    width: 100%;
+    margin-bottom: 0.5em;
+  }
+}

src/components/report/report.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="Report">
+    <div class="reported-user">
+      <span>{{ $t('report.reported_user') }}</span>
+      <router-link :to="generateUserProfileLink(report.acct)">
+        @{{ report.acct.screen_name }}
+      </router-link>
+    </div>
+    <div class="reporter">
+      <span>{{ $t('report.reporter') }}</span>
+      <router-link :to="generateUserProfileLink(report.actor)">
+        @{{ report.actor.screen_name }}
+      </router-link>
+    </div>
+    <div class="report-state">
+      <span>{{ $t('report.state') }}</span>
+      <b>{{ $t('report.state_' + report.state) }}</b>
+    </div>
+    <!-- eslint-disable vue/no-v-html -->
+    <div
+      class="report-content"
+      v-html="report.content"
+    />
+    <div v-if="report.statuses.length">
+      <small>{{ $t('report.reported_statuses') }}</small>
+      <!-- eslint-enable vue/no-v-html -->
+      <router-link
+        v-for="status in report.statuses"
+        :key="status.id"
+        :to="{ name: 'conversation', params: { id: status.id } }"
+        class="reported-status"
+      >
+        <div class="reported-status-heading">
+          <span class="reported-status-name">{{ status.user.name }}</span>
+          <Timeago
+            :time="status.created_at"
+            :auto-update="240"
+            class="faint"
+          />
+        </div>
+        <status-content :status="status" />
+      </router-link>
+    </div>
+    <div v-if="report.notes.length">
+      <small>{{ $t('report.notes') }}</small>
+      <div
+        v-for="note in report.notes"
+        :key="note.id"
+        class="note"
+      >
+        <span>{{ note.content }}</span>
+        <Timeago
+          :time="note.created_at"
+          :auto-update="240"
+          class="faint"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./report.js"></script>
+<style src="./report.scss" lang="scss"></style>

src/i18n/en.json

@@ -237,6 +237,16 @@
     "searching_for": "Searching for",
     "error": "Not found."
   },
+  "report": {
+    "reporter": "Reporter:",
+    "reported_user": "Reported user:",
+    "reported_statuses": "Reported statuses:",
+    "notes": "Notes:",
+    "state": "State:",
+    "state_open": "Open",
+    "state_closed": "Closed",
+    "state_resolved": "Resolved"
+  },
   "selectable_list": {
     "select_all": "Select all"
   },

src/services/api/api.service.js

@@ -87,6 +87,7 @@ const PLEROMA_CHAT_URL = id => `/api/v1/pleroma/chats/by-account-id/${id}`
 const PLEROMA_CHAT_MESSAGES_URL = id => `/api/v1/pleroma/chats/${id}/messages`
 const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
 const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
+const PLEROMA_ADMIN_REPORTS = '/api/pleroma/admin/reports'
 
 const oldfetch = window.fetch
 
@@ -759,7 +760,18 @@ const report = {
     "content": "This is the report created by "reporting_account". It reports "reported_account".",
     "created_at": "2020-09-03T14:22:59.000Z",
     "id": "9ymggNcUyfIW8Cq1zM",
-    "notes": [],
+    "notes": [
+      {
+        "content": "Some note left here.",
+        "created_at": "2020-09-03T14:22:59.000Z",
+        "id": "1"
+      },
+      {
+        "content": "Some other note that is much much much longer than the previous note left here.",
+        "created_at": "2020-09-03T14:23:59.000Z",
+        "id": "2"
+      }
+    ],
     "state": "open",
     "statuses": [
       {
@@ -1553,6 +1565,21 @@ const deleteChatMessage = ({ chatId, messageId, credentials }) => {
   })
 }
 
+const setReportState = ({ id, state, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_ADMIN_REPORTS,
+    method: 'PATCH',
+    payload: {
+      'reports': [
+        {
+          id,
+          state
+        }
+      ]
+    }
+  })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1638,7 +1665,8 @@ const apiService = {
   chatMessages,
   sendChatMessage,
   readChat,
-  deleteChatMessage
+  deleteChatMessage,
+  setReportState
 }
 
 export default apiService