educoder/public/react/src/modules/courses/boards/BoardsListItem.js

import React,{ Component } from "react";
import {Tooltip} from 'antd'
import moment from 'moment'
import { getUrl } from 'educoder'
class BoardsListItem extends Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }
  onTitleClick = (discussMessage) => {
    const isAdminOrStudent = this.props.isAdminOrStudent();
    if (!isAdminOrStudent && discussMessage.is_public == false) {
      // 没有权限访问
      return;
    }
    const cid = this.props.match.params.coursesId    
    const board_id = this.props.match.params.boardId
    this.props.toDetailPage(cid, board_id, discussMessage.id)
  }
  render(){
    let { addGroup } = this.state;
    const isAdmin = this.props.isAdmin()
    const isAdminOrStudent = this.props.isAdminOrStudent()
    const { checkBox, discussMessage, onSticky, onItemClick, current_user } = this.props;
    if (!discussMessage || !discussMessage.author) {
      return '';
    }
    let canNotLink = !isAdminOrStudent && discussMessage.is_public == false

    return(
        <div className="panel-inner-fourm boardsList">
          <style>{`
            .boardsList .panel-list-img {
              width: 50px;
              height: 50px;
            }
          `}</style>
          { checkBox }
          <a href={`/users/${discussMessage.author.login}`} alt="用户" style={{"width":"50px","height":"50px","display":"block", margin: "0 10px"}}>
            {/* /images/avatars/User/1?1529221779 */}
            <img 
              alt="1?1529221779" className="panel-list-img mr15" height="50"
              src={`${getUrl()}/images/${discussMessage.author.image_url}`} width="50"
            ></img>
          </a>
          <div className="clearfix ds pr pt5 contentSection" onClick={() => onItemClick(discussMessage)}>
            <h6>
              <a href="javascript:void(0)" className="panel-list-title hide fl mt5 color-dark font-bd" 
                style={{ fontWeight: 'bold', cursor: (canNotLink ? 'default' : 'poninter') }}
                onClick={canNotLink ? () => {} : () => this.onTitleClick(discussMessage)}
              >{discussMessage.subject}</a>
              { !!discussMessage.sticky && <span className="btn-cir btn-cir-red fl mt5 ml5">置顶</span> }
              {
                
                 discussMessage.is_public == false ? (<Tooltip title={`${isAdminOrStudent ? '私有属性' : '私有属性，非课堂成员不能访问'}`}>
                  <i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
                 </Tooltip>) : ""
              }
            </h6>
              
            <div className="cl"></div>
            <p className="color-grey panel-lightgrey mt10 fl">
              <span className="mr50">
                <a href={`/users/${discussMessage.author.login}`} className="panel-name-small hide fl mr15 mr30 color-grey3">{discussMessage.author.name}</a>

                { discussMessage.total_replies_count != 0 && <span className="mr15 color-grey9">{discussMessage.total_replies_count} 回复</span> }
                { discussMessage.total_praises_count != 0 && <span className="mr15 color-grey9">{discussMessage.total_praises_count} 点赞</span> }
                { discussMessage.visits != 0 && <span className="mr15 color-grey9">{discussMessage.visits} 浏览</span> }

                <span className="mr15 color-light-grey-C">{moment(discussMessage.created_on).fromNow()} </span>
              </span>
              {/* <span className="mr10">最后回复<span className="ml10 mr10">社区导师</span>10个月前</span> */}
            </p>

            {/* <span className="mr10"><i className="fa fa-eye color-grey  mr5 "></i>473</span> */}
            {/* <p className="fr panel-lightgrey mt10">
              <span className="mr10"><i className="fa fa-eye color-grey mr5" data-tip-down="浏览数"></i>82</span>
              <span className="mr10"><i className="fa fa-thumbs-up color-grey mr5" data-tip-down="点赞数"></i>1</span>
              <span className="mr10"><i className="fa fa-comments-o color-grey mr5" data-tip-down="回复数"></i>4</span>
            </p> */}


            { (isAdmin || discussMessage.author.login == current_user.login) && 
            <div className="homepagePostSetting" style={{"right":"4px","top":"5px","display":"block"}}>
              <ul>
                <li className="edu-position edu-position-hidebox">
                  <i className="fa fa-bars color-grey-b"></i>
                  <ul className="edu-position-hide undis">
                    {/* <li><a href="javascript:void(0)" onclick="show_send(34255, 1, 'message');">发送</a></li> */}
                    {(isAdmin || discussMessage.author.login == current_user.login) && <li><a href="javascript:void(0)" onClick={(e) => { 
                        this.props.toEditPage(this.props.match.params.coursesId, this.props.match.params.boardId, discussMessage.id )} } >编辑</a></li>
                    }
                    {isAdmin && <li><a href="javascript:void(0)" onClick={(e) => { debugger; onSticky(discussMessage); e.cancelBubble = true; e.stopPropagation();} }>
                      { discussMessage.sticky ? '取消置顶' : '置顶' }
                    </a></li>
                    }
                    {/* <li>
                      <a href="javascript:void(0);" onclick="delete_confirm_box_3('/boards/5464/topics/34255/destroy', '确定要删除该帖子吗？')">删除</a>
                    </li> */}
                  </ul>
                </li>
              </ul>
            </div>
            }
          </div>
        </div>
      )
    }
}
export default BoardsListItem;