commit: 8674f2002320aaa6c380488b0eab636a53c76705
parent a4e3cccf1cba238e5bfd96ea8c60f0d12bc6b7aa
Author: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 11 Jan 2021 19:32:58 +0200
separated component
Diffstat:
8 files changed, 171 insertions(+), 61 deletions(-)
diff --git a/src/components/notification/notification.js b/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 () {
diff --git a/src/components/notification/notification.scss b/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);
diff --git a/src/components/notification/notification.vue b/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'"
- >
- <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>
+ :report="notification.report"
+ />
<template v-else>
<status-content
class="faint"
diff --git a/src/components/report/report.js b/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
diff --git a/src/components/report/report.scss b/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;
+ }
+}
diff --git a/src/components/report/report.vue b/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>
diff --git a/src/i18n/en.json b/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"
},
diff --git a/src/services/api/api.service.js b/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
