forked from Gitlink/forgeplus-react
refactor: 新建合并请求路由改造
This commit is contained in:
parent
5a88a1a4e6
commit
a09d330a7e
10
src/App.js
10
src/App.js
|
|
@ -97,10 +97,10 @@ const ProjectIndex = Loadable({
|
|||
loading: Loading,
|
||||
});
|
||||
|
||||
const CreateMerge = Loadable({
|
||||
loader: () => import('./forge/Merge/NewMerge'),
|
||||
loading: Loading,
|
||||
})
|
||||
// const CreateMerge = Loadable({
|
||||
// loader: () => import('./forge/Merge/NewMerge'),
|
||||
// loading: Loading,
|
||||
// })
|
||||
|
||||
// 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
|
||||
const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize"];
|
||||
|
|
@ -279,7 +279,7 @@ class App extends Component {
|
|||
} />
|
||||
|
||||
{/* 项目PR */}
|
||||
<Route path="/:owner/:projectsId/pulls/new"
|
||||
<Route path="/:owner/:projectsId/compare"
|
||||
render={
|
||||
(props) => (<ProjectDetail {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@ function CoderDepot(props){
|
|||
<div className="addOptionBtn">
|
||||
{
|
||||
baseOperate &&
|
||||
<CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/pulls/new/${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
|
||||
<CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/compare/${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
|
||||
}
|
||||
{
|
||||
baseOper &&
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ const MergeIndexDetail = Loadable({
|
|||
})
|
||||
|
||||
const CreateMerge = Loadable({
|
||||
loader: () => import('../Merge/NewMerge'),
|
||||
loader: () => import('../Merge/CreateMerge'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
|
|
@ -150,7 +150,9 @@ function checkPathname(projectsId, owner, pathname) {
|
|||
name = "about"
|
||||
} else if (url.indexOf("/issues") > -1 || url.indexOf("Milepost") > 0) {
|
||||
name = "issues";
|
||||
} else if (url.indexOf("/pulls") > -1) {
|
||||
} else if (url.indexOf("/pulls") > -1 || url.indexOf("/compare") > -1) {
|
||||
// /pulls，合并请求除新建合并请求外，
|
||||
// /compare，新建合并请求
|
||||
name = "pulls"
|
||||
} else if (url.indexOf("/milestones") > -1) {
|
||||
name = "milestones"
|
||||
|
|
@ -713,17 +715,17 @@ class Detail extends Component {
|
|||
}
|
||||
></Route>
|
||||
{/* 新建合并请求 */}
|
||||
<Route path="/:owner/:projectsId/pulls/new/:branch"
|
||||
{/* <Route path="/:owner/:projectsId/compare/:branch"
|
||||
render={
|
||||
(props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
|
||||
}
|
||||
></Route> */}
|
||||
<Route path="/:owner/:projectsId/compare"
|
||||
render={
|
||||
(props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/:owner/:projectsId/pulls/new"
|
||||
render={
|
||||
(props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/:owner/:projectsId/pulls/:mergeId/UpdateMerge"
|
||||
<Route path="/:owner/:projectsId/pulls/:mergeId/updatemerge"
|
||||
render={
|
||||
(props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ function Index(props) {
|
|||
<div className="treeabout">
|
||||
{
|
||||
(isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
|
||||
<Link to={`/${owner}/${projectsId}/pulls/new/${i.name}`} className="btn-83">+ 合并请求</Link>
|
||||
<Link to={`/${owner}/${projectsId}/compare/${i.name}`} className="btn-83">+ 合并请求</Link>
|
||||
}
|
||||
<Dropdown overlay={menu(i.zip_url,i.tar_url)} trigger={['click']} placement="bottomRight">
|
||||
<a className="btn-83 ml15">下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,413 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Select, Spin, Alert } from 'antd';
|
||||
import axios from 'axios';
|
||||
import MergeForm from './merge_form';
|
||||
import MergeFooter from './merge_footer';
|
||||
|
||||
import '../Order/order.css';
|
||||
import './merge.css';
|
||||
|
||||
/**
|
||||
* 根据url获取目标仓库、目标分支、源仓库、源分支
|
||||
* 路由规则：owner/projectId/compare/merge...pullowner:pullBranch
|
||||
* 可能存在的情况
|
||||
* 1、代码库首页跳转，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch
|
||||
* 2、代码库分支列表，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch
|
||||
* 3、合并请求列表页（新建、无数据时的提示），仓库相同，源、目标都为默认分支，owner/projectId/compare
|
||||
* 4、新建页面，切换分支、切换目标仓库、刷新页面等，存在所有可能情况
|
||||
*/
|
||||
function getBranchParams(pathname) {
|
||||
const result = {
|
||||
// 目标仓库所有者
|
||||
mergeOwner: undefined,
|
||||
// 目标分支
|
||||
mergeBranch: 'master',
|
||||
// 源仓库所有者
|
||||
pullOwner: undefined,
|
||||
// 源分支
|
||||
pullBranch: 'master',
|
||||
// 仓库名称
|
||||
projectId: undefined,
|
||||
};
|
||||
// 去掉第一个字符/
|
||||
const _pathname = pathname.slice(1);
|
||||
const [ownerProject, branchUrl] = _pathname.split('/compare');
|
||||
const [mergeOwner, projectId] = ownerProject.split('/');
|
||||
// 同仓库时
|
||||
result.mergeOwner = mergeOwner;
|
||||
result.pullOwner = mergeOwner;
|
||||
result.projectId = projectId;
|
||||
if (branchUrl) {
|
||||
// 如果存在具体的分支
|
||||
const _branchUrl = branchUrl.slice(1);
|
||||
if (_branchUrl.indexOf('...') > -1) {
|
||||
// 存在源分支与目标分支
|
||||
const [mergeBranch, pullObj] = _branchUrl.split('...');
|
||||
result.mergeBranch = mergeBranch;
|
||||
if (pullObj.indexOf(':') > -1) {
|
||||
// 存在源仓库
|
||||
const [pullOwner, pullBranch] = pullObj.split(':');
|
||||
result.pullOwner = pullOwner;
|
||||
result.pullBranch = pullBranch;
|
||||
} else {
|
||||
result.pullBranch = pullObj;
|
||||
}
|
||||
} else {
|
||||
result.pullBranch = _branchUrl;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const Option = Select.Option;
|
||||
|
||||
class CreateMerge extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { pullBranch, mergeBranch } = getBranchParams(
|
||||
this.props.location.pathname
|
||||
);
|
||||
this.state = {
|
||||
data: undefined,
|
||||
pullBranches: undefined,
|
||||
mergeBranches: undefined,
|
||||
mergeProjects: undefined,
|
||||
merge: mergeBranch || 'master',
|
||||
pull: pullBranch || 'master',
|
||||
id: undefined,
|
||||
// isFork: false,
|
||||
projects_names: undefined,
|
||||
isSpin: true,
|
||||
showMessage: false,
|
||||
merge_head: false, // 是否向fork后的源项目发起合并请求
|
||||
defaultMessage: '必须选择不同的分支',
|
||||
project_id: undefined, // 当前项目的id，也即开始发送合并请求的源项目id
|
||||
merge_project_user: undefined,
|
||||
comparesData: undefined, //提交和文件的内容，保存compare接口返回的数据
|
||||
// 比较分支时的加载效果
|
||||
isCompareSpin: true,
|
||||
// 是否是初次加载，用这个字段来控制提示组件和文件组件的显示、隐藏比直接用isCompareSpin交互友好些
|
||||
isFirstLoading: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
// 初始化时根据url获取目标仓库、分支，源仓库、分支；
|
||||
// 再获取对应的仓库列表、分支列表
|
||||
// 再调用比较接口
|
||||
const branchParams = getBranchParams(this.props.location.pathname);
|
||||
console.log('componentDidMount branchParams', branchParams);
|
||||
this.getMergeInfo(branchParams);
|
||||
};
|
||||
|
||||
componentDidUpdate = (preProps) => {
|
||||
// url变化触发时（切换源分支、切换目标仓库、切换目标分支；回退）
|
||||
const oldPathname = preProps.location.pathname;
|
||||
const newPathname = this.props.location.pathname;
|
||||
if (oldPathname !== newPathname) {
|
||||
const branchParams = getBranchParams(newPathname);
|
||||
console.log('componentDidUpdate branchParams', branchParams);
|
||||
this.getMergeInfo(branchParams);
|
||||
}
|
||||
};
|
||||
|
||||
//获取新建合并请求数据
|
||||
getMergeInfo = (branchParams) => {
|
||||
this.setState({ isSpin: true });
|
||||
const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
|
||||
branchParams;
|
||||
const url = `/${pullOwner}/${projectId}/pulls/new.json`;
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
// isFork: result.data.is_fork,
|
||||
projects_names: result.data.projects_names,
|
||||
mergeProjects: result.data.merge_projects,
|
||||
pullBranches: result.data.branches,
|
||||
mergeBranches: result.data.branches,
|
||||
project_id: result.data.project_id,
|
||||
id: result.data.id,
|
||||
merge: mergeBranch,
|
||||
pull: pullBranch,
|
||||
});
|
||||
}
|
||||
if (pullOwner !== mergeOwner) {
|
||||
this.getBranchList(mergeOwner, projectId);
|
||||
}
|
||||
this.compareProject(result.data.id, branchParams);
|
||||
this.setState({ isSpin: false });
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ isSpin: false });
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// compare接口，获取分支对比信息
|
||||
compareProject = (baseid, branchParams) => {
|
||||
// const { project } = this.props;
|
||||
// const { owner, projectsId } = this.props.match.params;
|
||||
const projectObj = this.props.project;
|
||||
const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
|
||||
branchParams;
|
||||
|
||||
let url = `/${mergeOwner}/${projectId}/compare`;
|
||||
if (projectObj) {
|
||||
if (baseid === projectObj.id) {
|
||||
url += `/${pullBranch}...${mergeBranch}.json`;
|
||||
} else {
|
||||
url += `/${mergeBranch}...${pullOwner}/${projectId}:${pullBranch}.json`;
|
||||
}
|
||||
this.setState({ isSpin: false, isCompareSpin: true });
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
if (result.data.status === 0) {
|
||||
this.setState({
|
||||
showMessage: false,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
showMessage: true,
|
||||
defaultMessage: result.data.message,
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
comparesData: result.data,
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
isFirstLoading: false,
|
||||
isSpin: false,
|
||||
isCompareSpin: false,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ isSpin: false, isCompareSpin: false });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 根据所有者、仓库名，获取分支列表，目前仅涉及目标仓库分支查询
|
||||
getBranchList = (login, projectId) => {
|
||||
this.setState({ isSpin: true });
|
||||
const url = `/${login}/${projectId}/pulls/get_branches.json`;
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
mergeBranches: result.data,
|
||||
});
|
||||
}
|
||||
this.setState({ isSpin: false });
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ isSpin: false });
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// 切换分支事件
|
||||
selectBrach = (type, value) => {
|
||||
const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
|
||||
getBranchParams(this.props.location.pathname);
|
||||
let _url = `/${mergeOwner}/${projectId}/compare/`;
|
||||
// type为pull时，pullBranch取value，否则取原有值
|
||||
// type为pull时，mergeBranch取原有值，否则取value
|
||||
let _pullBranch = type === 'pull' ? value : pullBranch;
|
||||
let _mergeBranch = type === 'pull' ? mergeBranch : value;
|
||||
if (pullOwner === mergeOwner) {
|
||||
// 如果仓库相同, compare/目标分支...源分支
|
||||
_url += `${_mergeBranch}...${_pullBranch}`;
|
||||
} else {
|
||||
// 如果仓库不同, compare/目标分支...源分支
|
||||
_url += `${_mergeBranch}...${pullOwner}:${_pullBranch}`;
|
||||
}
|
||||
this.props.history.push(_url);
|
||||
};
|
||||
|
||||
// 切换仓库响应事件，目前仅目标分支可切换仓库
|
||||
selectProjectName = (value) => {
|
||||
const { projects_names, id } = this.state;
|
||||
const { pullOwner, pullBranch } = getBranchParams(
|
||||
this.props.location.pathname
|
||||
);
|
||||
let arr =
|
||||
projects_names && projects_names.filter((item) => item.id === value);
|
||||
let identifier = arr && arr[0].project_id;
|
||||
let login = arr && arr[0].project_user_login;
|
||||
// 目标仓库与源仓库不是一个仓库
|
||||
let is_fork = parseInt(value, 10) !== parseInt(id, 10);
|
||||
this.setState({
|
||||
isSpin: true,
|
||||
// merge_head: is_fork,
|
||||
data: {
|
||||
is_original: is_fork,
|
||||
fork_project_id: is_fork ? id : '',
|
||||
merge_user_login: is_fork
|
||||
? projects_names[0].project_user_login
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
if (login === pullOwner) {
|
||||
// 如果切换后, 仓库与源仓库一致了
|
||||
this.props.history.push(
|
||||
`/${login}/${identifier}/compare/master...${pullBranch}`
|
||||
);
|
||||
} else {
|
||||
this.props.history.push(
|
||||
`/${login}/${identifier}/compare/master...${pullOwner}:${pullBranch}`
|
||||
);
|
||||
}
|
||||
// this.newMergelist(login, identifier);
|
||||
};
|
||||
|
||||
// 渲染分支列表
|
||||
renderBrances = (list) => {
|
||||
if (list && list.length > 0) {
|
||||
return list.map((item, key) => {
|
||||
return (
|
||||
<Option key={key + 1} value={item.name}>
|
||||
{item.name}
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染项目列表
|
||||
renderProjectNames = (list) => {
|
||||
if (list && list.length > 0) {
|
||||
return list.map((item, key) => {
|
||||
return (
|
||||
<Option key={key + 1} value={item.id}>
|
||||
{item.project_name}
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染html内容
|
||||
withHtml = (html) => {
|
||||
return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
data,
|
||||
pullBranches,
|
||||
mergeBranches,
|
||||
mergeProjects,
|
||||
pull,
|
||||
merge,
|
||||
isSpin,
|
||||
isCompareSpin,
|
||||
isFirstLoading,
|
||||
showMessage,
|
||||
defaultMessage,
|
||||
projects_names,
|
||||
id,
|
||||
comparesData,
|
||||
} = this.state;
|
||||
|
||||
let { project } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="main">
|
||||
<div className="merge-header width100 inline-block">
|
||||
<div className="width40 pull-left">
|
||||
<div className="color-grey-3 mb10 fwb">源分支:</div>
|
||||
<Input.Group compact className="display-flex">
|
||||
<Select
|
||||
value={id}
|
||||
className="hide-1 task-hide flex1"
|
||||
disabled
|
||||
>
|
||||
{this.renderProjectNames(projects_names)}
|
||||
</Select>
|
||||
<Select
|
||||
value={pull}
|
||||
onSelect={(e) => this.selectBrach('pull', e)}
|
||||
showSearch
|
||||
className="merge-flex1 flex1"
|
||||
>
|
||||
{this.renderBrances(pullBranches)}
|
||||
</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="width40 pull-left">
|
||||
<div>
|
||||
<div className="color-grey-3 mb10 fwb">目标分支:</div>
|
||||
<Input.Group compact className="display-flex">
|
||||
<Select
|
||||
value={project && project.id}
|
||||
className="hide-1 task-hide flex1"
|
||||
onSelect={(e) => this.selectProjectName(e)}
|
||||
>
|
||||
{this.renderProjectNames(mergeProjects)}
|
||||
</Select>
|
||||
<Select
|
||||
value={merge}
|
||||
onSelect={(e) => this.selectBrach('merge', e)}
|
||||
showSearch
|
||||
className="merge-flex1 flex1"
|
||||
>
|
||||
{this.renderBrances(mergeBranches)}
|
||||
</Select>
|
||||
</Input.Group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 非加载状态且有提示 */}
|
||||
{!isCompareSpin && showMessage && (
|
||||
<div className="mb20">
|
||||
<Alert
|
||||
description={this.withHtml(defaultMessage)}
|
||||
type="error"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* 非加载状态且可以提交 */}
|
||||
{!isCompareSpin && !showMessage && (
|
||||
<MergeForm
|
||||
{...this.props}
|
||||
merge_type="new"
|
||||
data={data}
|
||||
merge={merge}
|
||||
pull={pull}
|
||||
files_count={
|
||||
comparesData &&
|
||||
comparesData.diff &&
|
||||
comparesData.diff.files_count
|
||||
}
|
||||
commits_count={comparesData && comparesData.commits_count}
|
||||
></MergeForm>
|
||||
)}
|
||||
</div>
|
||||
{!isFirstLoading && (
|
||||
<MergeFooter
|
||||
{...this.props}
|
||||
merge={merge}
|
||||
pull={pull}
|
||||
comparesData={comparesData}
|
||||
></MergeFooter>
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CreateMerge;
|
||||
|
|
@ -111,10 +111,10 @@ class MergeFooter extends Component {
|
|||
} = this.state;
|
||||
|
||||
// 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0
|
||||
const commentsTotalCount =
|
||||
this.state.commentsTotalCount ||
|
||||
(data.comments_total_count && parseInt(data.comments_total_count, 10)) ||
|
||||
0;
|
||||
const commentsTotalCount = parseInt(
|
||||
this.state.commentsTotalCount || data.comments_total_count || 0,
|
||||
10
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="main" style={{ paddingTop: '0px' }}>
|
||||
|
|
@ -128,7 +128,7 @@ class MergeFooter extends Component {
|
|||
tab={
|
||||
<Link to={`/${owner}/${projectsId}/pulls/${mergeId}`}>
|
||||
<span className="font-16">评论</span>
|
||||
{commentsTotalCount && (
|
||||
{commentsTotalCount > 0 && (
|
||||
<span className="tabNum">{commentsTotalCount}</span>
|
||||
)}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -445,7 +445,7 @@ class MessageCount extends Component {
|
|||
type="green"
|
||||
ghost
|
||||
className="ml20"
|
||||
onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/UpdateMerge`);}}
|
||||
onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/updatemerge`);}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ class NewMerge extends Component {
|
|||
// this.ischeckmerge();
|
||||
let { id ,merge , pull } = this.state;
|
||||
if(type==="pull"){
|
||||
this.props.history.push(`/${owner}/${projectsId}/pulls/new/${pull}`)
|
||||
this.props.history.push(`/${owner}/${projectsId}/compare/${pull}`)
|
||||
this.compareProject(id,value,merge);
|
||||
}else{
|
||||
this.compareProject(id,pull,value);
|
||||
|
|
@ -216,7 +216,7 @@ class NewMerge extends Component {
|
|||
merge_user_login: is_fork_id ? projects_names[0].project_user_login : undefined
|
||||
}
|
||||
})
|
||||
this.props.history.push(`/${login}/${identifier}/pulls/new`);
|
||||
this.props.history.push(`/${login}/${identifier}/compare`);
|
||||
this.newMergelist(login,identifier);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ class merge extends Component {
|
|||
|
||||
checkOperation() {
|
||||
const { projectsId,owner } = this.props.match.params;
|
||||
this.props.history.push(`/${owner}/${projectsId}/pulls/new`);
|
||||
this.props.history.push(`/${owner}/${projectsId}/compare`);
|
||||
}
|
||||
render() {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
|
|
|
|||
|
|
@ -1,169 +1,84 @@
|
|||
import React, { Component } from "react";
|
||||
import { Tabs, Spin } from "antd";
|
||||
import "../Order/order.css";
|
||||
import "./merge.css";
|
||||
import Commits from "./Commits";
|
||||
import Comments from "../comments/comments";
|
||||
import Files from "./Files";
|
||||
import axios from 'axios';
|
||||
import React, { Component } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import Commits from './Commits';
|
||||
import Files from './Files';
|
||||
|
||||
import '../Order/order.css';
|
||||
import './merge.css';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class MergeFooter extends Component {
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
pageData:undefined,
|
||||
commitsData:undefined,
|
||||
filesData:undefined,
|
||||
isSpin:false,
|
||||
activeKey:"1",
|
||||
commitCount:0,
|
||||
filesCount:0
|
||||
}
|
||||
}
|
||||
componentDidMount=()=>{
|
||||
const { footer_type ,data } = this.props;
|
||||
if(footer_type){
|
||||
const { projectsId , owner , mergeId } = this.props.match.params;
|
||||
this.getCommit(owner,projectsId,mergeId);
|
||||
this.getFile(owner,projectsId,mergeId);
|
||||
}
|
||||
this.setState({
|
||||
activeKey:footer_type ? "1" : "2",
|
||||
commitCount:data && data.commits_count,
|
||||
filesCount:data && data.files_count
|
||||
})
|
||||
}
|
||||
componentDidUpdate=(prevProps)=>{
|
||||
const { comparesData } = this.props;
|
||||
const { footer_type } = this.props;
|
||||
if(footer_type){
|
||||
const { data } = this.props;
|
||||
if(data !== prevProps.data){
|
||||
this.setState({
|
||||
commitCount:data && data.commits_count,
|
||||
filesCount:data && data.files_count
|
||||
})
|
||||
}
|
||||
}
|
||||
if(comparesData !== prevProps.comparesData){
|
||||
this.setState({
|
||||
activeKey:footer_type ? "1" : "2"
|
||||
})
|
||||
this.changeTab(footer_type ? "1" : "2");
|
||||
}
|
||||
this.state = {
|
||||
activeKey: '1',
|
||||
};
|
||||
}
|
||||
|
||||
changeTab=(index)=>{
|
||||
changeTab = (index) => {
|
||||
this.setState({
|
||||
isSpin:true
|
||||
})
|
||||
this.setState({
|
||||
activeKey:index
|
||||
})
|
||||
const { footer_type , comparesData } = this.props;
|
||||
const { projectsId , owner , mergeId } = this.props.match.params;
|
||||
|
||||
if(footer_type){
|
||||
if(index === "2"){
|
||||
this.getCommit(owner,projectsId,mergeId);
|
||||
}else if(index === "3"){
|
||||
this.getFile(owner,projectsId,mergeId);
|
||||
}else{
|
||||
this.setState({
|
||||
isSpin:false
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.setState({
|
||||
commitsData:comparesData.commits,
|
||||
filesData:comparesData.diff,
|
||||
commitCount:comparesData.commits_count,
|
||||
filesCount:comparesData.diff && comparesData.diff.files_count,
|
||||
isSpin:false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
getCommit =(owner,projectsId,mergeId)=>{
|
||||
const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
commitsData:result.data.commits,
|
||||
isSpin:false,
|
||||
commitCount:result.data.commits_count
|
||||
})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
getFile =(owner,projectsId,mergeId)=>{
|
||||
const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
filesData:result.data,
|
||||
isSpin:false,
|
||||
filesCount:result.data.files_count,
|
||||
})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
activeKey: index,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const { projectsId, owner } = this.props.match.params;
|
||||
const { comparesData = {} } = this.props;
|
||||
const { commits, diff, commits_count } = comparesData;
|
||||
const { activeKey } = this.state;
|
||||
|
||||
const { footer_type, order_id, data , comparesData } = this.props;
|
||||
let { isSpin , activeKey , filesCount, commitCount , filesData , commitsData } = this.state;
|
||||
|
||||
return (
|
||||
!footer_type && !comparesData || (comparesData && ((comparesData.commits && comparesData.commits.length===0)||(comparesData && !comparesData.diff)) )?"":
|
||||
<div className="main mergeRequest" style={{paddingTop:"0px"}}>
|
||||
<Spin spinning={isSpin}>
|
||||
return (commits && commits.length === 0) || !diff ? (
|
||||
''
|
||||
) : (
|
||||
<div className="main mergeRequest" style={{ paddingTop: '0px' }}>
|
||||
<Tabs
|
||||
activeKey={activeKey}
|
||||
className="custom-commit-tabs"
|
||||
animated={false}
|
||||
onChange={this.changeTab}
|
||||
>
|
||||
{
|
||||
footer_type &&
|
||||
{commits && commits.length > 0 && (
|
||||
<TabPane
|
||||
tab={
|
||||
<span><span className="font-16">评论</span>
|
||||
{data && parseInt(data.comments_count) > 0 && <span className="tabNum">{data.comments_count}</span>}
|
||||
<span>
|
||||
<span className="font-16">提交</span>
|
||||
{commits_count > 0 && (
|
||||
<span className="tabNum">{commits_count}</span>
|
||||
)}
|
||||
</span>
|
||||
} key="1">
|
||||
<Comments
|
||||
order_id={order_id}
|
||||
showNotification={this.props.showNotification}
|
||||
only_show_content={true}
|
||||
}
|
||||
key="1"
|
||||
>
|
||||
<Commits
|
||||
{...this.props}
|
||||
commits={commits}
|
||||
projectsId={projectsId}
|
||||
owner={owner}
|
||||
></Commits>
|
||||
</TabPane>
|
||||
)}
|
||||
{diff && diff.files && diff.files.length > 0 && (
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<span className="font-16">文件</span>
|
||||
{diff.files_count > 0 && (
|
||||
<span className="tabNum">{diff.files_count}</span>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
key="3"
|
||||
>
|
||||
<Files
|
||||
{...this.props}
|
||||
data={diff}
|
||||
projectsId={projectsId}
|
||||
owner={owner}
|
||||
/>
|
||||
</TabPane>
|
||||
}
|
||||
{
|
||||
commitsData && commitsData.length > 0 &&
|
||||
<TabPane tab={<span><span className="font-16">提交</span>
|
||||
{commitCount > 0 && <span className="tabNum">{commitCount}</span>}
|
||||
</span>} key="2">
|
||||
<Commits {...this.props} commits={commitsData} projectsId={projectsId} owner={owner}></Commits>
|
||||
</TabPane>
|
||||
}
|
||||
{
|
||||
filesData && filesData.files && filesData.files.length>0 &&
|
||||
<TabPane tab={
|
||||
<span><span className="font-16">文件</span>
|
||||
{filesCount > 0 && <span className="tabNum">{filesCount}</span>}
|
||||
</span>
|
||||
} key="3">
|
||||
<Files {...this.props} data={filesData} projectsId={projectsId} owner={owner}/>
|
||||
</TabPane>
|
||||
}
|
||||
|
||||
)}
|
||||
</Tabs>
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -165,7 +165,8 @@ class MergeForm extends Component {
|
|||
this.setState({
|
||||
isSpin: false,
|
||||
});
|
||||
this.props.history.push(`/${owner}/${projectsId}/pulls`);
|
||||
const { pull_request_id } = result.data;
|
||||
this.props.history.push(`/${owner}/${projectsId}/pulls/${pull_request_id}`);
|
||||
const { getDetail } = this.props;
|
||||
getDetail && getDetail();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ class Nodata extends Component{
|
|||
<h3>欢迎使用合并请求！</h3>
|
||||
|
||||
<div className="color-grey-8">
|
||||
合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 <Link className="color-blue" to={`/${owner}/${projectsId}/pulls/new`}>合并请求</Link>
|
||||
合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 <Link className="color-blue" to={`/${owner}/${projectsId}/compare`}>合并请求</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue