Reporting Closes #441 See merge request pleroma/pleroma-fe!695fix-dropdown
commit
8e1c5841e9
@ -0,0 +1,106 @@
|
||||
|
||||
import Status from '../status/status.vue'
|
||||
import List from '../list/list.vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
|
||||
const UserReportingModal = {
|
||||
components: {
|
||||
Status,
|
||||
List,
|
||||
Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
comment: '',
|
||||
forward: false,
|
||||
statusIdsToReport: [],
|
||||
processing: false,
|
||||
error: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoggedIn () {
|
||||
return !!this.$store.state.users.currentUser
|
||||
},
|
||||
isOpen () {
|
||||
return this.isLoggedIn && this.$store.state.reports.modalActivated
|
||||
},
|
||||
userId () {
|
||||
return this.$store.state.reports.userId
|
||||
},
|
||||
user () {
|
||||
return this.$store.getters.findUser(this.userId)
|
||||
},
|
||||
remoteInstance () {
|
||||
return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
|
||||
},
|
||||
statuses () {
|
||||
return this.$store.state.reports.statuses
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userId: 'resetState'
|
||||
},
|
||||
methods: {
|
||||
resetState () {
|
||||
// Reset state
|
||||
this.comment = ''
|
||||
this.forward = false
|
||||
this.statusIdsToReport = []
|
||||
this.processing = false
|
||||
this.error = false
|
||||
},
|
||||
closeModal () {
|
||||
this.$store.dispatch('closeUserReportingModal')
|
||||
},
|
||||
reportUser () {
|
||||
this.processing = true
|
||||
this.error = false
|
||||
const params = {
|
||||
userId: this.userId,
|
||||
comment: this.comment,
|
||||
forward: this.forward,
|
||||
statusIds: this.statusIdsToReport
|
||||
}
|
||||
this.$store.state.api.backendInteractor.reportUser(params)
|
||||
.then(() => {
|
||||
this.processing = false
|
||||
this.resetState()
|
||||
this.closeModal()
|
||||
})
|
||||
.catch(() => {
|
||||
this.processing = false
|
||||
this.error = true
|
||||
})
|
||||
},
|
||||
clearError () {
|
||||
this.error = false
|
||||
},
|
||||
isChecked (statusId) {
|
||||
return this.statusIdsToReport.indexOf(statusId) !== -1
|
||||
},
|
||||
toggleStatus (checked, statusId) {
|
||||
if (checked === this.isChecked(statusId)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
this.statusIdsToReport.push(statusId)
|
||||
} else {
|
||||
this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1)
|
||||
}
|
||||
},
|
||||
resize (e) {
|
||||
const target = e.target || e
|
||||
if (!(target instanceof window.Element)) { return }
|
||||
// Auto is needed to make textbox shrink when removing lines
|
||||
target.style.height = 'auto'
|
||||
target.style.height = `${target.scrollHeight}px`
|
||||
if (target.value === '') {
|
||||
target.style.height = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default UserReportingModal
|
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="modal-view" @click="closeModal" v-if="isOpen">
|
||||
<div class="user-reporting-panel panel" @click.stop="">
|
||||
<div class="panel-heading">
|
||||
<div class="title">{{$t('user_reporting.title', [user.screen_name])}}</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="user-reporting-panel-left">
|
||||
<div>
|
||||
<p>{{$t('user_reporting.add_comment_description')}}</p>
|
||||
<textarea
|
||||
v-model="comment"
|
||||
class="form-control"
|
||||
:placeholder="$t('user_reporting.additional_comments')"
|
||||
rows="1"
|
||||
@input="resize"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!user.is_local">
|
||||
<p>{{$t('user_reporting.forward_description')}}</p>
|
||||
<Checkbox v-model="forward">{{$t('user_reporting.forward_to', [remoteInstance])}}</Checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-default" @click="reportUser" :disabled="processing">{{$t('user_reporting.submit')}}</button>
|
||||
<div class="alert error" v-if="error">
|
||||
{{$t('user_reporting.generic_error')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-reporting-panel-right">
|
||||
<List :items="statuses">
|
||||
<template slot="item" slot-scope="{item}">
|
||||
<div class="status-fadein user-reporting-panel-sitem">
|
||||
<Status :inConversation="false" :focused="false" :statusoid="item" />
|
||||
<Checkbox :checked="isChecked(item.id)" @change="checked => toggleStatus(checked, item.id)" />
|
||||
</div>
|
||||
</template>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./user_reporting_modal.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.user-reporting-panel {
|
||||
width: 90vw;
|
||||
max-width: 700px;
|
||||
min-height: 20vh;
|
||||
max-height: 80vh;
|
||||
|
||||
.panel-heading {
|
||||
.title {
|
||||
text-align: center;
|
||||
// TODO: Consider making these as default of panel
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
border-top: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-left {
|
||||
padding: 1.1em 0.7em 0.7em;
|
||||
line-height: 1.4em;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
line-height: 16px;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
transition: min-height 200ms 100ms;
|
||||
min-height: 44px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 10em;
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 1em 0 0 0;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-sitem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> .status-el {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
margin: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 801px) {
|
||||
.panel-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&-left {
|
||||
width: 50%;
|
||||
max-width: 320px;
|
||||
border-right: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 1.1em;
|
||||
|
||||
> div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: 50%;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,30 @@
|
||||
import filter from 'lodash/filter'
|
||||
|
||||
const reports = {
|
||||
state: {
|
||||
userId: null,
|
||||
statuses: [],
|
||||
modalActivated: false
|
||||
},
|
||||
mutations: {
|
||||
openUserReportingModal (state, { userId, statuses }) {
|
||||
state.userId = userId
|
||||
state.statuses = statuses
|
||||
state.modalActivated = true
|
||||
},
|
||||
closeUserReportingModal (state) {
|
||||
state.modalActivated = false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
openUserReportingModal ({ rootState, commit }, userId) {
|
||||
const statuses = filter(rootState.statuses.allStatuses, status => status.user.id === userId)
|
||||
commit('openUserReportingModal', { userId, statuses })
|
||||
},
|
||||
closeUserReportingModal ({ commit }) {
|
||||
commit('closeUserReportingModal')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default reports
|
Loading…
Reference in new issue