TPM添加新文件

public/react/src/App.js

@@ -372,7 +372,6 @@ class App extends Component {
 							  path="/interesse" component={Interestpage}
 
 							/>
-
 							<Route path="/shixuns/new" component={Newshixuns}>
 							</Route>
 

public/react/src/modules/courses/members/studentsList.js

@@ -595,23 +595,25 @@ class studentsList extends Component{
               { isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.deleteDir()}>删除分班</WordsBtn> }
               { isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.renameDir()}>分班重命名</WordsBtn> }
               <style>{`
-                        .drop_down_menu li a {
+                .drop_down_menu li a {
-                            padding: 0px;
+                    padding: 0px;
-                            font-size: 14px;
+                    font-size: 14px;
-                        }
+                }
-                        .drop_down_menu {
+                .drop_down_menu {
-                            width: 93px;
+                    width: 93px;
-                        }
+                }
-                        .drop_down_menu li {
+                .drop_down_menu li {
-                            overflow: visible;
+                    overflow: visible;
-                            width: 93px;
+                    width:100%;
-                        }
+                    box-sizing:boder-box;
-                        .drop_down_menu, .drop_down_normal {
+                    float:unset;
-                            padding-top: 10px;
+                }
-                            padding-bottom: 8px;
+                .drop_down_menu, .drop_down_normal {
-                        }
+                    padding-top: 10px;
-                       
+                    padding-bottom: 8px;
-                        `}</style>
+                }
+                
+                `}</style>
               { isAdmin &&
               <li className="li_line drop_down fr color-blue font-16">
                 导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>

public/react/src/modules/tpm/TPMBanner.js

@@ -581,7 +581,7 @@ class TPMBanner extends Component {
       	return (
 
                 shixunsDetails===undefined?"":
-<div>
+<div className="shixunDetail">
     <div className="shixunDetail_top">
 
 			{AccountProfiletype===true?<AccountProfile

public/react/src/modules/tpm/TPMIndex.js

@@ -28,6 +28,8 @@ import TPMRanking_listComponent from './TPMRanking_listContainer'
 import TPMCollaboratorsComponent from './TPMCollaboratorsContainer'
 
 import '../page/tpiPage.css'
+
+const $ = window.$
 //任务
 // const TPMChallengeComponent = Loadable({
 //   loader: () => import('./TPMChallengeContainer'),
@@ -116,6 +118,13 @@ const TPMUpdatepropaede = Loadable({
 })
 
 
+
+// 版本库添加文件
+const AddFile = Loadable({
+	loader: () => import('./shixunchild/Repository/RepositoryAddFile'),
+	loading: Loading,
+})
+
 const interceptorUrlArray = ['repository.json', 'commits.json', 'propaedeutics.json'
     , 'challenges.json', 'discusses.json', 'ranking_list.json', 'collaborators.json']
 const cacheInterceptorUrlMap = {}
@@ -258,15 +267,18 @@ class TPMIndex extends Component {
     // }
 
   	render() {
-
+        let url = window.location.href;
+        let flag = url.indexOf("add_file")>-1;
         return (
             <div className="newMain clearfix">
-
+                {
-                <TPMBanner
+                    !flag && 
-                    {...this.props}
+                    <TPMBanner
-                    {...this.state}
+                        {...this.props}
-                ></TPMBanner>
+                        {...this.state}
-
+                    ></TPMBanner>
+                }
+                
                   <Switch {...this.props}>
                   
                   <Route path="/shixuns/:shixunId/repository/:repoId/commits" render={
@@ -279,10 +291,15 @@ class TPMIndex extends Component {
                         />)
                     }></Route>
 
-                      <Route path="/shixuns/:shixunId/repository" render={
+                    <Route path="/shixuns/:shixunId/repository/add_file" render={
-                          (props) => (<TPMRepositoryComponent {...this.props} {...this.state} {...props}
+                            (props) => (<AddFile {...this.props} {...this.state} {...props}
-                          />)
+                            />)
-                      }></Route>
+                    }></Route>
+
+                    <Route path="/shixuns/:shixunId/repository" render={
+                        (props) => (<TPMRepositoryComponent {...this.props} {...this.state} {...props}
+                        />)
+                    }></Route>
                     {/* <Route exact path="/shixuns/:shixunId/propaedeutics" component={TPMPropaedeuticsComponent}></Route> */}
 
                     <Route exact path="/shixuns/:shixunId/propaedeutics" render={

public/react/src/modules/tpm/shixunchild/Repository/Repository.js

@@ -13,7 +13,9 @@ import axios from 'axios';
 import { trace, trace_collapse ,getImageUrl, toPath} from "educoder";
 
 import RepositoryDirectories from './RepositoryDirectories'
-import RepositoryAddFile from './RepositoryAddFile'
+
+import { ActionBtn , NoneData } from 'educoder'
+
 const $ = window.$;
 
 // 点击按钮复制功能
@@ -47,8 +49,7 @@ class Repository extends Component {
     if(this.props.author!=undefined){
       userauthority=this.props.author.login===""||this.props.author.user_id===""||this.props.author.login===null||this.props.author.user_id===null;
     }
-
+    
-    // console.log(commits)
     return (
       <React.Fragment>
         {/* jfinalshop/WebRoot */}
@@ -83,7 +84,12 @@ class Repository extends Component {
 
                     <a href="/forums/2784" target="_blank"
                        className=" guideBtn" >Git使用指南</a>
-                    {/* <RepositoryAddFile {...this.props} {...this.state}></RepositoryAddFile> */}
+                    {
+                      this.props.current_user && this.props.current_user.admin ==true ?
+                      <ActionBtn style="orangeLine" className="ml20" to={`/shixuns/${match.params.shixunId}/repository/add_file`}>+添加文件</ActionBtn>:""
+                    }
+                    
+                    
                     <div className="fr font-12 color-grey-9 pr">
                       <label className="fl mt2">网址克隆：</label>
                       <input type="text" id="copy_rep_content" className="fl url-input mt2"
@@ -162,12 +168,7 @@ class Repository extends Component {
               </style>
               {/* 用户、最近提交时间 */}
               {
-                trees === undefined || trees === null ? <div className="alltask">
+                trees === undefined || trees === null ? <NoneData></NoneData>:
-                    <div className="edu-tab-con-box clearfix edu-txt-center">
-                      <img className="edu-nodata-img mb20" src={getImageUrl("images/educoder/nodata.png")}/>
-                      <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
-                    </div>
-                  </div> :
                   <div>
                     <div className="edu-back-skyblue padding10-20 clearfix">
                       <img alt={author.name} className="radius fl mr10"

public/react/src/modules/tpm/shixunchild/Repository/RepositoryAddFile.js

@@ -1,49 +1,194 @@
 import React, { Component } from 'react';
 import { ActionBtn } from 'educoder'
 
-import { Form , Modal } from 'antd'
+import { Form , Modal , Input , Breadcrumb , Button } from 'antd'
+
+import { Link } from 'react-router-dom'
+
+import axios from 'axios'
+
+/**
+        ---------------------------- START
+ */
+function getModeByMirrorName(mirror_name) {
+  let mode = 'javascript'
+  if (mirror_name && mirror_name.length) {
+      for (let i = 0; i < mirror_name.length; i++) {
+          let modeVal = mirrorNameModeMap[mirror_name[i]];
+          if (modeVal) {
+              mode = modeVal;
+              break;
+          }
+      }
+  }
+  return mode;
+}
+const _extraKeys = {"Alt-/": "autocomplete"};
+function createCMOptions(mirror_name) {
+  let mode = getModeByMirrorName(mirror_name)
+
+  let cmOptions = {
+      lineNumbers: true,
+      mode: mode,
+      theme: "railscasts",
+      indentUnit:4,
+      matchBrackets: true,
+      autoRefresh: true,
+      smartIndent: true,//智能换行
+      extraKeys: _extraKeys,
+      autofocus: true,
+      styleActiveLine: true,
+      lint: true,
+      gutters: ["CodeMirror-linenumbers", "breakpoints", "CodeMirror-lint-markers"]
+  };
+  return cmOptions;
+}
+
+const mirrorNameModeMap = {
+  'JFinal': 'text/x-java',
+  'Java': 'text/x-java',
+  'Kotlin': 'text/x-kotlin',
+  'C/C++' : 'text/x-c++src',
+  'MachineLearning': {
+              name: "python",
+              version: 3,
+              singleLineStringErrors: false
+  },
+  'Python2.7': {
+              name: "python",
+              version: 3,
+              singleLineStringErrors: false
+  },
+  'Python3.6': {
+              name: "python",
+              version: 3,
+              singleLineStringErrors: false
+  },
+}
+/**
+      ---------------------------- END
+*/
 
 class RepositoryAddFile extends Component {
   constructor(props) {
     super(props);
-    this.state={
-      visible:false
-    }
   }
 
-  addFile = () =>{
+  componentDidMount(){
-    this.setState({
+    let cmOptions = createCMOptions(this.props.mirror_name)
-      visible:true
+    const extend_editor = window.CodeMirror.fromTextArea(window.$('#codemirror-file-edit')[0]
-    })
+        , cmOptions);
+
+    // tpi没setValue也可以
+    extend_editor.setValue('')
+    extend_editor.refresh();
+
+    // 拖拽也需要用 ： window.editor_CodeMirror.refresh()
+    window.editor_tempCodeMirror = extend_editor;
+    this.extend_editor = extend_editor;
   }
-  cancelAdd = () =>{
+  
-    this.setState({
+  checkPath= (rule, value, callback) =>{
-      visible:false
+    if (value.indexOf("/") > -1 && value.length==1 ) {
+      callback('请输入正确的文件路径');
+    }else{
+      callback();
+    }
+  }
+
+  handleSubmit = () =>{
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if(!err){
+        let shixunId = this.props.match.params.shixunId;
+        let url = `/shixuns/${shixunId}/add_file.json`
+        axios.post(url,{
+          path:values.path,
+          message:values.message,
+          content:this.extend_editor.getValue()
+        }).then((result)=>{
+          if(result){
+            this.props.history.push(`${result.data.url}`)
+          }
+        }).catch((error)=>{
+          console.log(error);
+        })
+      }
     })
   }
   render(){
-    let { visible } = this.state
+    const {getFieldDecorator} = this.props.form;
+    let { shixunId } = this.props.match.params;
     return(
-      <React.Fragment>
+      <div className="educontent">
-        <ActionBtn style="orangeLine" className="ml20" onClick={this.addFile}>+添加文件</ActionBtn>
+        <style>
-        <Modal
+          {`
-          className={"RepositioryModal"}
+            .formStyle .ant-form-item{
-          title={'添加文件'}
+              margin-bottom:10px!important;
-          visible={visible}
+            }
-          closable={false}
+            .formStyle .ant-col.ant-form-item-label{
-          footer={null}
+              margin-left:-10px;
-          destroyOnClose={true}
+              line-height:30px;
-          width="550px"
+              margin-bottom:10px;
-        >
+            }
-          <div className="task-popup-content">
+            .breadcrumb .ant-breadcrumb-separator{
+              margin:0px 2px;
+            }
+            /*.filecode .CodeMirror.cm-s-railscasts{
+              border:1px solid #E5E5E5;
+            }
+            .filecode .CodeMirror.cm-s-railscasts .CodeMirror-sizer,.filecode .CodeMirror-gutters,.filecode .CodeMirror-scroll{
+              background:#fff;
+            }
+            .filecode .CodeMirror-linenumber{
+              text-align:center
+            }*/
+          `}
+        </style>
+        <p className="mt10 mb10">
+          <Breadcrumb separator='>' className="breadcrumb">
+            <Breadcrumb.Item href='/shixuns'>实训项目</Breadcrumb.Item>
+            <Breadcrumb.Item href={`/shixuns/${shixunId}/repository`}>版本库</Breadcrumb.Item>
+            <Breadcrumb.Item>添加新文件</Breadcrumb.Item>
+          </Breadcrumb>
+        </p>
+        <Form onSubmit={this.handleSubmit} className="formStyle">
+          <div className="edu-back-white padding20-30 mb10">
+            <Form.Item label="文件名">
+              {getFieldDecorator('path', {
+                rules: [
+                  {required: true, message: "文件名不能为空"},
+                  {
+                    validator:this.checkPath
+                  }]
+              })(
+                <Input placeholder="输入文件路径名，如：src/HelloWord.java" className="winput-300-35 fl"/>
+              )}
+            </Form.Item>
+          </div>
+          <div className="edu-back-white padding30">
+            <p className="ant-form-item-label">
+              <label>内容</label>
+            </p>
+
+            <div className="mt10 mb25 repoCMWrapper filecode">
+              <textarea className="" id="codemirror-file-edit" style={{display:'none'}} name="content"></textarea>
+            </div>
 
+            <Form.Item label="提交信息">
+              {getFieldDecorator('message', {
+                rules: [{required: true, message: "请输入提交信息"}],
+              })(
+                <textarea className="winput-100-130 fl"></textarea>
+              )}
+            </Form.Item>
           </div>
-          <div className="clearfix mt30 edu-txt-center mb10">
+          <div className="clearfix mt30 edu-txt-right mb30">
-            <a  className="task-btn color-white mr30" onClick={this.cancelAdd}>取消</a>
+            <Button type="primary" className="defalutSubmitbtn fr ml20" onClick={this.handleSubmit}>提交</Button>
-            <a className="task-btn task-btn-orange">提交</a>
+            <Link className="defalutCancelbtn fr" to={`/shixuns/${shixunId}/repository`}>取消</Link>
           </div>
-        </Modal>
+        </Form>
-      </React.Fragment>
+        
+      </div>
     )
   }
 }