separated component

This commit is contained in:
Shpuld Shpuldson 2021-01-11 19:32:58 +02:00
parent a4e3cccf1c
commit 8674f20023
8 changed files with 171 additions and 61 deletions

View File

@ -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 () {

View File

@ -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);

View File

@ -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"
:report="notification.report"
/>
<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"

View File

@ -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

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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"
},

View File

@ -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 &quot;reporting_account&quot;. It reports &quot;reported_account&quot;.",
"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