forked from Gitlink/forgeplus-react
431 lines
13 KiB
JavaScript
431 lines
13 KiB
JavaScript
import React, { Component } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { Radio, Form, Menu, Dropdown, Input, Select, Table, Spin } from 'antd';
|
||
import axios from 'axios';
|
||
import UploadComponent from '../Upload/Index';
|
||
import { getImageUrl } from 'educoder';
|
||
import '../Order/order.css';
|
||
import MDEditor from '../../modules/tpm/challengesnew/tpm-md-editor';
|
||
|
||
|
||
const { Button } = Radio;
|
||
const Option = Select.Option;
|
||
|
||
const options = [
|
||
['bold', 'italic', 'underline'],
|
||
[{ header: [1, 2, 3, false] }],
|
||
['blockquote', 'code-block'],
|
||
['link', 'image'],
|
||
['formula']
|
||
];
|
||
class NewMerge extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: undefined,
|
||
//合并 拉取
|
||
merge: undefined,
|
||
pull: undefined,
|
||
//判断 是否显示创建合并请求的页面
|
||
desc: undefined,
|
||
iscreatemerge: 'none',
|
||
issue_tag_ids: "",
|
||
fixed_version_id: "",
|
||
assigned_to_id: "",
|
||
titledata: undefined,
|
||
dataCount: undefined,
|
||
limit: 50,
|
||
page: 1,
|
||
isSpin: false,
|
||
mergedata: undefined,
|
||
}
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.getmergelist();
|
||
this.InitData();
|
||
}
|
||
InitData = () => {
|
||
this.props.form.setFieldsValue({
|
||
...this.state
|
||
});
|
||
}
|
||
|
||
|
||
onPanelChange = (time, mode) => {
|
||
this.setState({
|
||
value: time
|
||
});
|
||
}
|
||
|
||
onSelect = (time) => {
|
||
this.setState({
|
||
value: time,
|
||
selectedValue: time,
|
||
});
|
||
}
|
||
|
||
getOption = (name, id) => {
|
||
|
||
if (id === 'branches') {
|
||
this.ischeckmerge(name, this.state.pull)
|
||
this.setState({
|
||
merge: name
|
||
})
|
||
} else {
|
||
if (this.state.iscreatemerge === 'block') {
|
||
if (this.state.merge === name) {
|
||
} else {
|
||
const { page, limit } = this.state;
|
||
this.getCommitList(name, page, limit);
|
||
}
|
||
} else {
|
||
|
||
}
|
||
this.ischeckmerge(this.state.merge, name)
|
||
this.setState({
|
||
pull: name
|
||
})
|
||
}
|
||
}
|
||
|
||
ismerge = () => {
|
||
this.setState({
|
||
iscreatemerge: 'block'
|
||
})
|
||
const { page, limit } = this.state;
|
||
this.getCommitList(this.state.pull, page, limit);
|
||
}
|
||
|
||
|
||
//获取新建分枝数据
|
||
getmergelist = () => {
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/pull_requests/new.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
data: result.data,
|
||
merge: result.data.branches[0],
|
||
pull: result.data.branches[0],
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
renderMenu = (array, id) => {
|
||
return (
|
||
<Menu>
|
||
{
|
||
array && array.length > 0 && array.map((item, key) => {
|
||
return (
|
||
<Menu.Item key={item} onClick={() => this.getOption(item, id)}>{item}</Menu.Item>
|
||
)
|
||
})
|
||
}
|
||
</Menu>
|
||
)
|
||
}
|
||
|
||
renderSelect = (list) => {
|
||
if (list && list.length > 0) {
|
||
return (
|
||
list.map((item, key) => {
|
||
return (
|
||
<Option key={key + 1} value={item.id + ''}>{item.name}</Option>
|
||
)
|
||
})
|
||
)
|
||
}
|
||
}
|
||
|
||
//创建合并请求
|
||
|
||
submit = () => {
|
||
this.setState({
|
||
isSpin: true
|
||
})
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
if (!err) {
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/pull_requests.json`;
|
||
|
||
if (values.issue_tag_ids.length > 0) {
|
||
values.issue_tag_ids = [parseInt(values.issue_tag_ids)]
|
||
} else {
|
||
values.issue_tag_ids = []
|
||
}
|
||
const { desc } = this.state;
|
||
axios.post(url, {
|
||
...values,
|
||
body: JSON.stringify(desc),
|
||
project_id: projectsId,
|
||
head: this.state.merge,
|
||
base: this.state.pull,
|
||
|
||
}).then(result => {
|
||
if (result) {
|
||
this.setState({
|
||
isSpin: false
|
||
})
|
||
this.props.history.push(`/projects/${projectsId}/merge`);
|
||
const { getDetail } = this.props;
|
||
getDetail && getDetail();
|
||
}
|
||
}).catch(error => {
|
||
this.setState({
|
||
isSpin: false
|
||
})
|
||
console.log(error);
|
||
})
|
||
} else {
|
||
this.setState({
|
||
isSpin: false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//获取提交列表
|
||
getCommitList = (branch, page, limit) => {
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/repositories/${projectsId}/commits.json`;
|
||
axios.get(url, {
|
||
params: {
|
||
sha: branch,
|
||
page,
|
||
limit
|
||
}
|
||
}).then((result) => {
|
||
if (result) {
|
||
const array = [];
|
||
result.data && result.data.commits.length > 0 && result.data.commits.map((item, key) => {
|
||
array.push({
|
||
name: item.author && item.author.name,
|
||
login: item.author && item.author.login,
|
||
image_url: item.author && item.author.image_url,
|
||
sha: item.sha,
|
||
time_from_now: item.time_from_now,
|
||
message: item.message
|
||
})
|
||
})
|
||
this.setState({
|
||
titledata: array,
|
||
dataCount: result.data.total_count,
|
||
isSpin: false
|
||
})
|
||
}
|
||
}).catch((error) => { console.log(error) })
|
||
}
|
||
|
||
//判断2分支是否可以合并
|
||
|
||
ischeckmerge = (head, base) => {
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/pull_requests/check_can_merge.json`;
|
||
axios.post(url, {
|
||
project_id: projectsId,
|
||
head: head,
|
||
base: base,
|
||
|
||
}).then(result => {
|
||
if (result) {
|
||
this.setState({
|
||
mergedata: result.data
|
||
})
|
||
}
|
||
|
||
}).catch(error => {
|
||
console.log(error);
|
||
})
|
||
|
||
}
|
||
|
||
onContentChange = (value) => {
|
||
this.setState({
|
||
desc: value
|
||
})
|
||
}
|
||
|
||
|
||
render() {
|
||
const { getFieldDecorator } = this.props.form;
|
||
const { projectsId } = this.props.match.params;
|
||
const { current_user } = this.props;
|
||
const { issue_tag_ids, fixed_version_id, assigned_to_id, data, titledata, desc, isSpin } = this.state;
|
||
|
||
|
||
const columns = [{
|
||
title: "作者",
|
||
dataIndex: 'name',
|
||
width: "10%",
|
||
render: (text, item) => (
|
||
<span className="f-wrap-alignCenter">
|
||
<Link to={`/users/${item.login}/projects`} className="show-user-link">
|
||
<img src={getImageUrl(`images/${item.image_url}`)} alt="" width="28px" height="28px" className="mr3 radius" />
|
||
<label className="hide-1" style={{ maxWidth: "75px", 'vertical-align': 'middle' }}>{text}</label>
|
||
</Link>
|
||
</span>
|
||
),
|
||
}, {
|
||
title: "SHA",
|
||
dataIndex: 'sha',
|
||
render: (text) => (
|
||
<span className="commitKey">{text}</span>
|
||
)
|
||
}, {
|
||
title: "备注",
|
||
dataIndex: 'message',
|
||
render: (text) => (
|
||
<span>{text}</span>
|
||
)
|
||
}, {
|
||
title: "提交时间",
|
||
className: "edu-txt-right",
|
||
dataIndex: 'time_from_now',
|
||
render: (text) => (
|
||
<span>{text}</span>
|
||
)
|
||
}]
|
||
|
||
const title = () => {
|
||
return (
|
||
<div className="f-wrap-between" style={{ alignItems: "center" }}>
|
||
<span className="font-16">提交列表</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const pull = () => {
|
||
if (this.state.mergedata && this.state.mergedata.status === -2) {
|
||
return (
|
||
<div>
|
||
在这些分支直接合并请求已经存在：<Link to={`/projects/${projectsId}/merge/${this.state.mergedata && this.state.mergedata.pull_request_id}/Messagecount`} style={{ color: 'blue' }}>{this.state.mergedata && this.state.mergedata.pull_request_name}</Link>
|
||
</div>
|
||
)
|
||
} else {
|
||
return (
|
||
<div>
|
||
{this.state.mergedata && this.state.mergedata.status === 0 ? <Button className="topWrapper_btn" onClick={() => this.ismerge()}>创建合并请求</Button> : "分支内容相同，无需创建合并请求"}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
return (
|
||
<div className="main">
|
||
|
||
<h1 className="mb10">创建合并请求</h1>
|
||
<h5 className="mb10">选择合并的目标分支和源分支</h5>
|
||
<div style={{ display: 'flex' }}>
|
||
<div className="mergediv">
|
||
<div>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(this.state.data && this.state.data.branches, 'branches')} trigger={['click']} placement="bottomCenter">
|
||
<Button>合并到：{this.state.merge}</Button>
|
||
</Dropdown>
|
||
...
|
||
<Dropdown overlay={this.renderMenu(this.state.data && this.state.data.branches, 'pull')} trigger={['click']} placement="bottomCenter">
|
||
<Button>拉取从：{this.state.pull}</Button>
|
||
</Dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: this.state.iscreatemerge === 'none' ? 'block' : 'none' }}>
|
||
<div className="mergediv" style={{ marginTop: 15 }} >
|
||
{pull()}
|
||
</div>
|
||
</div>
|
||
<div style={{ display: this.state.iscreatemerge === 'none' ? 'none' : 'block' }}>
|
||
<Form>
|
||
<div className="f-wrap-between mt20" style={{ alignItems: "flex-start" }}>
|
||
<div className="list-right df" style={{ padding: "0px", paddingTop: "10px" }}>
|
||
<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">
|
||
<Form.Item>
|
||
{getFieldDecorator('title', {
|
||
rules: [{
|
||
required: true, message: '请填写请求标题'
|
||
}],
|
||
})(
|
||
<Input placeholder="标题" />
|
||
)}
|
||
</Form.Item>
|
||
<MDEditor placeholder={'请输入合并请求的描述...'} height={350}
|
||
mdID={'merge-new-description'} initValue={desc} onChange={this.onContentChange} ></MDEditor>
|
||
|
||
<UploadComponent load={this.UploadFunc} isComplete={true} ></UploadComponent>
|
||
<p className="clearfix mt15">
|
||
<Spin spinning={isSpin}>
|
||
<a className="topWrapper_btn fr" type="submit" onClick={this.submit}>创建合并请求</a>
|
||
</Spin>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="list-left" style={{ paddingRight: "0px", paddingLeft: "15px", paddingTop: "10px" }}>
|
||
<div className="list-l-panel">
|
||
<Form.Item
|
||
label="标签"
|
||
>
|
||
{getFieldDecorator('issue_tag_ids', {
|
||
|
||
rules: [],
|
||
})(
|
||
<Select value={issue_tag_ids}>
|
||
<Option value="">{data && data.issue_tags.length > 0 ? '未选择标签' : '请在仓库设置里添加标签'}</Option>
|
||
{this.renderSelect(data && data.issue_tags)}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="里程碑"
|
||
>
|
||
{getFieldDecorator('fixed_version_id', {
|
||
|
||
rules: [],
|
||
})(
|
||
<Select value={fixed_version_id}>
|
||
<Option value="">{data && data.issue_versions.length > 0 ? '未选择里程碑' : '请添加里程碑'}</Option>
|
||
{this.renderSelect(data && data.issue_versions)}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="指派成员"
|
||
>
|
||
{getFieldDecorator('assigned_to_id', {
|
||
})(
|
||
<Select value={assigned_to_id}>
|
||
<Option value="">未指派成员</Option>
|
||
{this.renderSelect(data && data.members)}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
<div style={{ display: this.state.iscreatemerge === 'none' ? 'none' : 'block' }}>
|
||
<Table
|
||
className="mt20 wrap-commit-table"
|
||
columns={columns}
|
||
dataSource={titledata}
|
||
showHeader={false}
|
||
size="small"
|
||
pagination={false}
|
||
title={() => title()}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
const WrappedNewMerge = Form.create({ name: 'NewMergeFrom' })(NewMerge);
|
||
export default WrappedNewMerge; |