根目录无数据的显示页

forge
caicai8 5 years ago
parent 63346d79ba
commit 26b29a06cb

@ -4,6 +4,7 @@ import { Dropdown , Menu , Icon , Tooltip } from 'antd';
import './list.css' import './list.css'
import { branch } from 'recompose'; import { branch } from 'recompose';
import Top from './DetailTop';
class CoderRootBranch extends Component { class CoderRootBranch extends Component {
constructor(porps){ constructor(porps){
@ -19,6 +20,9 @@ class CoderRootBranch extends Component {
const list =()=>{ const list =()=>{
if(branchList && branchList.length>0){ if(branchList && branchList.length>0){
return( return(
<React.Fragment>
<ul className="branchUl"> <ul className="branchUl">
{ {
branchList.map((item,key)=>{ branchList.map((item,key)=>{
@ -48,6 +52,7 @@ class CoderRootBranch extends Component {
}) })
} }
</ul> </ul>
</React.Fragment>
) )
} }
} }
@ -58,9 +63,12 @@ class CoderRootBranch extends Component {
</Menu> </Menu>
) )
return( return(
<div className="branchTable"> <div>
<p className="branchTitle">分支列表</p> <Top { ...this.props } {...this.state} />
{list()} <div className="branchTable">
<p className="branchTitle">分支列表</p>
{list()}
</div>
</div> </div>
) )
} }

@ -2,6 +2,7 @@ import React , { Component } from 'react';
import { Table , Spin } from 'antd'; import { Table , Spin } from 'antd';
import { getImageUrl } from 'educoder'; import { getImageUrl } from 'educoder';
import SelectBranch from '../Branch/SelectBranch'; import SelectBranch from '../Branch/SelectBranch';
import Top from './DetailTop';
import axios from 'axios'; import axios from 'axios';
@ -135,6 +136,7 @@ class CoderRootCommit extends Component{
} }
return( return(
<div> <div>
<Top { ...this.props } {...this.state} />
<div className="f-wrap-between mt20"> <div className="f-wrap-between mt20">
<SelectBranch branch={branch} branchs={branchs} changeBranch={this.changeBranch}></SelectBranch> <SelectBranch branch={branch} branchs={branchs} changeBranch={this.changeBranch}></SelectBranch>
</div> </div>

@ -2,6 +2,7 @@ import React , { Component } from 'react';
import {Menu, Spin} from 'antd'; import {Menu, Spin} from 'antd';
import { getImageUrl , markdownToHTML } from 'educoder'; import { getImageUrl , markdownToHTML } from 'educoder';
import { Router , Route , Link } from 'react-router-dom'; import { Router , Route , Link } from 'react-router-dom';
import Top from './DetailTop';
import './list.css'; import './list.css';
@ -9,6 +10,7 @@ import SelectBranch from '../Branch/SelectBranch';
import CloneAddress from '../Branch/CloneAddress'; import CloneAddress from '../Branch/CloneAddress';
import RootTable from './RootTable'; import RootTable from './RootTable';
import CoderRootFileDetail from './CoderRootFileDetail'; import CoderRootFileDetail from './CoderRootFileDetail';
import NullData from './NullData';
import axios from 'axios'; import axios from 'axios';
/** /**
@ -29,13 +31,14 @@ class CoderRootDirectory extends Component{
subFileType:"", subFileType:"",
readMeContent:undefined, readMeContent:undefined,
isSpin:false, isSpin:true,
branchList:undefined, branchList:undefined,
fileDetail:undefined, fileDetail:undefined,
branchLastCommit:undefined, branchLastCommit:undefined,
current_user:undefined, current_user:undefined,
rootData:undefined
} }
} }
changeAddress=(address)=>{ changeAddress=(address)=>{
@ -44,22 +47,7 @@ class CoderRootDirectory extends Component{
}) })
} }
// getUserInfo=()=>{
// const url = `/users/me.json`;
// axios.get(url).then(result=>{
// if(result && result.data.login){
// this.setState({
// current_user:result.data
// })
// this.getProjectRoot();
// }
// }).catch(error=>{
// console.log(error)
// })
// }
componentDidMount=()=>{ componentDidMount=()=>{
// this.getUserInfo();
let { search } = this.props.history.location; let { search } = this.props.history.location;
let branchName = undefined; let branchName = undefined;
if(search && search.indexOf("branch")>-1){ if(search && search.indexOf("branch")>-1){
@ -74,10 +62,9 @@ class CoderRootDirectory extends Component{
// 获取根目录 // 获取根目录
getProjectRoot=(branch)=>{ getProjectRoot=(branch)=>{
console.log("root",this.props);
const { current_user } = this.props; const { current_user } = this.props;
const { projectsId } = this.props.match.params; const { projectsId } = this.props.match.params;
const url = `/${current_user && current_user.login}/${projectsId}/entries.json`; const url = `/${current_user && current_user.login}/${projectsId}/entries.json`;
axios.get((url),{ axios.get((url),{
params:{ params:{
branch branch
@ -89,7 +76,10 @@ class CoderRootDirectory extends Component{
fileDetail:undefined, fileDetail:undefined,
isSpin: false isSpin: false
}) })
this.renderData(result.data) this.renderData(result.data);
this.setState({
rootData:result.data
})
} }
}).catch((error)=>{}) }).catch((error)=>{})
} }
@ -215,7 +205,7 @@ class CoderRootDirectory extends Component{
} }
render(){ render(){
const { rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin } = this.state; const { rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , rootData } = this.state;
const { branchLastCommit , http_url , isManager , isDeveloper } = this.props; const { branchLastCommit , http_url , isManager , isDeveloper } = this.props;
const { projectsId } = this.props.match.params; const { projectsId } = this.props.match.params;
@ -266,61 +256,74 @@ class CoderRootDirectory extends Component{
const urlRoot = filePath && filePath.length > 0 ? `/${filePath[filePath.length - 1].path}` : ""; const urlRoot = filePath && filePath.length > 0 ? `/${filePath[filePath.length - 1].path}` : "";
return( return(
<div> <React.Fragment>
<div className="f-wrap-between mt20"> {
<div className="f-wrap-alignCenter"> rootData &&
<SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch> <React.Fragment>
{ {
filePath && filePath.length > 0 && rootData.length > 0 ?
<span className="ml20 font-16"> <div>
<a onClick={()=>this.getProjectRoot(branch)} className="color-blue">{projectsId}</a> <Top { ...this.props } {...this.state} />
<div className="f-wrap-between mt20">
<div className="f-wrap-alignCenter">
<SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>
{
filePath && filePath.length > 0 &&
<span className="ml20 font-16">
<a onClick={()=>this.getProjectRoot(branch)} className="color-blue">{projectsId}</a>
{
filePath.map((item,key)=>{
return(
<React.Fragment>
{
key === filePath.length-1 ?
<span className="color-grey-6 subFileName" key={key}>{item.name}</span>
:
<a onClick={()=>this.ChangeFile(item,key)} className="color-blue subFileName" key={key}>{item.name}</a>
}
</React.Fragment>
)
})
}
</span>
}
</div>
<div className="f-wrap-alignCenter">
{
subFileType !== "file" && isManager && isDeveloper &&
<p className="addFile">
<Link to={`/projects/${projectsId}/coder/${branch}/newfile${urlRoot}`} >新建文件</Link>
<Link to={``}>上传文件</Link>
</p>
}
{
filePath && filePath.length === 0 && <CloneAddress http_url={http_url} downloadUrl={downloadUrl} showNotification={this.props.showNotification}></CloneAddress>
}
</div>
</div>
<Spin spinning={isSpin}>
{/* 文件夹-子目录列表 */}
{ {
filePath.map((item,key)=>{ rootList && <RootTable columns = {columns} data={rootList} title={() => title()}></RootTable>
return(
<React.Fragment>
{
key === filePath.length-1 ?
<span className="color-grey-6 subFileName" key={key}>{item.name}</span>
:
<a onClick={()=>this.ChangeFile(item,key)} className="color-blue subFileName" key={key}>{item.name}</a>
}
</React.Fragment>
)
})
} }
</span> {
} fileDetail &&
<CoderRootFileDetail detail = {fileDetail} {...this.props} {...this.state}></CoderRootFileDetail>
</div> }
<div className="f-wrap-alignCenter">
{
subFileType !== "file" && isManager && isDeveloper &&
<p className="addFile">
<Link to={`/projects/${projectsId}/coder/${branch}/newfile${urlRoot}`} >新建文件</Link>
<Link to={``}>上传文件</Link>
</p>
}
{
filePath && filePath.length === 0 && <CloneAddress http_url={http_url} downloadUrl={downloadUrl} showNotification={this.props.showNotification}></CloneAddress>
}
</div>
</div>
<Spin spinning={isSpin}>
{/* 文件夹-子目录列表 */}
{
rootList && <RootTable columns = {columns} data={rootList} title={() => title()}></RootTable>
}
{ {/* readme.txt */}
fileDetail && { this.renderReadMeContent(readMeContent) }
<CoderRootFileDetail detail = {fileDetail} {...this.props} {...this.state}></CoderRootFileDetail> </Spin>
</div>
:
<NullData {...this.props} {...this.state} http_url={http_url} ></NullData>
} }
</React.Fragment>
{/* readme.txt */} }
{ this.renderReadMeContent(readMeContent) } </React.Fragment>
</Spin>
</div>
) )
} }
} }

@ -3,9 +3,6 @@ import { Route , Switch , Link} from 'react-router-dom';
import Loadable from 'react-loadable'; import Loadable from 'react-loadable';
import Loading from '../../Loading'; import Loading from '../../Loading';
/*空数据页面 */
import NullData from './NullData';
import axios from 'axios';
const CoderRootDirectory = Loadable({ const CoderRootDirectory = Loadable({
@ -27,42 +24,28 @@ const CoderRootBranch = Loadable({
class CoderRootIndex extends Component{ class CoderRootIndex extends Component{
render(){ render(){
console.log("index",this.props)
const { projectDetail } = this.props;
const { projectsId } = this.props.match.params;
const { pathname } = this.props.location;
return( return(
<div className="main"> <div className="main">
<p className="branch-wrapper">
<Link to={`/projects/${projectsId}/coder/commit`} className={ pathname.indexOf("/coder/commit") > 0 ? "active" : ""}>
<i className="iconfont icon-tijiaojilu font-18 mr3"></i>
<span className="mr3">{projectDetail && projectDetail.commits_count}</span>
</Link>
<Link to={`/projects/${projectsId}/coder/branch`} className={ pathname.indexOf("/coder/branch") > 0 ? "active" : ""}>
<i className="iconfont icon-fenzhi font-18 mr3"></i>
<span className="mr3">{projectDetail && projectDetail.branches_count}</span>
</Link>
</p>
<Switch {...this.props}> <Switch {...this.props}>
<Route path="/projects/:projectsId/coder/commit" <Route path="/projects/:projectsId/coder/commit"
render={ render={
(props) => (<CoderRootCommit {...this.props} {...props} {...this.state}/>) (props) => (<CoderRootCommit {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
<Route path="/projects/:projectsId/coder/branch" <Route path="/projects/:projectsId/coder/branch"
render={ render={
(props) => (<CoderRootBranch {...this.props} {...props} {...this.state}/>) (props) => (<CoderRootBranch {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
<Route path="/projects/:projectsId/coder" <Route path="/projects/:projectsId/coder"
render={ render={
(props) => (<CoderRootDirectory {...this.props} {...props} {...this.state}/>) (props) => (<CoderRootDirectory {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
<Route path="/projects/:projectsId" <Route path="/projects/:projectsId"
render={ render={
(props) => (<CoderRootDirectory {...this.props} {...props} {...this.state}/>) (props) => (<CoderRootDirectory {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
</Switch> </Switch>

@ -0,0 +1,23 @@
import React , { Component } from 'react';
import { Link} from 'react-router-dom';
class DetailTop extends Component{
render(){
const { projectDetail } = this.props;
const { projectsId } = this.props.match.params;
const { pathname } = this.props.location;
return(
<p className="branch-wrapper">
<Link to={`/projects/${projectsId}/coder/commit`} className={ pathname.indexOf("/coder/commit") > 0 ? "active" : ""}>
<i className="iconfont icon-tijiaojilu font-18 mr3"></i>
<span className="mr3">{projectDetail && projectDetail.commits_count}</span>
</Link>
<Link to={`/projects/${projectsId}/coder/branch`} className={ pathname.indexOf("/coder/branch") > 0 ? "active" : ""}>
<i className="iconfont icon-fenzhi font-18 mr3"></i>
<span className="mr3">{projectDetail && projectDetail.branches_count}</span>
</Link>
</p>
)
}
}
export default DetailTop;

@ -5,18 +5,25 @@ import "../Branch/branch.css"
class NullData extends Component { class NullData extends Component {
// 点击按钮复制功能
jsCopy=()=>{
var e = document.getElementById("copy_rep_content_1");
e.select();
document.execCommand("Copy");
this.props.showNotification('复制成功');
}
render() { render() {
const { http_url } = this.props;
return ( return (
<div className="null_data_box"> <div className="null_data_box">
<h4 className="title">快速帮助</h4> <h4 className="title">快速帮助</h4>
<div className="bottom"> <div className="bottom">
<div className="item"> <div className="item">
<h3 className="item_title">克隆当前仓库<small>不知道如何克隆查看<a href="https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository">帮助</a></small></h3> <h3 className="item_title">克隆当前仓库<small>不知道如何克隆查看<a href="https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository" target="_blank">帮助</a></small></h3>
<div className="gitAddressClone"> <div className="gitAddressClone">
<span >HTTP</span> <span >HTTP</span>
<input type="text" id="copy_rep_content" /> <input type="text" value={http_url} readOnly id="copy_rep_content_1" />
<span><i className="iconfont icon-fuzhi"></i></span> <span onClick={()=>this.jsCopy()}><i className="iconfont icon-fuzhi"></i></span>
</div> </div>
</div> </div>

Loading…
Cancel
Save