文件详情

dev_forge
caicai8 5 years ago
parent 0fe8effe4b
commit d059223f89

@ -328,7 +328,7 @@ class ApplicationController < ActionController::Base
def current_user
# User.current
User.find_by_id 36401
User.find_by_id 50207
end
## 默认输出json

@ -12,6 +12,7 @@ import './css/index.css';
import Loadable from 'react-loadable';
import Loading from '../Loading';
import axios from 'axios';
const ProjectNew = Loadable({
loader: () => import('./New/Index'),
@ -35,13 +36,19 @@ class Index extends Component{
}
}
componentDidMount=()=>{
let current_user={
user_id:50207,
login:'caicc'
}
this.getUserInfo();
}
this.setState({
current_user
getUserInfo=()=>{
const url = `/users/me.json`;
axios.get(url).then(result=>{
if(result && result.data.login){
this.setState({
current_user:result.data
})
}
}).catch(error=>{
console.log(error)
})
}
render(){

@ -8,6 +8,7 @@ import './list.css';
import SelectBranch from '../Branch/SelectBranch';
import CloneAddress from '../Branch/CloneAddress';
import RootTable from './RootTable';
import CoderRootFileDetail from './CoderRootFileDetail';
import axios from 'axios';
class CoderRootDirectory extends Component{
@ -16,9 +17,11 @@ class CoderRootDirectory extends Component{
this.state={
address:"http",
branch:"master",
filePath:[],
http_url:undefined,
branchList:undefined,
fileDetail:undefined,
branchLastCommit:undefined
}
}
@ -32,7 +35,7 @@ class CoderRootDirectory extends Component{
this.getProjectRoot();
}
// 获取分支文件
// 获取根目录
getProjectRoot=(branch)=>{
const { login } = this.props.current_user;
const { projectsId } = this.props.match.params;
@ -44,11 +47,76 @@ class CoderRootDirectory extends Component{
}
}).then((result)=>{
if(result && result.data && result.data.length > 0){
this.setState({
filePath:[],
fileDetail:undefined
})
this.renderData(result.data)
}
}).catch((error)=>{})
}
ChangeFile=(arr)=>{
this.renderUrl(arr);
this.getFileDetail(arr);
}
renderUrl=(array)=>{
if(array && array.path){
let { path } = array;
let list = [];
let urlList=Object.assign({},array);
let str = "";
if(path.indexOf("/")>0){
const wraps = path.split("/");
wraps.map((item,key)=>{
str += '/'+item;
urlList.path = str.substr(1);
urlList.name = item;
list.push({...urlList});
})
}else{
urlList.path = '';
urlList.name = path;
list.push({...urlList});
}
this.setState({
filePath:list
})
}
}
// 获取子目录
getFileDetail=(arr)=>{
const { current_user } = this.props;
const { projectsId } = this.props.match.params;
const { branch } = this.state;
const url =`/${current_user.login}/${projectsId}/sub_entries.json`;
axios.get(url,{
params:{
filepath:arr.path,
ref:branch
}
}).then((result)=>{
if(result && result.data && result.data.length > 0){
if(arr.type==="file"){
this.setState({
fileDetail:result.data[0],
rootList:undefined
})
}else{
this.setState({
fileDetail:undefined
})
this.renderData(result.data)
}
}
}).catch((error)=>{
console.log(error);
})
}
renderData=(data)=>{
const rootList = [];
data && data.map((item,key)=>{
@ -74,7 +142,7 @@ class CoderRootDirectory extends Component{
})
}
render(){
const { rootList , branch } = this.state;
const { rootList , branch ,filePath , fileDetail } = this.state;
const { branchLastCommit , http_url } = this.props;
const { projectsId } = this.props.match.params;
@ -84,7 +152,7 @@ class CoderRootDirectory extends Component{
dataIndex: 'name',
width:"100%",
render: (text,item) => (
<a href={`/projects/${projectsId}/${item.path}`}>
<a onClick={()=>this.ChangeFile(item)}>
<i className={ item.type === "file" ? "iconfont icon-zuoye font-15 color-blue mr5":"iconfont icon-wenjian font-15 color-blue mr5"}></i>{text}
</a>
),
@ -111,6 +179,7 @@ class CoderRootDirectory extends Component{
return undefined;
}
}
const downloadUrl = ()=>{
if(branchLastCommit && branchLastCommit.zip_url){
return(
@ -124,10 +193,45 @@ class CoderRootDirectory extends Component{
return(
<div>
<div className="f-wrap-between mt20">
<SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>
<CloneAddress http_url={http_url} downloadUrl={downloadUrl}></CloneAddress>
<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">{item.name}</span>
:
<a onClick={()=>this.ChangeFile(item)} className="color-blue subFileName">{item.name}</a>
}
</React.Fragment>
)
})
}
</span>
}
</div>
{
filePath && filePath.length === 0 && <CloneAddress http_url={http_url} downloadUrl={downloadUrl}></CloneAddress>
}
</div>
<RootTable columns = {columns} data={rootList} title={() => title()}></RootTable>
{/* 文件夹-子目录列表 */}
{
rootList && <RootTable columns = {columns} data={rootList} title={() => title()}></RootTable>
}
{
fileDetail &&
<CoderRootFileDetail detail = {fileDetail}></CoderRootFileDetail>
}
</div>
)
}

@ -1,105 +1,55 @@
import React , { Component } from "react";
import SelectBranch from '../Branch/SelectBranch';
import { getImageUrl } from 'educoder';
import Editor from "@monaco-editor/react";
import {Link} from 'react-router-dom';
import { Popconfirm } from 'antd';
import RootTable from './RootTable';
import './list.css';
import axios from 'axios';
function bytesToSize(bytes) {
if (bytes === 0) return '0 B';
let k = 1024,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)). toFixed(2) + ' ' + sizes[i];
}
class CoderRootFileDetail extends Component{
constructor(props){
super(props);
this.state={
branch:undefined,
subRootData:undefined
readOnly:true
}
}
componentDidMount=()=>{
const { branch } = this.props.match.params;
this.getFileDetail(branch);
}
componentDidUpdate=(prevProps)=>{
}
getFileDetail=(branch)=>{
const { current_user } = this.props;
const { fileurl , projectsId } = this.props.match.params;
const url =`/${current_user.login}/${projectsId}/sub_entries.json`;
axios.get(url,{
params:{
filepath:fileurl,
ref:branch
}
}).then((result)=>{
if(result){
this.setState({
subRootData:result.data
})
}
}).catch((error)=>{
console.log(error);
EditFile=()=>{
this.setState({
readOnly:false
})
}
changeBranch=(value)=>{
detail=()=>{
}
render(){
const { branch , projectsId , fileurl } = this.props.match.params;
const { branchLastCommit , http_url } = this.props;
const { detail } = this.props;
const { subRootData } = this.state;
const columns =[
{
dataIndex: 'name',
width:"100%",
render: (text,item) => (
<Link to={`/projects/${projectsId}/${item.path}`}>
<i className={ item.type === "file" ? "iconfont icon-zuoye font-15 color-blue mr5":"iconfont icon-wenjian font-15 color-blue mr5"}></i>{text}
</Link>
),
}
];
const title = () =>{
if(branchLastCommit && branchLastCommit.last_commit){
return(
<div className="f-wrap-alignCenter">
{
branchLastCommit.author ?
<React.Fragment>
<img src={getImageUrl(`images/${branchLastCommit.author.image_url}`)} alt=""/>
<span className="mr15">{branchLastCommit.author.login}</span>
</React.Fragment>
:""
}
<Link to={``} className="commitKey">{branchLastCommit.last_commit.id}</Link>
<span className="color-blue flex-1 hide-1">{branchLastCommit.last_commit.message}</span>
<span>{branchLastCommit.last_commit.time_from_now}</span>
</div>
)
}else{
return undefined;
}
}
const { readOnly } = this.state;
return(
<div>
<div className="f-wrap-alignCenter mt20">
<SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>
<span className="flex-1 ml20 font-16">
<Link to={``} className="color-blue">iSulad</Link>
<span className="color-grey-6 subFileName">{fileurl}</span>
<div className="branchTable">
<p className="branchTitle f-wrap-alignCenter f-wrap-between">
<span>{bytesToSize(detail && detail.size)}</span>
<span>
<a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji font-15 color-grey-6"></i></a>
<Popconfirm title="确认删除这个文件?" className="ml20" okText="确定" cancelText="取消" onConfirm={this.detail}>
<a><i className="iconfont icon-shanchu font-15 color-grey-6"></i></a>
</Popconfirm>
</span>
</div>
<RootTable columns = {columns} data={subRootData} title={() => title()}></RootTable>
</p>
<Editor
height="300px"
theme={"dark"}
value={detail && detail.content}
readOnly={readOnly}
/>
</div>
)
}

@ -83,12 +83,6 @@ class CoderRootIndex extends Component{
(props) => (<CoderRootCommit {...this.props} {...props} {...this.state}/>)
}
></Route>
<Route path="/projects/:projectsId/:fileurl"
render={
(props) => (<CoderRootFileDetail {...this.props} {...props} {...this.state}/>)
}
></Route>
<Route path="/projects/:projectsId/coder/branch"
render={
(props) => (<CoderRootBranch {...this.props} {...props} {...this.state}/>)

Loading…
Cancel
Save