#949 Feat/report notification See merge request pleroma/pleroma-fe!1322merge-requests/1699/head
commit
750696643f
@ -0,0 +1,34 @@
|
||||
import Select from '../select/select.vue'
|
||||
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: [
|
||||
'reportId'
|
||||
],
|
||||
components: {
|
||||
Select,
|
||||
StatusContent,
|
||||
Timeago
|
||||
},
|
||||
computed: {
|
||||
report () {
|
||||
return this.$store.state.reports.reports[this.reportId] || {}
|
||||
},
|
||||
state: {
|
||||
get: function () { return this.report.state },
|
||||
set: function (val) { this.setReportState(val) }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateUserProfileLink (user) {
|
||||
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
|
||||
},
|
||||
setReportState (state) {
|
||||
return this.$store.dispatch('setReportState', { id: this.report.id, state })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Report
|
@ -0,0 +1,43 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.Report {
|
||||
.report-content {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
.report-state {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
@ -0,0 +1,74 @@
|
||||
<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>
|
||||
<Select
|
||||
:id="report-state"
|
||||
v-model="state"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="state in ['open', 'closed', 'resolved']"
|
||||
:key="state"
|
||||
:value="state"
|
||||
>
|
||||
{{ $t('report.state_' + state) }}
|
||||
</option>
|
||||
</Select>
|
||||
</div>
|
||||
<RichContent
|
||||
class="report-content"
|
||||
:html="report.content"
|
||||
:emoji="[]"
|
||||
/>
|
||||
<div v-if="report.statuses.length">
|
||||
<small>{{ $t('report.reported_statuses') }}</small>
|
||||
<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>
|
Loading…
Reference in new issue