Gitlink
/
forgeplus-react
32
0
Fork 29
Code Issues Pull Requests 1 Releases 1 Wiki Activity

Merge pull request '合并请求相关路由改造' (#170) from durian/forgeplus-react:feature_router_v2 into pre_develop

This commit is contained in:
jasder 2021-10-14 14:34:56 +08:00
parent 90cfac4436 a4902739f2
commit 94fd500423
19 changed files with 812 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.js
View File

@ -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} />)
}

2
src/forge/Activity/ActivityItem.js
View File

@ -27,7 +27,7 @@ class ActivityItem extends Component {
:
// 如果是合并请求
<p className="itemLine">
<Link to={`/${owner}/${projectsId}/pulls/${item.trend_id}/Messagecount`} className="color-blue font-16">{item.name}</Link>
<Link to={`/${owner}/${projectsId}/pulls/${item.trend_id}`} className="color-blue font-16">{item.name}</Link>
<span className="activity_type">{item.trend_type}</span>
</p >
}

2
src/forge/Main/CoderDepot.jsx
View File

@ -426,7 +426,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/master...${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
}
{
baseOper &&

35
src/forge/Main/Detail.js
View File

@ -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"
@ -318,6 +320,9 @@ class Detail extends Component {
const url = `/${owner}/${projectsId}/detail.json`;
axios.get(url).then((result) => {
if (result && result.data) {
if (result.data.status === 404) {
this.props.history.push('/nopage');
}
this.setState({
projectDetail: result.data,
project_id: result.data.project_id,
@ -713,22 +718,32 @@ 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/edit"
render={
(props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
}
></Route>
<Route path="/:owner/:projectsId/pulls/:mergeId/Messagecount"
<Route path="/:owner/:projectsId/pulls/:mergeId"
render={
(props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
}
></Route>
<Route path="/:owner/:projectsId/pulls/:mergeId/commits"
render={
(props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
}
></Route>
<Route path="/:owner/:projectsId/pulls/:mergeId/files"
render={
(props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
}

2
src/forge/Main/tree/Index.jsx
View File

@ -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/master...${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>

438
src/forge/Merge/CreateMerge.js Normal file
View File

@ -0,0 +1,438 @@
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) {
// 如果url上的分支不存在，取默认值master
const noMergeBranch =
(result.data.branches || []).filter(
(branch) => branch.name === mergeBranch
).length === 0;
const noPullBranch =
(result.data.branches || []).filter(
(branch) => branch.name === pullBranch
).length === 0;
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 (!noMergeBranch && !noPullBranch) {
this.compareProject(result.data.id, branchParams);
} else {
const _message = [];
noMergeBranch && _message.push('目标分支不存在');
noPullBranch && _message.push('源分支不存在');
this.setState({
showMessage: true,
defaultMessage: _message.join(' , '),
isCompareSpin: false,
});
}
}
if (pullOwner !== mergeOwner) {
this.getBranchList(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 = ({ mergeOwner, projectId, mergeBranch }) => {
this.setState({ isSpin: true });
const url = `/${mergeOwner}/${projectId}/pulls/get_branches.json`;
axios
.get(url)
.then((result) => {
if (result) {
const noMergeBranch =
(result.data || []).filter((branch) => branch.name === mergeBranch)
.length === 0;
this.setState({
mergeBranches: result.data,
merge: noMergeBranch ? 'master' : mergeBranch,
});
}
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 || isCompareSpin}>
<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;

2
src/forge/Merge/MergeDetail.js
View File

@ -228,7 +228,7 @@ class MergeDetail extends Component {
<div>
{
data && data.issue.user_permission ?
<Link to={`/${owner}/${projectsId}/pulls/${mergeid}/updatemerge`} className="color-blue fr">编辑</Link>
<Link to={`/${owner}/${projectsId}/pulls/${mergeid}/edit`} className="color-blue fr">编辑</Link>
: ''
}
</div>

6
src/forge/Merge/MergeItem.js
View File

@ -62,7 +62,7 @@ class MergeItem extends Component {
<p className="mb15 df" style={{ alignItems: "center" }}>
<i className={`iconfont icon-hebingqingqiu1 font-14 mr3 i_${status}`}></i>
<Link
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
className="hide-1 font-15 color-grey-3 fwb lineh-30 mr10"
style={{ maxWidth: "300px" }}
>
@ -175,7 +175,7 @@ class MergeItem extends Component {
{item.journals_count ? (
<Link
className="mr5 color-grey-8"
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
>
<i className="iconfont icon-huifu1 font-15 mr5 ver-middle"></i>
{item.journals_count}
@ -196,7 +196,7 @@ class MergeItem extends Component {
>
<div className="grid-item mr15 color-grey-9">
<Link
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/updatemerge`}
to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/edit`}
className="color-grey-9"
>
<i className="iconfont icon-bianji3 font-14 mr5"></i>

210
src/forge/Merge/MergeLinkFooter.jsx Normal file
View File

@ -0,0 +1,210 @@
import React, { Component } from 'react';
import { Tabs, Spin } from 'antd';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Commits from './Commits';
import Comments from '../comments/comments';
import Files from './Files';
import '../Order/order.css';
import './merge.css';
const { TabPane } = Tabs;
class MergeFooter extends Component {
constructor(props) {
super(props);
this.state = {
commitsData: [],
filesData: undefined,
isSpin: false,
activeKey: '1',
commitCount: 0,
filesCount: 0,
// 总评论数量，包含回复
commentsTotalCount: 0,
};
}
componentDidMount() {
this.Init();
// 为父组件绑定当前，以方便调用方法
this.props.bindFootRef && this.props.bindFootRef(this);
}
componentDidUpdate(prevProps) {
// 解决切换tab后浏览器回退不刷新的问题、点击tab后url变化但tab未切换的问题
const newPathname = this.props.location.pathname;
const prevPathname = prevProps.location.pathname;
if (newPathname !== prevPathname) {
this.Init(true);
}
}
Init = (isTabChange) => {
const { data, location, match } = this.props;
const { pathname } = location;
const { projectsId, owner, mergeId } = match.params;
let activeKey = '1';
if (pathname.indexOf('commits') > -1) {
activeKey = '2';
this.getCommit(owner, projectsId, mergeId);
} else if (pathname.indexOf('files') > -1) {
activeKey = '3';
this.getFile(owner, projectsId, mergeId);
}
if (isTabChange && activeKey === '1') {
this.refreshComment();
}
this.setState({
activeKey: activeKey,
commitCount: data && data.commits_count,
filesCount: data && data.files_count,
});
};
bindCommentRef = (commentRef) => {
this.childComment = commentRef;
}
refreshComment = () => {
this.childComment && this.childComment.getjournalslist();
}
getCommit = (owner, projectsId, mergeId) => {
this.setState({ isSpin: true });
const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
axios
.get(url)
.then((result) => {
if (result) {
this.setState({
commitsData: result.data.commits,
commitCount: result.data.commits_count,
});
}
this.setState({ isSpin: false });
})
.catch((error) => {
this.setState({ isSpin: false });
});
};
getFile = (owner, projectsId, mergeId) => {
this.setState({ isSpin: true });
const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
axios
.get(url)
.then((result) => {
if (result) {
this.setState({
filesData: result.data,
filesCount: result.data.files_count,
});
}
this.setState({ isSpin: false });
})
.catch((error) => {
this.setState({ isSpin: false });
});
};
render() {
const { projectsId, owner, mergeId } = this.props.match.params;
const { order_id, data = {} } = this.props;
const {
isSpin,
activeKey,
filesCount,
commitCount,
filesData,
commitsData = [],
} = this.state;
// 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0
const commentsTotalCount = parseInt(
this.state.commentsTotalCount || data.comments_total_count || 0,
10
);
return (
<div className="main mergeRequest" style={{ paddingTop: '0px' }}>
<Spin spinning={isSpin}>
<Tabs
activeKey={activeKey}
className="custom-commit-tabs"
animated={false}
>
<TabPane
tab={
<Link to={`/${owner}/${projectsId}/pulls/${mergeId}`}>
<span className="font-16">评论</span>
{commentsTotalCount > 0 && (
<span className="tabNum">{commentsTotalCount}</span>
)}
</Link>
}
key="1"
>
<Comments
order_id={order_id}
showNotification={this.props.showNotification}
only_show_content={true}
updateCommentsNum={(commentsCount) => {
this.setState({ commentsTotalCount: commentsCount || 0 });
}}
{...this.props}
bindCommentRef={this.bindCommentRef}
/>
</TabPane>
{commitCount > 0 && (
<TabPane
tab={
<Link to={`/${owner}/${projectsId}/pulls/${mergeId}/commits`}>
<span className="font-16">提交</span>
{commitCount > 0 && (
<span className="tabNum">{commitCount}</span>
)}
</Link>
}
key="2"
>
{commitsData.length > 0 && (
<Commits
{...this.props}
commits={commitsData}
projectsId={projectsId}
owner={owner}
></Commits>
)}
</TabPane>
)}
{filesCount > 0 && (
<TabPane
tab={
<Link to={`/${owner}/${projectsId}/pulls/${mergeId}/files`}>
<span className="font-16">文件</span>
{filesCount > 0 && (
<span className="tabNum">{filesCount}</span>
)}
</Link>
}
key="3"
>
<Files
{...this.props}
data={filesData}
projectsId={projectsId}
owner={owner}
/>
</TabPane>
)}
</Tabs>
</Spin>
</div>
);
}
}
export default MergeFooter;

30
src/forge/Merge/MessageCount.js
View File

@ -1,7 +1,6 @@
import React, { Component } from "react";
import { Tabs } from 'antd';
import { Link } from "react-router-dom";
import { AlignCenter } from '../Component/layout';
import axios from "axios";
import { getImageUrl } from "educoder";
import {
@ -11,7 +10,6 @@ import {
Dropdown,
Icon,
Menu,
Select,
Tag,
Button,
Alert,
@ -19,9 +17,8 @@ import {
import "./merge.css";
import RenderHtml from "../../components/render-html";
import "../Order/order.css";
import MergeFooter from "./merge_footer";
import MergeLinkFooter from "./MergeLinkFooter";
const Option = Select.Option;
const TextArea = Input.TextArea;
function turnbar(str){
@ -61,6 +58,11 @@ class MessageCount extends Component {
// this.clickBody();
};
bindFootRef = (footRef) => {
this.footRef = footRef;
}
clickBody=()=>{
document.body.addEventListener('click', e => {
let name = e.target.className;
@ -150,6 +152,8 @@ class MessageCount extends Component {
});
const { getDetail } = this.props;
getDetail && getDetail();
// 调用子组件的方法刷新评论列表
this.footRef && this.footRef.refreshComment();
} else {
this.setState({ SpinMerge: false });
}
@ -283,13 +287,13 @@ class MessageCount extends Component {
conflict_files && conflict_files.length>0 &&
<div>
<p className="mt10 font-16 pt10" style={{borderTop:"1px solid #f9d7d5"}}>如下文件有代码冲突：</p>
<p>
<div>
{
conflict_files.map((i,k)=>{
return <p>{i}</p>
return <p key={k}>{i}</p>
})
}
</p>
</div>
</div>
}
</div>
@ -448,7 +452,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}/edit`);}}
>
编辑
</Button>
@ -543,7 +547,7 @@ class MessageCount extends Component {
onChange={this.changbodypr}
/>
</div>
<p
<div
className="clearfix mt15"
style={{ display: this.state.buttonshow }}
>
@ -558,19 +562,19 @@ class MessageCount extends Component {
取消
</Button>
</Spin>
</p>
</div>
</div>
</Spin>
)}
</div>
</div>
<MergeFooter
footer_type={true}
<MergeLinkFooter
order_id={data && data.issue.id}
{...this.props}
{...this.state}
></MergeFooter>
bindFootRef={this.bindFootRef}
></MergeLinkFooter>
</div>
) : (
""

9
src/forge/Merge/NewMerge.js
View File

@ -6,6 +6,11 @@ import "./merge.css";
import MergeForm from "./merge_form";
import MergeFooter from "./merge_footer";
const Option = Select.Option;
/**
* 此文件已废弃，新文件为CreateMerge.js
* 2021.10.12
*/
class NewMerge extends Component {
constructor(props) {
super(props);
@ -194,7 +199,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 +221,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);
};

4
src/forge/Merge/UpdateMerge.js
View File

@ -69,7 +69,7 @@ class UpdateMerge extends Component {
</Button>
<Select
defaultValue={data.is_original ? `${data.fork_project_user}:${pull}` : `${pull}`}
className="minW50 merge-flex1"
className="minW50 merge-flex1 flex1"
disabled
></Select>{" "}
</Input.Group>{" "}
@ -88,7 +88,7 @@ class UpdateMerge extends Component {
</Button>
<Select
defaultValue={data.is_original ? `${data.project_login}:${merge}` : `${merge}`}
className="minW50 merge-flex1"
className="minW50 merge-flex1 flex1"
disabled
></Select>{" "}
</Input.Group>{" "}

3
src/forge/Merge/merge.css
View File

@ -211,5 +211,6 @@ form .ant-cascader-picker, form .ant-select {
}
.mergeRequest .folders{
width: 72rem;
/* width: 72rem; */
width: 100%;
}

2
src/forge/Merge/merge.js
View File

@ -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/master...master`);
}
render() {
const { projectsId , owner } = this.props.match.params;

227
src/forge/Merge/merge_footer.js
View File

@ -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}>
<Tabs
activeKey={activeKey}
className="custom-commit-tabs"
animated={false}
onChange={this.changeTab}
>
{
footer_type &&
<TabPane
tab={
<span><span className="font-16">评论</span>
{data && parseInt(data.comments_count) > 0 && <span className="tabNum">{data.comments_count}</span>}
</span>
} key="1">
<Comments
order_id={order_id}
showNotification={this.props.showNotification}
only_show_content={true}
{...this.props}
/>
</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>
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}
>
{commits && commits.length > 0 && (
<TabPane
tab={
<span>
<span className="font-16">提交</span>
{commits_count > 0 && (
<span className="tabNum">{commits_count}</span>
)}
</span>
}
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>
)}
</Tabs>
</div>
);
}

7
src/forge/Merge/merge_form.js
View File

@ -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 {
@ -195,7 +196,7 @@ class MergeForm extends Component {
isSpin: false,
});
this.props.history.push(
`/${owner}/${projectsId}/pulls/${mergeId}/Messagecount`
`/${owner}/${projectsId}/pulls/${mergeId}`
);
} else {
this.setState({
@ -287,7 +288,7 @@ class MergeForm extends Component {
type="default"
className="ml30"
onClick={()=>{
this.props.history.push(merge_type === "new" ? `/${owner}/${projectsId}/pulls` : `/${owner}/${projectsId}/pulls/${mergeId}/detail`)
this.props.history.push(merge_type === "new" ? `/${owner}/${projectsId}/pulls` : `/${owner}/${projectsId}/pulls/${mergeId}`)
}}
>
<span className="plr10">取消</span>

2
src/forge/Merge/no_data.js
View File

@ -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/master...master`}>合并请求</Link>
</div>
</div>
</div>

18
src/forge/comments/children_comments.js
View File

@ -17,6 +17,7 @@ class children_comments extends Component {
page: 1,
journal_spin: false,
search_count: 0,
isSpin: false,
};
}
@ -71,6 +72,9 @@ class children_comments extends Component {
.then((result) => {
if (result) {
this.getChildrenJournals();
// 删除回复后，如果需手动调用父组件查询评论列表的接口，以保持角标（评论数量）的一致（合并请求页面），
// 否则直接查顶级评论列表，否则只查询当前子评论列表（易修页面）
this.props.refreshCommentList && this.props.refreshCommentList();
}
})
.catch((error) => {
@ -80,9 +84,15 @@ class children_comments extends Component {
// 翻页
ChangePage = (page) => {
this.state.page = page;
this.state.isSpin = true;
this.getChildrenJournals();
// this.state.page = page;
// this.state.isSpin = true;
// 使用回调的写法，这样在getChildrenJournals中使用的就是最新的state
this.setState({
page,
isSpin: true
}, () => {
this.getChildrenJournals();
});
};
commentCtx = (v) => {
@ -183,7 +193,7 @@ class children_comments extends Component {
size="large"
loading={isSpin}
dataSource={journalsdata.issue_journals}
renderItem={(item) => <List.Item>{this.renderList(item)}</List.Item>}
renderItem={(item) => <List.Item key={item.id}>{this.renderList(item)}</List.Item>}
/>
{this.Paginations()}
</div>

11
src/forge/comments/comments.js
View File

@ -35,6 +35,8 @@ class comments extends Component {
componentDidMount = () => {
this.getjournalslist();
// 给父组件绑定，以使父组件可以使用组件内方法，用于切换tab时重新请求评论列表、合并请求完之后重新请求评论列表
this.props.bindCommentRef && this.props.bindCommentRef(this);
};
//添加评论
@ -151,6 +153,8 @@ class comments extends Component {
isSpin: false,
fileList: undefined,
});
const { updateCommentsNum } = this.props;
updateCommentsNum && updateCommentsNum(result.data.journals_total_count);
}
})
.catch((error) => {
@ -372,7 +376,7 @@ class comments extends Component {
const renderList = (item) => {
return (
<div className="width100">
<div className="width100" key={item.id}>
<div className="pb5">
<Link
to={`/${item && item.user_login}`}
@ -456,6 +460,7 @@ class comments extends Component {
parent_id={item.id}
onRef={this.onRef}
children_comment_id={new_journal_id}
refreshCommentList={this.getjournalslist}
{...this.props}
></ChildrenComments>
</div>
@ -500,7 +505,7 @@ class comments extends Component {
loading={isSpin}
header=""
dataSource={journalsdata.issue_journals}
renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
renderItem={(item) => <List.Item key={item.id}>{renderList(item)}</List.Item>}
/>
)}
{this.Paginations()}
@ -558,7 +563,7 @@ class comments extends Component {
header=""
dataSource={journalsdata.issue_journals}
renderItem={(item) => (
<List.Item>{renderList(item)}</List.Item>
<List.Item key={item.id}>{renderList(item)}</List.Item>
)}
/>
)}