forked from Gitlink/forgeplus-react
518 lines
16 KiB
JavaScript
518 lines
16 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Menu, Spin } 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 Nodata from '../Nodata';
|
||
import { getBranch } from '../GetData/getData';
|
||
|
||
import axios from "axios";
|
||
/**
|
||
* address:http和SSH，http_url(对应git地址)
|
||
* 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",
|
||
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,
|
||
treeValue:undefined
|
||
}
|
||
}
|
||
changeAddress = (address) => {
|
||
this.setState({
|
||
address,
|
||
});
|
||
};
|
||
|
||
componentDidMount = () => {
|
||
this.Init();
|
||
this.getBranchs();
|
||
};
|
||
// 获取分支列表
|
||
getBranchs=()=>{
|
||
const { projectsId , owner } = this.props.match.params;
|
||
axios.get(`/${owner}/${projectsId}/branches.json`).then(result=>{
|
||
this.setState({
|
||
branchList:result.data
|
||
})
|
||
}).catch((error)=>{})
|
||
}
|
||
|
||
componentDidUpdate = (prevState) => {
|
||
const { location } = this.props;
|
||
const prevlocation = prevState && prevState.location;
|
||
if (location !== prevlocation) {
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
this.Init();
|
||
}
|
||
};
|
||
|
||
Init = () => {
|
||
let { pathname } = this.props.history.location;
|
||
const { branchName , owner , projectsId } = this.props.match.params;
|
||
const { defaultBranch } = this.props;
|
||
let branch = branchName || defaultBranch;
|
||
if (pathname && (pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${branchName}/`) > -1)) {
|
||
let url = pathname.split(`/tree/${branchName}/`)[1];
|
||
this.setState({treeValue:url})
|
||
this.getFileDetail(decodeURI(url),branch);
|
||
} else {
|
||
this.getProjectRoot(branch);
|
||
}
|
||
};
|
||
|
||
// 页面地址返回到主目录
|
||
returnMain = (branch) => {
|
||
const { projectsId , owner , branchName } = this.props.match.params;
|
||
this.setState({
|
||
readOnly:true,
|
||
treeValue:undefined
|
||
})
|
||
this.props.history.push(`/projects/${owner}/${projectsId}${branchName?`/tree/${branchName}`:""}`);
|
||
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: [],
|
||
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}/tree/${arr.path}`);
|
||
this.setState({
|
||
readOnly: readOnly,
|
||
chooseType:"file"
|
||
});
|
||
};
|
||
|
||
// 获取子目录
|
||
getFileDetail = (path, ref) => {
|
||
this.setState({
|
||
filePath: decodeURI(path),
|
||
});
|
||
const { projectsId , owner , branchName } = this.props.match.params;
|
||
const { chooseType } = this.state;
|
||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||
axios.get(url,{
|
||
params:{
|
||
filepath:path,
|
||
ref:ref || branchName,
|
||
type:chooseType
|
||
}
|
||
}).then((result)=>{
|
||
let entries = result.data && result.data.entries;
|
||
this.setState({
|
||
isSpin:false
|
||
})
|
||
if(result){
|
||
if(entries){
|
||
// 返回对象entries.type则是文件类型，否则是文件夹
|
||
if(entries.type){
|
||
this.setState({
|
||
fileDetail:[entries],
|
||
rootList:[],
|
||
subFileType:false
|
||
})
|
||
}else{
|
||
this.setState({
|
||
fileDetail:[],
|
||
rootList:entries,
|
||
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);
|
||
}
|
||
}else{
|
||
this.setState({
|
||
fileDetail:[],
|
||
rootList:[],
|
||
isSpin:false,
|
||
subFileType:false
|
||
})
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.setState({
|
||
isSpin:false
|
||
})
|
||
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 , branchName } = this.props.match.params;
|
||
const { defaultBranch } = this.props;
|
||
this.props.history.push(`/projects/${owner}/${projectsId}${`/tree/${branchName || defaultBranch}`}${path?`/${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 && fileDetail.length !== 0) {
|
||
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} url={this.props.history.location}/>
|
||
:
|
||
<span>暂无~</span>
|
||
}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
// 选择分支
|
||
changeBranch = (value) => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { treeValue } = this.state;
|
||
let url = `/projects/${owner}/${projectsId}${value && `/tree/${value}`}${treeValue ? `/${treeValue}`:""}`;
|
||
this.props.history.push(url);
|
||
}
|
||
|
||
// 子目录路径返回链接
|
||
returnUlr=(url)=>{
|
||
this.setState({
|
||
chooseType:"dir",
|
||
readOnly:true,
|
||
treeValue:url
|
||
})
|
||
const { projectsId , owner , branchName } = this.props.match.params;
|
||
this.props.history.push(`/projects/${owner}/${projectsId}${branchName?`/branch/${branchName}`:""}/tree/${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) {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
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>
|
||
) : (
|
||
""
|
||
)}
|
||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="color-blue flex-1 hide-1">
|
||
{branchLastCommit.message}
|
||
</Link>
|
||
<span>{branchLastCommit.time_from_now}</span>
|
||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="commitKey">
|
||
{truncateCommitId(branchLastCommit.sha)}
|
||
</Link>
|
||
</div>
|
||
);
|
||
}else{
|
||
return false;
|
||
}
|
||
}
|
||
|
||
|
||
render(){
|
||
const { branchLastCommit , lastCommitAuthor , rootList ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url , branchList} = this.state;
|
||
const { isManager , isDeveloper , projectDetail , platform , defaultBranch } = this.props;
|
||
|
||
const { projectsId , owner , branchName } = this.props.match.params;
|
||
let branch = branchName || defaultBranch;
|
||
|
||
const columns = [
|
||
{
|
||
key:"name",
|
||
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>
|
||
),
|
||
},
|
||
{
|
||
key:"message",
|
||
dataIndex: "message",
|
||
width: "60%",
|
||
render: (text, item) =>
|
||
item.commit && item.commit.message ?
|
||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit.sha}`)}`} title={item.commit.message} className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
|
||
{item.commit.message}
|
||
</Link>
|
||
: ""
|
||
},
|
||
{
|
||
key:"time_from_now",
|
||
dataIndex: "time_from_now",
|
||
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" style={{minHeight:'400px'}}>
|
||
<div className="f-wrap-between mb20">
|
||
<div className="f-wrap-alignCenter">
|
||
{
|
||
platform ?
|
||
<SelectBranch
|
||
repo_id={projectDetail && projectDetail.repo_id}
|
||
projectsId={projectsId}
|
||
branch={branch}
|
||
changeBranch={this.changeBranch}
|
||
owner={owner}
|
||
history={this.props.history}
|
||
branchList={branchList}
|
||
></SelectBranch>
|
||
:
|
||
<span>分支：<span className="color-grey-6">master</span></span>
|
||
}
|
||
|
||
{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) && platform && (
|
||
<div>
|
||
<span>
|
||
<Link to={`/projects/${owner}/${projectsId}/${branch}/uploadfile${urlRoot}`} >
|
||
<span className="color-green mr30">上传文件</span>
|
||
</Link>
|
||
</span>
|
||
<span className="mr30">
|
||
<Link
|
||
to={`/projects/${owner}/${projectsId}/${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 && rootList.length > 0 && (
|
||
<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}
|
||
currentBranch={branch}
|
||
></CoderRootFileDetail>
|
||
)}
|
||
{
|
||
(rootList && rootList.length === 0) && (fileDetail && fileDetail.length === 0) && <Nodata _html="暂未发现文件！"/>
|
||
}
|
||
{ rootList && this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
|
||
</div>
|
||
</Spin>
|
||
);
|
||
}
|
||
}
|
||
export default CoderRootDirectory;
|