forked from Gitlink/forgeplus-react
296 lines
8.5 KiB
JavaScript
296 lines
8.5 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Input, Select, Button, Spin, Alert } from "antd";
|
||
import axios from "axios";
|
||
import "../Order/order.css";
|
||
import "./merge.css";
|
||
import MergeForm from "./merge_form";
|
||
import MergeFooter from "./merge_footer";
|
||
const Option = Select.Option;
|
||
class NewMerge extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: undefined,
|
||
branches: undefined,
|
||
merge_branches: undefined,
|
||
merge_projects: undefined,
|
||
merge: "master",
|
||
pull: "master",
|
||
is_fork: false,
|
||
projects_names: undefined,
|
||
isSpin: false,
|
||
show_message: true,
|
||
merge_head: false, // 是否向fork后的源项目发起合并请求
|
||
default_message: "必须选择不同的分支",
|
||
project_id: undefined, // 当前项目的id，也即开始发送合并请求的源项目id
|
||
merge_project_user: undefined
|
||
};
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
const { projectsId } = this.props.match.params;
|
||
|
||
this.getmergelist(projectsId);
|
||
};
|
||
|
||
//获取新建分枝数据
|
||
getmergelist = (projectsId) => {
|
||
this.setState({isSpin: true})
|
||
const { owner } = this.props.match.params;
|
||
|
||
const url = `/${owner}/${projectsId}/pulls/new.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
is_fork: result.data.is_fork,
|
||
projects_names: result.data.projects_names,
|
||
merge_projects: result.data.merge_projects,
|
||
branches: result.data.branches,
|
||
merge_branches: result.data.branches,
|
||
project_id: result.data.project_id,
|
||
});
|
||
this.set_default_pull()
|
||
this.set_default_merge()
|
||
}
|
||
this.setState({isSpin: false})
|
||
})
|
||
.catch((error) => {
|
||
this.setState({isSpin: false})
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
set_default_pull = () => {
|
||
const {branches} = this.state;
|
||
let default_pull = branches.filter((e) => e.name === "master")
|
||
if (default_pull.length > 0){
|
||
this.state.pull = default_pull[0].name
|
||
}else{
|
||
this.state.pull = "master"
|
||
}
|
||
}
|
||
|
||
set_default_merge = () => {
|
||
const {merge_branches} = this.state;
|
||
let default_merge = merge_branches.filter((e) => e.name === "master")
|
||
if (default_merge.length > 0){
|
||
this.state.merge = default_merge[0].name
|
||
}else{
|
||
this.state.merge = "master"
|
||
}
|
||
this.ischeckmerge();
|
||
}
|
||
|
||
newMergelist = (id) => {
|
||
this.setState({isSpin: true})
|
||
const { owner , projectsId } = this.props.match.params;
|
||
|
||
const url = `/${owner}/${projectsId}/pulls/get_branches.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
merge_branches: result.data
|
||
})
|
||
this.set_default_merge()
|
||
}
|
||
this.setState({isSpin: false})
|
||
})
|
||
.catch((error) => {
|
||
this.setState({isSpin: false})
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
selectBrach = (type, value) => {
|
||
this.state[type] = value;
|
||
this.ischeckmerge();
|
||
};
|
||
|
||
selectProjectName = (value) => {
|
||
const { project_id, projects_names } = this.state;
|
||
const { owner } = this.props.match.params;
|
||
console.log(value);
|
||
|
||
let is_fork_id = parseInt(value) !== parseInt(project_id)
|
||
this.setState({
|
||
isSpin: true,
|
||
merge_head: is_fork_id,
|
||
data: {
|
||
is_original: is_fork_id,
|
||
fork_project_id: is_fork_id ? project_id : "",
|
||
merge_user_login: is_fork_id ? projects_names[0].project_user_login : undefined
|
||
}
|
||
})
|
||
// this.props.history.push(`/projects/${owner}/${value}/pulls/new`);
|
||
this.newMergelist(value);
|
||
|
||
};
|
||
|
||
//判断2分支是否可以合并
|
||
|
||
ischeckmerge = () => {
|
||
this.setState({ isSpin: true });
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { pull, merge, project_id, merge_head } = this.state;
|
||
const url = `/${owner}/${projectsId}/pulls/check_can_merge.json`;
|
||
axios.post(url, {
|
||
head: pull,
|
||
base: merge,
|
||
is_original: merge_head,
|
||
fork_project_id: merge_head ? project_id : undefined
|
||
})
|
||
.then((result) => {
|
||
if (result) {
|
||
if (result.data.status === 0) {
|
||
this.setState({
|
||
isSpin: false,
|
||
show_message: false,
|
||
});
|
||
} else {
|
||
this.setState({
|
||
isSpin: false,
|
||
show_message: true,
|
||
default_message: result.data.message,
|
||
});
|
||
}
|
||
} else {
|
||
this.setState({
|
||
isSpin: false,
|
||
show_message: true,
|
||
default_message: "出现错误了",
|
||
});
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.setState({ isSpin: false, show_message: true });
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const {
|
||
data,
|
||
branches,
|
||
merge_branches,
|
||
merge_projects,
|
||
pull,
|
||
merge,
|
||
isSpin,
|
||
show_message,
|
||
default_message,
|
||
merge_head,
|
||
projects_names,
|
||
} = this.state;
|
||
const { projectsId } = this.props.match.params;
|
||
const renderBrances = (list, type) => {
|
||
if (list && list.length > 0) {
|
||
return list.map((item, key) => {
|
||
return (
|
||
<Option
|
||
key={key + 1}
|
||
value={item.name}
|
||
>
|
||
{item.name}
|
||
</Option>
|
||
);
|
||
});
|
||
}
|
||
};
|
||
|
||
const renderProjectNames = (list) => {
|
||
if (list && list.length > 0) {
|
||
return list.map((item, key) => {
|
||
return (
|
||
<Option key={key + 1} value={item.project_id}>
|
||
{item.project_name}
|
||
</Option>
|
||
);
|
||
});
|
||
}
|
||
};
|
||
|
||
const withHtml = (html) => {
|
||
return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
|
||
};
|
||
let { project } = this.props;
|
||
return (
|
||
<div>
|
||
<div className="main">
|
||
<Spin spinning={isSpin}>
|
||
<div className="merge-header width100 inline-block">
|
||
<div className="width45 pull-left">
|
||
<div className="color-grey-3 mb10 fwb">源分支:</div>
|
||
<Input.Group compact className="display-flex">
|
||
<Select
|
||
defaultValue={parseInt(project && project.id)}
|
||
class=" maxW50 hide-1 task-hide"
|
||
disabled
|
||
>
|
||
{renderProjectNames(projects_names)}
|
||
</Select>
|
||
<Select
|
||
defaultValue={pull}
|
||
onSelect={(e) => this.selectBrach("pull", e)}
|
||
showSearch
|
||
className="minW50 merge-flex1"
|
||
>
|
||
{renderBrances(branches, false)}
|
||
</Select>
|
||
</Input.Group>
|
||
</div>
|
||
<div className="width10 pull-left text-center mt25">
|
||
<i
|
||
className={"iconfont icon-youjiang color-grey-c font-32"}
|
||
></i>
|
||
</div>
|
||
<div className="width45 pull-left">
|
||
<div>
|
||
<div className="color-grey-3 mb10 fwb">目标分支:</div>
|
||
<Input.Group compact className="display-flex">
|
||
<Select
|
||
defaultValue={parseInt(project && project.id)}
|
||
class=" maxW50 hide-1 task-hide"
|
||
onSelect={(e) => this.selectProjectName(e)}
|
||
>
|
||
{renderProjectNames(merge_projects)}
|
||
</Select>
|
||
<Select
|
||
defaultValue={merge}
|
||
value={merge}
|
||
onSelect={(e) => this.selectBrach("merge", e)}
|
||
showSearch
|
||
className="minW50 merge-flex1"
|
||
>
|
||
{renderBrances(merge_branches, merge_head)}
|
||
</Select>
|
||
</Input.Group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{show_message ? (
|
||
<div className="mb20">
|
||
<Alert description={withHtml(default_message)} type="error" />
|
||
</div>
|
||
) : (
|
||
<MergeForm
|
||
{...this.props}
|
||
merge_type="new"
|
||
data={data}
|
||
merge={merge}
|
||
pull={pull}
|
||
></MergeForm>
|
||
)}
|
||
</Spin>
|
||
</div>
|
||
{/* <div className=" main">
|
||
<MergeFooter footer_type="new" {...this.props}></MergeFooter>
|
||
</div> */}
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default NewMerge;
|