文件详情

app/controllers/application_controller.rb

@@ -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

public/react/src/forge/Index.js

@@ -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={
+    this.getUserInfo();
-      user_id:50207,
-      login:'caicc'
   }
 
+  getUserInfo=()=>{
+    const url = `/users/me.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data.login){
         this.setState({
-      current_user
+          current_user:result.data
+        })
+      }
+    }).catch(error=>{
+      console.log(error)
     })
   }
   render(){

public/react/src/forge/Main/CoderRootDirectory.js

@@ -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">
+          <div className="f-wrap-alignCenter">
             <SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>
-          <CloneAddress http_url={http_url} downloadUrl={downloadUrl}></CloneAddress>
+            {
+              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>
     )
   }

public/react/src/forge/Main/CoderRootFileDetail.js

@@ -1,105 +1,55 @@
 import React , { Component } from "react";
-import SelectBranch from '../Branch/SelectBranch';
+import Editor from "@monaco-editor/react";
-import { getImageUrl } from 'educoder';
 
-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,
+      readOnly:true
-      subRootData:undefined
-    }
     }
-
-  componentDidMount=()=>{
-    const { branch } = this.props.match.params;
-    this.getFileDetail(branch);
-  }
-
-  componentDidUpdate=(prevProps)=>{
   }
 
-  getFileDetail=(branch)=>{
+  EditFile=()=>{
-    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
+      readOnly:false
     })
   }
-    }).catch((error)=>{
-      console.log(error);
-    })
-
-  }
 
-  changeBranch=(value)=>{
+  detail=()=>{
 
   }
 
-
   render(){
-    const { branch , projectsId , fileurl } = this.props.match.params;
+    const { detail } = this.props;
-    const { branchLastCommit , http_url } = 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 = () =>{
+    const { readOnly } = this.state;
-      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;
-      }
-    }
     return(
-      <div>
+      <div className="branchTable">
-        <div className="f-wrap-alignCenter mt20">
+        <p className="branchTitle f-wrap-alignCenter f-wrap-between">
-          <SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>
+          <span>{bytesToSize(detail && detail.size)}</span>
-          <span className="flex-1 ml20 font-16">
+          <span>
-            <Link to={``} className="color-blue">iSulad</Link>
+            <a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji font-15 color-grey-6"></i></a>
-            <span className="color-grey-6 subFileName">{fileurl}</span>
+            <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>
+        </p>
-        <RootTable columns = {columns} data={subRootData} title={() => title()}></RootTable>
+        <Editor
+          height="300px"
+          theme={"dark"}
+          value={detail && detail.content}
+          readOnly={readOnly}
+        />
       </div>
     )
   }

public/react/src/forge/Main/CoderRootIndex.js

@@ -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}/>)