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, Tabs, Avatar } 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";
const { TabPane } = Tabs;
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) => {
    if (this.props.checkIfLogin() === false) {
      this.props.showLoginDialog();
      return;
    } else {
      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;
  };

  loginModal() {
    this.props.showLoginDialog();
    return;
  }

  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, only_show_content } = 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 className="grid-item-top pb10">
          <Link
            to={`/users/${current_user && current_user.login}`}
            className="show-user-link mr10"
          >
            <img
              className="radius"
              src={getImageUrl(
                `images/${current_user && current_user.image_url}`
              )}
              alt=""
              width="30"
              height="30"
            />
          </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">
              <Button
                type="primary"
                onClick={this.addjournals}
                loading={journal_spin}
                className="mr15"
              >
                评论
              </Button>
              <Button onClick={this.cancel_reply}>取消</Button>
            </p>
          </div>
        </div>
      );
    };

    const renderList = (item) => {
      return (
        <div className="width100">
          <div className="pb5">
            <Link
              to={`/users/${item && item.user_login}`}
              className="show-user-link"
            >
              <img
                className="radius"
                src={getImageUrl(`images/${item && item.user_picture}`)}
                alt=""
                width="30"
                height="30"
              />
            </Link>
            <Link
              to={`/users/${item && item.user_login}`}
              className="show-user-link color-black ml10 fwb"
            >
              {item && item.user_name}
            </Link>
          </div>
          <div className="ml40">
            {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)
                }
              />
            ) : (
              ""
            )}
            <div className="grid-item mt5">
              <span className="color-grey-8">{item.created_at}</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-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
                      <span className="font-12 color-grey-6">删除</span>
                    </Button>
                  </Popconfirm>
                ) : (
                  ""
                )}
                <Button
                  type="link"
                  className="ml-10"
                  onClick={() => this.add_reply(item.id)}
                >
                  <i className="iconfont icon-huifu1 font-15 color-grey-6 mr5 ver-middle"></i>
                  <span className="font-12 color-grey-6">回复</span>
                </Button>
              </span>
            </div>
            {current_user && (
              <div>
                {is_reply && reply_id && reply_id === item.id ? (
                  <div className="pt20">{new_comment(is_reply, item.id)}</div>
                ) : (
                  ""
                )}
              </div>
            )}
            <ChildrenComments
              order_id={orderId}
              parent_id={item.id}
              onRef={this.onRef}
              children_comment_id={new_journal_id}
              {...this.props}
            ></ChildrenComments>
          </div>
        </div>
      );
    };

    return (
      <div>
        {only_show_content ? (
          <div>
            <div className="mb10">
              {is_reply && !reply_id ? (
                <div className="pd20">{new_comment(is_reply, undefined)}</div>
              ) : (
                <div className="children-comment-bg pd20 grid-item">
                  <img
                    className="radius"
                    src={
                      current_user && current_user.image_url
                        ? getImageUrl(`images/${current_user.image_url}`)
                        : "images/avatars/User/b"
                    }
                    alt=""
                    width="30"
                    height="30"
                  />
                  <span className="reply-comment-input mr20">
                    <Button
                      className="add_reply_button ml10"
                      onClick={() => this.add_reply(undefined)}
                    >
                      <span>添加评论...</span>
                    </Button>
                  </span>
                </div>
              )}
            </div>
            {journalsdata && journalsdata.journals_total_count > 0 && (
              <List
                size="large"
                loading={isSpin}
                header=""
                dataSource={journalsdata.issue_journals}
                renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
              />
            )}
            {Paginations}
          </div>
        ) : (
          <div className="mt20">
            <div className="comment-background pd10 mb10">
              <Tabs defaultActiveKey="1" className="custom-comment-tabs">
                <TabPane
                  tab={
                    <span className="ml-3 font-16">
                      评论
                      {search_count > 0 && (
                        <span className="search-count-button">
                          {search_count}
                        </span>
                      )}
                    </span>
                  }
                  key="1"
                >
                  <div className="mb10">
                    {is_reply && !reply_id ? (
                      <div className="pd20">
                        {new_comment(is_reply, undefined)}
                      </div>
                    ) : (
                      <div className="children-comment-bg pd20 grid-item">
                        <img
                          className="radius"
                          src={
                            current_user && current_user.image_url
                              ? getImageUrl(`images/${current_user.image_url}`)
                              : "images/avatars/User/b"
                          }
                          alt=""
                          width="30"
                          height="30"
                        />
                        <span className="reply-comment-input mr20">
                          <Button
                            className="add_reply_button ml10"
                            onClick={() => this.add_reply(undefined)}
                          >
                            <span>添加评论...</span>
                          </Button>
                        </span>
                      </div>
                    )}
                  </div>
                  {journalsdata && journalsdata.journals_total_count > 0 && (
                    <List
                      size="large"
                      loading={isSpin}
                      header=""
                      dataSource={journalsdata.issue_journals}
                      renderItem={(item) => (
                        <List.Item>{renderList(item)}</List.Item>
                      )}
                    />
                  )}
                </TabPane>
              </Tabs>
              {Paginations}
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default comments;