forgeplus-react/src/forge/comments/comments.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

import axios from "axios";
import Upload from "../Upload/Index";
import UploadImg from "../Images/upload.png";
import { getImageUrl } from "educoder";
import { List, Popconfirm, Pagination, Button } from "antd";
import Attachments from "../Upload/attachment";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../components/render-html";
import ChildrenComments from "./children_comments";
import "../Order/order.css";

class comments extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: undefined,
      journalsdata: undefined,
      isedit: undefined,
      fileList: undefined,
      limit: 10,
      page: 1,
      journal_spin: false,
      edit_spin: false,
      attachment_clean: true,
      orderId: this.props.order_id,
      is_reply: false,
      reply_id: undefined,
      reply_content: undefined,
      new_journal_id: undefined,
    };
  }

  componentDidMount = () => {
    this.getjournalslist();
  };

  //添加评论
  addjournals = () => {
    const { content, reply_content } = this.state;
    this.setState({
      journal_spin: true,
    });
    if (!content && !reply_content) {
      this.setState({
        journal_spin: false,
      });
      return;
    }
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const {
          page,
          limit,
          fileList,
          orderId,
          reply_id,
          is_reply,
        } = this.state;

        const url = `/issues/${orderId}/journals.json`;

        axios
          .post(url, {
            ...values,
            content: is_reply ? reply_content : content,
            issue_id: orderId,
            attachment_ids: fileList,
            parent_id: reply_id,
          })
          .then((result) => {
            if (result && result.data.status === 0) {
              this.props.form.setFieldsValue({
                content: "",
                reply_content: undefined,
              });
              this.setState({
                showFiles: false,
                content: "",
                is_reply: false,
                reply_id: undefined,
                reply_content: undefined,
                quillFlag: false,
                journal_spin: false,
                attachment_clean: false,
              });
              this.state.new_journal_id = result.data.id;
              this.getjournalslist(page, limit);
            }
            this.props.showNotification(result.data.message);
          })
          .catch((error) => {
            this.setState({
              journal_spin: false,
            });
            console.log(error);
          });
      } else {
        this.setState({
          journal_spin: false,
        });
      }
    });
  };
  add_reply = (id) => {
    this.setState({
      is_reply: true,
      success_journal: false,
      reply_id: id,
    });
  };

  cancel_reply = () => {
    this.setState({
      is_reply: false,
      reply_id: undefined,
      success_journal: false,
      reply_content: undefined,
    });
  };
  //获取评论信息
  getjournalslist = (page, limit) => {
    const { orderId } = this.state;
    const url = `/issues/${orderId}/journals.json`;
    let id = orderId;
    axios
      .get(url, {
        params: {
          id,
          page,
          limit,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            journalsdata: result.data,
            search_count: result.data.journals_count,
            isSpin: false,
            fileList: undefined,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 获取上传后的文件id数组
  UploadFunc = (fileList) => {
    this.setState({
      fileList,
      attachment_clean: true,
    });
  };

  //删除评论
  deleteorder = (id) => {
    const { page, limit, orderId } = this.state;
    const url = `/issues/${orderId}/journals/${id}.json`;
    axios
      .delete(url, {
        data: {
          issue_id: orderId,
          id: id,
        },
      })
      .then((result) => {
        if (result) {
          this.getjournalslist(page, limit);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  renderJournalList = (list) => {
    if (list && list.length > 0) {
      return list.map((item, key) => {
        return (
          <div key={key + 1} className="journal-list-item">
            <span className="fwb mr3">{item.detail}：</span>
            <span className="mr5 color-grey-9">
              {item.old_value && item.old_value.length > 0 ? "更新为" : "新增"}
            </span>
            <span>
              {item.value && item.value.length > 0 ? (
                item.detail === "标签" ? (
                  <span
                    className="issue-tag-show"
                    style={{ background: item.value[0].color }}
                  >
                    {item.value[0].name}
                  </span>
                ) : (
                  item.value
                )
              ) : (
                "无"
              )}
            </span>
          </div>
        );
      });
    } else {
      return (
        <div>
          <span>没有评论~</span>
        </div>
      );
    }
  };

  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true,
    });
    const { limit } = this.state;
    this.getjournalslist(page, limit);
  };

  // 判断是否重新上传文件
  changeIsComplete = (flag) => {
    this.setState({
      showFiles: flag,
    });
  };
  // 新建评论
  onContentChange = (value) => {
    if (value) {
      this.setState({
        content: value,
        quillFlag: false,
      });
    }
  };
  replyContentChange = (value) => {
    if (value) {
      this.setState({
        reply_content: value,
        quillFlag: false,
      });
    }
  };

  onRef = (ref) => {
    this.child = ref;
  };

  commentCtx = (v) => {
    return <RenderHtml className="break_word_comments" value={v} />;
  };

  render() {
    const {
      journalsdata,
      page,
      limit,
      search_count,
      isSpin,
      content,
      quillFlag,
      journal_spin,
      attachment_clean,
      is_reply,
      reply_id,
      reply_content,
      orderId,
      new_journal_id,
    } = this.state;
    const { current_user } = this.props;

    const Paginations = (
      <React.Fragment>
        {search_count > limit ? (
          <div className="pt30 mb50 edu-txt-center btp1">
            <Pagination
              simple
              defaultCurrent={page}
              total={search_count}
              pageSize={limit}
              onChange={this.ChangePage}
            ></Pagination>
          </div>
        ) : (
          ""
        )}
      </React.Fragment>
    );

    const new_comment = (is_reply, item_id) => {
      return (
        <div>
          {current_user && current_user.login ? (
            <div>
              <div className="grid-item pb10">
                <Link
                  to={`/users/${current_user && current_user.login}/projects`}
                  className="show-user-link"
                >
                  <img
                    className="radius"
                    src={getImageUrl(
                      `images/${current_user && current_user.image_url}`
                    )}
                    alt=""
                    width="30"
                    height="30"
                  />
                </Link>
                <Link
                  to={`/users/${current_user && current_user.login}/projects`}
                  className="show-user-link color-blue ml10"
                >
                  {current_user && current_user.real_name}
                </Link>
              </div>
              <MDEditor
                placeholder={"添加评论..."}
                height={200}
                mdID={
                  item_id
                    ? "orderdetail-add-descriptions" + item_id
                    : "orderdetail-add-descriptions"
                }
                initValue={is_reply ? reply_content : content}
                onChange={
                  is_reply ? this.replyContentChange : this.onContentChange
                }
              ></MDEditor>
              <p className="quillFlag">
                {quillFlag && <span className="">请输入评论内容</span>}
              </p>
              <Upload
                className="commentStyle"
                isComplete={attachment_clean}
                load={this.UploadFunc}
                icon={
                  <img
                    src={UploadImg}
                    width="58"
                    alt=""
                    style={{ marginBottom: 15 }}
                  />
                }
                size={100}
                showNotification={this.props.showNotification}
              />
              <p className="clearfix mt20 text-right">
                {is_reply && (
                  <Button
                    onClick={this.cancel_reply}
                    size="large"
                    className="mr15"
                  >
                    取消
                  </Button>
                )}
                <Button
                  type="primary"
                  onClick={this.addjournals}
                  loading={journal_spin}
                  size="large"
                >
                  评论
                </Button>
              </p>
            </div>
          ) : (
            <div className="loginDiv">
              <Link to={`/login`}>登录</Link>并参与到对话中
            </div>
          )}
        </div>
      );
    };

    const renderList = (item) => {
      return (
        <div className="width100">
          <div className="grid-item pb10">
            <Link
              to={`/users/${item && item.user_login}/projects`}
              className="show-user-link"
            >
              <img
                className="radius"
                src={getImageUrl(`images/${item && item.user_picture}`)}
                alt=""
                width="30"
                height="30"
              />
            </Link>
            <span className="grid-item">
              <span>
                <Link
                  to={`/users/${item && item.user_login}/projects`}
                  className="show-user-link color-blue ml10"
                >
                  {item && item.user_name}
                </Link>
                <span className="color-grey-8 ml20">{item.created_at}</span>
              </span>

              <span className="text-right">
                {current_user &&
                (current_user.admin ||
                  current_user.login === item.user_login) ? (
                  <Popconfirm
                    placement="bottom"
                    title={"确定要删除当前评论吗?"}
                    okText="是"
                    cancelText="否"
                    onConfirm={() => this.deleteorder(item.id)}
                  >
                    <Button type="link">
                      <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
                    </Button>
                  </Popconfirm>
                ) : (
                  ""
                )}
              </span>
            </span>
          </div>
          <div className="ml30">
            {item.content ? (
              this.commentCtx(item.content)
            ) : (
              <div>{this.renderJournalList(item.journal_details)}</div>
            )}
            {item && item.attachments && item.attachments.length > 0 ? (
              <Attachments
                attachments={item.attachments}
                showNotification={this.props.showNotification}
                canDelete={
                  current_user &&
                  (current_user.admin || current_user.login === item.user_login)
                }
              />
            ) : (
              ""
            )}
            <ChildrenComments
              order_id={orderId}
              parent_id={item.id}
              onRef={this.onRef}
              children_comment_id={new_journal_id}
              {...this.props}
            ></ChildrenComments>
          </div>

          {current_user && (
            <div>
              {is_reply && reply_id && reply_id === item.id ? (
                <div className="pd20">{new_comment(is_reply, item.id)}</div>
              ) : (
                <div className="grid-item mt15">
                  <Link
                    to={`/users/${current_user && current_user.login}/projects`}
                    className="show-user-link mr10"
                  >
                    <img
                      className="radius"
                      src={getImageUrl(
                        `images/${current_user && current_user.image_url}`
                      )}
                      alt=""
                      width="30"
                      height="30"
                    />
                  </Link>
                  <span className="reply-comment-input">
                    <Button
                      className="add_reply_button"
                      onClick={() => this.add_reply(item.id)}
                    >
                      <span>我要回复</span>
                    </Button>
                  </span>
                </div>
              )}
            </div>
          )}
        </div>
      );
    };

    return (
      <div className="pd20">
        <div className="comment-background">
          {journalsdata && journalsdata.journals_total_count > 0 ? (
            <List
              size="large"
              loading={isSpin}
              header={<div>回复({journalsdata.journals_total_count})</div>}
              dataSource={journalsdata.issue_journals}
              renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
            />
          ) : (
            <div className="ant-list-header border-bottom-comment">
              <div>回复({search_count})</div>
            </div>
          )}
          {Paginations}
          <div className="pd20 border-top-e">{new_comment()}</div>
        </div>
      </div>
    );
  }
}

export default comments;