Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改了新建页面和编辑文件页面的内容

This commit is contained in:
sylor_huang@126.com 2020-05-26 18:50:17 +08:00
parent a912c996c5
commit d3ba91983d
10 changed files with 345 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/Main/CoderRootDirectory.js
View File

@ -344,7 +344,7 @@ class CoderRootDirectory extends Component{
return(
<Spin spinning={isSpin}>
<div className="main">
<div className="f-wrap-between">
<div className="f-wrap-between mb20">
<div className="f-wrap-alignCenter">
<SelectBranch branch={branch} changeBranch={this.changeBranch} {...this.props} {...this.state}></SelectBranch>

87
src/forge/Main/CoderRootFileDetail.js
View File

@ -2,12 +2,7 @@ import React , { Component } from "react";
import { Popconfirm } from 'antd';
import './list.css';
import axios from 'axios';
import CodeMirror from 'react-codemirror';
require('codemirror/lib/codemirror.css');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');
import Meditor from "../Newfile/m_editor"
function bytesToSize(bytes) {
if (bytes === 0) return '0 B';
@ -76,28 +71,28 @@ class CoderRootFileDetail extends Component{
// 确认修改文件
UpdateFile=()=>{
const { branch , detail}= this.props;
const { projectsId } = this.props.match.params;
const { value } = this.state;
const url =`/repositories/${projectsId}/update_file.json`;
axios.put(url,{
filepath:detail.path,
branch,
content:value,
sha:detail.sha,
}).then(result=>{
if(result){
this.props.showNotification("修改成功!");
this.setState({
readOnly:true
})
}
}).catch(error=>{
console.log(error);
})
}
// // 确认修改文件
// UpdateFile=()=>{
// const { branch , detail}= this.props;
// const { projectsId } = this.props.match.params;
// const { value } = this.state;
// const url =`/repositories/${projectsId}/update_file.json`;
// axios.put(url,{
// filepath:detail.path,
// branch,
// content:value,
// sha:detail.sha,
// }).then(result=>{
// if(result){
// this.props.showNotification("修改成功!");
// this.setState({
// readOnly:true
// })
// }
// }).catch(error=>{
// console.log(error);
// })
// }
updateCode=(value)=> {
this.setState({
value,
@ -108,16 +103,16 @@ class CoderRootFileDetail extends Component{
const { detail , current_user , isManager , isDeveloper } = this.props;
const { readOnly } = this.state;
let flag = current_user && current_user.login && (isManager || isDeveloper);
var options = {
lineNumbers: true,
mode: 'javascript',
readOnly:readOnly?'nocursor':false,
autofocus:readOnly?false:true,
styleActiveLine:true
};
// var options = {
// lineNumbers: true,
// mode: 'javascript',
// readOnly:readOnly?'nocursor':false,
// autofocus:readOnly?false:true,
// styleActiveLine:true
// };
return(
<div>
<div className="branchTable">
<div className="mb20">
<div className="">
<p className="branchTitle f-wrap-alignCenter f-wrap-between">
<span>{bytesToSize(detail && detail.size)}</span>
{
@ -125,13 +120,13 @@ class CoderRootFileDetail extends Component{
<span>
{
readOnly ?
<a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji font-15 color-grey-6"></i></a>
<a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji1 font-15 color-grey-6"></i></a>
:
<React.Fragment>
<button type="button" className="ant-btn ant-btn-sm mr10" onClick={this.CancelEdit}><span>取 消</span>
</button>
<button type="button" className="ant-btn ant-btn-primary ant-btn-sm" onClick={this.UpdateFile}><span>确 定</span>
</button>
{/* <button type="button" className="ant-btn ant-btn-primary ant-btn-sm" onClick={this.UpdateFile}><span>确 定</span>
</button> */}
</React.Fragment>
}
@ -142,14 +137,22 @@ class CoderRootFileDetail extends Component{
}
</p>
</div>
<div className={readOnly ? "content-file" :"content-file edit"}>
<div>
{
detail.direct_download ?
<div className="text-center">
<a href={detail.download_url} className="color-blue font-15">下载原始文件</a>
</div>
:
<CodeMirror ref="editor" value={detail.content} onChange={this.updateCode} options={options} />
<Meditor
{...this.props}
{...this.state}
filepath={`/${detail.path}`}
content={detail.content}
readOnly={readOnly}
editorType="update"
>
</Meditor>
}
</div>
</div>

2
src/forge/Main/DetailTop.js
View File

@ -30,7 +30,7 @@ class DetailTop extends Component {
</Link> */}
<a href="javscript:void(0)" style={{cursor:"default"}}>
<i className="iconfont icon-cangku font-18 mr3"></i>
仓库 <span>{projectDetail && projectDetail.size}</span>kb
仓库 <span className="ml3">{projectDetail && projectDetail.size}</span>
</a>
</p>
)

2
src/forge/Main/list.css
View File

@ -430,7 +430,7 @@
padding:12px 10px;
color: #333;
font-size: 16px;
background: #EEEEEE;
background:rgba(241,248,255,1);
}
.branchUl{
padding:0px 30px;

59
src/forge/Newfile/Index.js
View File

@ -1,10 +1,8 @@
import React , { Component } from "react";
import Editor from "react-monaco-editor";
import UserSubmitComponent from './UserSubmitComponent';
import Meditor from "./m_editor"
import Top from '../Main/DetailTop';
import { Input } from 'antd';
import './index.css';
import { Input } from 'antd';
class Index extends Component{
constructor(props){
@ -15,54 +13,45 @@ class Index extends Component{
}
}
// 命名文件
changeFileName=(e)=>{
this.setState({
filename:e.target.value
})
}
// 取消，弹框询问
CancelAddFile=()=>{
this.props.history.goBack();
}
changeEditor=(editorValue)=>{
this.setState({
editorValue
})
}
// 命名文件
changeFileName=(e)=>{
this.setState({
filename:e.target.value
})
}
// 取消，弹框询问
CancelAddFile=()=>{
this.props.history.goBack();
}
render(){
const { editorValue , filename } = this.state;
const { projectDetail } = this.props;
const { pathname } = this.props.location;
const { filename } = this.state;
const urlroot = pathname.split("newfile")[1];
const file_path = `${urlroot}/${filename}`
const { projectDetail } = this.props;
return(
<React.Fragment>
<Top {...this.props} {...this.state}/>
<div className="main">
<p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">新建文件</p>
<div>
<div className="f-wrap-alignCenter mb20">
<div className="setInputAddon">
<Input addonBefore={`/${projectDetail && projectDetail.identifier}${urlroot}/`} value={filename} onChange={this.changeFileName} placeholder="命名文件..."/>
</div>
<a onClick={this.CancelAddFile} className="color-blue">取消</a>
</div>
<div className="branchTable">
<Editor
height="320px"
theme={"vs-grey"}
value={editorValue}
onChange={this.changeEditor}
/>
</div>
<UserSubmitComponent
<Meditor
{...this.props}
{...this.state}
filepath={`${urlroot}/${filename}`}
content={editorValue}
></UserSubmitComponent>
filepath={`${file_path}`}
content={""}
readOnly={false}
editorType="new"
>
</Meditor>
</div>
</div>
</React.Fragment>
)

215
src/forge/Newfile/UserSubmitComponent.js
View File

@ -1,115 +1,204 @@
import React,{Component} from 'react';
import { getImageUrl } from 'educoder';
import { Form , Input , Button , Radio , Icon } from 'antd';
import React, { Component } from "react";
import { getImageUrl } from "educoder";
import { Form, Input, Button, Radio, Icon } from "antd";
import { Link } from "react-router-dom";
import "./index.css";
import './index.css';
import axios from 'axios';
import axios from "axios";
const TextArea = Input.TextArea;
class UserSubmitComponent extends Component{
constructor(props){
class UserSubmitComponent extends Component {
constructor(props) {
super(props);
this.state={
submitType:"0"
}
this.state = {
submitType: "0"
};
}
changeSubmittype=(e)=>{
changeSubmittype = (e) => {
this.setState({
submitType:e.target.value
})
}
submitType: e.target.value,
});
};
// 提交变更
subMitFrom=()=>{
const { filepath , content } = this.props;
const { branch , projectsId } = this.props.match.params;
subMitFrom = () => {
const { 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){
if (!err) {
const url = `/repositories/${projectsId}/create_file.json`;
axios.post(url,{
filepath:path,
branch:branch,
new_branch:submitType==="1" ? values.branchname:undefined,
content,
message:values.desc
}).then((result)=>{
if(result && result.data.name){
const url = values.branchname ? `/projects/${projectsId}/coders?branch=${values.branchname}` : `/projects/${projectsId}/coders`;
this.props.history.push(url);
axios
.post(url, {
filepath: path,
branch: branch,
new_branch: submitType === "1" ? values.branchname : undefined,
content,
message: values.desc,
})
.then((result) => {
if (result && result.data.name) {
const url = values.branchname
? `/projects/${projectsId}/coders?branch=${values.branchname}`
: `/projects/${projectsId}/coders`;
this.props.history.push(url);
}
})
.catch((error) => {
console.log(error);
});
}
});
};
// 确认修改文件
UpdateFile=()=>{
const { branch , detail,content,filepath}= this.props;
const { projectsId } = this.props.match.params;
const { submitType } = this.state;
const url =`/repositories/${projectsId}/update_file.json`;
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
axios.put(url,{
filepath:detail.path,
branch: branch,
new_branch: submitType === "1" ? values.branchname : undefined,
content:content,
sha:detail.sha,
}).then(result=>{
if(result){
const url = `/projects/${projectsId}/coders?url=${detail.path.split("/")[0]}`;
this.props.history.push(url);
this.props.showNotification("修改成功!");
}
}).catch(error=>{
console.log(error);
})
}
})
}
render(){
render() {
const { submitType } = this.state;
const { getFieldDecorator } = this.props.form;
const { branch , projectsId } = this.props.match.params;
const { branch, projectsId } = this.props.match.params;
const { current_user , filepath , projectDetail } = this.props;
const { current_user, filepath, projectDetail } = this.props;
const {editor_type} = this.props
const changeSubmitBranch = ()=>{
if(submitType==="1"){
return(
const changeSubmitBranch = () => {
if (submitType === "1") {
return (
<div className="mt15">
<Form.Item style={{paddingLeft:"24px"}}>
{getFieldDecorator('branchname', {
rules: [{
required: true, message: '请输入分支名称'
}],
<Form.Item style={{ paddingLeft: "24px" }}>
{getFieldDecorator("branchname", {
rules: [
{
required: true,
message: "请输入分支名称",
},
],
})(
<Input placeholder={`请输入分支名称`} style={{width:"220px"}}/>
<Input
placeholder={`请输入分支名称`}
style={{ width: "220px" }}
/>
)}
</Form.Item>
</div>
)
);
}
}
return(
};
return (
<div>
<span className="df mt20" style={{alignItems:"center"}}>
<img src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" className="screwImg"/>
<span className="color-grey-3">用户名：<span className="color-grey-8">{current_user && current_user.username}</span></span>
<span className="df mt20" style={{ alignItems: "center" }}>
<Link
to={`/users/${current_user && current_user.login}/projects`}
className="show-user-link"
>
<img
src={getImageUrl(
`images/${current_user && current_user.image_url}`
)}
alt=""
className="screwImg"
/>
<span className="color-grey-3">
{current_user && current_user.username}：
</span>
</Link>
<span className="color-grey-8">提交变更</span>
</span>
<div className="userScrew">
<div className="screwPanel">
<Form>
<Form.Item>
{getFieldDecorator('path', {
<Form.Item>
{getFieldDecorator("path", {
rules: [],
})(
<Input placeholder={`/${projectDetail && projectDetail.identifier}${filepath}`} readOnly/>
<Input
placeholder={`/${
projectDetail && projectDetail.identifier
}${filepath}`}
readOnly
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('desc', {
rules: [{
required:true,message:'请输入合并请求的描述内容'
}],
{getFieldDecorator("desc", {
rules: [
{
required: true,
message: "请输入合并请求的描述内容",
},
],
})(
<TextArea placeholder={`请输入合并请求的描述,(必填)`} authSize={{minRows:3,maxRows:5}}/>
<TextArea
placeholder={`请输入合并请求的描述,(必填)`}
authSize={{ minRows: 3, maxRows: 5 }}
/>
)}
</Form.Item>
<Radio.Group value={submitType} onChange={this.changeSubmittype}>
<Radio value="0" className="mb10"><i className="iconfont icon-banbenku font-16 mr5"></i>直接提交至<span className="color-orange">{branch}</span>分支</Radio>
<Radio value="1"><Icon type="pull-request" className="mr5" />为此提交创建一个<span className="font-bd">新的分支</span>并发起合并请求</Radio>
<Radio value="0" className="mb10">
<i className="iconfont icon-banbenku font-16 mr5"></i>
直接提交至<span className="color-orange">{branch}</span>分支
</Radio>
<Radio value="1">
<Icon type="pull-request" className="mr5" />
为此提交创建一个<span className="font-bd">新的分支</span>
并发起合并请求
</Radio>
</Radio.Group>
{changeSubmitBranch()}
</Form>
</div>
</div>
<Button type="primary" onClick={this.subMitFrom} className="mr20">提交变更</Button>
<Button type="primary grey" onClick={()=>{this.props.history.push(`/projects/${projectsId}/coders`)}} className="mr20">取消</Button>
<div className="mt50 text-center">
<Button type="primary" onClick={editor_type==="new" ? this.subMitFrom : this.UpdateFile} className="mr30">
提交变更
</Button>
<Button
type="primary grey"
onClick={() => {
this.props.history.push(`/projects/${projectsId}/coders`);
}}
className="mr20"
>
取消
</Button>
</div>
</div>
)
);
}
}
const WrappedUserSubmitForm = Form.create({ name: 'UserSubmitForm' })(UserSubmitComponent);
export default WrappedUserSubmitForm;
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
UserSubmitComponent
);
export default WrappedUserSubmitForm;

8
src/forge/Newfile/editor.css Normal file
View File

@ -0,0 +1,8 @@
.monaco-editor .view-overlays .current-line{
border: none !important;
background-color: rgba(48,232,132,0.15);
}
.monaco-editor .margin-view-overlays .current-line{
background-color: rgba(48,232,132,0.15);
}
.branchTable .margin-view-overlays{width: 35px !important;}

60
src/forge/Newfile/m_editor.js Normal file
View File

@ -0,0 +1,60 @@
import React , { Component } from "react";
import Editor from "react-monaco-editor";
import UserSubmitComponent from './UserSubmitComponent';
import './index.css';
import "./editor.css"
class m_editor extends Component{
constructor(props){
super(props);
this.state={
editorValue:this.props.content,
}
}
changeEditor=(editorValue)=>{
this.setState({
editorValue
})
}
render(){
const { editorValue } = this.state;
const { readOnly, editorType } = this.props;
const editor_options = {
lineNumbers: "on",
selectOnLineNumbers: true,
lineHeight: 24,
revealHorizontalRightPadding: 5,
lineNumbersMinChars: 2,
readOnly: readOnly,
cursorStyle: readOnly ? "underline-thin" : "line"
}
return(
<React.Fragment>
<div>
<div className="branchTable">
<Editor
height="320px"
theme={"vs-grey"}
value={editorValue}
options={editor_options}
onChange={this.changeEditor}
/>
</div>
{!readOnly && <UserSubmitComponent
{...this.props}
{...this.state}
filepath={`${this.props.filepath}`}
content={editorValue}
editor_type={editorType}
></UserSubmitComponent>
}
</div>
</React.Fragment>
)
}
}
export default m_editor;

3
src/forge/Order/Detail.js
View File

@ -85,7 +85,8 @@ class Detail extends Component {
})
if (!quillValue) {
this.setState({
quillFlag: true
quillFlag: true,
journal_spin: false
})
return;
}

58
src/forge/Order/order.js
View File

@ -1,7 +1,8 @@
import React, { Component } from "react";
import { Input, Dropdown, Menu, Icon, Pagination, Spin } from "antd";
import { Input, Dropdown, Menu, Icon, Pagination, Spin, Button} from "antd";
import "./order.css";
// const { RangePicker } = DatePicker;
import NoneData from "../Nodata";
import OrderItem from "./OrderItem";
@ -59,6 +60,8 @@ class order extends Component {
order_name: undefined,
order_type: undefined,
search: undefined,
start_date:undefined,
due_date: undefined,
page: 1,
limit: 15,
},
@ -155,13 +158,20 @@ class order extends Component {
this.state.select_params.page = 1;
this.state[`${id}s`] = name;
if (current_user) {
if ( this.state.select_params.author_id && parseInt(this.state.select_params.author_id) === current_user.user_id) {
if (
this.state.select_params.author_id &&
parseInt(this.state.select_params.author_id) === current_user.user_id
) {
this.state.author_id = current_user.user_id;
} else {
this.state.author_id = undefined;
}
if (this.state.select_params.assigned_to_id && parseInt(this.state.select_params.assigned_to_id) === current_user.user_id ) {
if (
this.state.select_params.assigned_to_id &&
parseInt(this.state.select_params.assigned_to_id) ===
current_user.user_id
) {
this.state.assigned_to_id = current_user.user_id;
} else {
this.state.assigned_to_id = undefined;
@ -367,8 +377,42 @@ class order extends Component {
);
return (
<div className="main">
<div className="topWrapper" style={{ borderBottom: "none", padding: "0" }}>
<div>
<span className="mr30">
<span className="mr8 color-grey">所有:</span>
<Button size="small" type={status_type==="0" ? "primary" : ""} ghost={status_type==="0" ? true : false} onClick={() => this.openorder("0")}>{data && data.all_count}</Button>
</span>
<span className="mr30">
<span className="mr8 color-grey">开启中:</span>
<Button size="small" type={status_type==="1" ? "primary" : ""} ghost={status_type==="1" ? true : false} onClick={() => this.openorder("1")}>{data && data.open_count}</Button>
</span>
<span>
<span className="mr8 color-grey">已关闭:</span>
<Button size="small" type={status_type==="2" ? "primary" : ""} ghost={status_type==="2" ? true : false} onClick={() => this.openorder("2")}>{data && data.close_count}</Button>
</span>
</div>
<Button type="primary" onClick={() => this.islogin()} ghost><Icon type="plus" size="16"></Icon>创建任务</Button>
</div>
<div className="topWrapper" style={{ borderBottom: "none" }}>
<p className="topWrapper_type">
<div className="target-detail-search">
<Search
placeholder="搜索"
enterButton="搜索"
onSearch={this.searchFunc}
style={{ width: 350 }}
/>
</div>
{/* <DatePicker showTime onChange={onChange} onOk={onOk} /> */}
{/* <br /> */}
{/* <RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
onChange={onChange}
onOk={onOk}
/> */}
{/* <p className="topWrapper_type">
<li
className={status_type === "1" ? "active" : ""}
onClick={() => this.openorder("1")}
@ -381,9 +425,9 @@ class order extends Component {
>
{data && data.close_count}个已关闭
</li>
</p>
</p> */}
<div className="topWrapper_select">
{/* <div className="topWrapper_select">
<div className="target-detail-search">
<Search
placeholder="搜索"
@ -395,7 +439,7 @@ class order extends Component {
<a className="topWrapper_btn ml10" onClick={() => this.islogin()}>
创建任务
</a>
</div>
</div> */}
</div>
<Spin spinning={isSpin}>
<div className="f-wrap-between mb20">