新建文件

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

@@ -1,7 +1,8 @@
 import React , { Component } from 'react';
 import { Menu } from 'antd';
 import { getImageUrl } from 'educoder';
-import {Link} from 'react-router-dom';
+import { Router , Route , Link } from 'react-router-dom';
+
 
 import './list.css';
 
@@ -178,7 +179,7 @@ class CoderRootDirectory extends Component{
             {
               branchLastCommit.author ?
                 <React.Fragment>
-                  <img src={getImageUrl(`images/${branchLastCommit.author.image_url}`)} alt=""/>
+                  <img src={getImageUrl(`images/${branchLastCommit.author.image_url}`)} className="radius mr10" width="32" height="32" alt=""/>
                   <span className="mr15">{branchLastCommit.author.login}</span>
                 </React.Fragment>
               :""
@@ -203,6 +204,8 @@ class CoderRootDirectory extends Component{
         )
       }
     } 
+
+    const urlRoot = filePath && filePath.length > 0 ? `/${filePath[filePath.length - 1].path}` : "";
     return(
       <div>
         <div className="f-wrap-between mt20">
@@ -239,7 +242,7 @@ class CoderRootDirectory extends Component{
             {
               subFileType !== "file" &&
               <p className="addFile">
-                <Link to={`/projects/${projectsId}/coder/file/new`} >新建文件</Link>
+                <Link to={`/projects/${projectsId}/coder/${branch}/newfile${urlRoot}`} >新建文件</Link>
                 <Link to={``}>上传文件</Link>
               </p>
             }

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

@@ -74,7 +74,12 @@ class Detail extends Component{
         </div>
 
         <Switch {...this.props}>
-          <Route path="/projects/:projectsId/coder/file/new"
+          <Route path="/projects/:projectsId/coder/:branch/newfile/:path"
+            render={
+              (props) => (<FileNew {...this.props} {...props} {...this.state}/>)
+            }
+          ></Route>
+          <Route path="/projects/:projectsId/coder/:branch/newfile"
             render={
               (props) => (<FileNew {...this.props} {...props} {...this.state}/>)
             }

public/react/src/forge/Newfile/Index.js

@@ -1,6 +1,7 @@
 import React , { Component } from "react";
 import Editor from "react-monaco-editor";
 
+import UserSubmitComponent from './UserSubmitComponent';
 import { Input } from 'antd';
 import './index.css';
 
@@ -8,9 +9,17 @@ class Index extends Component{
   constructor(props){
     super(props);
     this.state={
-      editorValue:""
+      editorValue:"",
+      filename:""
     }
   }
+
+  // 命名文件
+  changeFileName=(e)=>{
+    this.setState({
+      filename:e.target.value
+    })
+  }
   // 取消，弹框询问
   CancelAddFile=()=>{
 
@@ -23,13 +32,16 @@ class Index extends Component{
   }
 
   render(){
-    const { editorValue } = this.state;
+    const { editorValue , filename } = this.state;
     const { projectDetail } = this.props;
+
+    const { pathname } = this.props.location;
+    const urlroot = pathname.split("newfile")[1];
     return(
       <div className="main">
         <div className="f-wrap-alignCenter">
           <div className="setInputAddon">
-            <Input addonBefore={`/${projectDetail && projectDetail.identifier}/`} placeholder="命名文件..."/>
+            <Input addonBefore={`/${projectDetail && projectDetail.identifier}${urlroot}/`} value={filename} onChange={this.changeFileName} placeholder="命名文件..."/>
           </div>
           <a onClick={this.CancelAddFile} className="color-blue">取消</a>
         </div>
@@ -42,9 +54,12 @@ class Index extends Component{
             onChange={this.changeEditor}
           />
         </div>
-        <div>
+        <UserSubmitComponent 
-
+          {...this.props} 
-        </div>
+          {...this.state} 
+          filepath={`${urlroot}/${filename}`}
+          content={editorValue}
+        ></UserSubmitComponent>
       </div>
     )
   }

public/react/src/forge/Newfile/UserSubmitComponent.js

@@ -0,0 +1,106 @@
+import React,{Component} from 'react';
+import { getImageUrl } from 'educoder';
+import { Form , Input , Button , Radio , Icon  } from 'antd';
+
+import './index.css';
+
+import axios from 'axios';
+const TextArea = Input.TextArea;
+class UserSubmitComponent extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      submitType:"0"
+    }
+  }
+
+  changeSubmittype=(e)=>{
+    this.setState({
+      submitType:e.target.value
+    })
+  }
+
+  // 提交变更
+  subMitFrom=()=>{
+    const { current_user , filepath , content } = this.props;
+    const { branch , projectsId } = this.props.match.params;
+    const { submitType } = this.state;
+    let path = filepath.substr(1);
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if(!err){
+        const url = `/${current_user && current_user.login}/${projectsId}/contents.json`;
+        axios.post(url,{
+          filepath:path,
+          branch:submitType==="0" ? branch : undefined,
+          new_branch:submitType==="1" ? values.branchname:undefined,
+          content,
+          message:values.desc
+        }).then((result)=>{
+          if(result && result.data.name){
+            this.props.history.push(`/projects/${projectsId}/coder`);
+          }
+        }).catch(error=>{
+          console.log(error);
+        })
+      }
+    })
+  }
+  render(){ 
+    const { submitType } = this.state;
+    const { getFieldDecorator } = this.props.form;
+
+    const { branch } = this.props.match.params;
+
+    const { current_user , filepath , projectDetail } = this.props;
+
+    const changeSubmitBranch = ()=>{
+      if(submitType==="1"){
+        return(
+          <Form.Item style={{paddingLeft:"24px"}}> 
+            {getFieldDecorator('branchname', {
+              rules: [{
+                required: true, message: '请输入分支名称'
+              }],
+            })(
+              <Input placeholder={`请输入分支名称`}/>
+            )}
+          </Form.Item>
+        )
+      }
+    }
+    return(
+      <div className="userScrew">
+        <img src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" className="screwImg"/>
+        <div className="screwPanel">
+          <Form>
+            <Form.Item> 
+            {getFieldDecorator('path', {
+                rules: [],
+              })(
+                <Input placeholder={`/${projectDetail && projectDetail.identifier}${filepath}`} readOnly/>
+              )}
+            </Form.Item>
+            <Form.Item> 
+            {getFieldDecorator('desc', {
+                rules: [],
+              })(
+                <TextArea placeholder={`添加一个可扩展的描述`} authSize={{minRows:3,maxRows:5}}/>
+              )}
+            </Form.Item>
+            <Radio.Group value={submitType} onChange={this.changeSubmittype}>
+              <Radio value="0"><i className="iconfont icon-banbenku font-16 mr5"></i>直接提交至<span>{branch}</span>分支</Radio>
+              <Radio value="1"><Icon type="pull-request" className="mr5" />为此提交创建一个<span className="font-bd">新的分支</span>并发起合并请求</Radio>
+            </Radio.Group>
+            {changeSubmitBranch()}
+
+            <Form.Item className="mt10" style={{marginBottom:"0px"}}>
+              <Button type="primary" onClick={this.subMitFrom} className="mr20">提交变更</Button>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    )
+  }
+}
+const WrappedUserSubmitForm = Form.create({ name: 'UserSubmitForm' })(UserSubmitComponent);
+export default WrappedUserSubmitForm;

public/react/src/forge/Newfile/index.css

@@ -9,6 +9,27 @@
   border-right: none!important;
 }
 
+.userScrew{
+  margin:20px 0px;
+  border:1px solid #f4f4f4;
+  border-radius: 5px;
+  display: flex;
+  padding:10px;
+}
+.screwImg{
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  margin-right:10px;
+}
+.screwPanel{
+  flex: 1;
+}
+
+.screwPanel .ant-radio-wrapper{
+  display: block;
+}
+
 @media screen and (max-width: 400px){
   .setInputAddon{
     width: 100%;