forgeplus-react/src/forge/Merge/MessageCount.js

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

import axios from 'axios';
import UploadComponent from '../Upload/Index';
import { getImageUrl } from 'educoder';
import { Modal, Form, Input, Tooltip, Popconfirm, Pagination, Spin, Dropdown, Icon, Menu, Select } from 'antd'
import Attachments from '../Upload/attachment'
import './merge.css';
import MergeSubmit from './MergeSubmit';
import AmplifyImg from '../Order/AmplifyImg';
import MDEditor from '../../modules/tpm/challengesnew/tpm-md-editor';
import RenderHtml from '../../components/render-html';

const Option = Select.Option;
const TextArea = Input.TextArea;

class MessageCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      isShow: false,
      imgsrc: '',
      journalsdata: undefined,
      //图片区域是否显示 none 隐藏 block 显示
      display: 'none',
      titledisplay: 'none',
      countvalue: '',
      //是否需要编辑
      isedit: undefined,
      fileList: undefined,
      limit: 10,
      page: 1,
      search_count: undefined,
      isSpin: false,
      showFiles: true,
      ismesrge: 'none',
      buttonshow: 'none',
      mergename: '合并请求',
      mergekey: 'merge',
      title: '',
      body: '',
      commentsContent: undefined,
      quillFlag: false,
      SpinFlag: true,
      editMerge: false,
      issue_tag_ids: undefined,
      issue_chosen: undefined,
      fixed_version_id: undefined,
      assigned_to_id: undefined,
      imageUrl: undefined,
      visible: false,
      SpinMerge: false,
      journal_spin: false,
      edit_spin: false
    }
  }

  componentDidMount = () => {
    const url = this.props.history.location.pathname;
    if (url.indexOf("updatemerge") > -1) {
      this.setState({
        editMerge: true
      })
    }
    this.setState({
      SpinFlag: true
    })
    this.getDetail();
  }

  getDetail = () => {
    const { projectsId, mergeId } = this.props.match.params;
    const url = `/projects/${projectsId}/pull_requests/${mergeId}.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          data: result.data
        })
        this.getjournalslist();
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  handleok = () => {
    this.setState({
      isShow: false
    });
  };
  handleCancel = () => {
    this.setState({
      isShow: false
    });
  }

  imgshow = () => {
    this.setState({
      isShow: true
    });
  };

  //添加评论 
  addjournals = () => {
    const { data, page, limit, fileList, commentsContent } = this.state;
    this.setState({
      journal_spin: true
    })
    if (!commentsContent) {
      this.setState({
        quillFlag: true
      })
      return;
    }
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const url = `/issues/${data.issue.id}/journals.json`;
        axios.post(url, {
          ...values,
          content: commentsContent,
          issue_id: data.id,
          attachment_ids: fileList
        }).then(result => {
          if (result) {
            this.props.form.setFieldsValue({
              content: "",
              attachments_ids: undefined
            });
            this.setState({
              showFiles: false,
              quillFlag: false,
              commentsContent: '',
              journal_spin: false
            })
            this.getjournalslist(page, limit);
            this.props.showNotification("评论成功！");
          }
        }).catch(error => {
          this.setState({
            journal_spin: false
          })
          console.log(error);
        })
      }else{
        this.setState({
          journal_spin: false
        })
      }
    })
  }
  //获取评论信息
  getjournalslist = (page, limit) => {
    const { data } = this.state;
    const url = `/issues/${data.issue.id}/journals.json`;
    let id = data.id;
    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,
          showFiles: true,
          SpinFlag: false
        })
      }
    }).catch(error => {
      console.log(error);
    })
  }


  //关闭任务
  closedetail = (id) => {
    const { projectsId, orderId } = this.props.match.params;
    const { data } = this.state;
    const url = `/projects/${projectsId}/issues/${data.issue.id}/close_issue.json`;
    axios.post(url, {
      project_id: projectsId,
      id: orderId,
      status_id: id,
    }).then(result => {
      if (result) {
        this.getDetail();
      }
    }).catch(error => {
      console.log(error);
    })
  }

  //合并请求
  prmerge = () => {
    this.setState({
      SpinMerge: true
    })
    const { projectsId } = this.props.match.params;
    const { data, title, body, mergekey } = this.state;
    const url = `/projects/${projectsId}/pull_requests/${data.pull_request.id}/pr_merge.json`;
    axios.post(url, {
      project_id: projectsId,
      id: data.pull_request.id,
      do: mergekey,
      body: body,
      title: title,
    }).then(result => {
      if (result) {
        this.getDetail();
        this.setState({
          SpinMerge: false
        })
      }
    }).catch(error => {
      this.setState({
        SpinMerge: false
      })
      console.log(error);
    })
  }

  //修改评论
  updatedetail = (id) => {
    this.setState({
      edit_spin: true
    })
    const { page, limit, data } = this.state;
    const { orderId } = this.props.match.params;
    const url = `/issues/${data.issue.id}/journals/${id}.json`;
    axios.put(url, {
      issue_id: orderId,
      id: id,
      content: this.state.countvalue
    }).then(result => {
      if (result) {
        this.setState({
          isedit: undefined,
          edit_spin: false
        })
        this.getjournalslist(page, limit);
      }
    }).catch(error => {
      this.setState({
        edit_spin: false
      })
      console.log(error);
    })
  }
  // 获取上传后的文件id数组
  UploadFunc = (fileList) => {
    this.setState({
      fileList
    })
  }

  //删除评论
  deleteorder = (id) => {
    const { orderId } = this.props.match.params;
    const { page, limit, data } = this.state;
    const url = `/issues/${data.issue.id}/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);
    })
  }

  changmodelname = (value) => {
    this.setState({
      countvalue: value
    })
  }
  changtitlepr = (e) => {
    this.setState({
      title: e.target.value
    })
  }

  changbodypr = (e) => {
    this.setState({
      body: e.target.value
    })
  }
  editdetail = (count, status) => {
    this.setState({
      countvalue: count,
      isedit: status
    })
  }
  submitmerge = () => {
    if (this.state.mergekey === "rebase") {
      this.setState({
        buttonshow: 'block',
        ismesrge: 'none'
      })
    } else {
      this.setState({
        ismesrge: 'block',
        buttonshow: 'block'
      })
    }

  }


  nonemerge = () => {
    this.setState({
      ismesrge: 'none',
      buttonshow: 'none'
    })
  }

  renderJournalList = (list) => {
    if (list && list.length > 0) {
      return (
        list.map((item, key) => {
          return (
            <div key={key + 1} className="journal-list-item">
              <span className="font-weight-bold 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>
      )
    }
  }

  handleSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { projectsId, mergeId } = this.props.match.params;
        const url = `/projects/${projectsId}/pull_requests/${mergeId}/simple_update.json`;

        if (values.issue_tag_ids === '') {
          values.issue_tag_ids = []
        } else {
          values.issue_tag_ids = [parseInt(values.issue_tag_ids)]
        }

        if (values.assigned_to_id === 0) {
          values.assigned_to_id = ""
        }
        axios.post(url, {
          ...values
        }).then(result => {
          if (result.data.status === 0) {
            this.setState({
              editMerge: false
            })
            this.getDetail()
            this.props.showNotification(result.data.message);

          }

        }).catch(error => {
          console.log(error);
        })

      }
    })
  }

  renderSelect = (list) => {
    if (list && list.length > 0) {
      return (
        list.map((item, key) => {
          return (
            <Option key={key + 1} value={item.id}>{item.name}</Option>
          )
        })
      )
    }
  }


  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true
    })
    const { limit } = this.state;
    this.getjournalslist(page, limit);
  }
  getOption = (e) => {
    if (e.key === "rebase") {
      this.setState({
        mergename: e.item.props.value,
        mergekey: e.key,
        title: '',
        body: '',
        buttonshow: 'block'
      })
    } else {
      this.setState({
        mergename: e.item.props.value,
        mergekey: e.key,
        title: '',
        body: '',
        ismesrge: 'block',
        buttonshow: 'block'
      })
    }

  }

  changeComments = (value) => {
    this.setState({
      commentsContent: value
    })
    if (value) {
      this.setState({
        quillFlag: false
      })
    }
  }
  cancelSubmit = () => {
    this.setState({
      editMerge: false
    })
  }

  change_to_edit = () => {
    const { projectsId, mergeId } = this.props.match.params;
    const url = `/projects/${projectsId}/pull_requests/${mergeId}/edit.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          issue_chosen: result.data.issue.issue_chosen,
          issue_tag_ids: result.data.issue.issue_tags && result.data.issue.issue_tags[0].id,
          fixed_version_id: result.data.issue.fixed_version_id,
          assigned_to_id: result.data.issue.assigned_to_id,
          editMerge: true
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }


  commentCtx = (v) => {
    return (
      <RenderHtml className="break_word_comments" value={v} />
    )
  };
  handleShowImage = (value) => {
    this.setState({
      imageUrl: value,
      visible: true
    })
  }
  setVisible = (flag) => {
    this.setState({
      visible: flag
    })
  }

  render() {
    const { projectsId, mergeId } = this.props.match.params;
    const { data, journalsdata, page, limit, search_count, isSpin, isedit, showFiles, commentsContent, quillFlag, editMerge, issue_tag_ids, issue_chosen, fixed_version_id, assigned_to_id, visible, imageUrl, SpinMerge, journal_spin, edit_spin } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { current_user } = this.props;
    const url = this.props.history.location.pathname;


    const editMergeForm = () => {
      return (
        <div>
          <Form>
            <Form.Item
              label="标签"
            >
              {getFieldDecorator('issue_tag_ids', {
                initialValue: issue_tag_ids ? [issue_tag_ids] : '',
                rules: [],
              })(
                <Select>
                  <Option value={''}>{issue_chosen && issue_chosen.issue_tag.length > 0 ? '未选择标签' : '请在仓库设置里添加标签'}</Option>
                  {this.renderSelect(issue_chosen && issue_chosen.issue_tag)}
                </Select>
              )}
            </Form.Item>
            <Form.Item
              label="里程碑"
            >
              {getFieldDecorator('fixed_version_id', {
                initialValue: fixed_version_id ? fixed_version_id : "",
                rules: [],
              })(
                <Select>
                  <Option value={''}>{issue_chosen && issue_chosen.issue_version.length > 0 ? '未选择里程碑' : '请添加里程碑'}</Option>
                  {this.renderSelect(issue_chosen && issue_chosen.issue_version)}
                </Select>
              )}
            </Form.Item>

            <Form.Item
              label="指派成员"
            >
              {getFieldDecorator('assigned_to_id', {
                initialValue: assigned_to_id ? assigned_to_id : "",
              })(
                <Select>
                  <Option value={''}>未指派成员</Option>
                  {this.renderSelect(issue_chosen && issue_chosen.assign_user)}
                </Select>
              )}
            </Form.Item>
            <p className="clearfix mt15 text-right">
              <Spin spinning={edit_spin}>
                <a className="topWrapper_btn fr" type="submit" style={{ marginLeft: 5 }} onClick={this.handleSubmit}>保存</a>
                <a className="a_btn cancel_btn fr" onClick={this.cancelSubmit}>取消</a>
              </Spin>
            </p>
          </Form>
        </div>
      )
    }


    const menu = (
      <Menu onClick={(e) => this.getOption(e)}>
        <Menu.Item key={'merge'} value="合并请求">合并请求</Menu.Item>
        <Menu.Item key={'rebase'} value="变基并合并">变基并合并</Menu.Item>
        <Menu.Item key={'rebase-merge'} value="变基合并 --no-ff">变基合并 --no-ff</Menu.Item>
        <Menu.Item key={'squash'} value="压缩提交并合并">压缩提交并合并</Menu.Item>
      </Menu>
    )

    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 renderList = () => {
      if (journalsdata && journalsdata.issue_journals && journalsdata.issue_journals.length > 0) {
        return (
          <div className="tagList">{
            journalsdata.issue_journals.map((item, key) => {
              return (
                <li key={key}>
                  <div className="df">
                    <Link to={`/users/${item && item.user_login}/projects`} className="show-user-link">
                      <img className="user_img" src={getImageUrl(`images/${item && item.user_picture}`)} alt="" />
                    </Link>
                    <div className="detail_context" >
                      <div className="topWrapper_detali">
                        <p className="ml6 detail_p lineH40">
                          {item.user_name}
                          <span className="color-grey-9 ml3 mr3">评论于</span>
                          <Tooltip title={item.format_time} placement="bottom">
                            <span>{item.created_at}</span>
                          </Tooltip>
                        </p>
                        <div className="detail_right" style={{ display: current_user && (current_user.admin || current_user.login === item.user_login) ? "block" : "none" }}>
                          <span onClick={() => this.editdetail(item.content, item.id)} className="detail_edit_action">编辑</span>
                          <Popconfirm placement="bottom" title={'确定要删除当前评论吗'} okText="是" cancelText="否" onConfirm={() => this.deleteorder(item.id)}>
                            <span className="detail_edit_action">删除</span>
                          </Popconfirm>
                        </div>
                      </div>
                      <div className="detail_ptitlecount">
                        <div style={{ display: (isedit && isedit === item.id) ? "none" : "block" }} >
                          {
                            item.content ?
                              this.commentCtx(item.content)
                              :
                              <div>
                                {this.renderJournalList(item.journal_details)}
                              </div>
                          }
                          {
                            item && 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>
                        <div style={{ display: (isedit && isedit === item.id) ? "block" : "none" }}>

                          <MDEditor placeholder={'添加评论...'} height={200}
                            mdID={`merge-comments-description${item.id}`} startInit={isedit && isedit === item.id} initValue={this.state.countvalue} onChange={this.changmodelname} ></MDEditor>
                          <p className="clearfix mt15">
                            <a className="topWrapper_btn fr" type="submit" onClick={() => this.updatedetail(item.id)}>保存</a>
                            <a className="a_btn cancel_btn fr" type="submit" onClick={() => this.editdetail(item.content, undefined)}>取消</a>
                          </p>
                        </div>
                      </div>
                      <div style={{ display: this.state.display }}>
                        <div className="div_line" ></div>

                      </div>
                    </div>
                  </div>
                  <div className="order_line" style={{ marginLeft: 80 }}></div>
                </li>
              )
            })
          }
          </div>
        )
      }
    }

    return (
      <div className="main">
        {visible && <AmplifyImg url={imageUrl} visible={visible} setVisible={this.setVisible} />}
        <div>
          <div className="detailContent">
            {
              data &&
              <p>
                <span className="font-20">【{data.issue && (data.issue.issue_classify === 'issue' ? data.issue.tracker : "合并")}】</span>
                <span className="font-20" > {data.issue && data.issue.subject}</span>
              </p>
            }
            <p className="mt10 color-grey-c">
              <span className={data && data.issue.issue_status === "关闭" ? "closedetail" : data && data.pull_request.status === 0 ? "opendetail" : "prdetail"}>{data && data.issue.issue_status === "关闭" ? "关闭中" : data && data.pull_request.status === 0 ? "开启中" : "已合并"} </span>
              <span className="color-grey-c ml10">
                由 {data && data.issue.author_name} 于 {data && data.issue.created_at}创建{data && data.issue.journals_count && data.issue.journals_count > 0 ? ` · ${data.issue.journals_count} 条评论` : ""}
              </span>

              <span className="span_title ml10">
                请求从<strong> {data && data.pull_request.head} </strong>分支合并到<strong> {data && data.pull_request.base} </strong>分支
             </span>
              <span className="pull-right lineH32">
                {
                  data && data.issue.user_permission ?
                    <a onClick={this.change_to_edit} className="color-blue fr">编辑</a>
                    : ''
                }
              </span>
            </p>
            {
              data && data.attachments.length > 0 ?
                <div className="df mt20">
                  <Attachments attachments={data.attachments} showNotification={this.props.showNotification} />
                </div>
                :
                ""
            }

            <div>
              <div className="normal f-wrap-between">
                <ul className="headerMenu-wrapper" style={{ paddingTop: 15, paddingLeft: 15 }}>
                  <li className={url.indexOf("Messagecount") > 0 ? "active" : ""}><Link to={`/projects/${projectsId}/merge/${mergeId}/Messagecount`} className="color-grey">对话内容</Link></li>
                  <li className={url.indexOf("MergeSubmit") > 0 ? "active" : ""}><Link to={`/projects/${projectsId}/merge/${mergeId}/MergeSubmit`} className="color-grey">代码提交</Link></li>
                </ul>
                {data && data.issue.user_permission &&
                  <div className="pull-right pt15">
                    <a className="Closeor_btn fr" type="submit"
                      onClick={() => this.closedetail(data && data.issue.issue_status === "关闭" ? 2 : 5)}>{data && data.issue.issue_status === "关闭" ? "点击开启" : "关闭"}</a>
                  </div>
                }
              </div>
            </div>

          </div>
          {
            (url.indexOf("Messagecount") > 0 || url.indexOf("updatemerge") > 0) ?
              <Spin spinning={this.state.SpinFlag}>
                <div className="f-wrap-between mt20" style={{ alignItems: "flex-start" }}>
                  <div className="item-list-right" >
                    {
                      data && data.issue.user_permission ?
                        <div style={{ display: data && (data.pull_request.status === 1 || data.issue.issue_status === "关闭") ? 'none' : '' }}>
                          <div className="df" >
                            <Link to={`/users/${current_user && current_user.login}/projects`} className="show-user-link">
                              <img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" />
                            </Link>
                            <div className="new_context">
                              {
                                data && data.issue.issue_status !== "关闭" &&
                                <div>
                                  <p>该合并请求可以进行自动合并操作</p>
                                  <p style={{ marginTop: 15, display: this.state.mergekey === 'rebase' ? this.state.buttonshow === 'none' ? "block" : "none" : this.state.ismesrge === 'none' ? "block" : "none" }}>

                                    <Dropdown.Button overlay={menu} type="primary" onClick={this.submitmerge} icon={<Icon type="caret-down" />}>
                                      {this.state.mergename}
                                    </Dropdown.Button>
                                  </p>
                                </div>
                              }
                              <div style={{ display: this.state.ismesrge, marginTop: 15 }}>
                                <Input placeholder="标题" value={this.state.title} onChange={this.changtitlepr} />
                                <TextArea placeholder="请输入合并描述..." style={{ height: "170px", marginTop: 20 }} value={this.state.body} onChange={this.changbodypr} />
                              </div>
                              <p className="clearfix mt15" style={{ display: this.state.buttonshow }}>
                                <Spin spinning={SpinMerge}>
                                  <a className="topWrapper_btn " type="submit" onClick={() => this.prmerge()}>合并请求</a>
                                  <a className="a_btn cancel_btn " type="submit" style={{ marginLeft: 15 }} onClick={this.nonemerge}>取消</a>
                                </Spin>
                              </p>
                            </div>
                          </div>
                          <div className="order_line" style={{ marginLeft: 80 }}></div>
                        </div>
                        : ''
                    }

                    <Spin spinning={isSpin}>
                      <ul className="ul_width">
                        {renderList()}
                      </ul>
                    </Spin>

                    {Paginations}

                    <div className="df">
                      <Link to={`/users/${current_user && current_user.login}/projects`} className="show-user-link">
                        <img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" />
                      </Link>
                      <div className="new_context">
                        <div className="quillContent" style={{ marginBottom: "20px" }}>
                          <MDEditor placeholder={'请输入评论内容...'} height={200}
                            mdID={`orderdetail-add-description`} initValue={commentsContent} onChange={this.changeComments} ></MDEditor>
                          <p className="quillFlag">
                            {quillFlag && <span className="">请输入评论内容</span>}
                          </p>
                        </div>
                        <UploadComponent load={this.UploadFunc} isComplete={showFiles}></UploadComponent>
                        <p className="clearfix mt15">
                          <Spin spinning={journal_spin}>
                            <a className="topWrapper_btn fr" type="submit" onClick={this.addjournals}>评论</a>
                          </Spin>
                        </p>
                      </div>
                    </div>
                  </div>
                  {
                    editMerge ?
                      <div className="list-left DetailRight">
                        {editMergeForm()}
                      </div>

                      :
                      <div className="list-left DetailRight">
                        <p>
                          <span className="span_title">标签</span>
                          <span>{
                            data && data.issue.issue_tags ? <span className="issue-tag-show" style={{ background: data.issue.issue_tags[0].color }}>{data.issue.issue_tags[0].name}</span> : "--"
                          }</span>
                        </p>
                        <p style={{ display: "inline-block", 'white-space': "nowrap" }}>
                          <span className="span_title">里程碑</span>
                          <span className="title_overflow">{
                            data && data.issue.version ? data.issue.version : "--"
                          }</span>
                        </p>
                        <p>
                          <span className="span_title">指派给</span>
                          <span>{data && data.issue.assign_user_name ? data.issue.assign_user_name : "--"}</span>
                        </p>

                      </div>
                  }

                </div>
              </Spin>
              :
              <MergeSubmit {...this.props} {...this.state} data={data} />
          }

        </div>
        <Modal
          onCancel={this.handleCancel}
          visible={this.state.isShow}
          width="400px"
          footer={[]}
          bodyStyle={{ textAlign: 'center' }}
        >
          <img className="list_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt="" />
        </Modal>
      </div>
    )
  }
}

const MessageCountForm = Form.create({ name: 'MessageCountForm' })(MessageCount);
export default MessageCountForm;