forked from Gitlink/forgeplus-react
538 lines
16 KiB
JavaScript
538 lines
16 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Menu, Spin, Button } from "antd";
|
||
import { getImageUrl } from "educoder";
|
||
import { Link } from "react-router-dom";
|
||
|
||
import './list.css';
|
||
import SelectBranch from '../Branch/Select';
|
||
import CloneAddress from '../Branch/CloneAddress';
|
||
import RootTable from './RootTable';
|
||
import CoderRootFileDetail from './CoderRootFileDetail';
|
||
import { truncateCommitId } from '../common/util';
|
||
import RenderHtml from '../../components/render-html';
|
||
|
||
import axios from "axios";
|
||
/**
|
||
* address:http和SSH，http_url(对应git地址)
|
||
* branch:当前分支
|
||
* filePath:点击目录时当前目录的路径
|
||
* subfileType:保存当前点击目录的文件类型（显示目录列表时才显示新建文件，如果点击的是文件就不显示新建文件按钮）
|
||
* readMeContent:根目录下面的readme文件内容
|
||
*/
|
||
|
||
function getPathUrl(array,index){
|
||
if(array && array.length>0 && index){
|
||
let str = "";
|
||
for(let i=0;i<index;i++){
|
||
str += `/${array[i]}`;
|
||
}
|
||
return str.substr(1);
|
||
}
|
||
}
|
||
|
||
class CoderRootDirectory extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
address: "http",
|
||
branch: "master",
|
||
filePath: undefined,
|
||
subFileType: undefined,
|
||
readMeContent: undefined,
|
||
readMeFile: undefined,
|
||
|
||
isSpin: true,
|
||
|
||
branchList: undefined,
|
||
fileDetail: undefined,
|
||
branchLastCommit: undefined,
|
||
lastCommitAuthor: undefined,
|
||
|
||
rootList: undefined,
|
||
readOnly: true,
|
||
zip_url:undefined,
|
||
tar_url:undefined,
|
||
chooseType:undefined,
|
||
|
||
md:false
|
||
}
|
||
}
|
||
changeAddress = (address) => {
|
||
this.setState({
|
||
address,
|
||
});
|
||
};
|
||
|
||
componentDidMount = () => {
|
||
this.Init();
|
||
};
|
||
|
||
componentDidUpdate = (prevState) => {
|
||
const { location } = this.props;
|
||
const prevlocation = prevState && prevState.location;
|
||
if (location !== prevlocation) {
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
this.Init();
|
||
}
|
||
};
|
||
|
||
Init = () => {
|
||
let { search } = this.props.history.location;
|
||
let branchName = undefined;
|
||
if (search && search.indexOf("?branch=") > -1) {
|
||
branchName = search.split("?branch=")[1];
|
||
this.setState({
|
||
branch: branchName,
|
||
});
|
||
}
|
||
if (search && search.indexOf("?url=") > -1) {
|
||
let url = search.split("?url=")[1];
|
||
this.setState({
|
||
filePath: url,
|
||
});
|
||
this.getFileDetail(url);
|
||
} else {
|
||
const { branch } = this.state;
|
||
this.getProjectRoot(branchName || branch);
|
||
}
|
||
};
|
||
|
||
// 页面地址返回到主目录
|
||
returnMain = (branch) => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
this.setState({
|
||
readOnly:true
|
||
})
|
||
this.props.history.push(`/projects/${owner}/${projectsId}/coders`);
|
||
this.getProjectRoot(branch);
|
||
};
|
||
|
||
// 获取根目录
|
||
getProjectRoot = (branch) => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const url = `/${owner}/${projectsId}/entries.json`;
|
||
axios.get(url, { params: { ref: branch } })
|
||
.then((result) => {
|
||
if (result) {
|
||
let last_commit = result.data && result.data.last_commit;
|
||
let entries = result.data && result.data.entries;
|
||
this.setState({
|
||
filePath: undefined,
|
||
fileDetail: undefined,
|
||
isSpin: false,
|
||
branchLastCommit: last_commit && last_commit.commit,
|
||
lastCommitAuthor:
|
||
last_commit && (last_commit.author || (last_commit.commit && last_commit.commit.author)),
|
||
zip_url: result.data.zip_url,
|
||
tar_url: result.data.tar_url
|
||
});
|
||
if (entries && entries.length > 0) {
|
||
this.renderData(entries);
|
||
}
|
||
this.setState({
|
||
rootList: entries,
|
||
subFileType: true,
|
||
});
|
||
}
|
||
}).catch((error) => {});
|
||
};
|
||
|
||
ChangeFile = (arr, readOnly) => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
//点击直接跳转页面 加载一次路由
|
||
this.props.history.push(`/projects/${owner}/${projectsId}/coders?url=${arr.path}`);
|
||
this.setState({
|
||
readOnly: readOnly,
|
||
chooseType:"file"
|
||
});
|
||
};
|
||
|
||
renderUrl = (name, path, type) => {
|
||
let list = [];
|
||
const { filePath } = this.state;
|
||
if (path.indexOf("/")) {
|
||
const array = path.split("/");
|
||
let str = "";
|
||
array.map((i, k) => {
|
||
str += "/" + i;
|
||
return list.push({
|
||
key: k,
|
||
index: k,
|
||
name: i,
|
||
path: str.substr(1),
|
||
type:
|
||
filePath && filePath.length > 0
|
||
? filePath[k]
|
||
? filePath[k].type
|
||
: type
|
||
: type,
|
||
});
|
||
});
|
||
const { projectsId , owner } = this.props.match.params;
|
||
//点击直接跳转页面 加载一次路由
|
||
this.props.history.push(
|
||
`/projects/${owner}/${projectsId}/coders?url=${str.substr(1)}`
|
||
);
|
||
} else {
|
||
list.push({
|
||
index: 0,
|
||
name,
|
||
path,
|
||
type,
|
||
});
|
||
}
|
||
this.setState({
|
||
filePath: list,
|
||
});
|
||
};
|
||
|
||
// 获取子目录
|
||
getFileDetail = (path, ref) => {
|
||
const { projectsId ,owner } = this.props.match.params;
|
||
const { branch } = this.state;
|
||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||
|
||
axios.get(url,{
|
||
params:{
|
||
filepath:path,
|
||
ref:ref || branch
|
||
}
|
||
}).then((result)=>{
|
||
let entries = result.data && result.data.entries
|
||
if( entries && entries.length > 0){
|
||
let { chooseType } = this.state;
|
||
// 当前返回的子目录只有一条数据，且这条数据返回的是文件类型
|
||
if(entries.length === 1 && entries[0].type === "file" && chooseType ==="file"){
|
||
this.setState({
|
||
fileDetail:entries,
|
||
rootList:undefined,
|
||
isSpin:false,
|
||
subFileType:false
|
||
})
|
||
}else{
|
||
this.setState({
|
||
fileDetail:undefined,
|
||
rootList:entries,
|
||
isSpin:false,
|
||
branchLastCommit:result.data.last_commit && result.data.last_commit.commit,
|
||
lastCommitAuthor:result.data.last_commit && (result.data.last_commit.author || (result.data.last_commit.commit && result.data.last_commit.commit.author))
|
||
})
|
||
this.renderData(entries);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
renderData = (data) => {
|
||
const rootList = [];
|
||
const readMeContent = [];
|
||
const readMeFile = [];
|
||
data &&
|
||
data.map((item, key) => {
|
||
rootList.push({
|
||
key,
|
||
message: item.commit && item.commit.message,
|
||
...item,
|
||
});
|
||
if (item.is_readme_file) {
|
||
readMeContent.push({ ...item });
|
||
readMeFile.push({ ...item });
|
||
}
|
||
});
|
||
this.setState({
|
||
rootList: rootList,
|
||
readMeContent,
|
||
readMeFile,
|
||
});
|
||
};
|
||
|
||
// 点击跳转到子目录
|
||
goToSubRoot=(path,type,filename)=>{
|
||
this.setState({
|
||
chooseType:type
|
||
})
|
||
const { projectsId, owner } = this.props.match.params;
|
||
this.props.history.push(`/projects/${owner}/${projectsId}/coders?url=${path}`);
|
||
if(filename.substring(filename.length - 3) === ".md"){
|
||
this.setState({
|
||
md:true
|
||
})
|
||
}else{
|
||
this.setState({
|
||
md:false
|
||
})
|
||
}
|
||
};
|
||
|
||
// readme文件内容
|
||
renderReadMeContent = (readMeContent, permission) => {
|
||
const { fileDetail, readMeFile } = this.state;
|
||
if (fileDetail) {
|
||
return;
|
||
}
|
||
if (readMeContent && readMeContent.length > 0) {
|
||
return (
|
||
<div className="commonBox">
|
||
<div className="commonBox-title">
|
||
<span className="mr10">
|
||
<i className="iconfont icon-wenjian1 font-16 color-grey-9 fl mt3"></i>
|
||
</span>
|
||
<span className="commonBox-title-read">
|
||
{readMeContent[0].name}
|
||
</span>
|
||
{permission ? (
|
||
<a
|
||
onClick={() => this.ChangeFile(readMeFile[0], false)}
|
||
className="ml20 pull-right"
|
||
>
|
||
<i className="iconfont icon-bianji6 font-16 color-blue"></i>
|
||
</a>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
<div className="commonBox-info">
|
||
{readMeContent[0].content ? (
|
||
<RenderHtml
|
||
className="break_word_comments imageLayerParent"
|
||
value={readMeContent[0].content}
|
||
/>
|
||
) : (
|
||
<span>暂无~</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
// 选择分支
|
||
changeBranch = (value) => {
|
||
this.setState({
|
||
branch: value,
|
||
isSpin: true,
|
||
readOnly:true
|
||
});
|
||
const { getTopCount } = this.props;
|
||
getTopCount && getTopCount(value);
|
||
|
||
let { search } = this.props.history.location;
|
||
if (search && search.indexOf("?url=") > -1) {
|
||
let url = search.split("?url=")[1];
|
||
this.setState({
|
||
filePath: url,
|
||
});
|
||
this.getFileDetail(url, value);
|
||
} else {
|
||
this.getProjectRoot(value);
|
||
}
|
||
}
|
||
|
||
// 子目录路径返回链接
|
||
returnUlr=(url)=>{
|
||
this.setState({
|
||
chooseType:"dir",
|
||
readOnly:true
|
||
})
|
||
const { projectsId , owner } = this.props.match.params;
|
||
this.props.history.push(`/projects/${owner}/${projectsId}/coders?url=${url}`);
|
||
}
|
||
|
||
onEdit=(readOnly)=>{
|
||
this.setState({
|
||
readOnly
|
||
})
|
||
}
|
||
|
||
downloadUrl = (zip_url,tar_url) => {
|
||
return(
|
||
<Menu>
|
||
{zip_url && (
|
||
<Menu.Item>
|
||
<a href={zip_url}>ZIP</a>
|
||
</Menu.Item>
|
||
)}
|
||
{tar_url && (
|
||
<Menu.Item>
|
||
<a href={tar_url}>TAR.GZ</a>
|
||
</Menu.Item>
|
||
)}
|
||
</Menu>
|
||
)
|
||
}
|
||
|
||
title = (branchLastCommit,lastCommitAuthor) => {
|
||
if (branchLastCommit) {
|
||
return (
|
||
<div className="f-wrap-alignCenter">
|
||
{lastCommitAuthor ? (
|
||
<React.Fragment>
|
||
{lastCommitAuthor.login ? (
|
||
<Link
|
||
to={`/users/${lastCommitAuthor.login}/projects`}
|
||
className="show-user-link"
|
||
>
|
||
<img
|
||
src={getImageUrl(`images/${lastCommitAuthor.image_url}`)}
|
||
className="radius mr10"
|
||
width="32"
|
||
height="32"
|
||
alt=""
|
||
/>
|
||
<span className="mr15">{lastCommitAuthor.name}</span>
|
||
</Link>
|
||
) : (
|
||
<span className="mr15">{lastCommitAuthor.name}</span>
|
||
)}
|
||
</React.Fragment>
|
||
) : (
|
||
""
|
||
)}
|
||
<span className="color-blue flex-1 hide-1">
|
||
{branchLastCommit.message}
|
||
</span>
|
||
<span>{branchLastCommit.time_from_now}</span>
|
||
<span className="commitKey">
|
||
{truncateCommitId(branchLastCommit.sha)}
|
||
</span>
|
||
</div>
|
||
);
|
||
}else{
|
||
return false;
|
||
}
|
||
}
|
||
|
||
|
||
render(){
|
||
const { branchLastCommit , lastCommitAuthor , rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
|
||
const { isManager , isDeveloper , projectDetail } = this.props;
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const columns = [
|
||
{
|
||
dataIndex: 'name',
|
||
width:"30%",
|
||
render: (text,item) => (
|
||
<a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
|
||
<i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5":"iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
|
||
</a>
|
||
),
|
||
},
|
||
{
|
||
dataIndex: "commit",
|
||
width: "60%",
|
||
render: (text, item) =>
|
||
item.commit && item.commit.message ?
|
||
<span className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
|
||
{item.commit.message}
|
||
</span>
|
||
: ""
|
||
},
|
||
{
|
||
dataIndex: "commit",
|
||
width: "10%",
|
||
className: "edu-txt-right",
|
||
render: (text, item) =>
|
||
item.commit && item.commit.time_from_now ?
|
||
<a title={item.commit.created_at} className="mr12" style={{ cursor: "default", color: "#888" }} >
|
||
{item.commit.time_from_now}
|
||
</a>
|
||
:""
|
||
},
|
||
];
|
||
|
||
const urlRoot = filePath === undefined ? "" : `/${filePath}`;
|
||
let array = filePath && filePath.split("/");
|
||
return (
|
||
<Spin spinning={isSpin}>
|
||
<div className="main">
|
||
<div className="f-wrap-between mb20">
|
||
<div className="f-wrap-alignCenter">
|
||
<SelectBranch
|
||
repo_id={projectDetail && projectDetail.repo_id}
|
||
projectsId={projectsId}
|
||
branch={branch}
|
||
changeBranch={this.changeBranch}
|
||
owner={owner}
|
||
></SelectBranch>
|
||
|
||
{filePath && (
|
||
<span className="ml20 font-16">
|
||
<a
|
||
onClick={() => this.returnMain(branch)}
|
||
className="color-blue"
|
||
>
|
||
{projectDetail && projectDetail.identifier}
|
||
</a>
|
||
{ array && array.map((item, key) => {
|
||
return (
|
||
<React.Fragment>
|
||
{
|
||
key === array.length-1 ?
|
||
<span className="color-grey-6 subFileName" key={key}>{item}</span>
|
||
:
|
||
<a onClick={()=>this.returnUlr(`${getPathUrl(array,key+1)}`)} className="color-blue subFileName">{item}</a>
|
||
}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="f-wrap-alignCenter">
|
||
{subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && (
|
||
<div>
|
||
<span>
|
||
<Link to={`/projects/${owner}/${projectsId}/coders/${branch}/uploadfile${urlRoot}`} >
|
||
<span className="color-green mr30">上传文件</span>
|
||
</Link>
|
||
</span>
|
||
<span className="mr30">
|
||
<Link
|
||
to={`/projects/${owner}/${projectsId}/coders/${branch}/newfile${urlRoot}`}
|
||
>
|
||
<span className="color-blue">新建文件</span>
|
||
</Link>
|
||
</span>
|
||
</div>
|
||
)}
|
||
{projectDetail && projectDetail.clone_url && (
|
||
<CloneAddress
|
||
http_url={projectDetail.clone_url}
|
||
downloadUrl={this.downloadUrl(zip_url,tar_url)}
|
||
showNotification={this.props.showNotification}
|
||
></CloneAddress>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{/* 主目录列表 */}
|
||
{rootList && (
|
||
<RootTable
|
||
columns={columns}
|
||
data={rootList}
|
||
title={() => this.title(branchLastCommit,lastCommitAuthor)}
|
||
></RootTable>
|
||
)}
|
||
{/* 子目录列表、文件 */}
|
||
{fileDetail && fileDetail.length > 0 && (
|
||
<CoderRootFileDetail
|
||
detail={fileDetail[0]}
|
||
{...this.props}
|
||
{...this.state}
|
||
readOnly={this.state.readOnly}
|
||
onEdit={this.onEdit}
|
||
></CoderRootFileDetail>
|
||
)}
|
||
{/* readme.txt (isManager || isDeveloper)*/}
|
||
{this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
|
||
</div>
|
||
</Spin>
|
||
);
|
||
}
|
||
}
|
||
export default CoderRootDirectory;
|