forked from Gitlink/forgeplus-react
This commit is contained in:
parent
50f39afffa
commit
99f7aea290
|
|
@ -20,7 +20,7 @@ export default ({ url , name , column })=>{
|
|||
`;
|
||||
return(
|
||||
<Img>
|
||||
<img src={url} alt=""/>
|
||||
{ url && <img src={url} alt=""/> }
|
||||
<span>{name}</span>
|
||||
</Img>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,516 +0,0 @@
|
|||
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 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}/tree${branchName?`/${branchName}`:""}/${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;
|
||||
|
|
@ -120,6 +120,10 @@ const DevAbout = Loadable({
|
|||
loader: () => import('../About/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Source = Loadable({
|
||||
loader: () => import('../Source/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
const DevIndex = Loadable({
|
||||
loader: () => import('../DevOps/Index'),
|
||||
loading: Loading,
|
||||
|
|
@ -145,6 +149,8 @@ function checkPathname(projectsId,owner,pathname){
|
|||
name="setting"
|
||||
}else if(url.indexOf(`/devops`)>-1){
|
||||
name="devops"
|
||||
}else if(url.indexOf(`/source`)>-1){
|
||||
name="source"
|
||||
}
|
||||
}
|
||||
return name;
|
||||
|
|
@ -532,6 +538,12 @@ class Detail extends Component {
|
|||
:
|
||||
<Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
|
||||
<Switch {...this.props}>
|
||||
{/* 资源 */}
|
||||
<Route path="/projects/:owner/:projectsId/source"
|
||||
render={
|
||||
() => (<Source {...this.props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
{/* 主页 */}
|
||||
<Route path="/projects/:owner/:projectsId/about"
|
||||
render={
|
||||
|
|
|
|||
|
|
@ -670,6 +670,7 @@ a.color-grey-ccc:hover{
|
|||
|
||||
.commitList{
|
||||
padding:0px 30px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.commitList > div{
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
|
|
|||
|
|
@ -66,6 +66,16 @@ function DetailBanner({ list , owner , projectsId , isManager , url , pathname ,
|
|||
</li>
|
||||
:""
|
||||
}
|
||||
{
|
||||
item.menu_name === "source" &&
|
||||
<li className={pathname==="source" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/source`, state }}>
|
||||
<i className={pathname==="source" ? "iconfont icon-ziyuanpaihanghetuijian color-grey-3 mr5 font-14":"iconfont icon-ziyuanpaihanghetuijian color-grey-6 font-14 mr5"}></i>
|
||||
<span>资源库</span>
|
||||
{projectDetail && projectDetail.source_count ? <span className="num">{projectDetail.source_count}</span> :""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "versions" &&
|
||||
<li className={pathname==="milestones" ? "active" : ""}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import './Index.scss';
|
||||
import { Blueback , FlexAJ } from '../Component/layout';
|
||||
|
||||
function Index(props){
|
||||
return(
|
||||
<div className="sourcePanel">
|
||||
<div className="headtitle">
|
||||
<FlexAJ>
|
||||
<span className="font-18">资源库</span>
|
||||
<Blueback>上传资源</Blueback>
|
||||
</FlexAJ>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.sourcePanel{
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
|
||||
.headtitle{
|
||||
padding:15px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue