forgeplus-react/src/forge/New/Index.js

778 lines
29 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Input , Form , Select , Checkbox , Button , Spin , AutoComplete, Modal } from 'antd';
import { Base64 } from 'js-base64';
import { AlignCenter } from '../Component/layout';
import { withTranslation } from 'react-i18next';
import '../css/index.scss';
import './new.scss'
import axios from 'axios';
const Option = Select.Option;
class Index extends Component {
constructor(props) {
super(props);
this.state = {
preType: "0",
languageValue: "0",
gitignoreType: "0",
LicensesType: "0",
mirrorCheck:false,
CategoryList: undefined,
LanguageList: undefined,
GitignoreList: undefined,
LicensesList: undefined,
OwnerList: undefined,
isSpin: false,
project_language_id: undefined,
project_category_id: undefined,
license_id: undefined,
ignore_id: undefined,
owners_id:undefined,
owners_name:undefined,
project_language_list: undefined,
project_category_list: undefined,
license_list: undefined,
ignore_list: undefined,
owners_list:undefined,
project_language_name: undefined,
project_category_name: undefined,
license_name: undefined,
ignore_name: undefined,
descNum:0,
categoreFlag:false,
languageFlag:false,
ignoreFlag:false,
licenseFlag:false,
// 区块链确权
tokenConTri: false,
gitHubUrl:false,
checkToken:undefined,
ownerDisabled:false
}
}
componentDidMount = () => {
this.updateDocumentTitle();
// 获取拥有者列表
this.getOwner();
//判断是否为删除新建项目失败后返回,并执行对应逻辑
this.isDeleteProjectBack();
}
componentDidUpdate=(prevPros)=>{
this.updateDocumentTitle();
if(prevPros && this.props && !this.props.checkIfLogin()){
this.props.history.push("/403")
return
}
}
// 更新网页标题
updateDocumentTitle(){
const { projectsType } = this.props.match.params;
document.title = `${projectsType && projectsType === "mirror" ? "导入" : "新建"}项目`;
}
getOwner=()=>{
const { OIdentifier } = this.props.match.params;
const { user_id } = this.props && this.props.current_user;
const url = `/owners.json`;
axios.get(url).then(result=>{
if(result && result.data){
let owner = result.data.owners;
this.setState({
OwnerList: owner,
})
if(OIdentifier){
owner = owner.filter(item=>item.login === OIdentifier);
this.setState({
ownerDisabled:owner[0].id ? true :false
})
}else if(user_id){
owner = owner.filter(item=>item.id === user_id);
this.setState({
ownerDisabled:false
})
}
this.props.form.setFieldsValue({
user_id:owner && owner[0].id
})
owner && this.setState({
owners_id:owner[0].id,
owners_name:owner[0].name,
})
this.setOptionsList(owner, 'owners');
}
}).catch(error=>{})
}
getCategory = () => {
const url = `/project_categories.json`
axios.get(url).then((result) => {
if (result) {
this.setOptionsList(result.data.project_categories, 'project_category');
this.setState({
CategoryList: result.data.project_categories
})
}
}).catch((error) => { })
}
getLanguage = () => {
const url = `/project_languages.json`
axios.get(url).then((result) => {
if (result) {
this.setOptionsList(result.data.project_languages, 'project_language')
this.setState({
LanguageList: result.data.project_languages
})
}
}).catch((error) => { })
}
getGitignore = () => {
const url = `/ignores.json`
axios.get(url).then((result) => {
if (result) {
this.setOptionsList(result.data.ignores, 'ignore');
this.setState({
GitignoreList: result.data.ignores
})
}
}).catch((error) => { })
}
getLicenses = () => {
const url = `/licenses.json`
axios.get(url).then((result) => {
if (result) {
this.setOptionsList(result.data.licenses, 'license');
this.setState({
LicensesList: result.data.licenses
})
}
}).catch((error) => { })
}
isDeleteProjectBack = () => {
let mirror_status = this.props.history.location.mirror_status;
if (mirror_status === 2 && sessionStorage.newProjectValue) {
Modal.warning({
title: '警告',
content: '项目导入失败!请按操作规范重新导入项目!',
});
let newProjectValue = JSON.parse(sessionStorage.newProjectValue);
if (newProjectValue) {
this.setState({
project_language_id: newProjectValue.project_language_id,
project_category_id: newProjectValue.project_category_id,
license_id: newProjectValue.license_id,
ignore_id: newProjectValue.ignore_id
});
delete newProjectValue.project_language_id;
delete newProjectValue.project_category_id;
delete newProjectValue.license_id;
delete newProjectValue.ignore_id;
this.props.form.setFieldsValue(newProjectValue);
}
}
}
// 设置option
setOptionsList = (data, _head, name) => {
if (data && data.length > 0) {
let _data = data;
if (name) {
_data = data.filter(item => item.name.toLowerCase().indexOf(name.toLowerCase()) > -1);
}
let list = _data && _data.map((item) => (
<Option key={item.id} value={item.name}>
{item.name}
</Option>
));
this.setState({
[_head + "_list"]: list
})
}
}
subMitFrom = () => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
this.setState({
isSpin: true
})
const { projectsType } = this.props.match.params;
const { project_language_id, project_category_id, license_id
, ignore_id, owners_id, ignoreFlag, licenseFlag,
categoreFlag, languageFlag, tokenConTri,gitHubUrl} = this.state;
const decoderPass = Base64.encode(values.password);
const url = (projectsType && projectsType === "mirror") ? "/projects/migrate.json" : "/projects.json";
// 新建项目的时候,暂存数据,如果失败,返回的时候可以重新赋值
sessionStorage.newProjectValue=JSON.stringify({...values,project_language_id,project_category_id,license_id,ignore_id});
// 贡献值激励确权机制
const {blockchain_init} = values;
axios.post(url, {
...values,
clone_addr:(projectsType && projectsType === "mirror") ? values.clone_addr.trim() :undefined,
auth_password:decoderPass,
project_language_id:languageFlag ? project_language_id : undefined,
project_category_id:categoreFlag ? project_category_id : undefined,
license_id:licenseFlag ? license_id : undefined,
ignore_id:ignoreFlag ? ignore_id : undefined,
// user_id:owners_id,
// blockchain: tokenConTri,
// blockchain_token_all: 10000,
// blockchain_init_token: parseInt(blockchain_init),
// auth_token:((projectsType && projectsType === "mirror") && gitHubUrl)? values.auth_token : undefined
}).then((result) => {
if (result && result.data.id) {
projectsType && projectsType !== "mirror" && this.props.showNotification(`项目创建成功!`);
this.props.history.push({pathname: `/${result.data.login}/${result.data.identifier}`, query:{showNps: true}});
}
this.setState({
isSpin: false
})
}).catch((error) => {
this.setState({
isSpin: false
})
})
} else {
window.scrollTo(0,0);
this.setState({
isSpin: false
})
}
})
}
ChangePlatform = (value, e, name, list) => {
this.setOptionsList(list, name, value)
this.setState({
[name + "_id"]: e.key,
[name + "_name"]: value,
})
}
blurCategory = (value, list, name) => {
let filter = list && list.filter(item => item.name === value);
if (!filter || filter.length === 0) {
this.props.form.setFieldsValue({
[name]: undefined
})
this.setState({
[name + "_name"]: undefined,
[name + "_id"]: undefined
})
this.setOptionsList(list, name);
}
}
checkId = (rule, value, callback, list, title) => {
let filter = list.filter(item => item.name === value);
if(!value){
callback();
}
if (filter && filter.length > 0) {
callback();
} else {
callback('请在下拉选项中选择正确的' + title + "!");
}
callback();
}
changeMirrorCheck=()=>{
const { mirrorCheck } = this.state;
this.setState({
mirrorCheck:!mirrorCheck
})
}
ChangeAddr=(e)=>{
let value = e.target.value;
if(value.indexOf("/") > -1){
let arr = value.split("/");
let first = arr[arr.length-1];
if(first.indexOf(".") > -1){
let second = first.split('.')[0];
if(!second)return;
this.props.form.setFieldsValue({
repository_name:second,
name:second
})
}else{
this.props.form.setFieldsValue({
repository_name:first
})
}
this.setState({gitHubUrl:value.indexOf("https://github.com")>-1 ? true : false})
}else{
this.setState({gitHubUrl:false,checkToken:undefined})
}
}
changeDesc=(e)=>{
let value = e.target.value;
this.setState({
descNum:value ? value.length :0
})
}
showCateFunc =(e)=>{
const { CategoryList } = this.state;
this.setState({categoreFlag:e.target.checked});
// 获取项目类别
if(e.target.checked && (!CategoryList || (CategoryList && CategoryList.length===0))){
this.getCategory();
}
}
showLanguageFunc =(e)=>{
const { LanguageList } = this.state;
this.setState({languageFlag:e.target.checked});
// 获取项目语言
if(e.target.checked && (!LanguageList || (LanguageList && LanguageList.length===0))){
this.getLanguage();
}
}
showIgnoreFunc =(e)=>{
const { GitignoreList } = this.state;
this.setState({ignoreFlag:e.target.checked})
if(e.target.checked && (!GitignoreList || (GitignoreList && GitignoreList.length===0))){
// 获取Gitignore
this.getGitignore();
}
}
showLicenseFunc =(e)=>{
const { LicensesList } = this.state;
this.setState({licenseFlag:e.target.checked})
if(e.target.checked && (!LicensesList || (LicensesList && LicensesList.length===0))){
// 获取开源许可证
this.getLicenses();
}
}
blurFunc=(e)=>{
let value = e.target.value;
if(value){
const { clone_addr } = this.props.form.getFieldsValue();
if(clone_addr){
const u = `/projects/verify_auth_token.json`;
axios.post(u,{
auth_token:value,
clone_addr
}).then(response=>{
if(response && response.data){
this.setState({
checkToken:response.data.data
})
}
}).catch(error=>{})
}
}else{
this.setState({checkToken:undefined})
}
}
changeName=(e)=>{
let value = e.target.value;
const { t } = this.props;
console.log(this.props,t(value,'en'));
if(value){
let reg = /[a-zA-Z0-9]/g;
let strArr = value.match(reg);
if(strArr){
let str = strArr.join("");
this.props.form.setFieldsValue({
repository_name:str
})
}else{
}
}
}
render() {
const { getFieldDecorator } = this.props.form;
// 项目类型deposit-托管项目mirror-镜像项目
const { projectsType } = this.props.match.params;
const {current_user:{open_blockchain}} = this.props;
const {
CategoryList,
LanguageList,
GitignoreList,
LicensesList,
isSpin,
owners_list,
OwnerList,
project_language_list,
project_category_list,
license_list,
ignore_list,
mirrorCheck,
descNum,
ignoreFlag,
licenseFlag,
languageFlag,
categoreFlag,
tokenConTri,
gitHubUrl,
checkToken,
ownerDisabled
} = this.state;
return (
<div className="main back-white" style={{padding:"0px",border:"none"}}>
<div className="newPanel">
<div className="newPanel_title">{projectsType && projectsType === "mirror" ? "导入" : "新建"}代码库</div>
<Spin spinning={isSpin}>
<Form>
<div className="newPanel_content">
{
projectsType && projectsType === "mirror" &&
<React.Fragment>
<Form.Item
label="导入仓库URL"
style={{ marginBottom: "0px" }}
colon={false}
>
{getFieldDecorator('clone_addr', {
rules: [{
required: true, message: '请填写镜像版本库地址'
}],
})(
<Input placeholder="请输入需要导入到本代码库的仓库地址" onBlur={this.ChangeAddr} />
)}
</Form.Item>
<p className="formTip" style={{color:"#D1d1c9"}}>示例https://github.com/Stability-AI/StableStudio.git</p>
</React.Fragment>
}
{
projectsType && projectsType === "mirror" &&
<div className="pb10">
<p className="mt10 mb10 color-grey-3 pointer" onClick={this.changeMirrorCheck}>
需要授权验证<i className={mirrorCheck ? "iconfont icon-xiajiantou font-13 ml10 color-grey-8":"iconfont icon-youjiantou font-13 ml10 color-grey-8"}></i>
<span className="ml20 font-12" style={{color:"#D1d1c9"}}>
如果导入代码库为私有仓库{gitHubUrl ? `则需输入目标平台用户token进行授权`:"则必须填写相应平台正确的用户名和密码"}
{gitHubUrl && <a href="https://forum.gitlink.org.cn/forums/8516/detail" className="color-blue" target="_blank">如何获取token</a>}
</span>
</p>
{
mirrorCheck && gitHubUrl &&
<div className="df mb10 token_box">
<span className="mr10">Token</span>
<input type="password" style={{display:"none"}} />
<Form.Item
style={{ marginBottom: "0px" }}
label=""
>
{getFieldDecorator('auth_token')(
<Input placeholder="请输入对应平台的有效token" style={{width:"240px"}} onBlur={this.blurFunc} />
)}
</Form.Item>
<span style={{marginLeft:"-20px"}}>
{ checkToken === false && <i className="iconfont icon-cuo color-red"></i>}
{ checkToken === true && <i className="iconfont icon-dui color-green"></i>}
</span>
</div>
}
{
mirrorCheck && !gitHubUrl &&
<div className="df mb10" style={{alignItems:'center'}}>
<span className="mr10">用户名</span>
<input type="password" style={{display:"none"}} />
<Form.Item
style={{ marginBottom: "0px" }}
label=""
>
{getFieldDecorator('auth_username', {
rules: [],
})(
<Input placeholder="请输入对应平台的登录用户名" style={{width:"240px"}} />
)}
</Form.Item>
<span className="mr10">密码</span>
<Form.Item
style={{ marginBottom: "0px" }}
>
{getFieldDecorator('password', {
rules: [],
})(
<Input.Password placeholder="请输入对应平台的登录密码" autocomplete='new-password' style={{width:"240px"}}/>
)}
</Form.Item>
</div>
}
</div>
}
<AlignCenter>
<Form.Item
label="拥有者"
style={{width:"260px"}}
colon={false}
className="explainPos"
>
{getFieldDecorator('user_id', {
rules: [{
required: true, message: '请选择拥有者'
}],
})(
<Select
showSearch
disabled={ownerDisabled}
style={{width:"260px",height:"33px"}}
placeholder="请选择拥有者"
className="plateAutoComplete"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{OwnerList && OwnerList.length > 0 &&
OwnerList.map((i,k)=>{
return(
<Option value={i.id}>{i.name}</Option>
)
})
}
</Select>
)}
</Form.Item>
<span className="ml10 mr10 mt10 font-18">/</span>
<Form.Item
label="代码库名称"
className="flex1 explainPos"
colon={false}
>
{getFieldDecorator('name', {
rules: [{
required: true, message: '请填写代码库名称'
}],
})(
<Input placeholder="例如:团队协作方法与研究" maxLength={50}/>// onBlur={this.changeName}
)}
</Form.Item>
</AlignCenter>
<Form.Item
label={<span>代码库标识 <span className="color-grey-9">(代码库url标识部分)</span></span>}
colon={false}
>
{getFieldDecorator('repository_name', {
rules: [{
required: true, message: '请填写代码库标识'
}],
})(
<Input placeholder="代码库标识请使用与代码库相关的英文关键字" maxLength={100} />
)}
</Form.Item>
<div className="pr">
<span className="toprightNum">{descNum}/200</span>
<Form.Item
label="代码库简介"
colon={false}
style={{marginBottom:"0px"}}
>
{getFieldDecorator('description', {
rules: [],
})(
<Input.TextArea maxLength={200} placeholder="代码库的介绍" autoSize={{ minRows: 2, maxRows: 6 }} onChange={this.changeDesc}/>
)}
</Form.Item>
</div>
{
(projectsType === "deposit" || !projectsType) &&
<React.Fragment>
<Form.Item
className="privatePart"
>
{getFieldDecorator('ignoreFlag')(
<Checkbox checked={ignoreFlag} onChange={(e)=>this.showIgnoreFunc(e)}>.gitignore</Checkbox>
)}
</Form.Item>
{ ignoreFlag &&
<Form.Item>
{getFieldDecorator('ignore', {
rules: [{
required: ignoreFlag, message: '请选择gitignore'
}, {
validator: (rule, value, callback) => this.checkId(rule, value, callback, GitignoreList, 'gitignore')
}],
})(
<AutoComplete
placeholder="请选择gitignore用来定义哪些文件不需要添加到版本管理中"
onChange={(value, e) => this.ChangePlatform(value, e, 'ignore', GitignoreList)}
className="plateAutoComplete"
onBlur={(value) => this.blurCategory(value, GitignoreList, "ignore")}
>
{ignore_list}
</AutoComplete>
)}
</Form.Item>
}
<Form.Item
className="privatePart"
>
{getFieldDecorator('licenseFlag')(
<Checkbox checked={licenseFlag} onChange={(e)=>this.showLicenseFunc(e)}>开源许可证</Checkbox>
)}
</Form.Item>
{ licenseFlag &&
<Form.Item>
{getFieldDecorator('license', {
rules: [{
required: licenseFlag, message: '请选择开源许可证'
}, {
validator: (rule, value, callback) => this.checkId(rule, value, callback, LicensesList, '开源许可证')
}],
})(
<AutoComplete
placeholder="请选择开源许可证"
onChange={(value, e) => this.ChangePlatform(value, e, 'license', LicensesList)}
className="plateAutoComplete"
onBlur={(value) => this.blurCategory(value, LicensesList, "license")}
>
{license_list}
</AutoComplete>
)}
</Form.Item>
}
</React.Fragment>
}
<Form.Item
className="privatePart"
>
{getFieldDecorator('private')(
<Checkbox value="limit">将代码库设为私有<span className="font-13 color-grey-9">(只有代码库所有人或拥有权限的代码库成员才能看到)</span></Checkbox>
)}
</Form.Item >
{
projectsType && projectsType === "mirror" &&
<Form.Item
className="privatePart"
>
{getFieldDecorator('is_mirror')(
<Checkbox value="limit">该仓库将是一个<span className="color-blue">镜像</span>(24)</Checkbox>
)}
</Form.Item >
}
<Form.Item
style={{ margin: "0px" }}
className="privatePart"
>
{getFieldDecorator('categoreFlag')(
<Checkbox checked={categoreFlag} onChange={(e)=>this.showCateFunc(e)}>代码库类别</Checkbox>
)}
</Form.Item>
{categoreFlag &&
<Form.Item
className="privatePart"
>
{getFieldDecorator('project_category', {
rules: [{
required: categoreFlag, message: '请选择代码库类别',
}, {
validator: (rule, value, callback) => this.checkId(rule, value, callback, CategoryList, '代码库类别')
}],
})(
<AutoComplete
placeholder="请选择代码库类别"
onChange={(value, e) => this.ChangePlatform(value, e, 'project_category', CategoryList)}
className="plateAutoComplete"
onBlur={(value) => this.blurCategory(value, CategoryList, "project_category")}
>
{project_category_list}
</AutoComplete>
)}
</Form.Item>
}
<Form.Item
className="privatePart"
>
{getFieldDecorator('languageFlag')(
<Checkbox checked={languageFlag} onChange={(e)=>this.showLanguageFunc(e)}>代码库语言</Checkbox>
)}
</Form.Item>
{languageFlag &&
<Form.Item>
{getFieldDecorator('project_language', {
rules: [{
required: languageFlag, message: '请选择代码库语言'
}, {
validator: (rule, value, callback) => this.checkId(rule, value, callback, LanguageList, '代码库语言')
}],
})(
<AutoComplete
placeholder="请选择代码库语言"
onChange={(value, e) => this.ChangePlatform(value, e, 'project_language', LanguageList)}
className="plateAutoComplete"
onBlur={(value) => this.blurCategory(value, LanguageList, "project_language")}
>
{project_language_list}
</AutoComplete>
)}
</Form.Item>
}
{/* 确权 仅在新建代码库时 */}
{open_blockchain && projectsType === "deposit" && <div className='mt10 mb10'>
<p className='font-16'>确权</p>
<div className='mt5 mb5 color-grey3'><Checkbox checked={tokenConTri} onChange={(e)=>{this.setState({tokenConTri:e.target.checked})}}>加入贡献值激励确权机制</Checkbox></div>
{tokenConTri && <Form.Item
className="flex1"
extra="Token指本代码库的虚拟货币决定用户在本仓库贡献度的比例可以通过issue悬赏或在个人主页贡献确权页进行转移。创建代码库时每个代码库的Token总量为10000您可以分配您可获取的Token数量未分配的Token将保留至代码库Token余额"
>
{getFieldDecorator('blockchain_init', {
rules: [{
required: true, message: '初始token值为一个不超过10000的正整数'
},
{ validator: (rule,val,callback) =>{
if(!/^[1-9]+[0-9]*]*$/.test(val)){
callback('初始token值为正整数');
}if(val>10000){
callback('初始token值最大值10000');
}else{
callback();
}
}}],
})(
<Input placeholder='请填写您代码库创建者获取的初始Token值'/>
)}
</Form.Item>}
</div>}
<div className="mt20">
<span className="ant-form-item-required"></span>
</div>
<Form.Item className="formTip mt20">
<Button type="primary" onClick={this.subMitFrom} className="mr20">{projectsType && projectsType === "mirror" ? "导入" : "创建"}代码库</Button>
<a onClick={()=>window.history.back(-1)} className="btn_32">取消</a>
</Form.Item>
</div>
</Form>
</Spin>
</div>
</div>
)
}
}
const WrappedIndexForm = Form.create({ name: 'NewWorkForm' })(Index);
export default withTranslation()(WrappedIndexForm);