Skip to content

Commit

Permalink
举报反馈，全局样式引用调整，
Browse files Browse the repository at this point in the history
  • Loading branch information
@dsaco
dsaco committed Oct 18, 2017
1 parent 878378e commit 4a116f9
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 60 deletions.
1 change: 1 addition & 0 deletions src/sass/metronic/customize.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
z-index: 5;
}
}
&.disabled {
Expand Down
19 changes: 19 additions & 0 deletions src/scripts/actions/feedbackAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export const REPORT_DELETE_REPORT = 'REPORT_DELETE_REPORT'
export const REPORT_TOGGLE_BLK = 'REPORT_TOGGLE_BLK'
export const REPORT_TOGGLE_R18 = 'REPORT_TOGGLE_R18'

export const REPORT_REPLY_LOG = 'REPORT_REPLY_LOG'
export const FEEDBACK_REPLY_LOG = 'FEEDBACK_REPLY_LOG'

export function deleteFeedback(id) {
return (dispatch) => {
Expand Down Expand Up @@ -78,6 +80,7 @@ export function toggleBlk(id) {
block: true
})
.end((err, res) => {
Toastr.success(`此帖子已屏蔽`)
dispatch({
type: REPORT_TOGGLE_BLK,
id
Expand All @@ -93,10 +96,26 @@ export function toggleR18(id) {
r18: true
})
.end((err, res) => {
Toastr.success(`此帖子已设为十八禁`)
dispatch({
type: REPORT_TOGGLE_R18,
id
})
})
}
}

export function reportPushReply(id,log) {
return {
type:REPORT_REPLY_LOG,
id,
log
}
}
export function feedbackPushReply(id,log) {
return {
type:FEEDBACK_REPLY_LOG,
id,
log
}
}
220 changes: 183 additions & 37 deletions src/scripts/components/FeedbackList/FeedbackList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Moment from 'moment'
import ReactPaginate from 'react-paginate'
import { parsePage } from '../../widgets/parse'
import { dateFormat } from '../../widgets'

import { Row, Form, FormGroup, FormControl, Button, InputGroup, ButtonToolbar, Modal } from 'react-bootstrap'
import Lightbox from 'react-images'

import Request from 'superagent'
export default class FeedbackList extends Component{
constructor(props) {
super(props)
this.state = {
lightboxIsOpen:false,
images:[],
currentImage:0,
reportId:'',
reportContent:'您的举报已处理',
feedbackId:'',
feedbackContent:'',
logs:[]
}
this.deleteFeedback = (id) => confirm('Delete this Feedback?') && this.props.deleteFeedback(id)

Expand All @@ -26,7 +29,16 @@ export default class FeedbackList extends Component{
this.setState({ lightboxIsOpen: true,images:imgs,currentImage:0})
}
this.closeLightbox = () => this.setState({lightboxIsOpen:false,images:[]})

this.sendMsg = this._sendMsg.bind(this)
this.showReportModal = this._showReportModal.bind(this)
this.sendFeedbackMsg = this._sendFeedbackMsg.bind(this)
this.showFeedbackModal = this._showFeedbackModal.bind(this)

this.showLogs = (logs) => {
this.setState({logs},() => {
$('#logsModal').modal('show')
})
}
}
componentWillMount() {
const { fPage,rPage } = this.props
Expand All @@ -38,12 +50,76 @@ export default class FeedbackList extends Component{
this.props.getReport()
}
}
componentDidMount() {
$('#reportModal').on('hidden.bs.modal', (e) => {
this.setState({
reportId:''
})
})
$('#feedbackModal').on('hidden.bs.modal', (e) => {
this.setState({
feedbackId:'',
feedbackContent:''
})
})
$('#logsModal').on('hidden.bs.modal', (e) => {
this.setState({
logs:[],
})
})
}
formatUrl(images,caption) {
images.map((image) => {
image.src = image.url
})
return images
}
_sendMsg() {
const { reportId,reportContent } = this.state
Request.post(`/api/report/${reportId}/reply`)
.send({
content:reportContent
})
.end((err,res) => {
if(err) {
Toastr.error(`举报失败。`)
}else{
this.props.reportPushReply(reportId,res.text)
Toastr.success(`举报 已通知～`)
$('#reportModal').modal('hide')

}

})
}
_showReportModal(reportId) {
this.setState({reportId},() => {
$('#reportModal').modal('show')
})
}
_showFeedbackModal(feedbackId,content) {

this.setState({feedbackId,feedbackContent:`您的反馈 ${content} 已处理`},() => {
$('#feedbackModal').modal('show')
})
}
_sendFeedbackMsg() {
const { feedbackId,feedbackContent } = this.state
Request.post(`/api/report/${feedbackId}/reply`)
.send({
content:feedbackContent
})
.end((err,res) => {
if(err) {
Toastr.error(`反馈失败。`)
}else{
this.props.feedbackPushReply(feedbackId,res.text)
Toastr.success(`反馈 已通知～`)
$('#feedbackModal').modal('hide')

}
})
}
render() {
return(
<div>
Expand All @@ -67,7 +143,7 @@ export default class FeedbackList extends Component{
<div className="tab-pane active" id="report">
<div className="table-responsive">
<table className="table table-striped">
<thead><tr><th>Reporter</th><th>Reason</th><th style={{'minWidth': '150px'}}>Created</th><th>Type</th><th>Thumbnail</th><th style={{'minWidth': '130px'}}>Operate</th></tr></thead>
<thead><tr><th>Reporter</th><th>Reason</th><th style={{'minWidth': '150px'}}>Created</th><th>Type</th><th>Thumbnail</th><th style={{'minWidth': 100}}>State</th><th style={{'minWidth': '180px'}}>Operate</th></tr></thead>
<tbody>
{
this.props.reports.map((report) => {
Expand All @@ -77,7 +153,7 @@ export default class FeedbackList extends Component{
<Link to={`/user/${report.user.id}`}><img src={report.user.avatar} className="avatar45"/></Link>
</td>
<td>{report.content}</td>
<td>{Moment.unix(report.created / 1000).fromNow()}</td>
<td>{dateFormat(report.created)}</td>
<td style={{textAlign:'center'}}>
{
report.targetType === 'post' ?
Expand All @@ -98,19 +174,25 @@ export default class FeedbackList extends Component{
}
</td>
<td>
<ButtonToolbar>
<span className="btn btn-sm" onClick={() => this.props.deleteReport(report.id)}><i className="fa fa-check"></i></span>
{
report.targetType === 'post' ?
<span className="btn btn-sm" onClick={() => this.props.toggleBlk(report.targetId)}><i className="fa fa-eye-slash"></i></span>
: <span></span>
}
{
report.targetType === 'post' ?
<span className="btn btn-sm" onClick={() => this.props.toggleR18(report.targetId)}><i className="fa fa-venus-mars"></i></span>
: <span></span>
}
</ButtonToolbar>
{
report.logs.length ?
<span onClick={() => this.showLogs(report.logs)} className="m-badge m-badge--accent m-badge--wide">已处理</span>
:<span className="m-badge m-badge--secondary m-badge--wide">未处理</span>
}
</td>
<td className="text-right">
{
report.targetType === 'post' ?
<span className="btn btn-sm" onClick={() => this.props.toggleBlk(report.targetId)}><i className="fa fa-eye-slash"></i></span>
: <span></span>
}
{
report.targetType === 'post' ?
<span className="btn btn-sm" onClick={() => this.props.toggleR18(report.targetId)}><i className="fa fa-venus-mars"></i></span>
: <span></span>
}
<span className="btn btn-sm" onClick={() => this.props.deleteReport(report.id)}><i className="fa fa-check"></i></span>
<span className="btn btn-sm" onClick={() => this.showReportModal(report.id)}><i className="fa fa-bullhorn"></i></span>
</td>
</tr>
)
Expand All @@ -119,26 +201,25 @@ export default class FeedbackList extends Component{
</tbody>
</table>
</div>
<div style={{textAlign:'center'}}>
<ReactPaginate
previousLabel={<span>&laquo;</span>}
nextLabel={<span>&raquo;</span>}
breakLabel={<a>...</a>}
breakClassName={"break-me"}
pageCount={this.props.rPages}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={obj => this.props.getReport(obj.selected)}
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
forcePage={this.props.rPage || 0}
activeClassName={"active"} />
</div>
<ReactPaginate
previousLabel={<span>&laquo;</span>}
nextLabel={<span>&raquo;</span>}
breakLabel={<a>...</a>}
breakClassName={"break-me"}
pageCount={this.props.rPages}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={obj => this.props.getReport(obj.selected)}
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
forcePage={this.props.rPage || 0}
activeClassName={"active"}
/>
</div>
<div className="tab-pane" id="feedback">
<div className="table-responsive" style={{paddingBottom:50}}>
<table className="table table-striped">
<thead><tr><th>User</th><th>Content</th><th style={{'minWidth': '150px'}}>Created</th><th>userAgent</th></tr></thead>
<thead><tr><th>User</th><th>Content</th><th style={{'minWidth': '150px'}}>Created</th><th>userAgent</th><th style={{'minWidth': 100}}>State</th></tr></thead>
<tbody>
{
this.props.feedbacks.map((feedback) => {
Expand All @@ -154,10 +235,18 @@ export default class FeedbackList extends Component{
</div>
</td>
<td>{feedback.content}</td>
<td>{Moment.unix(feedback.created / 1000).fromNow()}</td>
<td>{dateFormat(feedback.created)}</td>
<td>{feedback.userAgent||''}</td>
<td>
{
feedback.logs.length ?
<span onClick={() => this.showLogs(feedback.logs)} className="m-badge m-badge--accent m-badge--wide">已处理</span>
:<span className="m-badge m-badge--secondary m-badge--wide">未处理</span>
}
</td>
<td>
<span onClick={() => this.deleteFeedback(feedback.id)} className="btn btn-sm"><i className="fa fa-trash"></i></span>
<span className="btn btn-sm" onClick={() => this.showFeedbackModal(feedback.id,feedback.content)}><i className="fa fa-bullhorn"></i></span>
</td>
</tr>
)
Expand Down Expand Up @@ -195,6 +284,63 @@ export default class FeedbackList extends Component{
backdropClosesModal={true}
showCloseButton={false}
/>
<div className="modal fade" id="reportModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">举报结果通知</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<textarea value={this.state.reportContent} onChange={(e) => this.setState({reportContent:e.target.value})} className="w-100" name="" id="" cols="30" rows="5"></textarea>
</div>
<div className="modal-footer">
<button onClick={this.sendMsg} type="button" className="btn btn-outline-primary">发送</button>
</div>
</div>
</div>
</div>
<div className="modal fade" id="feedbackModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">反馈结果通知</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<textarea value={this.state.feedbackContent} onChange={(e) => this.setState({feedbackContent:e.target.value})} className="w-100" name="" id="" cols="30" rows="5"></textarea>
</div>
<div className="modal-footer">
<button onClick={this.sendFeedbackMsg} type="button" className="btn btn-outline-primary">发送</button>
</div>
</div>
</div>
</div>
<div className="modal fade" id="logsModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">处理结果</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
{
this.state.logs.map(log => {
return(
<p key={log}>{log}</p>
)
})
}
</div>
</div>
</div>
</div>
</div>
)
}
Expand Down
4 changes: 3 additions & 1 deletion src/scripts/components/FeedbackList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { connect } from 'react-redux'
import FeedbackList from './FeedbackList'

import { getFeedback, deleteFeedback,getReport, deleteReport, toggleBlk,toggleR18 } from '../../actions/feedbackAction'
import { getFeedback, deleteFeedback,getReport, deleteReport, toggleBlk,toggleR18,reportPushReply,feedbackPushReply } from '../../actions/feedbackAction'
import { setTouid } from '../../actions/adminAction'
const mapActionCreators = {
getFeedback,
Expand All @@ -11,6 +11,8 @@ const mapActionCreators = {
deleteReport,
toggleBlk,
toggleR18,
reportPushReply,
feedbackPushReply,

setTouid,
}
Expand Down
5 changes: 0 additions & 5 deletions src/scripts/metronic/popper.js
View file

This file was deleted.

Loading

0 comments on commit 4a116f9

Please sign in to comment.